From 6d9d02615a12432b21e835f3f7f8c99c646ebdff Mon Sep 17 00:00:00 2001 From: Jeena Date: Sat, 6 Dec 2014 20:20:49 +0100 Subject: [PATCH] added pointer locking and viewport moving --- app/Game/Client/AudioPlayer.js | 4 +- app/Game/Client/Control/Input.js | 21 +++ app/Game/Client/Control/Input/MouseInput.js | 47 ----- app/Game/Client/Control/Input/XyInput.js | 20 --- .../GamepadInput.js => Inputs/Gamepad.js} | 9 +- .../Client/Control/Inputs/KeyboardAndMouse.js | 162 ++++++++++++++++++ app/Game/Client/Control/PlayerController.js | 71 +------- app/Game/Client/Me.js | 22 +++ app/Game/Client/View/Pixi/View.js | 5 +- app/Game/Config/Settings.js | 1 + app/Lib/Utilities/RequestAnimFrame.js | 1 - app/Menu/Menu.js | 14 ++ 12 files changed, 236 insertions(+), 141 deletions(-) create mode 100755 app/Game/Client/Control/Input.js delete mode 100755 app/Game/Client/Control/Input/MouseInput.js delete mode 100755 app/Game/Client/Control/Input/XyInput.js rename app/Game/Client/Control/{Input/GamepadInput.js => Inputs/Gamepad.js} (90%) create mode 100644 app/Game/Client/Control/Inputs/KeyboardAndMouse.js diff --git a/app/Game/Client/AudioPlayer.js b/app/Game/Client/AudioPlayer.js index a43866e..5e78203 100644 --- a/app/Game/Client/AudioPlayer.js +++ b/app/Game/Client/AudioPlayer.js @@ -18,8 +18,8 @@ function () { } AudioPlayer.prototype.play = function() { - this.audio.play(); - this.doPlay = true; + //this.audio.play(); + //this.doPlay = true; } AudioPlayer.prototype.stop = function() { diff --git a/app/Game/Client/Control/Input.js b/app/Game/Client/Control/Input.js new file mode 100755 index 0000000..242a689 --- /dev/null +++ b/app/Game/Client/Control/Input.js @@ -0,0 +1,21 @@ +define([ + "Lib/Utilities/NotificationCenter" +], + +function (Nc) { + + function Input(playerController) { + this.playerController = playerController; + this.x = null; + this.y = null + } + + Input.prototype.onXyChange = function(x, y) { + this.x = x; + this.y = y; + this.playerController.setXY(this.x, this.y); + } + + return Input; + +}); \ No newline at end of file diff --git a/app/Game/Client/Control/Input/MouseInput.js b/app/Game/Client/Control/Input/MouseInput.js deleted file mode 100755 index ee66551..0000000 --- a/app/Game/Client/Control/Input/MouseInput.js +++ /dev/null @@ -1,47 +0,0 @@ -define([ - "Game/Client/Control/Input/XyInput", - "Game/Client/View/DomController", - "Game/Config/Settings", - "Lib/Utilities/NotificationCenter" -], - -function (Parent, DomController, Settings, Nc) { - - function MouseInput() { - Parent.call(this); - - this.init(); - } - - MouseInput.prototype = Object.create(Parent.prototype); - - MouseInput.prototype.init = function() { - - var canvas = null; - var self = this; - canvas = DomController.getCanvas(); - - canvas.onmousemove = function(e){ - - // -1 +1 +1 +1 xy scaling should - // -1 -1 +1 -1 be like this - - var x = (((e.clientX - this.offsetLeft) / Settings.STAGE_WIDTH) * 2) - 1; - var y = (((Settings.STAGE_HEIGHT - (e.clientY - this.offsetTop)) / Settings.STAGE_HEIGHT) * 2) -1; - - self.onXyChange(x, y); - } - - canvas.onmousedown = function(e) { - - var x = (((e.clientX - this.offsetLeft) / Settings.STAGE_WIDTH) * 2) - 1; - var y = (((Settings.STAGE_HEIGHT - (e.clientY - this.offsetTop)) / Settings.STAGE_HEIGHT) * 2) -1; - - Nc.trigger(Nc.ns.client.input.handAction.request, x, y); - } - }; - - - return MouseInput; - -}); diff --git a/app/Game/Client/Control/Input/XyInput.js b/app/Game/Client/Control/Input/XyInput.js deleted file mode 100755 index 47864d4..0000000 --- a/app/Game/Client/Control/Input/XyInput.js +++ /dev/null @@ -1,20 +0,0 @@ -define([ - "Lib/Utilities/NotificationCenter" -], - -function (Nc) { - - function XyInput() { - this.x = null; - this.y = null - } - - XyInput.prototype.onXyChange = function(x, y) { - this.x = x; - this.y = y; - Nc.trigger(Nc.ns.client.input.xy.change, x, y); - } - - return XyInput; - -}); \ No newline at end of file diff --git a/app/Game/Client/Control/Input/GamepadInput.js b/app/Game/Client/Control/Inputs/Gamepad.js similarity index 90% rename from app/Game/Client/Control/Input/GamepadInput.js rename to app/Game/Client/Control/Inputs/Gamepad.js index 9ddef91..bcbcfc0 100644 --- a/app/Game/Client/Control/Input/GamepadInput.js +++ b/app/Game/Client/Control/Inputs/Gamepad.js @@ -1,10 +1,9 @@ define([ - "Game/Client/Control/Input/XyInput", - "Game/Config/Settings", - "Lib/Utilities/NotificationCenter" + "Game/Client/Control/Input", + "Game/Config/Settings" ], -function (Parent, Settings, Nc) { +function (Parent, Settings) { function GamepadInput(playerController) { this.playerController = playerController; @@ -36,7 +35,7 @@ function (Parent, Settings, Nc) { var y = -this.gamepad.axes[3]; // Looking direction - this.playerController.xyInput.onXyChange(x, y); + this.onXyChange(x, y); // Pointer finger holding item var holdingPressure = this.gamepad.axes[5]; diff --git a/app/Game/Client/Control/Inputs/KeyboardAndMouse.js b/app/Game/Client/Control/Inputs/KeyboardAndMouse.js new file mode 100644 index 0000000..41f555a --- /dev/null +++ b/app/Game/Client/Control/Inputs/KeyboardAndMouse.js @@ -0,0 +1,162 @@ +define([ + "Game/Client/Control/Input", + "Game/Client/Control/KeyboardInput", + "Game/Client/View/DomController", + "Game/Config/Settings", +], + +function (Parent, KeyboardInput, DomController, Settings) { + + function KeyboardAndMouse(playerController) { + Parent.call(this); + + this.x = 0; + this.y = 0; + + this.playerController = playerController; + this.keyboardInit(); + this.mouseInit(); + } + + KeyboardAndMouse.prototype = Object.create(Parent.prototype); + + KeyboardAndMouse.prototype.keyboardInit = function() { + + this.keyboardInput = new KeyboardInput(this.playerController); + + var keys = { + w:87, + a:65, + s:83, + d:68, + + f:70, + g:71, + k:75, + + up: 38, + left: 37, + down: 40, + right: 39, + + space: 32, + + tab: 9, + + plus: 187, + plusfx: 171, + minus: 189, + minusfx: 173, + zero: 48 + } + + this.keyboardInput.registerKey(keys.a, 'moveLeft', 'stop'); + this.keyboardInput.registerKey(keys.left, 'moveLeft', 'stop'); + + this.keyboardInput.registerKey(keys.d, 'moveRight', 'stop'); + this.keyboardInput.registerKey(keys.right, 'moveRight', 'stop'); + + this.keyboardInput.registerKey(keys.w, 'jump', 'jumpStop'); + this.keyboardInput.registerKey(keys.up, 'jump', 'jumpStop'); + this.keyboardInput.registerKey(keys.space, 'jump', 'jumpStop'); + + this.keyboardInput.registerKey(keys.plus, 'zoomIn'); + this.keyboardInput.registerKey(keys.plusfx, 'zoomIn'); + this.keyboardInput.registerKey(keys.minus, 'zoomOut'); + this.keyboardInput.registerKey(keys.minusfx, 'zoomOut'); + this.keyboardInput.registerKey(keys.zero, 'zoomReset'); + + this.keyboardInput.registerKey(keys.tab, 'showInfo', 'hideInfo'); + + this.keyboardInput.registerKey(keys.f, 'handActionLeft'); + this.keyboardInput.registerKey(keys.g, 'handActionRight'); + + this.keyboardInput.registerKey(keys.k, 'suicide'); + }; + + KeyboardAndMouse.prototype.mouseInit = function() { + + var canvas = DomController.getCanvas(); + var self = this; + + canvas.onmousemove = function(e){ + + // -1 +1 +1 +1 xy scaling should + // -1 -1 +1 -1 be like this + + var movementX = e.movementX || + e.mozMovementX || + e.webkitMovementX || + 0; + + var movementY = e.movementY || + e.mozMovementY || + e.webkitMovementY || + 0; + + self.x += movementX / Settings.VIEWPORT_SPEED_FACTOR; + if(self.x > 1) { + self.x = 1; + } + if(self.x < -1) { + self.x = -1; + }; + + self.y -= movementY / Settings.VIEWPORT_SPEED_FACTOR; + if(self.y > 1) { + self.y = 1; + } + if(self.y < -1) { + self.y = -1; + } + + self.onXyChange(self.x, self.y); + } + + canvas.onmousedown = function(e) { + + var x = (((e.clientX - this.offsetLeft) / Settings.STAGE_WIDTH) * 2) - 1; + var y = (((Settings.STAGE_HEIGHT - (e.clientY - this.offsetTop)) / Settings.STAGE_HEIGHT) * 2) -1; + + self.playerController.handActionRequest(x, y); + } + }; + + KeyboardAndMouse.prototype.update = function(e) { + /* + var movementX = e.movementX || + e.mozMovementX || + e.webkitMovementX || + 0; + + var movementY = e.movementY || + e.mozMovementY || + e.webkitMovementY || + 0; + + //console.log(movementX, movementY); + + + this.x += movementX; + if(this.x > 1) { + this.x = 1; + } + if(this.x < -1) { + this.x = -1; + }; + + this.y += movementY; + if(this.y > 1) { + this.y = 1; + } + if(this.y < -1) { + this.y = -1; + } + + this.onXyChange(this.x, this.y); + */ + }; + + return KeyboardAndMouse; + +}); \ No newline at end of file diff --git a/app/Game/Client/Control/PlayerController.js b/app/Game/Client/Control/PlayerController.js index fbe1ca5..40dca1f 100755 --- a/app/Game/Client/Control/PlayerController.js +++ b/app/Game/Client/Control/PlayerController.js @@ -1,88 +1,31 @@ define([ "Game/Core/Control/PlayerController", - "Game/Client/Control/KeyboardInput", - "Game/Client/Control/Input/MouseInput", "Lib/Utilities/NotificationCenter", - "Game/Client/Control/Input/GamepadInput", + "Game/Client/Control/Inputs/KeyboardAndMouse", + "Game/Client/Control/Inputs/Gamepad", ], -function (Parent, KeyboardInput, MouseInput, Nc, GamepadInput) { +function (Parent, Nc, KeyboardAndMouse, Gamepad) { function PlayerController (me) { Parent.call(this, me); - this.keyboardInput = new KeyboardInput(this); - this.xyInput = new MouseInput(this); - this.gamepadInput = new GamepadInput(this); + this.keyboardAndMouse = new KeyboardAndMouse(this); + this.gamepad = new Gamepad(this); this.ncTokens = [ - Nc.on(Nc.ns.client.input.xy.change, this.setXY, this), - Nc.on(Nc.ns.client.input.handAction.request, this.handActionRequest, this) ]; - - var keys = { - w:87, - a:65, - s:83, - d:68, - - f:70, - g:71, - k:75, - - up: 38, - left: 37, - down: 40, - right: 39, - - space: 32, - - tab: 9, - - plus: 187, - plusfx: 171, - minus: 189, - minusfx: 173, - zero: 48 - } - - this.init(keys); } PlayerController.prototype = Object.create(Parent.prototype); PlayerController.prototype.update = function() { Parent.prototype.update.call(this); - this.gamepadInput.update(); + this.gamepad.update(); + this.keyboardAndMouse.update(); }; - PlayerController.prototype.init = function (keys) { - - this.keyboardInput.registerKey(keys.a, 'moveLeft', 'stop'); - this.keyboardInput.registerKey(keys.left, 'moveLeft', 'stop'); - - this.keyboardInput.registerKey(keys.d, 'moveRight', 'stop'); - this.keyboardInput.registerKey(keys.right, 'moveRight', 'stop'); - - this.keyboardInput.registerKey(keys.w, 'jump', 'jumpStop'); - this.keyboardInput.registerKey(keys.up, 'jump', 'jumpStop'); - this.keyboardInput.registerKey(keys.space, 'jump', 'jumpStop'); - - this.keyboardInput.registerKey(keys.plus, 'zoomIn'); - this.keyboardInput.registerKey(keys.plusfx, 'zoomIn'); - this.keyboardInput.registerKey(keys.minus, 'zoomOut'); - this.keyboardInput.registerKey(keys.minusfx, 'zoomOut'); - this.keyboardInput.registerKey(keys.zero, 'zoomReset'); - - this.keyboardInput.registerKey(keys.tab, 'showInfo', 'hideInfo'); - - this.keyboardInput.registerKey(keys.f, 'handActionLeft'); - this.keyboardInput.registerKey(keys.g, 'handActionRight'); - - this.keyboardInput.registerKey(keys.k, 'suicide'); - } - PlayerController.prototype.moveLeft = function () { Parent.prototype.moveLeft.call(this); Nc.trigger(Nc.ns.client.to.server.gameCommand.send, 'moveLeft'); diff --git a/app/Game/Client/Me.js b/app/Game/Client/Me.js index 5ee6e55..cfa6b15 100644 --- a/app/Game/Client/Me.js +++ b/app/Game/Client/Me.js @@ -9,6 +9,12 @@ function (Parent, Settings, Nc) { function Me(id, physicsEngine, user) { Parent.call(this, id, physicsEngine, user); + // View uses this to calculate center position + this.lookAtXY = { + x: 1, + y: 0 + } + this.lastServerPositionState = { p: { x: 0, @@ -21,6 +27,22 @@ function (Parent, Settings, Nc) { } Me.prototype = Object.create(Parent.prototype); + + Me.prototype.lookAt = function(x, y) { + this.lookAtXY = { + x: x, + y: y + } + + Parent.prototype.lookAt.call(this, x, y); + }; + + Me.prototype.getLookAt = function() { + return { + x: this.lookAtXY.x, + y: this.lookAtXY.y + }; + }; Me.prototype.setLastServerPositionState = function(update) { this.lastServerPositionState = update; diff --git a/app/Game/Client/View/Pixi/View.js b/app/Game/Client/View/Pixi/View.js index f6fc6f1..654b683 100755 --- a/app/Game/Client/View/Pixi/View.js +++ b/app/Game/Client/View/Pixi/View.js @@ -80,8 +80,9 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, Layer centerPosition.x += Settings.STAGE_WIDTH / 2; centerPosition.y += Settings.STAGE_HEIGHT / 2; - centerPosition.x -= this.me.playerController.xyInput.x * Settings.STAGE_WIDTH / 4; - centerPosition.y += this.me.playerController.xyInput.y * Settings.STAGE_HEIGHT / 4; + var lookAt = this.me.getLookAt(); + centerPosition.x -= lookAt.x * Settings.STAGE_WIDTH / 4; + centerPosition.y += lookAt.y * Settings.STAGE_HEIGHT / 4; return centerPosition; }; diff --git a/app/Game/Config/Settings.js b/app/Game/Config/Settings.js index a95a91f..1cb71ee 100755 --- a/app/Game/Config/Settings.js +++ b/app/Game/Config/Settings.js @@ -44,6 +44,7 @@ define(function() { RESPAWN_TIME: 5, HEALTH_DISPLAY_TIME: 2, RAGDOLL_DESTRUCTION_TIME: 20, + VIEWPORT_SPEED_FACTOR: 640, // restitution: bouncyness, friction: rubbing, density: mass TILE_FRICTION: 0.99, diff --git a/app/Lib/Utilities/RequestAnimFrame.js b/app/Lib/Utilities/RequestAnimFrame.js index 2c849c4..9baba2e 100755 --- a/app/Lib/Utilities/RequestAnimFrame.js +++ b/app/Lib/Utilities/RequestAnimFrame.js @@ -11,7 +11,6 @@ function (Settings) { } if (typeof window != 'undefined') { - return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || diff --git a/app/Menu/Menu.js b/app/Menu/Menu.js index f4954bb..2153055 100644 --- a/app/Menu/Menu.js +++ b/app/Menu/Menu.js @@ -357,6 +357,7 @@ function (ColorConverter, Exception) { clearInterval(instance.channelDestructionTimeout); } + requestPointerLock(); } } @@ -385,6 +386,19 @@ function (ColorConverter, Exception) { }); } } + + function requestPointerLock() { + + var c = $("#canvas"); + c.requestPointerLock = c.requestPointerLock || + c.mozRequestPointerLock || + c.webkitRequestPointerLock; + + // Ask the browser to lock the pointer) + c.requestPointerLock(); + } + + $("#canvas").onclick = requestPointerLock; return Menu;