added pointer locking and viewport moving

This commit is contained in:
Jeena 2014-12-06 20:20:49 +01:00
parent 072e984215
commit 6d9d02615a
12 changed files with 236 additions and 141 deletions

View file

@ -18,8 +18,8 @@ function () {
} }
AudioPlayer.prototype.play = function() { AudioPlayer.prototype.play = function() {
this.audio.play(); //this.audio.play();
this.doPlay = true; //this.doPlay = true;
} }
AudioPlayer.prototype.stop = function() { AudioPlayer.prototype.stop = function() {

View file

@ -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;
});

View file

@ -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;
});

View file

@ -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;
});

View file

@ -1,10 +1,9 @@
define([ define([
"Game/Client/Control/Input/XyInput", "Game/Client/Control/Input",
"Game/Config/Settings", "Game/Config/Settings"
"Lib/Utilities/NotificationCenter"
], ],
function (Parent, Settings, Nc) { function (Parent, Settings) {
function GamepadInput(playerController) { function GamepadInput(playerController) {
this.playerController = playerController; this.playerController = playerController;
@ -36,7 +35,7 @@ function (Parent, Settings, Nc) {
var y = -this.gamepad.axes[3]; var y = -this.gamepad.axes[3];
// Looking direction // Looking direction
this.playerController.xyInput.onXyChange(x, y); this.onXyChange(x, y);
// Pointer finger holding item // Pointer finger holding item
var holdingPressure = this.gamepad.axes[5]; var holdingPressure = this.gamepad.axes[5];

View file

@ -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;
});

View file

@ -1,88 +1,31 @@
define([ define([
"Game/Core/Control/PlayerController", "Game/Core/Control/PlayerController",
"Game/Client/Control/KeyboardInput",
"Game/Client/Control/Input/MouseInput",
"Lib/Utilities/NotificationCenter", "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) { function PlayerController (me) {
Parent.call(this, me); Parent.call(this, me);
this.keyboardInput = new KeyboardInput(this); this.keyboardAndMouse = new KeyboardAndMouse(this);
this.xyInput = new MouseInput(this); this.gamepad = new Gamepad(this);
this.gamepadInput = new GamepadInput(this);
this.ncTokens = [ 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 = Object.create(Parent.prototype);
PlayerController.prototype.update = function() { PlayerController.prototype.update = function() {
Parent.prototype.update.call(this); 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 () { PlayerController.prototype.moveLeft = function () {
Parent.prototype.moveLeft.call(this); Parent.prototype.moveLeft.call(this);
Nc.trigger(Nc.ns.client.to.server.gameCommand.send, 'moveLeft'); Nc.trigger(Nc.ns.client.to.server.gameCommand.send, 'moveLeft');

View file

@ -9,6 +9,12 @@ function (Parent, Settings, Nc) {
function Me(id, physicsEngine, user) { function Me(id, physicsEngine, user) {
Parent.call(this, id, physicsEngine, user); Parent.call(this, id, physicsEngine, user);
// View uses this to calculate center position
this.lookAtXY = {
x: 1,
y: 0
}
this.lastServerPositionState = { this.lastServerPositionState = {
p: { p: {
x: 0, x: 0,
@ -22,6 +28,22 @@ function (Parent, Settings, Nc) {
Me.prototype = Object.create(Parent.prototype); 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) { Me.prototype.setLastServerPositionState = function(update) {
this.lastServerPositionState = update; this.lastServerPositionState = update;
}; };

View file

@ -80,8 +80,9 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, Layer
centerPosition.x += Settings.STAGE_WIDTH / 2; centerPosition.x += Settings.STAGE_WIDTH / 2;
centerPosition.y += Settings.STAGE_HEIGHT / 2; centerPosition.y += Settings.STAGE_HEIGHT / 2;
centerPosition.x -= this.me.playerController.xyInput.x * Settings.STAGE_WIDTH / 4; var lookAt = this.me.getLookAt();
centerPosition.y += this.me.playerController.xyInput.y * Settings.STAGE_HEIGHT / 4; centerPosition.x -= lookAt.x * Settings.STAGE_WIDTH / 4;
centerPosition.y += lookAt.y * Settings.STAGE_HEIGHT / 4;
return centerPosition; return centerPosition;
}; };

View file

@ -44,6 +44,7 @@ define(function() {
RESPAWN_TIME: 5, RESPAWN_TIME: 5,
HEALTH_DISPLAY_TIME: 2, HEALTH_DISPLAY_TIME: 2,
RAGDOLL_DESTRUCTION_TIME: 20, RAGDOLL_DESTRUCTION_TIME: 20,
VIEWPORT_SPEED_FACTOR: 640,
// restitution: bouncyness, friction: rubbing, density: mass // restitution: bouncyness, friction: rubbing, density: mass
TILE_FRICTION: 0.99, TILE_FRICTION: 0.99,

View file

@ -11,7 +11,6 @@ function (Settings) {
} }
if (typeof window != 'undefined') { if (typeof window != 'undefined') {
return window.requestAnimationFrame || return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame || window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame || window.mozRequestAnimationFrame ||

View file

@ -357,6 +357,7 @@ function (ColorConverter, Exception) {
clearInterval(instance.channelDestructionTimeout); clearInterval(instance.channelDestructionTimeout);
} }
requestPointerLock();
} }
} }
@ -386,6 +387,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; return Menu;
}); });