A little more fullscreen work for native res and aspect ratios - NOTE: Do not enable at this time

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

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

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.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;

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;

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;
 

src/classes/vector2d.js

@@ -112,7 +112,7 @@ class Vector2D {
 
 
     toString () {
-        return `[${this.x}},${this.y}}]`;
+        return `[${this.x},${this.y}]`;
     }
 
 

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,

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,