mirror of
https://github.com/logsol/chuck.js.git
synced 2026-05-11 10:37:34 +00:00
added pointer locking and viewport moving
This commit is contained in:
parent
072e984215
commit
6d9d02615a
12 changed files with 236 additions and 141 deletions
|
|
@ -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() {
|
||||||
|
|
|
||||||
21
app/Game/Client/Control/Input.js
Executable file
21
app/Game/Client/Control/Input.js
Executable 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;
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -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;
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
@ -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];
|
||||||
162
app/Game/Client/Control/Inputs/KeyboardAndMouse.js
Normal file
162
app/Game/Client/Control/Inputs/KeyboardAndMouse.js
Normal 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;
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -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');
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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 ||
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
||||||
});
|
});
|
||||||
Loading…
Add table
Add a link
Reference in a new issue