Merging Scale Manager and Spine Plugin back into master

package.json

@@ -1,7 +1,7 @@
 {
   "name": "phaser",
-  "version": "3.15.1",
-  "release": "Batou",
+  "version": "3.16.0",
+  "release": "Ishikawa",
   "description": "A fast, free and fun HTML5 Game Framework for Desktop and Mobile web browsers.",
   "author": "Richard Davey <rich@photonstorm.com> (http://www.photonstorm.com)",
   "logo": "https://raw.github.com/photonstorm/phaser/master/phaser-logo-small.png",

plugins/spine/src/SpinePlugin.js

@@ -0,0 +1,102 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Class = require('../../../src/utils/Class');
+var BasePlugin = require('../../../src/plugins/BasePlugin');
+var Spine = require('./spine-canvas');
+
+/**
+ * @classdesc
+ * TODO
+ *
+ * @class SpinePlugin
+ * @constructor
+ *
+ * @param {Phaser.Scene} scene - The Scene to which this plugin is being installed.
+ * @param {Phaser.Plugins.PluginManager} pluginManager - A reference to the Phaser Plugin Manager.
+ */
+var SpinePlugin = new Class({
+
+    Extends: BasePlugin,
+
+    initialize:
+
+    function SpinePlugin (pluginManager)
+    {
+        // console.log('SpinePlugin enabled');
+
+        BasePlugin.call(this, pluginManager);
+
+        // this.skeletonRenderer = new Spine.canvas.SkeletonRenderer(this.game.context);
+
+        // console.log(this.skeletonRenderer);
+
+        // pluginManager.registerGameObject('sprite3D', this.sprite3DFactory, this.sprite3DCreator);
+    },
+
+    /**
+     * Creates a new Sprite3D Game Object and adds it to the Scene.
+     *
+     * @method Phaser.GameObjects.GameObjectFactory#sprite3D
+     * @since 3.0.0
+     * 
+     * @param {number} x - The horizontal position of this Game Object.
+     * @param {number} y - The vertical position of this Game Object.
+     * @param {number} z - The z position of this Game Object.
+     * @param {string} texture - The key of the Texture this Game Object will use to render with, as stored in the Texture Manager.
+     * @param {(string|integer)} [frame] - An optional frame from the Texture this Game Object is rendering with.
+     *
+     * @return {Phaser.GameObjects.Sprite3D} The Game Object that was created.
+     */
+    sprite3DFactory: function (x, y, z, key, frame)
+    {
+        // var sprite = new Sprite3D(this.scene, x, y, z, key, frame);
+
+        // this.displayList.add(sprite.gameObject);
+        // this.updateList.add(sprite.gameObject);
+
+        // return sprite;
+    },
+
+    /**
+     * The Scene that owns this plugin is shutting down.
+     * We need to kill and reset all internal properties as well as stop listening to Scene events.
+     *
+     * @method Camera3DPlugin#shutdown
+     * @private
+     * @since 3.0.0
+     */
+    shutdown: function ()
+    {
+        var eventEmitter = this.systems.events;
+
+        eventEmitter.off('update', this.update, this);
+        eventEmitter.off('shutdown', this.shutdown, this);
+
+        this.removeAll();
+    },
+
+    /**
+     * The Scene that owns this plugin is being destroyed.
+     * We need to shutdown and then kill off all external references.
+     *
+     * @method Camera3DPlugin#destroy
+     * @private
+     * @since 3.0.0
+     */
+    destroy: function ()
+    {
+        this.shutdown();
+
+        this.pluginManager = null;
+        this.game = null;
+        this.scene = null;
+        this.systems = null;
+    }
+
+});
+
+module.exports = SpinePlugin;

plugins/spine/webpack.config.js

@@ -0,0 +1,47 @@
+'use strict';
+
+const webpack = require('webpack');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+
+module.exports = {
+    mode: 'production',
+
+    context: `${__dirname}/src/`,
+
+    entry: {
+        spine: './SpinePlugin.js',
+        'spine.min': './SpinePlugin.js'
+    },
+
+    output: {
+        path: `${__dirname}/dist/`,
+        filename: '[name].js',
+        library: 'SpinePlugin',
+        libraryTarget: 'var'
+    },
+
+    performance: { hints: false },
+
+    optimization: {
+        minimizer: [
+            new UglifyJSPlugin({
+                include: /\.min\.js$/,
+                parallel: true,
+                sourceMap: false,
+                uglifyOptions: {
+                    compress: true,
+                    ie8: false,
+                    ecma: 5,
+                    output: {comments: false},
+                    warnings: false
+                },
+                warningsFilter: () => false
+            })
+        ]
+    },
+
+    plugins: [
+        new CleanWebpackPlugin([ 'dist' ])
+    ]
+};

src/boot/CreateRenderer.js

@@ -58,12 +58,12 @@ var CreateRenderer = function (game)
     {
         game.canvas = config.canvas;
 
-        game.canvas.width = game.config.width;
-        game.canvas.height = game.config.height;
+        game.canvas.width = game.scale.canvasWidth;
+        game.canvas.height = game.scale.canvasHeight;
     }
     else
     {
-        game.canvas = CanvasPool.create(game, config.width * config.resolution, config.height * config.resolution, config.renderType);
+        game.canvas = CanvasPool.create(game, game.scale.canvasWidth, game.scale.canvasHeight, config.renderType);
     }
 
     //  Does the game config provide some canvas css styles to use?
@@ -78,10 +78,6 @@ var CreateRenderer = function (game)
         CanvasInterpolation.setCrisp(game.canvas);
     }
 
