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

Finalized replay mode. Added ORBIT camera mode. Bug fixes.

Browse Source
This commit is contained in:
Thibaut Despoulain
2012-10-31 15:35:44 +01:00
parent 3cd565ff50
commit 3e8d91af91
7 changed files with 91 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bkcore/hexgl/CameraChase.js
+35 -12
View File
@@ -17,6 +17,12 @@ bkcore.hexgl.CameraChase = function(opts)
this.speedOffsetMax = 10;
this.speedOffsetStep = 0.05;
this.modes = {
CHASE: 0,
ORBIT: 1
}
this.mode = this.modes.CHASE;
this.camera = opts.camera;
this.targetObject = opts.target;
this.cameraCube = opts.cameraCube == undefined ? null : opts.cameraCube;
@@ -24,26 +30,43 @@ bkcore.hexgl.CameraChase = function(opts)
this.yoffset = opts.yoffest == undefined ? 8.0 : opts.yoffest;
this.zoffset = opts.zoffset == undefined ? 10.0 : opts.zoffset;
this.viewOffset = opts.viewOffset == undefined ? 10.0 : opts.viewOffset;
this.orbitOffset = 12;
this.lerp = opts.lerp == undefined ? 0.5 : opts.lerp;
this.time = 0.0;
}
bkcore.hexgl.CameraChase.prototype.update = function(dt, ratio)
{
this.dir.set(0,0,1);
this.up.set(0,1,0);
if(this.mode == this.modes.CHASE)
{
this.dir.set(0,0,1);
this.up.set(0,1,0);
this.targetObject.matrix.rotateAxis(this.up);
this.targetObject.matrix.rotateAxis(this.dir);
this.targetObject.matrix.rotateAxis(this.up);
this.targetObject.matrix.rotateAxis(this.dir);
this.speedOffset += (this.speedOffsetMax*ratio - this.speedOffset) * Math.min(1, 0.3*dt);
this.speedOffset += (this.speedOffsetMax*ratio - this.speedOffset) * Math.min(1, 0.3*dt);
this.target.copy(this.targetObject.position);
this.target.subSelf(this.dir.multiplyScalar(this.zoffset + this.speedOffset));
this.target.addSelf(this.up.multiplyScalar(this.yoffset));
this.target.y += -this.up.y + this.yoffset;
this.camera.position.copy(this.target, this.lerp);
this.camera.lookAt(this.dir.normalize().multiplyScalar(this.viewOffset).addSelf(this.targetObject.position));
this.target.copy(this.targetObject.position);
this.target.subSelf(this.dir.multiplyScalar(this.zoffset + this.speedOffset));
this.target.addSelf(this.up.multiplyScalar(this.yoffset));
this.target.y += -this.up.y + this.yoffset;
this.camera.position.copy(this.target);
this.camera.lookAt(this.dir.normalize().multiplyScalar(this.viewOffset).addSelf(this.targetObject.position));
}
else if(this.mode == this.modes.ORBIT)
{
this.time += dt*.008;
this.dir.set(
Math.cos(this.time)*this.orbitOffset,
this.yoffset/2,
Math.sin(this.time)*this.orbitOffset
);
this.target.copy(this.targetObject.position).addSelf(this.dir);
this.camera.position.copy(this.target);
this.camera.lookAt(this.targetObject.position);
}
if(this.cameraCube != null)
this.cameraCube.rotation.copy(this.camera.rotation);
bkcore/hexgl/Gameplay.js
+7 -1
View File
@@ -27,6 +27,7 @@ bkcore.hexgl.Gameplay = function(opts)
this.hud = opts.hud;
this.shipControls = opts.shipControls;
this.cameraControls = opts.cameraControls;
this.track = opts.track;
this.analyser = opts.analyser;
this.pixelRatio = opts.pixelRatio;
@@ -126,6 +127,9 @@ bkcore.hexgl.Gameplay.prototype.start = function(opts)
this.raceData = new bkcore.hexgl.RaceData(this.track.name, this.mode, this.shipControls);
if(this.mode == 'replay')
{
this.cameraControls.mode = this.cameraControls.modes.ORBIT;
this.hud.messageOnly = true;
try {
var d = localStorage['race-'+this.track.name+'-replay'];
if(d == undefined)
@@ -195,7 +199,9 @@ bkcore.hexgl.Gameplay.prototype.update = function()
this.hud.display("Go", 0.5);
this.step = 4;
this.timer.start();
this.shipControls.active = true;
if(this.mode != "replay")
this.shipControls.active = true;
}
else if(this.step == 4)
{
bkcore/hexgl/HUD.js
+40 -30
View File
@@ -12,6 +12,9 @@ bkcore.hexgl.HUD = function(opts)
{
var self = this;
this.visible = true;
this.messageOnly = false;
this.width = opts.width;
this.height = opts.height;
@@ -124,7 +127,11 @@ bkcore.hexgl.HUD.prototype.update = function(speed, speedRatio, shield, shieldRa
var SCREEN_HW = SCREEN_WIDTH / 2;
var SCREEN_HH = SCREEN_HEIGHT / 2;
//this.ctx.clearRect(0 , 0 , SCREEN_WIDTH , SCREEN_HEIGHT);
if(!this.visible)
{
this.ctx.clearRect(0 , 0 , SCREEN_WIDTH , SCREEN_HEIGHT);
return;
}
var w = this.bg.width;
var h = this.bg.height;
@@ -148,39 +155,42 @@ bkcore.hexgl.HUD.prototype.update = function(speed, speedRatio, shield, shieldRa
{
this.ctx.clearRect(0 , oh , SCREEN_WIDTH , nh);
this.ctx.drawImage(this.bg, o, oh, nw, nh);
if(!this.messageOnly)
{
this.ctx.drawImage(this.bg, o, oh, nw, nh);
this.ctx.save();
this.ctx.beginPath();
this.ctx.moveTo(bw+ba+SCREEN_HW, oh);
this.ctx.lineTo(-(bw+ba)+SCREEN_HW, oh);
this.ctx.lineTo(-bw+SCREEN_HW, SCREEN_HEIGHT);
this.ctx.lineTo(bw+SCREEN_HW, SCREEN_HEIGHT);
this.ctx.lineTo(bw+ba+SCREEN_HW, oh);
this.ctx.clip();
this.ctx.drawImage(this.fgspeed, o, oh, nw, nh);
this.ctx.restore();
this.ctx.save();
this.ctx.beginPath();
this.ctx.moveTo(bw+ba+SCREEN_HW, oh);
this.ctx.lineTo(-(bw+ba)+SCREEN_HW, oh);
this.ctx.lineTo(-bw+SCREEN_HW, SCREEN_HEIGHT);
this.ctx.lineTo(bw+SCREEN_HW, SCREEN_HEIGHT);
this.ctx.lineTo(bw+ba+SCREEN_HW, oh);
this.ctx.clip();
this.ctx.drawImage(this.fgspeed, o, oh, nw, nh);
this.ctx.restore();
this.ctx.save();
this.ctx.beginPath();
this.ctx.moveTo(-sw+SCREEN_HW, oh+sy);
this.ctx.lineTo(sw+SCREEN_HW, oh+sy);
this.ctx.lineTo(sw+SCREEN_HW, oh+sh+sy);
this.ctx.lineTo(-sw+SCREEN_HW, oh+sh+sy);
this.ctx.lineTo(-sw+SCREEN_HW, oh+sh);
this.ctx.clip();
this.ctx.drawImage(this.fgshield, o, oh, nw, nh);
this.ctx.restore();
this.ctx.save();
this.ctx.beginPath();
this.ctx.moveTo(-sw+SCREEN_HW, oh+sy);
this.ctx.lineTo(sw+SCREEN_HW, oh+sy);
this.ctx.lineTo(sw+SCREEN_HW, oh+sh+sy);
this.ctx.lineTo(-sw+SCREEN_HW, oh+sh+sy);
this.ctx.lineTo(-sw+SCREEN_HW, oh+sh);
this.ctx.clip();
this.ctx.drawImage(this.fgshield, o, oh, nw, nh);
this.ctx.restore();
// SPEED
this.ctx.font = (SCREEN_WIDTH/this.speedFontRatio)+"px "+this.font;
this.ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
this.ctx.fillText(speed, SCREEN_HW, SCREEN_HEIGHT - nh*0.57);
// SPEED
this.ctx.font = (SCREEN_WIDTH/this.speedFontRatio)+"px "+this.font;
this.ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
this.ctx.fillText(speed, SCREEN_HW, SCREEN_HEIGHT - nh*0.57);
// SHIELD
this.ctx.font = (SCREEN_WIDTH/this.shieldFontRatio)+"px "+this.font;
this.ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
this.ctx.fillText(shield, SCREEN_HW, SCREEN_HEIGHT - nh*0.44);
// SHIELD
this.ctx.font = (SCREEN_WIDTH/this.shieldFontRatio)+"px "+this.font;
this.ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
this.ctx.fillText(shield, SCREEN_HW, SCREEN_HEIGHT - nh*0.44);
}
}
else if(this.step == 1)
{
bkcore/hexgl/HexGL.js
+1
View File
@@ -142,6 +142,7 @@ bkcore.hexgl.HexGL.prototype.initGameplay = function()
mode: this.mode,
hud: this.hud,
shipControls: this.components.shipControls,
cameraControls: this.components.cameraChase,
analyser: this.track.analyser,
pixelRatio: this.track.pixelRatio,
track: this.track,
bkcore/hexgl/RaceData.js
+4 -2
View File
@@ -52,7 +52,7 @@ bkcore.hexgl.RaceData.prototype.tick = function(time)
bkcore.hexgl.RaceData.prototype.applyInterpolated = function(time)
{
while(this.seek < this.last && this.data[this.seek+1].time < time)
while(this.seek < this.last && this.data[this.seek+1][0] < time)
++this.seek;
var prev = this.data[this.seek];
@@ -67,7 +67,7 @@ bkcore.hexgl.RaceData.prototype.applyInterpolated = function(time)
// no interpolation
if(this.seek == this.last || this.seek == 0)
this.shipControls.teleport(prev.position, prev.quaternion);
this.shipControls.teleport(this._pp, this._pq);
// interpolation
var next = this.data[this.seek+1];
@@ -94,4 +94,6 @@ bkcore.hexgl.RaceData.prototype.export = function()
bkcore.hexgl.RaceData.prototype.import = function(imp)
{
this.data = imp;
this.last = this.data.length-1;
console.log(this.data);
}
bkcore/hexgl/ShipControls.js
+3
View File
@@ -344,6 +344,9 @@ bkcore.hexgl.ShipControls.prototype.teleport = function(pos, quat)
this.dummy.position.copy(pos);
this.dummy.matrix.setPosition(this.dummy.position);
//console.log(pos.x, pos.y, pos.z);
this.dummy.matrix.setRotationFromQuaternion(this.dummy.quaternion);
if(this.mesh != null)