work on playerFpsControl.js (mouselock experiment)

index.html

@@ -198,6 +198,7 @@ <h3>Ouch no WebGL :(</h3>
  <script src="js/skymap.js"></script>
  <script src="js/marble.js"></script>
  <script src="js/player.js"></script>
+ <script src="js/playerFpsControl.js"></script>
  <script src="js/enemy.js"></script>
  <script src="js/ball.js"></script>
  <script src="js/camera.js"></script>

js/camera.js

@@ -19,12 +19,19 @@ Marble.Camera.prototype.object = function()
 
 Marble.Camera.prototype.tick = function()
 {
- // TODO should i use mesh or body ?
  var camera = this._object;
  var player = gameLevel.player();
 
  camera.position.add( player.mesh().position, this._relativePos);
- camera.lookAt( player.mesh().position );
+ //camera.lookAt( player.mesh().position );
+
+if( player.fpsControl().isActivated() ){
+ var angleY = player.fpsControl().angleY();
+ camera.rotation.y = angleY;
+ camera.position.copy( player.mesh().position );
+ camera.position.y += 1.2*Marble.tileSize/2;
+ return;
+}
 
 if(false){
  var target = player.mesh().position.clone();

js/gameLevel.js

@@ -15,7 +15,7 @@ Marble.GameLevel = function()
  this._player = new Marble.Player();
  this._map = new Marble.Map();
  this._camera = new Marble.Camera();
- this._skybox = new Marble.Skymap();
+ //this._skybox = new Marble.Skymap();
 
  // create all the balls
  this._balls = [];
@@ -28,7 +28,7 @@ Marble.GameLevel = function()
  this._enemies.push( new Marble.Enemy() );
  }
 
- this.visualFxAdd(new Marble.VisualFxSparks());
+ //this.visualFxAdd(new Marble.VisualFxSparks());
 
  this._timeoutCtor();
 }

js/marble.js

@@ -174,11 +174,18 @@ Marble.Marble.prototype._updateSphere = function()
 */
 Marble.Marble.prototype._updateShadow = function()
 {
- var height = gameLevel.map().getHeight(this._mesh.position.x, this._mesh.position.z);
- if( height !== undefined ){
- // +0.1 to ensure the map is above the ground without z-fighting
- this._shadowMesh.position.y = height - this._mesh.position.y + 0.1;
- }else{
+ var scale = 1;
+ var voxelHeight = gameLevel.map().getHeight(this._mesh.position.x, this._mesh.position.z);
+ // if no voxel below
+ if( voxelHeight === undefined ){
  this._shadowMesh.position.y = -Number.MAX_VALUE;
+ this._shadowMesh.scale.set(scale, scale, scale)
+ return;
  }
+
+ var deltaHeight = this._mesh.position.y - voxelHeight;
+ // +0.1 to ensure the map is above the ground without z-fighting
+ this._shadowMesh.position.y = -deltaHeight + 0.1;
+ scale = 1 + 0.3 * deltaHeight / Marble.tileSize;
+ this._shadowMesh.scale.set(scale, scale, scale)
 }

js/player.js

@@ -29,6 +29,8 @@ Marble.Player = function()
  });
  microphysics.world().add(this._devOrientAcc); 
  }
+
+ this._fpsControl = new Marble.PlayerFpsControl();
 }
 
 // inherit from Marble.Marble methods
@@ -46,6 +48,9 @@ Marble.Player.prototype.destroy = function()
 
  this._devOrientAcc && microphysics.world().remove(this._devOrientAcc);
  this._devOrientAcc = null; 
+
+ this._fpsControl && this._fpsControl.destroy();
+ this._fpsControl = null; 
 }
 
 //////////////////////////////////////////////////////////////////////////////////
@@ -69,6 +74,8 @@ Marble.Player.prototype.onContactVoxel = function(voxelType)
 // //
 //////////////////////////////////////////////////////////////////////////////////
 
