- Adds portrait support (closes #15)

Author: richard-splashworks

README.md

@@ -34,8 +34,9 @@
   - Automatic template background
   - Sets up the size the game so that it is scaled only when absolutely necessary
   - Refer to src/utils/utils.ts for an explanation on the background_template and the sizing/scaling style
+  - Landscape and Portrait support
 
-### TODO:
+### TODO (in no particular order):
 
 - Clean up generateAssetsClass.js
 - Get Custom/Local Web Fonts hashed by Webpack (to avoid cache issues)
@@ -214,7 +215,9 @@ Run the following specifying some or all of the options;
 
 **The '--' after setupGameSize is not a mistake; it is required to pass arguments along to the script.**
 
-You can either provide the width **and** height (defaults 800 and 500 respectively) and as long as they result in an aspect ratio of what's set in the script or by --aspect-ratio (default 1.6 or 16:10), or you can provide the width **or** height and the one you didn't provide will be calculated for you.
+You can either provide the width **and** height (defaults 800 and 500 respectively) and as long as they result in an aspect ratio of what's set in the script or by --aspect-ratio, or you can provide the width **or** height and the one you didn't provide will be calculated for you using the aspect ratio of what's set in the script or by --aspect-ratio.
+
+Provide --aspect-ratio to change the desired aspect ratio (default 1.6 or 16:10). The script checks to make sure the width and height match the aspect ratio so you get warned early about an incorrect dimension (maximum precision of 3 decimal places).
 
 Providing --scale-mode will set this.game.scale.scaleMode to the corresponding Phaser.ScaleManager.SCALE_MODE (default USER_SCALE).
 

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "phaser-npm-webpack-typescript-starter-project",
   "productName": "phaser-npm-webpack-typescript-starter-project",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "main": "electron-main.js",
   "scripts": {
     "webpack:dev": "webpack --config webpack.dev.config.js --progress --colors",
@@ -41,6 +41,7 @@
     "expose-loader": "^0.7.5",
     "file-loader": "^2.0.0",
     "html-webpack-plugin": "^3.2.0",
+    "imagejs": "^0.0.9",
     "npm-check": "^5.9.0",
     "phaser-ce": "^2.11.1",
     "pngjs-image": "^0.11.7",

package.json

@@ -1,7 +1,9 @@
 var PNGImage = require('pngjs-image');
+var ImageJS = require('imagejs');
 var commander = require('commander');
 var shell = require('shelljs');
 
+var filename = './assets/images/background_template.png';
 var defaultWidth = 800;
 var defaultHeight = 500;
 var defaultAspectRatio = 1.6;
@@ -29,6 +31,8 @@ var baseWidth = Math.round(commander.width);
 var baseHeight = Math.round(commander.height);
 var maxWidth = baseWidth;
 var maxHeight = baseHeight;
+var midHeight = -1;
+var isPortrait = false;
 var scaleMode = commander.scaleMode;
 
 if (scaleMode === null) {
@@ -58,22 +62,45 @@ if (scaleMode === 'USER_SCALE') {
         baseWidth = Math.round(baseHeight * aspectRatio);
     } else if (baseHeight === -1) {
         baseHeight = Math.round(baseWidth / aspectRatio);
-    } else if (baseWidth < baseHeight) {
+    } 
+    
+    if (baseWidth < baseHeight) {
         var temp = baseHeight;
         baseHeight = baseWidth;
         baseWidth = temp;
+
+        isPortrait = true;
     }
 
-    var providedAspectRatio = parseFloat((baseWidth / baseHeight).toFixed(2));
+    var providedAspectRatio = parseFloat((baseWidth / baseHeight).toFixed(3));
+    if (aspectRatio < 1) {
+        aspectRatio = parseFloat((baseWidth / baseHeight).toFixed(3));
+    }
     if (providedAspectRatio !== aspectRatio) {
         throw 'Base width and height must result in a ' + aspectRatio + ' aspect ratio (width / height).\nYou only need to provide either width or height and the other will be calculated for you.';
     }
 
+    var iPhone4Resolution = {
+        width: 960,
+        height: 640
+    };
+    
+    var iPhone5Resolution = {
+        width: 1136,
+        height: 640
+    }
+
+    var iPadResolution = {
+        width: 1024,
+        height: 768
+    }
+
     // Calculated based of the long and narrow (aspect ratio wise) iOS device, the iPhone 5 (1136 x 640)
-    maxWidth = Math.round(1136 * (baseHeight / 640));
+    maxWidth = Math.round(iPhone5Resolution.width * (baseHeight / iPhone5Resolution.height));
     // Calculated based of the short and wide (aspect ratio wise) iOS device, the iPad (1024 x 768)
-    maxHeight = Math.round(768 * (baseWidth / 1024));
-    var midHeight = Math.round(640 * (baseWidth / 960));
+    maxHeight = Math.round(iPadResolution.height * (baseWidth / iPadResolution.width));
+    // Calculated based of the middle (aspect ratio wise) iOS device, the iPhone 4 (960 x 640)
+    midHeight = Math.round(iPhone4Resolution.height * (baseWidth / iPhone4Resolution.width));
 
     image = PNGImage.createImage(maxWidth, maxHeight);
 
@@ -112,10 +139,31 @@ if (scaleMode === 'USER_SCALE') {
         maxHeight = baseHeight;
     }
 
+    if (baseWidth < baseHeight) {
+        var temp = baseHeight;
+        baseHeight = baseWidth;
+        baseWidth = temp;
+
+        maxWidth = baseWidth;
+        maxHeight = baseHeight;
+
+        isPortrait = true;
+    }
+
     image = PNGImage.createImage(maxWidth, maxHeight);
     image.fillRect(0, 0, maxWidth, maxHeight, greenColor);
 }
 
+if (isPortrait) {
+    var temp = baseHeight;
+    baseHeight = baseWidth;
+    baseWidth = temp;
+
+    var temp = maxHeight;
+    maxHeight = maxWidth;
+    maxWidth = temp;
+}
+
 shell.ls('webpack.*.config.js').forEach(function (file) {
     shell.sed('-i', /\/\*\[\[DEFAULT_GAME_WIDTH\*\/\S*\/\*DEFAULT_GAME_WIDTH\]\]\*\//, '/*[[DEFAULT_GAME_WIDTH*/' + baseWidth + '/*DEFAULT_GAME_WIDTH]]*/', file);
     shell.sed('-i', /\/\*\[\[DEFAULT_GAME_HEIGHT\*\/\S*\/\*DEFAULT_GAME_HEIGHT\]\]\*\//, '/*[[DEFAULT_GAME_HEIGHT*/' + baseHeight + '/*DEFAULT_GAME_HEIGHT]]*/', file);
@@ -132,9 +180,13 @@ shell.ls('electron-main.js').forEach(function (file) {
 if (!commander.noPng) {
     shell.mkdir('-p', 'assets/images/');
 
-    image.writeImage('./assets/images/background_template.png', function (error) {
-        if (error) {
-            throw error;
+    image.writeImage(filename, function (error) {
+        if (!error && isPortrait) {
+            var bitmap = new ImageJS.Bitmap();
+            bitmap.readFile(filename).then(function() {
+                var rotatedBitmap = bitmap.rotate({ degrees: 90, fit: "custom", width: maxWidth, height: maxHeight });
+                rotatedBitmap.writeFile(filename);
+            });
         }
     });
 }

scripts/setupGameSize.js

@@ -27,7 +27,7 @@ function startApp(): void {
     let gameHeight: number = DEFAULT_GAME_HEIGHT;
 
     if (SCALE_MODE === 'USER_SCALE') {
-        let screenMetrics: Utils.ScreenMetrics = Utils.ScreenUtils.calculateScreenMetrics(gameWidth, gameHeight);
+        let screenMetrics: Utils.ScreenMetrics = Utils.ScreenUtils.calculateScreenMetrics(gameWidth, gameHeight, MAX_GAME_WIDTH, MAX_GAME_HEIGHT);
 
         gameWidth = screenMetrics.gameWidth;
         gameHeight = screenMetrics.gameHeight;

src/app.ts

@@ -30,10 +30,6 @@ export default class Boot extends Phaser.State {
             // Any desktop specific stuff here
         } else {
             // Any mobile specific stuff here
-
-            // Comment the following and uncomment the line after that to force portrait mode instead of landscape
-            this.game.scale.forceOrientation(true, false);
-            // this.game.scale.forceOrientation(false, true);
         }
 
         // Use DEBUG to wrap code that should only be included in a DEBUG build of the game

src/states/boot.ts

@@ -36,12 +36,12 @@ export class ScreenMetrics {
 export class ScreenUtils {
     public static screenMetrics: ScreenMetrics;
 
-    public static calculateScreenMetrics(defaultWidth: number, defaultHeight: number, orientation: ScreenOrientation = ScreenOrientation.LANDSCAPE, maxGameWidth?: number, maxGameHeight?: number): ScreenMetrics {
+    public static calculateScreenMetrics(defaultWidth: number, defaultHeight: number, maxGameWidth?: number, maxGameHeight?: number): ScreenMetrics {
         // Just to give some explanation as to the numbers and colors in the included background;
         // The GREEN is the safe area and will be displayed fully on any device and is based on 16:10 aspect ratio, build your actual gameplay here
         // The YELLOW is the extra area that will be visible on devices with a 3:2 aspect ratio (iPhone 4S and below)
-        // The BLUE is the extra area that will be visible on devices with a 4:3 aspect ratio (iPads)
-        // The RED is the extra area that will be visible on devices with a 16:9 aspect ratio (iPhone 5 and above) (this is probably the most common ratio overall...)
+        // The RED is the extra area that will be visible on devices with a 4:3 aspect ratio (iPads)
+        // The BLUE is the extra area that will be visible on devices with a 16:9 aspect ratio (iPhone 5 and above) (this is probably the most common ratio overall...)
         // The GREY area will most likely never be seen, unless some device has a really odd aspect ratio (and with Android, I wouldn't be surprised if there is a few out there)
 
         this.screenMetrics = new ScreenMetrics();
@@ -52,6 +52,8 @@ export class ScreenUtils {
         this.screenMetrics.defaultGameWidth = defaultWidth;
         this.screenMetrics.defaultGameHeight = defaultHeight;
 
+        let orientation: ScreenOrientation = ((this.screenMetrics.defaultGameWidth < this.screenMetrics.defaultGameHeight) ? ScreenOrientation.PORTRAIT : ScreenOrientation.LANDSCAPE);
+
         // Swap width and height if necessary to match the specified orientation
         let dimensionsOppositeForLandscape: boolean = ((this.screenMetrics.windowWidth < this.screenMetrics.windowHeight) && orientation === ScreenOrientation.LANDSCAPE);
         let dimensionsOppositeForPortrait: boolean = ((this.screenMetrics.windowHeight < this.screenMetrics.windowWidth) && orientation === ScreenOrientation.PORTRAIT);
@@ -62,19 +64,14 @@ export class ScreenUtils {
 
         // Calculate the max width and max height if not provided; ratios are based off iPad (4:3) and iPhone 5+ (16:9) as the extremes in both width and height
         if (!maxGameWidth || !maxGameHeight) {
-            if (orientation === ScreenOrientation.LANDSCAPE) {
-                this.screenMetrics.maxGameWidth = Math.round(this.screenMetrics.defaultGameWidth * (MAX_GAME_WIDTH / DEFAULT_GAME_WIDTH));
-                this.screenMetrics.maxGameHeight = Math.round(this.screenMetrics.defaultGameHeight * (MAX_GAME_HEIGHT / DEFAULT_GAME_HEIGHT));
-            } else {
-                this.screenMetrics.maxGameWidth = Math.round(this.screenMetrics.defaultGameWidth * (MAX_GAME_HEIGHT / DEFAULT_GAME_HEIGHT));
-                this.screenMetrics.maxGameHeight = Math.round(this.screenMetrics.defaultGameHeight * (MAX_GAME_WIDTH / DEFAULT_GAME_WIDTH));
-            }
+            this.screenMetrics.maxGameWidth = Math.round(this.screenMetrics.defaultGameWidth * (MAX_GAME_WIDTH / DEFAULT_GAME_WIDTH));
+            this.screenMetrics.maxGameHeight = Math.round(this.screenMetrics.defaultGameHeight * (MAX_GAME_HEIGHT / DEFAULT_GAME_HEIGHT));
         } else {
             this.screenMetrics.maxGameWidth = maxGameWidth;
             this.screenMetrics.maxGameHeight = maxGameHeight;
         }
 
-        let defaultAspectRatio: number = ((orientation === ScreenOrientation.LANDSCAPE) ? (DEFAULT_GAME_WIDTH / DEFAULT_GAME_HEIGHT) : (DEFAULT_GAME_HEIGHT / DEFAULT_GAME_WIDTH));
+        let defaultAspectRatio: number = (DEFAULT_GAME_WIDTH / DEFAULT_GAME_HEIGHT);
         let windowAspectRatio: number = (this.screenMetrics.windowWidth / this.screenMetrics.windowHeight);
 
         if (windowAspectRatio > defaultAspectRatio) {