From 26929f37d8a2783a3b9872961f003af1c46c3c52 Mon Sep 17 00:00:00 2001 From: Nathan Kunicki Date: Wed, 9 Mar 2016 16:26:40 -0600 Subject: [PATCH] A little more fullscreen work for native res and aspect ratios - NOTE: Do not enable at this time --- examples/pong/pong.js | 5 ++++ src/classes/entity.js | 55 +++++++++++++++++++++++++++++++++++++- src/classes/game.js | 59 +++++++++++++++++++++++++++++++++-------- src/classes/path.js | 57 +++++++++++++++++++++++++++++++++++++++ src/classes/rect.js | 2 +- src/classes/vector2d.js | 2 +- src/es5.js | 2 ++ src/es6.js | 2 ++ 8 files changed, 170 insertions(+), 14 deletions(-) create mode 100644 src/classes/path.js diff --git a/examples/pong/pong.js b/examples/pong/pong.js index 3f77659..4845a09 100644 --- a/examples/pong/pong.js +++ b/examples/pong/pong.js @@ -128,6 +128,11 @@ class Pong extends MomentumEngine.Classes.Game { height: height, fixRatio: true, desiredFps: 60, + //fixFrameRate: true, + fullscreen: { + //nativeResolution: true, + //maintainAspectRatio: true + }, inputs: { keyboard: true, gamepad: true diff --git a/src/classes/entity.js b/src/classes/entity.js index 99ca7b5..d5344c5 100644 --- a/src/classes/entity.js +++ b/src/classes/entity.js @@ -179,6 +179,60 @@ class Entity { } + _scaleForLeft (val) { + + let game = this._game; + + if (!game.isFullScreen) { + return val; + } else { + return (game._fullScreenXPos + (val * game._fullScreenXScaling)); + } + + } + + + _scaleForWidth (val) { + + let game = this._game; + + if (!game.isFullScreen) { + return val; + } else { + return (val * game._fullScreenXScaling); + + } + + } + + + _scaleForTop (val) { + + let game = this._game; + + if (!game.isFullScreen) { + return val; + } else { + return (game._fullScreenYPos + (val * game._fullScreenYScaling)); + } + + } + + + _scaleForHeight (val) { + + let game = this._game; + + if (!game.isFullScreen) { + return val; + } else { + return (val * game._fullScreenYScaling); + + } + + } + + _calculateFields (delta) { let acceleration = new Vector2D(0, 0); @@ -216,7 +270,6 @@ class Entity { if (this.velocity && (this.velocity.x !== 0 || this.velocity.y !== 0)) { this.velocity.add(this._calculateFields(delta)); - //this.pos.add(this.velocity.clone().multiply(delta)); this.pos.x += (this.velocity.x * delta); this.pos.y += (this.velocity.y * delta); diff --git a/src/classes/game.js b/src/classes/game.js index 116e5c7..d9989c6 100644 --- a/src/classes/game.js +++ b/src/classes/game.js @@ -13,6 +13,7 @@ class Game extends Entity { super(); // Call entity constructor config = config || {}; + config.fullscreen = config.fullscreen || {}; config.inputs = config.inputs || {}; @@ -35,13 +36,13 @@ class Game extends Entity { throw new Error("MomentumEngine.Classes.Game must be constructed with canvas height"); } + this.scale = 1; // Optional params this.desiredFps = config.desiredFps || 60; + this.fixFrameRate = !!config.fixFrameRate; - this.rescaleOnFullScreen = !!config.rescaleOnFullScreen; - - this.scale = 1; + this.fullScreenNativeResolution = !!config.fullscreen.nativeResolution; if (config.fixRatio) { @@ -64,6 +65,7 @@ class Game extends Entity { } this.scale = deviceRatio / backingStoreRatio; + this._deviceRatio = deviceRatio; this.canvas.width = this.width * this.scale; this.canvas.height = this.height * this.scale; @@ -71,12 +73,42 @@ class Game extends Entity { this.canvas.style.width = `${this.width}px`; this.canvas.style.height = `${this.height}px`; + + // Calculate fullscreen settings + + if (config.fullscreen.nativeResolution) { + this._fullScreenXScaling = screen.width / this.width; + this._fullScreenYScaling = screen.height / this.height; + } else { + this._fullScreenXScaling = 1; + this._fullScreenYScaling = 1; + } + + this._fullScreenXPos = 0; + this._fullScreenYPos = 0; + + if (config.fullscreen.maintainAspectRatio) { + if (this._fullScreenXScaling > this._fullScreenYScaling) { + this._fullScreenXScaling = this._fullScreenYScaling; + this._fullScreenXPos = (screen.width - (this.width * this._fullScreenXScaling)) / 2; + } else { + this._fullScreenYScaling = this._fullScreenXScaling; + this._fullScreenYPos = (screen.height - (this.height * this._fullScreenYScaling)) / 2; + } + } + + console.log(this._fullScreenXScaling); + console.log(this._fullScreenYScaling); + console.log(this._fullScreenXPos); + console.log(this._fullScreenYPos); + + // Call getContext last for Ejecta only. if (typeof ejecta !== "undefined") { this.context = this.canvas.getContext("2d"); } - this.context.scale(deviceRatio, deviceRatio); + this.context.scale(this._deviceRatio, this._deviceRatio); } else { @@ -140,7 +172,7 @@ class Game extends Entity { this.frameCounter++; - this._frameMaintenance(); + this._preStep(); this._updateEntity(delta); this._renderEntity(); this._updateInputs(); // NK: This happens at the end for reasons @@ -159,7 +191,7 @@ class Game extends Entity { } - _frameMaintenance () { + _preStep () { if (this.isFullScreen) { @@ -168,9 +200,10 @@ class Game extends Entity { this.canvas.style.width = `${screen.width}px`; this.canvas.style.height = `${screen.height}px`; - if (this.rescaleOnFullScreen) { + if (this.fullScreenNativeResolution) { this.canvas.width = screen.width * this.scale; this.canvas.height = screen.height * this.scale; + this.context.scale(this._deviceRatio, this._deviceRatio); } } @@ -184,10 +217,10 @@ class Game extends Entity { 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.canvas.width = this.width * this.scale; + this.canvas.height = this.height * this.scale; + + this.context.scale(this._deviceRatio, this._deviceRatio); } @@ -234,6 +267,10 @@ class Game extends Entity { let currentTimestamp = +(new Date()), delta = currentTimestamp - self._lastFrameTimestamp; + if (self.fixFrameRate) { + delta = 1000 / self.desiredFps; + } + //delta = Math.min(delta, 1000 / self.desiredFps); self._lastFrameTimestamp = currentTimestamp; self._lastFrameTotalRenders = 0; diff --git a/src/classes/path.js b/src/classes/path.js new file mode 100644 index 0000000..c26a8ba --- /dev/null +++ b/src/classes/path.js @@ -0,0 +1,57 @@ +"use strict"; + +import Entity from "./entity.js"; +import Vector2D from "./vector2d.js"; + +import CollisionMethods from "../libs/collisionmethods.js"; + + +class Path extends Entity { + + + constructor (x, y, width, height, color) { + + super(x, y); + + if (width instanceof Array) { + color = height; + this.coords = width; + } else { + this.coords = [new Vector2D(width, height)]; + } + + this.color = color; + + } + + + render () { + + if (this._game) { + + let ctx = this._game.context; + ctx.strokeStyle = this.color.toString(); + + ctx.beginPath(); + ctx.moveTo(this.relativeLeft, this.relativeTop); + + for (let coord in this.coords) { + ctx.lineTo(this.relativeLeft + this.coords[coord].x, this.relativeTop + this.coords[coord].y); + } + + //ctx.closePath(); + ctx.stroke(); + + return true; + + } else { + return false; + } + + } + + +} + + +export default Path; \ No newline at end of file diff --git a/src/classes/rect.js b/src/classes/rect.js index 2201a6f..f7d8a89 100644 --- a/src/classes/rect.js +++ b/src/classes/rect.js @@ -34,7 +34,7 @@ class Rect extends Entity { if (this._game) { this._game.context.fillStyle = this.color.toString(); - this._game.context.fillRect(this.relativeLeft, this.relativeTop, this.width, this.height); + this._game.context.fillRect(this._scaleForLeft(this.relativeLeft), this._scaleForTop(this.relativeTop), this._scaleForWidth(this.width), this._scaleForHeight(this.height)); return true; diff --git a/src/classes/vector2d.js b/src/classes/vector2d.js index 32309d8..30bd704 100644 --- a/src/classes/vector2d.js +++ b/src/classes/vector2d.js @@ -112,7 +112,7 @@ class Vector2D { toString () { - return `[${this.x}},${this.y}}]`; + return `[${this.x},${this.y}]`; } diff --git a/src/es5.js b/src/es5.js index a11319d..77ae0ea 100644 --- a/src/es5.js +++ b/src/es5.js @@ -7,6 +7,7 @@ import Entity from "./classes/entity.js"; import Vector2D from "./classes/vector2d.js"; import Sprite from "./classes/sprite.js"; import Rect from "./classes/rect.js"; +import Path from "./classes/path.js"; import Color from "./classes/color.js"; import Text from "./classes/text.js"; import Font from "./classes/font.js"; @@ -22,6 +23,7 @@ const Classes = { Entity, Sprite, Rect, + Path, Vector2D, Color, Text, diff --git a/src/es6.js b/src/es6.js index 33d906f..c4e9d4e 100644 --- a/src/es6.js +++ b/src/es6.js @@ -7,6 +7,7 @@ import Entity from "./classes/entity.js"; import Vector2D from "./classes/vector2d.js"; import Sprite from "./classes/sprite.js"; import Rect from "./classes/rect.js"; +import Path from "./classes/path.js"; import Color from "./classes/color.js"; import Text from "./classes/text.js"; import Font from "./classes/font.js"; @@ -22,6 +23,7 @@ const Classes = { Entity, Sprite, Rect, + Path, Vector2D, Color, Text,