+Marble.Player.prototype.fpsControl = function(){ return this._fpsControl; }
+
 Marble.Player.prototype.scoreChange = function(delta)
 {
  osdLayer.scoreChange(delta);

js/playerFpsControl.js

@@ -0,0 +1,114 @@
+Marble.PlayerFpsControl = function()
+{
+ this._angleY = 0;
+ // bind events
+ this._$onMouseMove = this._onMouseMove.bind(this);
+ this._$onFullscreenChange=this._onFullscreenChange.bind(this);
+ document.addEventListener('mozfullscreenchange', this._$onFullscreenChange, false);
+}
+
+Marble.PlayerFpsControl.prototype.destroy = function()
+{
+ document.removeEventListener('mozfullscreenchange' , this._$onFullscreenChange);
+
+ document.removeEventListener('mousemove' , this._$onMousemove);
+
+ this._fpsAcc && microphysics.world().remove(this._fpsAcc);
+ this._fpsAcc = null;
+}
+
+Marble.PlayerFpsControl.prototype.angleY = function()
+{
+ return this._angleY;
+}
+
+Marble.PlayerFpsControl.prototype._onFullscreenChange = function()
+{
+ if( THREEx.FullScreen.activated() ){
+
+ navigator.pointer.lock(document.body);
+
+ console.log("after pointer lock, isLocked is", navigator.pointer.islocked());
+ console.assert(navigator.pointer.islocked());
+
+ document.addEventListener('mousemove', this._$onMouseMove, false);
+
+ // accelerator for keyboard control
+ var player = gameLevel.player();
+ this._fpsAcc = new Marble.PlayerFpsControl.FpsAccelerator({
+ bodies : [microphysics.body(player.mesh())],
+ acceleration : 8*Marble.tileSize,
+ keyboard : keyboard
+ });
+ microphysics.world().add(this._fpsAcc);
+
+ }else{
+ navigator.pointer.unlock(); 
+ document.removeEventListener('mousemove', this._$onMousemove);
+
+ this._fpsAcc && microphysics.world().remove(this._fpsAcc);
+ this._fpsAcc = null;
+ }
+}
+
+Marble.PlayerFpsControl.prototype.isSupported = function(domEvent)
+{
+ return navigator.pointer !== undefined;
+}
+Marble.PlayerFpsControl.prototype.isActivated = function(domEvent)
+{
+ if( !this.isSupported() ) return false;
+ var isLocked = navigator.pointer.islocked();
+ return isLocked;
+}
+
+Marble.PlayerFpsControl.prototype._onMouseMove = function(domEvent)
+{
+ console.assert( domEvent.movementX !== undefined );
+ console.assert( domEvent.movementY !== undefined );
+ console.log("mousemove", "movementX", domEvent.movementX, "movementY", domEvent.movementY);
+
+ var speed = 1 / 1024;
+ var deltaAngle = domEvent.movementX * speed * Math.PI * -1;
+ this._angleY += deltaAngle;
+ this._angleY %= 2*Math.PI;
+
+ console.log("angleY", this._angleY/Math.PI*180);
+}
+
+//////////////////////////////////////////////////////////////////////////////////
+// //
+//////////////////////////////////////////////////////////////////////////////////
+
+Marble.PlayerFpsControl.FpsAccelerator = vphy.Class({
+ __extends__ : vphy.Accelerator,
+ __init__ : function(args){
+ var params = vphy.extend({
+ }, args);
+ this.bodies = params.bodies;
+ this.keyboard = params.keyboard;
+ this.acceleration = params.acceleration;
+ },
+ perform : function(){
+ var keyboard = this.keyboard;
+ var acc = this.acceleration;
+ var key = {
+ left : keyboard.pressed('A') || keyboard.pressed('J') || keyboard.pressed('Q') ,
+ right : keyboard.pressed('D') || keyboard.pressed('L') ,
+ up : keyboard.pressed('W') || keyboard.pressed('I') || keyboard.pressed('Z') ,
+ down : keyboard.pressed('S') || keyboard.pressed('K')
+ };
+ // TODO rewrite formula in a controlled manner
+ var angle = gameLevel.player().fpsControl().angleY();
+ var accX = - Math.sin(angle) * this.acceleration;
+ var accZ = - Math.cos(angle) * this.acceleration;;
+ for(var i = 0; i < this.bodies.length; i++){
+ var body = this.bodies[i];
+ if( key.right ) body.accelerate(-accZ,0,+accX);
+ if( key.left ) body.accelerate(+accZ,0,-accX);
+ if( key.up ) body.accelerate(+accX,0,+accZ);
+ if( key.down ) body.accelerate(-accX,0,-accZ);
+ }
+ }
+});
+

js/threex.sparks.js

@@ -117,7 +117,7 @@ THREEx.Sparks.prototype.destroy = function()
 {
  window.removeEventListener('resize', this._$onWindowResize);
 
- this._emitter.stop();
+ if( this._emitter.isRunning() ) this._emitter.stop();
 }
 
 //////////////////////////////////////////////////////////////////////////////////