diff --git a/bkcore/hexgl/CameraChase.js b/bkcore/hexgl/CameraChase.js index 3a4c54b..69a55c7 100644 --- a/bkcore/hexgl/CameraChase.js +++ b/bkcore/hexgl/CameraChase.js @@ -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); diff --git a/bkcore/hexgl/Gameplay.js b/bkcore/hexgl/Gameplay.js index 79c22b5..adc395e 100644 --- a/bkcore/hexgl/Gameplay.js +++ b/bkcore/hexgl/Gameplay.js @@ -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) { diff --git a/bkcore/hexgl/HUD.js b/bkcore/hexgl/HUD.js index 806ecf3..068e123 100644 --- a/bkcore/hexgl/HUD.js +++ b/bkcore/hexgl/HUD.js @@ -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) { diff --git a/bkcore/hexgl/HexGL.js b/bkcore/hexgl/HexGL.js index fc0e3f0..76c86d1 100644 --- a/bkcore/hexgl/HexGL.js +++ b/bkcore/hexgl/HexGL.js @@ -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, diff --git a/bkcore/hexgl/RaceData.js b/bkcore/hexgl/RaceData.js index 7100435..9d983c0 100644 --- a/bkcore/hexgl/RaceData.js +++ b/bkcore/hexgl/RaceData.js @@ -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); } \ No newline at end of file diff --git a/bkcore/hexgl/ShipControls.js b/bkcore/hexgl/ShipControls.js index 2fb4c9d..93b0044 100644 --- a/bkcore/hexgl/ShipControls.js +++ b/bkcore/hexgl/ShipControls.js @@ -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) diff --git a/index.html b/index.html index 4487e59..fb9ecbf 100644 --- a/index.html +++ b/index.html @@ -85,7 +85,7 @@ quality: bkcore.Utils.getURLParameter('quality'), difficulty: bkcore.Utils.getURLParameter('difficulty'), half: bkcore.Utils.getURLParameter('half'), - mode: 'timeattack', + mode: bkcore.Utils.getURLParameter('mode'), track: 'Cityscape' });