Properish gamepad implementation and more work on fullscreen mode

This commit is contained in:
Nathan Kunicki 2016-03-09 12:11:24 -06:00
parent 483ea7cc54
commit a7cce2157c
4 changed files with 127 additions and 46 deletions

View File

@ -3,19 +3,6 @@
<head> <head>
<title>Pong - MomentumEngine</title> <title>Pong - MomentumEngine</title>
<script type="application/javascript" src="./dist/pong.js"></script> <script type="application/javascript" src="./dist/pong.js"></script>
<style>
#canvas:-webkit-full-screen {
width: 100% !important;
height: 100% !important;
}
#canvas:fullscreen {
width: 100% !important;
height: 100% !important;
}
</style>
</head> </head>
<body> <body>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>

View File

@ -167,7 +167,6 @@ class Pong extends MomentumEngine.Classes.Game {
paddle.balls = this.balls; paddle.balls = this.balls;
} }
} }

View File

@ -39,6 +39,10 @@ class Game extends Entity {
// Optional params // Optional params
this.desiredFps = config.desiredFps || 60; this.desiredFps = config.desiredFps || 60;
this.rescaleOnFullScreen = !!config.rescaleOnFullScreen;
this.scale = 1;
if (config.fixRatio) { if (config.fixRatio) {
let deviceRatio = window.devicePixelRatio, let deviceRatio = window.devicePixelRatio,
@ -107,6 +111,7 @@ class Game extends Entity {
this._lastFrameTimestamp = 0; this._lastFrameTimestamp = 0;
this._lastFrameTotalRenders = 0; this._lastFrameTotalRenders = 0;
this._wantPause = true; this._wantPause = true;
this._fullScreenLastFrame = false;
} }
@ -135,8 +140,60 @@ class Game extends Entity {
this.frameCounter++; this.frameCounter++;
this._frameMaintenance();
this._updateEntity(delta); this._updateEntity(delta);
this._renderEntity(); this._renderEntity();
this._updateInputs(); // NK: This happens at the end for reasons
}
_updateInputs () {
for (let input in this.inputs) {
if (this.inputs[input].update) {
this.inputs[input].update();
}
}
}
_frameMaintenance () {
if (this.isFullScreen) {
if (this._fullScreenLastFrame == false) {
this.canvas.style.width = `${screen.width}px`;
this.canvas.style.height = `${screen.height}px`;
if (this.rescaleOnFullScreen) {
this.canvas.width = screen.width * this.scale;
this.canvas.height = screen.height * this.scale;
}
}
this._fullScreenLastFrame = true;
} else {
if (this._fullScreenLastFrame == true) {
this.canvas.style.width = `${this.width}px`;
this.canvas.style.height = `${this.height}px`;
if (this.rescaleOnFullScreen) {
this.canvas.width = this.width * this.scale;
this.canvas.height = this.height * this.scale;
}
}
this._fullScreenLastFrame = false;
}
} }
@ -229,7 +286,7 @@ class Game extends Entity {
get isFullScreen () { get isFullScreen () {
return (!document.mozFullScreen && !document.webkitFullScreen); return document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
} }

View File

@ -27,7 +27,7 @@ class Gamepad {
getAxis (axisId) { getAxis (axisId) {
if (this._gamepadObj.axes[axisId]) { if (typeof this._gamepadObj.axes[axisId] !== "undefined") {
return this._gamepadObj.axes[axisId]; return this._gamepadObj.axes[axisId];
} else { } else {
throw new Error(`Axis ${axisId} not found on gamepad`); throw new Error(`Axis ${axisId} not found on gamepad`);
@ -48,35 +48,7 @@ class GamepadInput {
self._gamepadState = {}; self._gamepadState = {};
self.gamepadIds = []; self.gamepadIds = [];
if (!("ongamepadconnected" in window)) { if ('ongamepadconnected' in window) {
let pollGamepads = function () {
let gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
for (var i = 0; i < gamepads.length; i++) {
let gamepad = gamepads[i];
if (gamepad) {
if (self.gamepadIds.indexOf(gamepad.index) < 0) {
self._gamepadState[gamepad.index] = new Gamepad(gamepad);
self.gamepadIds.push(gamepad.index);
console.log(`Gamepad ${gamepad.index} connected`);
}
}
}
};
let interval = setInterval(pollGamepads, 5);
} else {
window.addEventListener("gamepadconnected", (event) => { window.addEventListener("gamepadconnected", (event) => {
self._gamepadState[event.gamepad.index] = new Gamepad(event.gamepad); self._gamepadState[event.gamepad.index] = new Gamepad(event.gamepad);
@ -87,7 +59,7 @@ class GamepadInput {
window.addEventListener("gamepaddisconnected", (event) => { window.addEventListener("gamepaddisconnected", (event) => {
delete self._gamepadState[event.gamepad.index]; delete self._gamepadState[event.gamepad.index];
self.gamepadIds.splice(self.gamepadIds.indexOf(event.gamepad.index)); self.gamepadIds.splice(self.gamepadIds.indexOf(event.gamepad.index));
console.log(`Gamepad ${event.gamepad.index} connected`); console.log(`Gamepad ${event.gamepad.index} disconnected`);
}); });
} }
@ -95,6 +67,72 @@ class GamepadInput {
} }
update () {
if (!("ongamepadconnected" in window)) {
let gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
// If there are more gamepads registered than we know about, make ourselves aware of the new ones
if (gamepads.length != this.gamepadIds.length) {
for (let i = 0; i < gamepads.length; i++) {
let gamepad = gamepads[i];
if (gamepad) {
if (this.gamepadIds.indexOf(gamepad.index) < 0) {
this._gamepadState[gamepad.index] = new Gamepad(gamepad);
this.gamepadIds.push(gamepad.index);
console.log(`Gamepad ${gamepad.index} connected`);
}
}
}
// If there is still a mismatch, then we assume some gamepads have been disconnected, so we need to remove them
if (gamepads.length != this.gamepadIds.length) {
for (let i = 0; i < this.gamepadIds.length; i++) {
let found = false;
for (let j = 0; j < gamepads.length; j++) {
let gamepad = gamepads[i];
if (gamepad && gamepad.index == this.gamepadIds[i]) {
found = true;
}
}
if (!found) {
console.log(`Gamepad ${this.gamepadIds[i]} disconnected`);
delete this._gamepadState[this.gamepadIds[i]];
this.gamepadIds.splice(this.gamepadIds.indexOf(this.gamepadIds[i]));
i--;
}
}
}
}
}
}
get numGamepads () { get numGamepads () {
return this.gamepadIds.length; return this.gamepadIds.length;
} }