-    //  Zoomed?
-    game.canvas.style.width = (config.width * config.zoom).toString() + 'px';
-    game.canvas.style.height = (config.height * config.zoom).toString() + 'px';
-
     if (config.renderType === CONST.HEADLESS)
     {
         //  Nothing more to do here

src/boot/Game.js

@@ -19,6 +19,7 @@ var EventEmitter = require('eventemitter3');
 var InputManager = require('../input/InputManager');
 var PluginCache = require('../plugins/PluginCache');
 var PluginManager = require('../plugins/PluginManager');
+var ScaleManager = require('../dom/ScaleManager');
 var SceneManager = require('../scene/SceneManager');
 var SoundManagerCreator = require('../sound/SoundManagerCreator');
 var TextureManager = require('../textures/TextureManager');
@@ -28,6 +29,7 @@ var VisibilityHandler = require('./VisibilityHandler');
 if (typeof EXPERIMENTAL)
 {
     var CreateDOMContainer = require('./CreateDOMContainer');
+    var SpinePlugin = require('../../plugins/spine/src/SpinePlugin');
 }
 
 if (typeof PLUGIN_FBINSTANT)
@@ -225,6 +227,17 @@ var Game = new Class({
          */
         this.device = Device;
 
+        /**
+         * An instance of the Scale Manager.
+         *
+         * The Scale Manager is a global system responsible for handling game scaling events.
+         *
+         * @name Phaser.Game#scale
+         * @type {Phaser.Boot.ScaleManager}
+         * @since 3.15.0
+         */
+        this.scale = new ScaleManager(this, this.config);
+
         /**
          * An instance of the base Sound Manager.
          *
@@ -363,6 +376,8 @@ var Game = new Class({
 
         this.config.preBoot(this);
 
+        this.scale.preBoot();
+
         CreateRenderer(this);
 
         if (typeof EXPERIMENTAL)
@@ -374,6 +389,12 @@ var Game = new Class({
 
         AddToDOM(this.canvas, this.config.parent);
 
+        if (typeof EXPERIMENTAL)
+        {
+            //  v8
+            new SpinePlugin(this.plugins);
+        }
+
         this.events.emit('boot');
 
         //  The Texture Manager has to wait on a couple of non-blocking events before it's fully ready.

src/const.js

@@ -20,7 +20,7 @@ var CONST = {
      * @type {string}
      * @since 3.0.0
      */
-    VERSION: '3.15.1',
+    VERSION: '3.16.0 Beta 1',
 
     BlendModes: require('./renderer/BlendModes'),
 

src/dom/Calibrate.js

@@ -0,0 +1,26 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Calibrate = function (coords, cushion)
+{
+    if (cushion === undefined) { cushion = 0; }
+
+    var output = {
+        width: 0,
+        height: 0,
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+    };
+
+    output.width = (output.right = coords.right + cushion) - (output.left = coords.left - cushion);
+    output.height = (output.bottom = coords.bottom + cushion) - (output.top = coords.top - cushion);
+
+    return output;
+};
+
+module.exports = Calibrate;

src/dom/ClientHeight.js

@@ -0,0 +1,12 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var ClientHeight = function ()
+{
+    return Math.max(window.innerHeight, document.documentElement.clientHeight);
+};
+
+module.exports = ClientHeight;

src/dom/ClientWidth.js

@@ -0,0 +1,12 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var ClientWidth = function ()
+{
+    return Math.max(window.innerWidth, document.documentElement.clientWidth);
+};
+
+module.exports = ClientWidth;

src/dom/DocumentBounds.js

@@ -0,0 +1,41 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Class = require('../utils/Class');
+var Rectangle = require('../geom/rectangle/Rectangle');
+
+var DocumentBounds = new Class({
+
+    Extends: Rectangle,
+
+    initialize:
+
+    function DocumentBounds ()
+    {
+        Rectangle.call(this);
+    },
+
+    width: {
+        get: function ()
+        {
+            var d = document.documentElement;
+
+            return Math.max(d.clientWidth, d.offsetWidth, d.scrollWidth);
+        }
+    },
+
+    height: {
+        get: function ()
+        {
+            var d = document.documentElement;
+
+            return Math.max(d.clientHeight, d.offsetHeight, d.scrollHeight);
+        }
+    }
+
+});
+
+module.exports = new DocumentBounds();

src/dom/GetAspectRatio.js

@@ -0,0 +1,30 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var GetBounds = require('./GetBounds');
+var VisualBounds = require('./VisualBounds');
+
+var GetAspectRatio = function (object)
+{
+    object = (object === null) ? VisualBounds : (object.nodeType === 1) ? GetBounds(object) : object;
+
+    var w = object.width;
+    var h = object.height;
+
+    if (typeof w === 'function')
+    {
+        w = w.call(object);
+    }
+
+    if (typeof h === 'function')
+    {
+        h = h.call(object);
+    }
+
+    return w / h;
+};
+
+module.exports = GetAspectRatio;

src/dom/GetBounds.js

@@ -0,0 +1,25 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Calibrate = require('./Calibrate');
+
+var GetBounds = function (element, cushion)
+{
+    if (cushion === undefined) { cushion = 0; }
+
+    element = (element && !element.nodeType) ? element[0] : element;
+
+    if (!element || element.nodeType !== 1)
+    {
+        return false;
+    }
+    else
+    {
+        return Calibrate(element.getBoundingClientRect(), cushion);
+    }
+};
+
+module.exports = GetBounds;

src/dom/GetOffset.js

@@ -0,0 +1,28 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Vec2 = require('../math/Vector2');
+var VisualBounds = require('./VisualBounds');
+
+var GetOffset = function (element, point)
+{
+    if (point === undefined) { point = new Vec2(); }
+
+    var box = element.getBoundingClientRect();
+
+    var scrollTop = VisualBounds.y;
+    var scrollLeft = VisualBounds.x;
+
+    var clientTop = document.documentElement.clientTop;
+    var clientLeft = document.documentElement.clientLeft;
+
+    point.x = box.left + scrollLeft - clientLeft;
+    point.y = box.top + scrollTop - clientTop;
+
+    return point;
+};
+
+module.exports = GetOffset;

src/dom/GetScreenOrientation.js

@@ -0,0 +1,56 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var VisualBounds = require('./VisualBounds');
+
+var GetScreenOrientation = function (primaryFallback)
+{
+    var screen = window.screen;
+    var orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
+
+    if (orientation && typeof orientation.type === 'string')
+    {
+        //  Screen Orientation API specification
+        return orientation.type;
+    }
+    else if (typeof orientation === 'string')
+    {
+        //  moz / ms-orientation are strings
+        return orientation;
+    }
+
+    var PORTRAIT = 'portrait-primary';
+    var LANDSCAPE = 'landscape-primary';
+    
+    if (primaryFallback === 'screen')
+    {
+        return (screen.height > screen.width) ? PORTRAIT : LANDSCAPE;
+    }
+    else if (primaryFallback === 'viewport')
+    {
+        return (VisualBounds.height > VisualBounds.width) ? PORTRAIT : LANDSCAPE;
+    }
+    else if (primaryFallback === 'window.orientation' && typeof window.orientation === 'number')
+    {
+        //  This may change by device based on "natural" orientation.
+        return (window.orientation === 0 || window.orientation === 180) ? PORTRAIT : LANDSCAPE;
+    }
+    else if (window.matchMedia)
+    {
+        if (window.matchMedia('(orientation: portrait)').matches)
+        {
+            return PORTRAIT;
+        }
+        else if (window.matchMedia('(orientation: landscape)').matches)
+        {
+            return LANDSCAPE;
+        }
+    }
+
+    return (VisualBounds.height > VisualBounds.width) ? PORTRAIT : LANDSCAPE;
+};
+
+module.exports = GetScreenOrientation;

src/dom/InLayoutViewport.js

@@ -0,0 +1,17 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var GetBounds = require('./GetBounds');
+var LayoutBounds = require('./LayoutBounds');
+
+var InLayoutViewport = function (element, cushion)
+{
+    var r = GetBounds(element, cushion);
+
+    return !!r && r.bottom >= 0 && r.right >= 0 && r.top <= LayoutBounds.width && r.left <= LayoutBounds.height;
+};
+
+module.exports = InLayoutViewport;

src/dom/LayoutBounds.js

@@ -0,0 +1,56 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Class = require('../utils/Class');
+var ClientHeight = require('./ClientHeight');
+var ClientWidth = require('./ClientWidth');
+var Rectangle = require('../geom/rectangle/Rectangle');
+
+var LayoutBounds = new Class({
+
+    Extends: Rectangle,
+
+    initialize:
+
+    function LayoutBounds ()
+    {
+        Rectangle.call(this);
+    },
+
+    init: function (isDesktop)
+    {
+        if (isDesktop)
+        {
+            Object.defineProperty(this, 'width', { get: ClientWidth });
+            Object.defineProperty(this, 'height', { get: ClientHeight });
+        }
+        else
+        {
+            Object.defineProperty(this, 'width', {
+                get: function ()
+                {
+                    var a = document.documentElement.clientWidth;
+                    var b = window.innerWidth;
+
+                    return a < b ? b : a; // max
+                }
+            });
+
+            Object.defineProperty(this, 'height', {
+                get: function ()
+                {
+                    var a = document.documentElement.clientHeight;
+                    var b = window.innerHeight;
+
+                    return a < b ? b : a; // max
+                }
+            });
+        }
+    }
+
+});
+
+module.exports = new LayoutBounds();

src/dom/ScaleManager.js

@@ -0,0 +1,377 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Class = require('../utils/Class');
+var CONST = require('./const');
+var NOOP = require('../utils/NOOP');
+var Vec2 = require('../math/Vector2');
+var Rectangle = require('../geom/rectangle/Rectangle');
+
+/**
+ * @classdesc
+ * [description]
+ *
+ * @class ScaleManager
+ * @memberof Phaser.DOM
+ * @constructor
+ * @since 3.15.0
+ *
+ * @param {Phaser.Game} game - A reference to the Phaser.Game instance.
+ * @param {any} config
+ */
+var ScaleManager = new Class({
+
+    initialize:
+
+    function ScaleManager (game)
+    {
+        /**
+         * A reference to the Phaser.Game instance.
+         *
+         * @name Phaser.DOM.ScaleManager#game
+         * @type {Phaser.Game}
+         * @readonly
+         * @since 3.15.0
+         */
+        this.game = game;
+
+        this.scaleMode = 0;
+
+        //  The base game size, as requested in the game config
+        this.width = 0;
+        this.height = 0;
+
+        //  The canvas size, which is the base game size * zoom * resolution
+        this.canvasWidth = 0;
+        this.canvasHeight = 0;
+
+        this.resolution = 1;
+        this.zoom = 1;
+
+        //  The actual displayed canvas size (after refactoring in CSS depending on the scale mode, parent, etc)
+        this.displayWidth = 0;
+        this.displayHeight = 0;
+
+        //  The scale factor between the base game size and the displayed size
+        this.scale = new Vec2(1);
+
+        this.parent;
+        this.parentIsWindow;
+        this.parentScale = new Vec2(1);
+        this.parentBounds = new Rectangle();
+
+        this.minSize = new Vec2();
+        this.maxSize = new Vec2();
+
+        this.trackParent = false;
+        this.canExpandParent = false;
+
+        this.allowFullScreen = false;
+
+        this.listeners = {
+
+            orientationChange: NOOP,
+            windowResize: NOOP,
+            fullScreenChange: NOOP,
+            fullScreenError: NOOP
+
+        };
+
+    },
+
+    preBoot: function ()
+    {
+        //  Parse the config to get the scaling values we need
+        // console.log('preBoot');
+
+        this.setParent(this.game.config.parent);
+
+        this.parseConfig(this.game.config);
+
+        this.game.events.once('boot', this.boot, this);
+    },
+
+    boot: function ()
+    {
+        // console.log('boot');
+
+        this.setScaleMode(this.scaleMode);
+
+        this.game.events.on('prestep', this.step, this);
+    },
+
+    parseConfig: function (config)
+    {
+        var width = config.width;
+        var height = config.height;
+        var resolution = config.resolution;
+        var scaleMode = config.scaleMode;
+        var zoom = config.zoom;
+
+        if (typeof width === 'string')
+        {
+            this.parentScale.x = parseInt(width, 10) / 100;
+            width = this.parentBounds.width * this.parentScale.x;
+        }
+
+        if (typeof height === 'string')
+        {
+            this.parentScale.y = parseInt(height, 10) / 100;
+            height = this.parentBounds.height * this.parentScale.y;
+        }
+
+        this.width = width;
+        this.height = height;
+
+        this.canvasWidth = (width * zoom) * resolution;
+        this.canvasHeight = (height * zoom) * resolution;
+
+        this.resolution = resolution;
+
+        this.zoom = zoom;
+
+        this.canExpandParent = config.expandParent;
+
+        this.scaleMode = scaleMode;
+
+        // console.log(config);
+
+        this.minSize.set(config.minWidth, config.minHeight);
+        this.maxSize.set(config.maxWidth, config.maxHeight);
+    },
+
+    setScaleMode: function (scaleMode)
+    {
+        this.scaleMode = scaleMode;
+
+        if (scaleMode === CONST.EXACT)
+        {
+            return;
+        }
+
+        var canvas = this.game.canvas;
+        var gameStyle = canvas.style;
+
+        var parent = this.parent;
+        var parentStyle = parent.style;
+
+
+        switch (scaleMode)
+        {
+            case CONST.FILL:
+
+                gameStyle.objectFit = 'fill';
+                gameStyle.width = '100%';
+                gameStyle.height = '100%';
+
+                if (this.canExpandParent)
+                {
+                    parentStyle.height = '100%';
+
+                    if (this.parentIsWindow)
+                    {
+                        document.getElementsByTagName('html')[0].style.height = '100%';
+                    }
+                }
+
+                break;
+
+            case CONST.CONTAIN:
+
+                gameStyle.objectFit = 'contain';
+                gameStyle.width = '100%';
+                gameStyle.height = '100%';
+
+                if (this.canExpandParent)
+                {
+                    parentStyle.height = '100%';
+
+                    if (this.parentIsWindow)
+                    {
+                        document.getElementsByTagName('html')[0].style.height = '100%';
+                    }
+                }
+
+                break;
+        }
+
+        var min = this.minSize;
+        var max = this.maxSize;
+
+        if (min.x > 0)
+        {
+            gameStyle.minWidth = min.x.toString() + 'px';
+        }
+
+        if (min.y > 0)
+        {
+            gameStyle.minHeight = min.y.toString() + 'px';
+        }
+
+        if (max.x > 0)
+        {
+            gameStyle.maxWidth = max.x.toString() + 'px';
+        }
+
+        if (max.y > 0)
+        {
+            gameStyle.maxHeight = max.y.toString() + 'px';
+        }
+    },
+
+    setParent: function (parent)
+    {
+        var target;
+
+        if (parent !== '')
+        {
+            if (typeof parent === 'string')
+            {
+                //  Hopefully an element ID
+                target = document.getElementById(parent);
+            }
+            else if (parent && parent.nodeType === 1)
+            {
+                //  Quick test for a HTMLElement
+                target = parent;
+            }
+        }
+
+        //  Fallback to the document body. Covers an invalid ID and a non HTMLElement object.
+        if (!target)
+        {
+            //  Use the full window
+            this.parent = document.body;
+            this.parentIsWindow = true;
+        }
+        else
+        {
+            this.parent = target;
+            this.parentIsWindow = false;
+        }
+
+        this.getParentBounds();
+    },
+
+    getParentBounds: function ()
+    {
+        var DOMRect = this.parent.getBoundingClientRect();
+
+        this.parentBounds.setSize(DOMRect.width, DOMRect.height);
+    },
+
+    startListeners: function ()
+    {
+        var _this = this;
+        var listeners = this.listeners;
+
+        listeners.orientationChange = function (event)
+        {
+            return _this.onOrientationChange(event);
+        };
+
+        listeners.windowResize = function (event)
+        {
+            return _this.onWindowResize(event);
+        };
+
+        window.addEventListener('orientationchange', listeners.orientationChange, false);
+        window.addEventListener('resize', listeners.windowResize, false);
+
+        if (this.allowFullScreen)
+        {
+            listeners.fullScreenChange = function (event)
+            {
+                return _this.onFullScreenChange(event);
+            };
+
+            listeners.fullScreenError = function (event)
+            {
+                return _this.onFullScreenError(event);
+            };
+
+            var vendors = [ 'webkit', 'moz', '' ];
+
+            vendors.forEach(function (prefix)
+            {
+                document.addEventListener(prefix + 'fullscreenchange', listeners.fullScreenChange, false);
+                document.addEventListener(prefix + 'fullscreenerror', listeners.fullScreenError, false);
+            });
+
+            //  MS Specific
+            document.addEventListener('MSFullscreenChange', listeners.fullScreenChange, false);
+            document.addEventListener('MSFullscreenError', listeners.fullScreenError, false);
+        }
+    },
+
+    getInnerHeight: function ()
+    {
+        //  Based on code by @tylerjpeterson
+
+        if (!this.game.device.os.iOS)
+        {
+            return window.innerHeight;
+        }
+
+        var axis = Math.abs(window.orientation);
+
+        var size = { w: 0, h: 0 };
+        
+        var ruler = document.createElement('div');
+
+        ruler.setAttribute('style', 'position: fixed; height: 100vh; width: 0; top: 0');
+
+        document.documentElement.appendChild(ruler);
+
+        size.w = (axis === 90) ? ruler.offsetHeight : window.innerWidth;
+        size.h = (axis === 90) ? window.innerWidth : ruler.offsetHeight;
+
+        document.documentElement.removeChild(ruler);
+
+        ruler = null;
+
+        if (Math.abs(window.orientation) !== 90)
+        {
+            return size.h;
+        }
+        else
+        {
+            return size.w;
+        }
+    },
+
+    step: function ()
+    {
+        //  canvas.clientWidth and clientHeight = canvas size when scaled with 100% object-fit, ignoring borders, margin, etc
+    },
+
+    stopListeners: function ()
+    {
+        var listeners = this.listeners;
+
+        window.removeEventListener('orientationchange', listeners.orientationChange, false);
+        window.removeEventListener('resize', listeners.windowResize, false);
+
+        var vendors = [ 'webkit', 'moz', '' ];
+
+        vendors.forEach(function (prefix)
+        {
+            document.removeEventListener(prefix + 'fullscreenchange', listeners.fullScreenChange, false);
+            document.removeEventListener(prefix + 'fullscreenerror', listeners.fullScreenError, false);
+        });
+
+        //  MS Specific
+        document.removeEventListener('MSFullscreenChange', listeners.fullScreenChange, false);
+        document.removeEventListener('MSFullscreenError', listeners.fullScreenError, false);
+    },
+
+    destroy: function ()
+    {
+    }
+
+});
+
+module.exports = ScaleManager;

src/dom/VisualBounds.js

@@ -0,0 +1,62 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Class = require('../utils/Class');
+var ClientHeight = require('./ClientHeight');
+var ClientWidth = require('./ClientWidth');
+var Rectangle = require('../geom/rectangle/Rectangle');
+
+//  All target browsers should support page[XY]Offset.
+var ScrollX = (window && ('pageXOffset' in window)) ? function () { return window.pageXOffset; } : function () { return document.documentElement.scrollLeft; };
+var ScrollY = (window && ('pageYOffset' in window)) ? function () { return window.pageYOffset; } : function () { return document.documentElement.scrollTop; };
+
+var VisualBounds = new Class({
+
+    Extends: Rectangle,
+
+    initialize:
+
+    function VisualBounds ()
+    {
+        Rectangle.call(this);
+    },
+
+    x: {
+        get: ScrollX
+    },
+
+    y: {
+        get: ScrollY
+    },
+
+    init: function (isDesktop)
+    {
+        if (isDesktop)
+        {
+            Object.defineProperty(this, 'width', { get: ClientWidth });
+            Object.defineProperty(this, 'height', { get: ClientHeight });
+        }
+        else
+        {
+            Object.defineProperty(this, 'width', {
+                get: function ()
+                {
+                    return window.innerWidth;
+                }
+            });
+
+            Object.defineProperty(this, 'height', {
+                get: function ()
+                {
+                    return window.innerHeight;
+                }
+            });
+        }
+    }
+
+});
+
+module.exports = new VisualBounds();

src/dom/const.js

@@ -0,0 +1,51 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+/**
+ * Phaser ScaleManager Modes.
+ * 
+ * @name Phaser.DOM.ScaleModes
+ * @enum {integer}
+ * @memberof Phaser
+ * @readonly
+ * @since 3.15.0
+ */
+
+module.exports = {
+
+    /**
+     * 
+     * 
+     * @name Phaser.DOM.EXACT
+     * @since 3.15.0
+     */
+    EXACT: 0,
+
+    /**
+     * 
+     * 
+     * @name Phaser.DOM.FILL
+     * @since 3.15.0
+     */
+    FILL: 1,
+
+    /**
+     * 
+     * 
+     * @name Phaser.DOM.CONTAIN
+     * @since 3.15.0
+     */
+    CONTAIN: 2,
+
+    /**
+     * 
+     * 
+     * @name Phaser.DOM.RESIZE
+     * @since 3.15.0
+     */
+    RESIZE: 3
+
+};

src/dom/index.js

@@ -4,6 +4,9 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
+var Extend = require('../utils/object/Extend');
+var ScaleModes = require('./const');
+
 /**
  * @namespace Phaser.DOM
  */
@@ -11,11 +14,26 @@
 var Dom = {
 
     AddToDOM: require('./AddToDOM'),
+    Calibrate: require('./Calibrate'),
+    ClientHeight: require('./ClientHeight'),
+    ClientWidth: require('./ClientWidth'),
+    DocumentBounds: require('./DocumentBounds'),
     DOMContentLoaded: require('./DOMContentLoaded'),
+    GetAspectRatio: require('./GetAspectRatio'),
+    GetBounds: require('./GetBounds'),
+    GetOffset: require('./GetOffset'),
+    GetScreenOrientation: require('./GetScreenOrientation'),
+    InLayoutViewport: require('./InLayoutViewport'),
     ParseXML: require('./ParseXML'),
     RemoveFromDOM: require('./RemoveFromDOM'),
-    RequestAnimationFrame: require('./RequestAnimationFrame')
+    RequestAnimationFrame: require('./RequestAnimationFrame'),
+    ScaleManager: require('./ScaleManager'),
+    VisualBounds: require('./VisualBounds'),
+
+    ScaleModes: ScaleModes
 
 };
 
+Dom = Extend(false, Dom, ScaleModes);
+
 module.exports = Dom;

src/input/InputManager.js

@@ -397,6 +397,7 @@ var InputManager = new Class({
      */
     resize: function ()
     {
+        /*
         this.updateBounds();
 
         //  Game config size
@@ -410,6 +411,7 @@ var InputManager = new Class({
         //  Scale factor
         this.scale.x = gw / bw;
         this.scale.y = gh / bh;
+        */
     },
 
     /**

src/renderer/canvas/CanvasRenderer.js

@@ -245,6 +245,10 @@ var CanvasRenderer = new Class({
      */
     resize: function (width, height)
     {
+        this.width = width;
+        this.height = height;
+
+        /*
         var resolution = this.config.resolution;
 
         this.width = width * resolution;
@@ -258,6 +262,7 @@ var CanvasRenderer = new Class({
             this.gameCanvas.style.width = (this.width / resolution) + 'px';
             this.gameCanvas.style.height = (this.height / resolution) + 'px';
         }
+        */
 
         //  Resizing a canvas will reset imageSmoothingEnabled (and probably other properties)
         if (this.scaleMode === ScaleModes.NEAREST)

src/renderer/webgl/WebGLRenderer.js

@@ -118,7 +118,7 @@ var WebGLRenderer = new Class({
          * @type {integer}
          * @since 3.0.0
          */
-        this.width = game.config.width;
+        this.width = game.scale.canvasWidth;
 
         /**
          * The height of the canvas being rendered to.
@@ -127,7 +127,7 @@ var WebGLRenderer = new Class({
          * @type {integer}
          * @since 3.0.0
          */
-        this.height = game.config.height;
+        this.height = game.scale.canvasHeight;
 
         /**
          * The canvas which this WebGL Renderer draws to.
@@ -567,7 +567,24 @@ var WebGLRenderer = new Class({
 
         this.setBlendMode(CONST.BlendModes.NORMAL);
 
-        this.resize(this.width, this.height);
+        var width = this.width;
+        var height = this.height;
+
+        gl.viewport(0, 0, width, height);
+
+        var pipelines = this.pipelines;
+
+        //  Update all registered pipelines
+        for (var pipelineName in pipelines)
+        {
+            pipelines[pipelineName].resize(width, height, this.game.scale.resolution);
+        }
+
+        this.drawingBufferHeight = gl.drawingBufferHeight;
+
+        this.defaultCamera.setSize(width, height);
+
+        gl.scissor(0, (this.drawingBufferHeight - height), width, height);
 
         this.game.events.once('texturesready', this.boot, this);
 
@@ -610,20 +627,11 @@ var WebGLRenderer = new Class({
     {
         var gl = this.gl;
         var pipelines = this.pipelines;
-        var resolution = this.config.resolution;
+        var resolution = this.game.scale.resolution;
 
         this.width = Math.floor(width * resolution);
         this.height = Math.floor(height * resolution);
 
-        this.canvas.width = this.width;
-        this.canvas.height = this.height;
-
-        if (this.config.autoResize)
-        {
-            this.canvas.style.width = (this.width / resolution) + 'px';
-            this.canvas.style.height = (this.height / resolution) + 'px';
-        }
-
         gl.viewport(0, 0, this.width, this.height);
 
         //  Update all registered pipelines

src/scene/InjectionMap.js

@@ -22,6 +22,7 @@ var InjectionMap = {
     cache: 'cache',
     plugins: 'plugins',
     registry: 'registry',
+    scale: 'scale',
     sound: 'sound',
     textures: 'textures',
 

src/scene/Systems.js

@@ -148,6 +148,17 @@ var Systems = new Class({
          */
         this.registry;
 
+        /**
+         * A reference to the global Scale Manager.
+         * 
+         * In the default set-up you can access this from within a Scene via the `this.scale` property.
+         *
+         * @name Phaser.Scenes.Systems#scale
+         * @type {Phaser.DOM.ScaleManager}
+         * @since 3.15.0
+         */
+        this.scale;
+
         /**
          * A reference to the global Sound Manager.
          * 

webpack.config.js

@@ -29,7 +29,7 @@ module.exports = {
         new webpack.DefinePlugin({
             "typeof CANVAS_RENDERER": JSON.stringify(true),
             "typeof WEBGL_RENDERER": JSON.stringify(true),
-            "typeof EXPERIMENTAL": JSON.stringify(false),
+            "typeof EXPERIMENTAL": JSON.stringify(true),
             "typeof PLUGIN_CAMERA3D": JSON.stringify(false),
             "typeof PLUGIN_FBINSTANT": JSON.stringify(false)
         }),