aheh/HexGL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Leap motion integration. HTML interface redesign. Merge all controls into a single index.

Browse Source
This commit is contained in:
Thibaut Despoulain
2014-03-08 20:09:59 -08:00
parent 8c420e548b
commit 431b54ec19
17 changed files with 929 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bkcore/hexgl/HexGL.js
+25 -24
View File
@@ -1,7 +1,7 @@
/*
* HexGL
* @author Thibaut 'BKcore' Despoulain <http://bkcore.com>
* @license This work is licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.
* @license This work is licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.
* To view a copy of this license, visit http://creativecommons.org/licenses/by-nc/3.0/.
*/
@@ -73,9 +73,9 @@ bkcore.hexgl.HexGL = function(opts)
this.initRenderer();
function onKeyPress(event)
function onKeyPress(event)
{
if(event.keyCode == 27/*escape*/)
if(event.keyCode == 27/*escape*/)
{
self.reset();
}
@@ -155,6 +155,7 @@ bkcore.hexgl.HexGL.prototype.initGameplay = function()
pixelRatio: this.track.pixelRatio,
track: this.track,
onFinish: function() {
self.components.shipControls.terminate();
self.displayScore(this.finishTime, this.lapTimes);
}
});
@@ -173,12 +174,12 @@ bkcore.hexgl.HexGL.prototype.displayScore = function(f, l)
bkcore.Timer.msToTimeString(l[2])
];
if(this.mobile)
if(this.gameover !== null)
{
this.gameover.style.display = "block";
this.gameover.innerHTML = tf.m + "'" + tf.s + "''" + tf.ms;
this.containers.main.style.display = "none";
return;
this.gameover.children[0].innerHTML = tf.m + "'" + tf.s + "''" + tf.ms;
this.containers.main.parentElement.style.display = "none";
return;
}
var t = this.track;
@@ -286,7 +287,7 @@ bkcore.hexgl.HexGL.prototype.initRenderer = function()
renderer.setSize( this.width, this.height );
renderer.domElement.style.position = "relative";
this.containers.main.appendChild( renderer.domElement );
this.containers.main.appendChild( renderer.domElement );
this.canvas = renderer.domElement;
this.renderer = renderer;
this.manager = new bkcore.threejs.RenderManager(renderer);
@@ -302,7 +303,7 @@ bkcore.hexgl.HexGL.prototype.initHUD = function()
bg: this.track.lib.get("images", "hud.bg"),
speed: this.track.lib.get("images", "hud.speed"),
shield: this.track.lib.get("images", "hud.shield")
});
});
this.containers.overlay.appendChild(this.hud.canvas);
}
@@ -311,7 +312,7 @@ bkcore.hexgl.HexGL.prototype.initGameComposer = function()
var renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
var renderTarget = new THREE.WebGLRenderTarget( this.width, this.height, renderTargetParameters );
// GAME COMPOSER
// GAME COMPOSER
var renderSky = new THREE.RenderPass( this.manager.get("sky").scene, this.manager.get("sky").camera );
var renderModel = new THREE.RenderPass( this.manager.get("game").scene, this.manager.get("game").camera );
@@ -319,8 +320,8 @@ bkcore.hexgl.HexGL.prototype.initGameComposer = function()
this.composers.game = new THREE.EffectComposer( this.renderer, renderTarget );
var effectScreen = new THREE.ShaderPass( THREE.ShaderExtras[ "screen" ] );
effectScreen.renderToScreen = true;
var effectScreen = new THREE.ShaderPass( THREE.ShaderExtras[ "screen" ] );
effectScreen.renderToScreen = true;
var effectVignette = new THREE.ShaderPass( THREE.ShaderExtras[ "vignette" ] );
var effectHex = new THREE.ShaderPass( bkcore.threejs.Shaders[ "hexvignette" ] );
@@ -335,17 +336,17 @@ bkcore.hexgl.HexGL.prototype.initGameComposer = function()
this.composers.game.addPass( renderSky );
this.composers.game.addPass( renderModel );
if(this.quality > 0 && !this.mobile)
{
var effectFXAA = new THREE.ShaderPass( THREE.ShaderExtras[ "fxaa" ] );
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / this.width, 1 / this.height );
// if(this.quality > 0 && !this.mobile)
// {
// var effectFXAA = new THREE.ShaderPass( THREE.ShaderExtras[ "fxaa" ] );
// effectFXAA.uniforms[ 'resolution' ].value.set( 1 / this.width, 1 / this.height );
this.composers.game.addPass( effectFXAA );
this.extras.fxaa = effectFXAA;
}
// this.composers.game.addPass( effectFXAA );
// this.extras.fxaa = effectFXAA;
// }
if(this.quality > 1 && !this.mobile)
{
{
var effectBloom = new THREE.BloomPass( 0.8, 25, 4 , 256);
this.composers.game.addPass( effectBloom );
@@ -358,10 +359,10 @@ bkcore.hexgl.HexGL.prototype.initGameComposer = function()
else
this.composers.game.addPass( effectScreen );
}
bkcore.hexgl.HexGL.prototype.createMesh = function(parent, geometry, x, y, z, mat)
bkcore.hexgl.HexGL.prototype.createMesh = function(parent, geometry, x, y, z, mat)
{
geometry.computeTangents();
@@ -422,4 +423,4 @@ bkcore.hexgl.HexGL.prototype.tweakShipControls = function()
if(this.godmode)
c.shieldDamage = 0.0;
}
}
bkcore/hexgl/ShipControls.js
+166 -65
View File
@@ -1,7 +1,7 @@
/*
* HexGL
* @author Thibaut 'BKcore' Despoulain <http://bkcore.com>
* @license This work is licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.
* @license This work is licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.
* To view a copy of this license, visit http://creativecommons.org/licenses/by-nc/3.0/.
*/
@@ -27,7 +27,7 @@ bkcore.hexgl.ShipControls = function(ctx)
this.thrust = 0.02;
this.airBrake = 0.02;
this.maxSpeed = 7.0;
this.boosterSpeed = this.maxSpeed * 0.4;
this.boosterSpeed = this.maxSpeed * 0.2;
this.boosterDecay = 0.01;
this.angularSpeed = 0.005;
this.airAngularSpeed = 0.0065;
@@ -75,7 +75,7 @@ bkcore.hexgl.ShipControls = function(ctx)
this.rollAngle = 0.6;
this.rollLerp = 0.08;
this.rollDirection = new THREE.Vector3(0,0,1);
this.gradient = 0.0;
this.gradientTarget = 0.0;
this.gradientLerp = 0.05;
@@ -124,7 +124,7 @@ bkcore.hexgl.ShipControls = function(ctx)
if(ctx.controlType == 1 && bkcore.controllers.TouchController.isCompatible())
{
this.touchController = new bkcore.controllers.TouchController(
domElement, ctx.width/2,
domElement, ctx.width/2,
function(state, touch, event){
if(event.touches.length >= 4)
window.location.reload(false);
@@ -136,12 +136,11 @@ bkcore.hexgl.ShipControls = function(ctx)
self.key.forward = true;
});
}
else if(ctx.controlType == 2 && bkcore.controllers.OrientationController.isCompatible())
else if(ctx.controlType == 3 && bkcore.controllers.OrientationController.isCompatible())
{
this.orientationController = new bkcore.controllers.OrientationController(
domElement, true,
function(state, touch, event){
console.log(event.touches.length);
if(event.touches.length >= 4)
window.location.reload(false);
else if(event.touches.length == 3)
@@ -152,10 +151,88 @@ bkcore.hexgl.ShipControls = function(ctx)
self.key.forward = true;
});
}
function onKeyDown(event)
else if(ctx.controlType == 2)
{
switch(event.keyCode)
if(Leap == null)
throw new Error("Unable to reach LeapJS!");
var leapInfo = this.leapInfo = document.getElementById('leapinfo');
isServerConnected = false;
var lb = this.leapBridge = {
isConnected: true,
hasHands: false,
palmNormal: [0, 0, 0]
};
function updateInfo()
{
if(!isServerConnected)
{
leapInfo.innerHTML = 'Waiting for the Leap Motion Controller server...'
leapInfo.style.display = 'block';
}
else if(lb.isConnected && lb.hasHands)
{
leapInfo.style.display = 'none';
}
else if(!lb.isConnected)
{
leapInfo.innerHTML = 'Please connect your Leap Motion Controller.'
leapInfo.style.display = 'block';
}
else if(!lb.hasHands)
{
leapInfo.innerHTML = 'Put your hand over the Leap Motion Controller to play.'
leapInfo.style.display = 'block';
}
}
updateInfo();
var lc = this.leapController = new Leap.Controller({enableGestures: false});
lc.on('connect', function()
{
isServerConnected = true;
updateInfo();
});
lc.on('deviceConnected', function()
{
lb.isConnected = true;
updateInfo();
});
lc.on('deviceDisconnected', function()
{
lb.isConnected = false;
updateInfo();
});
lc.on('frame', function(frame)
{
if(!lb.isConnected) return;
hand = frame.hands[0];
if(typeof hand === 'undefined')
{
if(lb.hasHands)
{
lb.hasHands = false;
updateInfo();
}
lb.palmNormal = [0, 0, 0];
}
else
{
if(!lb.hasHands)
{
lb.hasHands = true;
updateInfo();
}
lb.palmNormal = hand.palmNormal;
}
});
lc.connect();
}
function onKeyDown(event)
{
switch(event.keyCode)
{
case 38: /*up*/ self.key.forward = true; break;
@@ -173,7 +250,7 @@ bkcore.hexgl.ShipControls = function(ctx)
}
};
function onKeyUp(event)
function onKeyUp(event)
{
switch(event.keyCode)
{
@@ -225,11 +302,22 @@ bkcore.hexgl.ShipControls.prototype.reset = function(position, rotation)
this.dummy.matrix.setPosition(this.dummy.position);
this.dummy.matrix.setRotationFromQuaternion(this.dummy.quaternion);
this.mesh.matrix.identity();
this.mesh.applyMatrix(this.dummy.matrix);
}
bkcore.hexgl.ShipControls.prototype.terminate = function()
{
this.destroy();
if(this.leapController != null)
{
this.leapController.disconnect();
this.leapInfo.style.display = 'none';
}
}
bkcore.hexgl.ShipControls.prototype.destroy = function()
{
this.active = false;
@@ -239,7 +327,6 @@ bkcore.hexgl.ShipControls.prototype.destroy = function()
this.collision.right = false;
}
bkcore.hexgl.ShipControls.prototype.fall = function()
{
this.active = false;
@@ -261,8 +348,6 @@ bkcore.hexgl.ShipControls.prototype.update = function(dt)
return;
}
if(!this.active) return;
this.rotation.y = 0;
this.movement.set(0,0,0);
this.drift += (0.0 - this.drift) * this.driftLerp;
@@ -270,57 +355,73 @@ bkcore.hexgl.ShipControls.prototype.update = function(dt)
var rollAmount = 0.0;
var angularAmount = 0.0;
var yawLeap = 0.0;
if(this.touchController != null)
if(this.leapBridge != null && this.leapBridge.hasHands)
{
angularAmount -= this.touchController.stickVector.x/100 * this.angularSpeed * dt;
rollAmount += this.touchController.stickVector.x/100 * this.rollAngle;
}
if(this.orientationController != null)
{
angularAmount += this.orientationController.beta/45 * this.angularSpeed * dt;
rollAmount -= this.orientationController.beta/45 * this.rollAngle;
rollAmount -= this.leapBridge.palmNormal[0] * 3.5 * this.rollAngle;
yawLeap = -this.leapBridge.palmNormal[2] * 0.6;
}
if(this.key.forward)
this.speed += this.thrust * dt;
else
this.speed -= this.airResist * dt;
if(this.key.left)
{
angularAmount += this.angularSpeed * dt;
rollAmount -= this.rollAngle;
}
if(this.key.right)
{
angularAmount -= this.angularSpeed * dt;
rollAmount += this.rollAngle;
}
if(this.key.ltrigger)
if(this.active)
{
if(this.touchController != null)
{
angularAmount -= this.touchController.stickVector.x/100 * this.angularSpeed * dt;
rollAmount += this.touchController.stickVector.x/100 * this.rollAngle;
}
if(this.orientationController != null)
{
angularAmount += this.orientationController.beta/45 * this.angularSpeed * dt;
rollAmount -= this.orientationController.beta/45 * this.rollAngle;
}
if(this.leapBridge != null && this.leapBridge.hasHands)
{
angularAmount += this.leapBridge.palmNormal[0] * 2 * this.angularSpeed * dt;
this.speed += Math.max(0.0, (0.5 + this.leapBridge.palmNormal[2])) * 3 * this.thrust * dt;
}
if(this.key.forward)
this.speed += this.thrust * dt;
else
this.speed -= this.airResist * dt;
if(this.key.left)
angularAmount += this.airAngularSpeed * dt;
else
angularAmount += this.airAngularSpeed * 0.5 * dt;
this.speed -= this.airBrake * dt;
this.drift += (this.airDrift - this.drift) * this.driftLerp;
this.movement.x += this.speed * this.drift * dt;
if(this.drift > 0.0)
this.movement.z -= this.speed * this.drift * dt;
rollAmount -= this.rollAngle * 0.7;
}
if(this.key.rtrigger)
{
{
angularAmount += this.angularSpeed * dt;
rollAmount -= this.rollAngle;
}
if(this.key.right)
angularAmount -= this.airAngularSpeed * dt;
else
angularAmount -= this.airAngularSpeed * 0.5 * dt;
this.speed -= this.airBrake * dt;
this.drift += (-this.airDrift - this.drift) * this.driftLerp;
this.movement.x += this.speed * this.drift * dt;
if(this.drift < 0.0)
this.movement.z += this.speed * this.drift * dt;
rollAmount += this.rollAngle * 0.7;
{
angularAmount -= this.angularSpeed * dt;
rollAmount += this.rollAngle;
}
if(this.key.ltrigger)
{
if(this.key.left)
angularAmount += this.airAngularSpeed * dt;
else
angularAmount += this.airAngularSpeed * 0.5 * dt;
this.speed -= this.airBrake * dt;
this.drift += (this.airDrift - this.drift) * this.driftLerp;
this.movement.x += this.speed * this.drift * dt;
if(this.drift > 0.0)
this.movement.z -= this.speed * this.drift * dt;
rollAmount -= this.rollAngle * 0.7;
}
if(this.key.rtrigger)
{
if(this.key.right)
angularAmount -= this.airAngularSpeed * dt;
else
angularAmount -= this.airAngularSpeed * 0.5 * dt;
this.speed -= this.airBrake * dt;
this.drift += (-this.airDrift - this.drift) * this.driftLerp;
this.movement.x += this.speed * this.drift * dt;
if(this.drift < 0.0)
this.movement.z += this.speed * this.drift * dt;
rollAmount += this.rollAngle * 0.7;
}
}
this.angular += (angularAmount - this.angular) * this.angularLerp;
@@ -376,7 +477,7 @@ bkcore.hexgl.ShipControls.prototype.update = function(dt)
this.mesh.matrix.identity();
// Gradient (Mesh only, no dummy physics impact)
var gradientDelta = (this.gradientTarget - this.gradient) * this.gradientLerp;
var gradientDelta = (this.gradientTarget - (yawLeap + this.gradient)) * this.gradientLerp;
if(Math.abs(gradientDelta) > this.epsilon) this.gradient += gradientDelta;
if(Math.abs(this.gradient) > this.epsilon)
{
@@ -505,9 +606,9 @@ bkcore.hexgl.ShipControls.prototype.collisionCheck = function(dt)
var rPos = this.repulsionVRight.addSelf(pos);
var lCol = this.collisionMap.getPixel(Math.round(lPos.x), Math.round(lPos.z)).r;
var rCol = this.collisionMap.getPixel(Math.round(rPos.x), Math.round(rPos.z)).r;
this.repulsionAmount = Math.max(0.8,
Math.min(this.repulsionCap,
this.repulsionAmount = Math.max(0.8,
Math.min(this.repulsionCap,
this.speed * this.repulsionRatio
)
);
@@ -608,7 +709,7 @@ bkcore.hexgl.ShipControls.prototype.heightCheck = function(dt)
x = this.heightMap.pixels.width/2 + this.tiltVector.x * this.heightPixelRatio;
z = this.heightMap.pixels.height/2 + this.tiltVector.z * this.heightPixelRatio;
nheight = this.heightMap.getPixelFBilinear(x, z) / this.heightScale + this.heightBias;
nheight = this.heightMap.getPixelFBilinear(x, z) / this.heightScale + this.heightBias;
}
if(nheight < 16777)
@@ -626,7 +727,7 @@ bkcore.hexgl.ShipControls.prototype.getRealSpeed = function(scale)
bkcore.hexgl.ShipControls.prototype.getRealSpeedRatio = function()
{
return Math.min(
this.maxSpeed,
this.maxSpeed,
this.speed+this.boost
) / this.maxSpeed;
};
@@ -662,4 +763,4 @@ bkcore.hexgl.ShipControls.prototype.getPosition = function()
bkcore.hexgl.ShipControls.prototype.getQuaternion = function()
{
return this.dummy.quaternion;
}
}
bkcore/hexgl/ShipEffects.js
+13 -13
View File
@@ -1,7 +1,7 @@
/*
* HexGL
* @author Thibaut 'BKcore' Despoulain <http://bkcore.com>
* @license This work is licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.
* @license This work is licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.
* To view a copy of this license, visit http://creativecommons.org/licenses/by-nc/3.0/.
*/
@@ -46,7 +46,7 @@ bkcore.hexgl.ShipEffects = function(opts)
texture: opts.textureSpark,
size: 2,
life: 60,
max: 500
max: 200
}),
leftClouds: new bkcore.threejs.Particles(
@@ -59,7 +59,7 @@ bkcore.hexgl.ShipEffects = function(opts)
size: 6,
blending: THREE.NormalBlending,
life: 60,
max: 500,
max: 200,
spawn: new THREE.Vector3(3,-0.3,0),
spawnRadius: new THREE.Vector3(1,1,2),
velocity: new THREE.Vector3(0,0,-0.4),
@@ -75,7 +75,7 @@ bkcore.hexgl.ShipEffects = function(opts)
texture: opts.textureSpark,
size: 2,
life: 60,
max: 500
max: 200
}),
rightClouds: new bkcore.threejs.Particles(
@@ -88,7 +88,7 @@ bkcore.hexgl.ShipEffects = function(opts)
size: 6,
blending: THREE.NormalBlending,
life: 60,
max: 500,
max: 200,
spawn: new THREE.Vector3(-3,-0.3,0),
spawnRadius: new THREE.Vector3(1,1,2),
velocity: new THREE.Vector3(0,0,-0.4),
@@ -105,7 +105,7 @@ bkcore.hexgl.ShipEffects = function(opts)
bkcore.hexgl.ShipEffects.prototype.update = function(dt)
{
var boostRatio, opacity, scale, intensity, random;
var boostRatio, opacity, scale, intensity, random;
if(this.shipControls.destroyed)
{
@@ -144,8 +144,8 @@ bkcore.hexgl.ShipEffects.prototype.update = function(dt)
this.particles.leftSparks.velocity.copy(this.pVel).x *= -1;
this.particles.leftSparks.spawn.copy(this.pOffset).x *= -1;
if(this.shipControls.mesh)
{
if(this.shipControls.mesh)
{
// RIGHT
this.shipControls.mesh.matrix.rotateAxis(this.particles.rightSparks.spawn);
this.particles.rightSparks.spawn.multiplyScalar(this.pOffsetS).addSelf(this.shipControls.dummy.position);
@@ -168,14 +168,14 @@ bkcore.hexgl.ShipEffects.prototype.update = function(dt)
if(this.shipControls.collision.right)
{
this.particles.rightSparks.emit(Math.round(30*dt));
this.particles.rightClouds.emit(Math.round(10*dt));
this.particles.rightSparks.emit(10);
this.particles.rightClouds.emit(5);
}
if(this.shipControls.collision.left)
{
this.particles.leftSparks.emit(Math.round(30*dt));
this.particles.leftClouds.emit(Math.round(10*dt));
this.particles.leftSparks.emit(10);
this.particles.leftClouds.emit(5);
}
this.particles.rightSparks.update(dt);
@@ -183,4 +183,4 @@ bkcore.hexgl.ShipEffects.prototype.update = function(dt)
this.particles.leftSparks.update(dt);
this.particles.leftClouds.update(dt);
}
}
}
bkcore/hexgl/tracks/Cityscape.js
+54 -52
View File
@@ -1,7 +1,7 @@
/*
* HexGL
* @author Thibaut 'BKcore' Despoulain <http://bkcore.com>
* @license This work is licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.
* @license This work is licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.
* To view a copy of this license, visit http://creativecommons.org/licenses/by-nc/3.0/.
*/
@@ -23,8 +23,8 @@ bkcore.hexgl.tracks.Cityscape = {
},
spawn: {
x: -1134*2,
y: 387,
x: -1134*2,
y: 387,
z: -443*2
},
@@ -46,6 +46,8 @@ bkcore.hexgl.tracks.Cityscape = {
this.lib.load({
textures: {
'hex' : "textures/hud/hex.jpg",
'spark' : "textures/particles/spark.png",
'cloud' : "textures/particles/cloud.png",
'ship.feisar.diffuse' : "textures/ships/feisar/diffuse.jpg",
'booster.diffuse' : "textures/ships/feisar/booster/booster.png",
'booster.sprite' : "textures/ships/feisar/booster/boostersprite.jpg",
@@ -82,36 +84,36 @@ bkcore.hexgl.tracks.Cityscape = {
});
}
else // HIGH
{
{console.log('HIGH');
this.lib.load({
textures: {
'hex' : "textures/hud/hex.jpg",
'spark' : "textures/particles/spark.png",
'cloud' : "textures/particles/cloud.png",
'ship.feisar.diffuse' : "textures/ships/feisar/diffuse.jpg",
'ship.feisar.specular' : "textures/ships/feisar/specular.jpg",
'ship.feisar.normal' : "textures/ships/feisar/normal.jpg",
'booster.diffuse' : "textures/ships/feisar/booster/booster.png",
'booster.sprite' : "textures/ships/feisar/booster/boostersprite.jpg",
'track.cityscape.diffuse' : "textures/tracks/cityscape/diffuse.jpg",
'track.cityscape.specular' : "textures/tracks/cityscape/specular.jpg",
'track.cityscape.normal' : "textures/tracks/cityscape/normal.jpg",
'track.cityscape.scrapers1.diffuse' : "textures/tracks/cityscape/scrapers1/diffuse.jpg",
'track.cityscape.scrapers1.specular': "textures/tracks/cityscape/scrapers1/specular.jpg",
'track.cityscape.scrapers1.normal' : "textures/tracks/cityscape/scrapers1/normal.jpg",
'track.cityscape.scrapers2.diffuse' : "textures/tracks/cityscape/scrapers2/diffuse.jpg",
'track.cityscape.scrapers2.specular': "textures/tracks/cityscape/scrapers2/specular.jpg",
'track.cityscape.scrapers2.normal' : "textures/tracks/cityscape/scrapers2/normal.jpg",
'track.cityscape.start.diffuse' : "textures/tracks/cityscape/start/diffuse.jpg",
'track.cityscape.start.specular' : "textures/tracks/cityscape/start/specular.jpg",
'track.cityscape.start.normal' : "textures/tracks/cityscape/start/normal.jpg",
'track.cityscape.start.banner' : "textures/tracks/cityscape/start/start.jpg",
'bonus.base.diffuse' : "textures/bonus/base/diffuse.jpg",
'bonus.base.normal' : "textures/bonus/base/normal.jpg",
'bonus.base.specular' : "textures/bonus/base/specular.jpg"
'hex' : "textures.full/hud/hex.jpg",
'spark' : "textures.full/particles/spark.png",
'cloud' : "textures.full/particles/cloud.png",
'ship.feisar.diffuse' : "textures.full/ships/feisar/diffuse.jpg",
'ship.feisar.specular' : "textures.full/ships/feisar/specular.jpg",
'ship.feisar.normal' : "textures.full/ships/feisar/normal.jpg",
'booster.diffuse' : "textures.full/ships/feisar/booster/booster.png",
'booster.sprite' : "textures.full/ships/feisar/booster/boostersprite.jpg",
'track.cityscape.diffuse' : "textures.full/tracks/cityscape/diffuse.jpg",
'track.cityscape.specular' : "textures.full/tracks/cityscape/specular.jpg",
'track.cityscape.normal' : "textures.full/tracks/cityscape/normal.jpg",
'track.cityscape.scrapers1.diffuse' : "textures.full/tracks/cityscape/scrapers1/diffuse.jpg",
'track.cityscape.scrapers1.specular': "textures.full/tracks/cityscape/scrapers1/specular.jpg",
'track.cityscape.scrapers1.normal' : "textures.full/tracks/cityscape/scrapers1/normal.jpg",
'track.cityscape.scrapers2.diffuse' : "textures.full/tracks/cityscape/scrapers2/diffuse.jpg",
'track.cityscape.scrapers2.specular': "textures.full/tracks/cityscape/scrapers2/specular.jpg",
'track.cityscape.scrapers2.normal' : "textures.full/tracks/cityscape/scrapers2/normal.jpg",
'track.cityscape.start.diffuse' : "textures.full/tracks/cityscape/start/diffuse.jpg",
'track.cityscape.start.specular' : "textures.full/tracks/cityscape/start/specular.jpg",
'track.cityscape.start.normal' : "textures.full/tracks/cityscape/start/normal.jpg",
'track.cityscape.start.banner' : "textures.full/tracks/cityscape/start/start.jpg",
'bonus.base.diffuse' : "textures.full/bonus/base/diffuse.jpg",
'bonus.base.normal' : "textures.full/bonus/base/normal.jpg",
'bonus.base.specular' : "textures.full/bonus/base/specular.jpg"
},
texturesCube: {
'skybox.dawnclouds' : "textures/skybox/dawnclouds/%1.jpg"
'skybox.dawnclouds' : "textures.full/skybox/dawnclouds/%1.jpg"
},
geometries: {
'bonus.base' : "geometries/bonus/base/base.js",
@@ -125,13 +127,13 @@ bkcore.hexgl.tracks.Cityscape = {
'track.cityscape.bonus.speed' : "geometries/tracks/cityscape/bonus/speed.js"
},
analysers: {
'track.cityscape.collision' : "textures/tracks/cityscape/collision.png",
'track.cityscape.height' : "textures/tracks/cityscape/height.png"
'track.cityscape.collision' : "textures.full/tracks/cityscape/collision.png",
'track.cityscape.height' : "textures.full/tracks/cityscape/height.png"
},
images: {
'hud.bg' : "textures/hud/hud-bg.png",
'hud.speed' : "textures/hud/hud-fg-speed.png",
'hud.shield' : "textures/hud/hud-fg-shield.png"
'hud.bg' : "textures.full/hud/hud-bg.png",
'hud.speed' : "textures.full/hud/hud-fg-speed.png",
'hud.shield' : "textures.full/hud/hud-fg-shield.png"
}
});
}
@@ -161,7 +163,7 @@ bkcore.hexgl.tracks.Cityscape = {
});
this.materials.booster = new THREE.MeshBasicMaterial({
map: this.lib.get("textures", "booster.diffuse"),
map: this.lib.get("textures", "booster.diffuse"),
transparent: true
});
@@ -177,11 +179,11 @@ bkcore.hexgl.tracks.Cityscape = {
this.materials.start = new THREE.MeshBasicMaterial({
map: this.lib.get("textures", "track.cityscape.start.diffuse"),
ambient: 0xcccccc
ambient: 0xcccccc
});
this.materials.startBanner = new THREE.MeshBasicMaterial({
map: this.lib.get("textures", "track.cityscape.start.banner"),
map: this.lib.get("textures", "track.cityscape.start.banner"),
transparent: false
});
}
@@ -223,7 +225,7 @@ bkcore.hexgl.tracks.Cityscape = {
});
this.materials.booster = new THREE.MeshBasicMaterial({
map: this.lib.get("textures", "booster.diffuse"),
map: this.lib.get("textures", "booster.diffuse"),
transparent: true
});
@@ -262,7 +264,7 @@ bkcore.hexgl.tracks.Cityscape = {
});
this.materials.startBanner = new THREE.MeshBasicMaterial({
map: this.lib.get("textures", "track.cityscape.start.banner"),
map: this.lib.get("textures", "track.cityscape.start.banner"),
transparent: false
});
}
@@ -299,9 +301,9 @@ bkcore.hexgl.tracks.Cityscape = {
var ambient = 0xbbbbbb, diffuse = 0xffffff, specular = 0xffffff, shininess = 42, scale = 23;
// MAIN SCENE
// MAIN SCENE
var camera = new THREE.PerspectiveCamera( 70, ctx.width / ctx.height, 1, 60000 );
var scene = new THREE.Scene();
scene.add( camera );
scene.add( new THREE.AmbientLight( ambient ) );
@@ -330,15 +332,15 @@ bkcore.hexgl.tracks.Cityscape = {
// SHIP
var ship = ctx.createMesh(scene, this.lib.get("geometries", "ship.feisar"), -1134*2, 10, -443*2, this.materials.ship);
var booster = ctx.createMesh(ship, this.lib.get("geometries", "booster"), 0, 0.665, -3.8, this.materials.booster);
booster.depthWrite = false;
var boosterSprite = new THREE.Sprite({
map: this.lib.get("textures", "booster.sprite"),
blending: THREE.AdditiveBlending,
useScreenCoordinates: false,
color: 0xffffff
var boosterSprite = new THREE.Sprite({
map: this.lib.get("textures", "booster.sprite"),
blending: THREE.AdditiveBlending,
useScreenCoordinates: false,
color: 0xffffff
});
boosterSprite.scale.set(0.02, 0.02, 0.02);
boosterSprite.mergeWith3D = false;
@@ -408,7 +410,7 @@ bkcore.hexgl.tracks.Cityscape = {
var dt = delta/16.6;
this.objects.components.shipControls.update(dt);
this.objects.components.shipEffects.update(dt);
this.objects.components.cameraChase.update(dt, this.objects.components.shipControls.getSpeedRatio());
@@ -424,9 +426,9 @@ bkcore.hexgl.tracks.Cityscape = {
this.objects.composers.game.render(dt);
if(this.objects.hud) this.objects.hud.update(
this.objects.components.shipControls.getRealSpeed(100),
this.objects.components.shipControls.getRealSpeedRatio(),
this.objects.components.shipControls.getShield(100),
this.objects.components.shipControls.getRealSpeed(100),
this.objects.components.shipControls.getRealSpeedRatio(),
this.objects.components.shipControls.getShield(100),
this.objects.components.shipControls.getShieldRatio()
);
if(this.objects.components.shipControls.getShieldRatio() < 0.2)
@@ -444,4 +446,4 @@ bkcore.hexgl.tracks.Cityscape = {
lowFPS: 0
});
}
}
}
css/bg.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

css/help-0.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

css/help-1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

css/help-2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

css/multi.css
+234
View File
@@ -0,0 +1,234 @@
@-webkit-keyframes anim {
0% { -webkit-transform: translateY(10px) }
50% { -webkit-transform: translateY(-10px) }
100% { -webkit-transform: translateY(10px) }
}
@-moz-keyframes anim {
0% { -moz-transform: translateY(10px) }
50% { -moz-transform: translateY(-10px) }
100% { -moz-transform: translateY(10px) }
}
@-o-keyframes anim {
0% { -o-transform: translateY(10px) }
50% { -o-transform: translateY(-10px) }
100% { -o-transform: translateY(10px) }
}
@keyframes anim {
0% { transform: translateY(10px) }
50% { transform: translateY(-10px) }
100% { transform: translateY(10px) }
}
@-webkit-keyframes animbg {
0% { -webkit-transform: translateY(5px) }
50% { -webkit-transform: translateY(-5px) }
100% { -webkit-transform: translateY(5px) }
}
@-moz-keyframes animbg {
0% { -moz-transform: translateY(5px) }
50% { -moz-transform: translateY(-5px) }
100% { -moz-transform: translateY(5px) }
}
@-o-keyframes animbg {
0% { -o-transform: translateY(5px) }
50% { -o-transform: translateY(-5px) }
100% { -o-transform: translateY(5px) }
}
@keyframes animbg {
0% { transform: translateY(5px) }
50% { transform: translateY(-5px) }
100% { transform: translateY(5px) }
}
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html, body {
overflow: hidden;
font-family: 'BebasNeueRegular', arial, sans-serif;
background: white;
}
#global {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
background: url('bg.jpg') no-repeat center center fixed;
overflow: hidden;
text-align: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: animbg 3s ease-in-out infinite;
-moz-animation: animbg 3s ease-in-out infinite;
-o-animation: animbg 3s ease-in-out infinite;
animation: animbg 3s ease-in-out infinite;
}
#title {
position: absolute;
top: 5%;
right: 0;
bottom: 5%;
left: 0;
z-index: 1;
background: url('title.png') no-repeat center top;
-moz-background-size: auto 50%;
-webkit-background-size: auto 50%;
-ms-background-size: auto 50%;
-o-background-size: auto 50%;
background-size: auto 50%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: anim 3s ease-in-out infinite;
-moz-animation: anim 3s ease-in-out infinite;
-o-animation: anim 3s ease-in-out infinite;
animation: anim 3s ease-in-out infinite;
}
#menucontainer {
position: absolute;
top: auto;
right: 0;
bottom: 10%;
left: 0;
z-index: 2;
}
#menu {
position: relative;
display: block;
width: 100%;
max-width: 600px;
margin: auto;
text-align: center;
font-size: 2em;
font-family: 'BebasNeueRegular', arial, sans-serif;
text-transform: uppercase;
color: #4190bb;
}
#menu div {
padding: 0.1em 0 0 0;
margin: 0 0;
cursor: pointer;
-moz-text-shadow: 0 0 10px rgb(255,255,255);
-webkit-text-shadow: 0 0 10px rgb(255,255,255);
text-shadow: 0 0 10px rgb(255,255,255);
-webkit-transform-origin-y: 50%;
-webkit-transition: -webkit-transform 0.2s;
-webkit-transform: translateZ(0px) scaleY(0.8);
transform-origin-y: 50%;
transition: transform 0.2s ease;
transform: translateZ(0px) scaleY(0.8);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuNSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 40%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(40%,rgba(255,255,255,0.5)), color-stop(60%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0) 100%); /* W3C */
}
#menu div:hover {
color: #f66439;
-webkit-transform: scaleY(1.0);
transform: scaleY(1.1);
}
#start {
font-size: 1.8em;
color: #f66439;
}
#start:hover {
color: #f8854b !important;
}
#step-2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;
vertical-align: bottom;
text-align: center;
padding: 20px;
color: white;
font-size: 2em;
background-repeat: no-repeat;
background-position: center center;
-moz-background-size: 60% auto;
-webkit-background-size: 60% auto;
-ms-background-size: 60% auto;
-o-background-size: 60% auto;
background-size: 60% auto;
}
#step-3 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;
}
#step-3 #progressbar {
position: absolute;
top: 0;
right: auto;
bottom: 0;
left: 0;
width: 0%;
background: white;
}
#step-5 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;
text-align: center;
padding: 100px 20px;
color: white;
font-size: 2em;
}
#step-5 #time {
font-size: 4em
}
#leapinfo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
color: white;
text-align: center;
font-size: 3em;
padding-top: 200px;
z-index: 999999;
}
css/title.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 473 KiB

favicon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

index-leap.html
+119
View File
@@ -0,0 +1,119 @@
<!doctype html>
<html lang="en">
<head>
<title>HexGL dev page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts.css" type="text/css" charset="utf-8">
<style>
body {
background:#ccc;
padding:0;
margin:0;
overflow:hidden;
font-family:georgia;
text-align:center;
color: #666;
}
h1 {color: #666 ; }
a { color:skyblue }
canvas { pointer-events:none; }
#overlay{
position: absolute;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="overlay"></div>
<div id="main"></div>
<script src="libs/leap-0.4.1.min.js"></script>
<script src="libs/Three.dev.js"></script>
<script src="libs/ShaderExtras.js"></script>
<script src="libs/postprocessing/EffectComposer.js"></script>
<script src="libs/postprocessing/RenderPass.js"></script>
<script src="libs/postprocessing/BloomPass.js"></script>
<script src="libs/postprocessing/ShaderPass.js"></script>
<script src="libs/postprocessing/MaskPass.js"></script>
<script src="libs/Detector.js"></script>
<script src="libs/Stats.js"></script>
<script src="libs/DAT.GUI.min.js"></script>
<script src="bkcore.coffee/controllers/TouchController.js"></script>
<script src="bkcore.coffee/controllers/OrientationController.js"></script>
<script src="bkcore/Timer.js"></script>
<script src="bkcore/ImageData.js"></script>
<script src="bkcore/Utils.js"></script>
<script src="bkcore/threejs/RenderManager.js"></script>
<script src="bkcore/threejs/Shaders.js"></script>
<script src="bkcore/threejs/Particles.js"></script>
<script src="bkcore/threejs/Loader.js"></script>
<script src="bkcore/hexgl/HUD.js"></script>
<script src="bkcore/hexgl/RaceData.js"></script>
<script src="bkcore/hexgl/ShipControls.js"></script>
<script src="bkcore/hexgl/ShipEffects.js"></script>
<script src="bkcore/hexgl/CameraChase.js"></script>
<script src="bkcore/hexgl/Gameplay.js"></script>
<script src="bkcore/hexgl/tracks/Cityscape.js"></script>
<script src="bkcore/hexgl/HexGL.js"></script>
<script>
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container, hudcontainer;
var hexGL;
function init() {
hudcontainer = document.getElementById("overlay");
container = document.getElementById("main");
hexGL = new bkcore.hexgl.HexGL({
document: document,
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT,
container: container,
overlay: overlay,
quality: bkcore.Utils.getURLParameter('quality'),
difficulty: bkcore.Utils.getURLParameter('difficulty'),
half: bkcore.Utils.getURLParameter('half'),
mode: bkcore.Utils.getURLParameter('mode'),
controlType: 3,
godmode: (bkcore.Utils.getURLParameter('godmode') == '1'),
track: 'Cityscape'
});
hexGL.load({
onLoad: function(){
console.log("ALL LOADED.");
hexGL.init();
hexGL.start();
},
onError: function(s){
console.log("ERROR ON "+s+".");
},
onProgress: function(p, t, n)
{
console.log("LOADED "+t+" : "+n+" ( "+p.loaded+" / "+p.total+" ).");
}
});
}
init();
</script>
</body>
</html>
index-old.html
+118
View File
@@ -0,0 +1,118 @@
<!doctype html>
<html lang="en">
<head>
<title>HexGL dev page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts.css" type="text/css" charset="utf-8">
<style>
body {
background:#ccc;
padding:0;
margin:0;
overflow:hidden;
font-family:georgia;
text-align:center;
color: #666;
}
h1 {color: #666 ; }
a { color:skyblue }
canvas { pointer-events:none; }
#overlay{
position: absolute;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="overlay"></div>
<div id="main"></div>
<script src="libs/leap-0.4.1.min.js"></script>
<script src="libs/Three.dev.js"></script>
<script src="libs/ShaderExtras.js"></script>
<script src="libs/postprocessing/EffectComposer.js"></script>
<script src="libs/postprocessing/RenderPass.js"></script>
<script src="libs/postprocessing/BloomPass.js"></script>
<script src="libs/postprocessing/ShaderPass.js"></script>
<script src="libs/postprocessing/MaskPass.js"></script>
<script src="libs/Detector.js"></script>
<script src="libs/Stats.js"></script>
<script src="libs/DAT.GUI.min.js"></script>
<script src="bkcore.coffee/controllers/TouchController.js"></script>
<script src="bkcore.coffee/controllers/OrientationController.js"></script>
<script src="bkcore/Timer.js"></script>
<script src="bkcore/ImageData.js"></script>
<script src="bkcore/Utils.js"></script>
<script src="bkcore/threejs/RenderManager.js"></script>
<script src="bkcore/threejs/Shaders.js"></script>
<script src="bkcore/threejs/Particles.js"></script>
<script src="bkcore/threejs/Loader.js"></script>
<script src="bkcore/hexgl/HUD.js"></script>
<script src="bkcore/hexgl/RaceData.js"></script>
<script src="bkcore/hexgl/ShipControls.js"></script>
<script src="bkcore/hexgl/ShipEffects.js"></script>
<script src="bkcore/hexgl/CameraChase.js"></script>
<script src="bkcore/hexgl/Gameplay.js"></script>
<script src="bkcore/hexgl/tracks/Cityscape.js"></script>
<script src="bkcore/hexgl/HexGL.js"></script>
<script>
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container, hudcontainer;
var hexGL;
function init() {
hudcontainer = document.getElementById("overlay");
container = document.getElementById("main");
hexGL = new bkcore.hexgl.HexGL({
document: document,
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT,
container: container,
overlay: overlay,
quality: bkcore.Utils.getURLParameter('quality'),
difficulty: bkcore.Utils.getURLParameter('difficulty'),
half: bkcore.Utils.getURLParameter('half'),
mode: bkcore.Utils.getURLParameter('mode'),
controlType: Number(bkcore.Utils.getURLParameter('control')),
track: 'Cityscape'
});
hexGL.load({
onLoad: function(){
console.log("ALL LOADED.");
hexGL.init();
hexGL.start();
},
onError: function(s){
console.log("ERROR ON "+s+".");
},
onProgress: function(p, t, n)
{
console.log("LOADED "+t+" : "+n+" ( "+p.loaded+" / "+p.total+" ).");
}
});
}
init();
</script>
</body>
</html>
index.html
+55 -56
View File
@@ -1,23 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<title>HexGL dev page</title>
<title>HexGL by BKcore</title>
<meta charset="utf-8">
<meta name="description" content="HexGL is a futuristic racing game built by Thibaut Despoulain (BKcore) using HTML5, Javascript and WebGL. Come challenge your friends on this fast-paced 3D game!">
<meta property="og:title" content="HexGL, the HTML5 futuristic racing game." />
<meta property="og:type" content="game" />
<meta property="og:url" content="http://hexgl.bkcore.com/" />
<meta property="og:image" content="http://hexgl.bkcore.com/image.png" />
<meta property="og:site_name" content="HexGL by BKcore" />
<meta property="fb:admins" content="1482017639" />
<link rel="icon" href="http://hexgl.bkcore.com/favicon.png" type="image/png">
<link rel="shortcut icon" href="http://hexgl.bkcore.com/favicon.png" type="image/png">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/multi.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="css/fonts.css" type="text/css" charset="utf-8">
<style>
body {
background:#ccc;
padding:0;
margin:0;
overflow:hidden;
font-family:georgia;
text-align:center;
color: #666;
}
h1 {color: #666 ; }
a { color:skyblue }
canvas { pointer-events:none; }
canvas { pointer-events:none; width: 100%;}
#overlay{
position: absolute;
z-index: 9999;
@@ -26,12 +29,52 @@
width: 100%;
}
</style>
<script type="text/javascript">
//analytics
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26274524-4']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="overlay"></div>
<div id="main"></div>
<div id="step-1">
<div id="global"></div>
<div id="title">
</div>
<div id="menucontainer">
<div id="menu">
<div id="start">Start</div>
<div id="s-controlType">Controls: LeapMotion</div>
<div id="s-quality">Quality: High</div>
<div id="s-platform">Platform: Desktop</div>
<div id="s-godmode">Godmode: On</div>
</div>
</div>
</div>
<div id="step-2" style="display: none">
<div id="ctrl-help">Click/Touch to continue.</div>
</div>
<div id="step-3" style="display: none">
<div id="progressbar"></div>
</div>
<div id="step-4" style="display: none">
<div id="overlay"></div>
<div id="main"></div>
</div>
<div id="step-5" style="display: none">
<div id="time"></div>
<div id="ctrl-help">Click/Touch to continue.</div>
</div>
<div id="leapinfo" style="display: none"></div>
<script src="libs/leap-0.4.1.min.js"></script>
<script src="libs/Three.dev.js"></script>
<script src="libs/ShaderExtras.js"></script>
<script src="libs/postprocessing/EffectComposer.js"></script>
@@ -66,51 +109,7 @@
<script src="bkcore/hexgl/HexGL.js"></script>
<script>
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container, hudcontainer;
var hexGL;
function init() {
hudcontainer = document.getElementById("overlay");
container = document.getElementById("main");
hexGL = new bkcore.hexgl.HexGL({
document: document,
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT,
container: container,
overlay: overlay,
quality: bkcore.Utils.getURLParameter('quality'),
difficulty: bkcore.Utils.getURLParameter('difficulty'),
half: bkcore.Utils.getURLParameter('half'),
mode: bkcore.Utils.getURLParameter('mode'),
track: 'Cityscape'
});
hexGL.load({
onLoad: function(){
console.log("ALL LOADED.");
hexGL.init();
hexGL.start();
},
onError: function(s){
console.log("ERROR ON "+s+".");
},
onProgress: function(p, t, n)
{
console.log("LOADED "+t+" : "+n+" ( "+p.loaded+" / "+p.total+" ).");
}
});
}
init();
</script>
<script src="launch.js"></script>
</body>
</html>
launch.coffee
+59
View File
@@ -0,0 +1,59 @@
$ = (_) -> document.getElementById _
init = (controlType, quality, platform, godmode) ->
hexGL = new bkcore.hexgl.HexGL(
document: document
width: window.innerWidth
height: window.innerHeight
container: $ 'main'
overlay: $ 'overlay'
gameover: $ 'step-5'
quality: quality
difficulty: 0,
half: (platform is 1 and quality < 1)
mobile: platform is 1
hud: platform is 0
controlType: controlType
godmode: godmode
track: 'Cityscape'
)
window.hexGL=hexGL
progressbar = $ 'progressbar'
hexGL.load(
onLoad: ->
console.log 'LOADED.'
hexGL.init()
$('step-3').style.display = 'none'
$('step-4').style.display = 'block'
hexGL.start()
onError: (s) ->
console.error "Error loading #{ s }."
onProgress: (p, t, n) ->
console.log("LOADED "+t+" : "+n+" ( "+p.loaded+" / "+p.total+" ).")
progressbar.style.width = "#{ p.loaded / p.total * 100 }%"
)
u = bkcore.Utils.getURLParameter
s = [
['controlType', ['KEYBOARD', 'TOUCH', 'LEAP MOTION CONTROLLER'], 0, 0, 'Controls: ']
['quality', ['LOW', 'MID', 'HIGH'], 2, 2, 'Quality: ']
['platform', ['DESKTOP', 'MOBILE'], 0, 0, 'Platform: ']
['godmode', ['OFF', 'ON'], 0, 1, 'Godmode: ']
]
for a in s
do(a)->
a[3] = u(a[0]) ? a[2]
e = $ "s-#{a[0]}"
(f = -> e.innerHTML = a[4]+a[1][a[3]])()
e.onclick = -> f(a[3] = (a[3]+1)%a[1].length)
$('start').onclick = ->
$('step-1').style.display = 'none'
$('step-2').style.display = 'block'
$('step-2').style.backgroundImage = "url(css/help-#{s[0][3]}.png)"
$('step-2').onclick = ->
$('step-2').style.display = 'none'
$('step-3').style.display = 'block'
init s[0][3], s[1][3], s[2][3], s[3][3]
$('step-5').onclick = ->
window.location.reload()
launch.js
+83
View File
@@ -0,0 +1,83 @@
// Generated by CoffeeScript 1.6.3
(function() {
var $, a, init, s, u, _fn, _i, _len;
$ = function(_) {
return document.getElementById(_);
};
init = function(controlType, quality, platform, godmode) {
var hexGL, progressbar;
hexGL = new bkcore.hexgl.HexGL({
document: document,
width: window.innerWidth,
height: window.innerHeight,
container: $('main'),
overlay: $('overlay'),
gameover: $('step-5'),
quality: quality,
difficulty: 0,
half: platform === 1 && quality < 1,
mobile: platform === 1,
hud: platform === 0,
controlType: controlType,
godmode: godmode,
track: 'Cityscape'
});
window.hexGL = hexGL;
progressbar = $('progressbar');
return hexGL.load({
onLoad: function() {
console.log('LOADED.');
hexGL.init();
$('step-3').style.display = 'none';
$('step-4').style.display = 'block';
return hexGL.start();
},
onError: function(s) {
return console.error("Error loading " + s + ".");
},
onProgress: function(p, t, n) {
console.log("LOADED " + t + " : " + n + " ( " + p.loaded + " / " + p.total + " ).");
return progressbar.style.width = "" + (p.loaded / p.total * 100) + "%";
}
});
};
u = bkcore.Utils.getURLParameter;
s = [['controlType', ['KEYBOARD', 'TOUCH', 'LEAP MOTION CONTROLLER'], 0, 0, 'Controls: '], ['quality', ['LOW', 'MID', 'HIGH'], 2, 2, 'Quality: '], ['platform', ['DESKTOP', 'MOBILE'], 0, 0, 'Platform: '], ['godmode', ['OFF', 'ON'], 0, 1, 'Godmode: ']];
_fn = function(a) {
var e, f, _ref;
a[3] = (_ref = u(a[0])) != null ? _ref : a[2];
e = $("s-" + a[0]);
(f = function() {
return e.innerHTML = a[4] + a[1][a[3]];
})();
return e.onclick = function() {
return f(a[3] = (a[3] + 1) % a[1].length);
};
};
for (_i = 0, _len = s.length; _i < _len; _i++) {
a = s[_i];
_fn(a);
}
$('start').onclick = function() {
$('step-1').style.display = 'none';
$('step-2').style.display = 'block';
return $('step-2').style.backgroundImage = "url(css/help-" + s[0][3] + ".png)";
};
$('step-2').onclick = function() {
$('step-2').style.display = 'none';
$('step-3').style.display = 'block';
return init(s[0][3], s[1][3], s[2][3], s[3][3]);
};
$('step-5').onclick = function() {
return window.location.reload();
};
}).call(this);
libs/leap-0.4.1.min.js
Vendored
+3
View File
File diff suppressed because one or more lines are too long