Added in the game scaling handler and updated Stage

Author: photonstorm

examples/button1.php

@@ -12,7 +12,7 @@
 
 (function () {
 
-    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, render: render });
+    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, render: render });
 
     function preload() {
 
@@ -26,6 +26,8 @@ function preload() {
 
     function create() {
 
+        game.stage.backgroundColor = 0xefefef;
+
         //  This is just an image that we'll toggle the display of when you click the button
         image = game.add.sprite(game.world.centerX, 0, 'beast');
         image.anchor.setTo(0.5, 0);

examples/js.php

@@ -65,6 +65,7 @@
 	<script src="../src/gameobjects/Text.js"></script>
 	<script src="../src/gameobjects/Button.js"></script>
 	<script src="../src/system/Canvas.js"></script>
+	<script src="../src/system/StageScaleMode.js"></script>
 	<script src="../src/system/Device.js"></script>
 	<script src="../src/system/RequestAnimationFrame.js"></script>
 	<script src="../src/math/RandomDataGenerator.js"></script>

src/core/Game.js

@@ -286,10 +286,11 @@ Phaser.Game.prototype = {
 			this.math = Phaser.Math;
 			this.rnd = new Phaser.RandomDataGenerator([(Date.now() * Math.random()).toString()]);
 
+			this.stage = new Phaser.Stage(this, this.width, this.height);
+
 			this.setUpRenderer();
 
 			this.world = new Phaser.World(this);
-			this.stage = new Phaser.Stage(this);
 			this.add = new Phaser.GameObjectFactory(this);
 			this.cache = new Phaser.Cache(this);
 			this.load = new Phaser.Loader(this);
@@ -334,7 +335,7 @@ Phaser.Game.prototype = {
 			if (this.device.canvas)
 			{
 				this.renderType = Phaser.CANVAS;
-				this.renderer = new PIXI.CanvasRenderer(this.width, this.height, null, this.transparent);
+				this.renderer = new PIXI.CanvasRenderer(this.width, this.height, this.stage.canvas, this.transparent);
 				Phaser.Canvas.setSmoothingEnabled(this.renderer.context, this.antialias);
 				this.canvas = this.renderer.view;
 				this.context = this.renderer.context;
@@ -387,7 +388,7 @@ Phaser.Game.prototype = {
 			this.state.update();
 	        this.plugins.update();
 
-			this.renderer.render(this.world._stage);
+			this.renderer.render(this.stage._stage);
 			this.state.render();
 
 			this.plugins.postRender();

src/core/LinkedList.js

@@ -68,6 +68,24 @@ Phaser.LinkedList.prototype = {
 
     	childPrev.next = child.next;
 
+    },
+
+    callAll: function (callback) {
+
+		var entity = this.first;
+		
+		do	
+		{
+			if (entity[callback])
+			{
+				entity[callback].call(entity);
+			}
+
+			entity = entity.next;
+
+		}
+		while(entity != this.last.next)			
+
     },
 
 	dump: function () {

src/core/Stage.js

@@ -9,18 +9,33 @@
  * @copyright  2013 Photon Storm Ltd.
  * @license    https://github.com/photonstorm/phaser/blob/master/license.txt  MIT License
  */
-Phaser.Stage = function (game) {
+Phaser.Stage = function (game, width, height) {
 
 	this.game = game;
-    this.canvas = game.renderer.view;
+
+    /**
+    * Background color of the stage (defaults to black). Set via the public backgroundColor property.
+    * @type {string}
+    */
+    this._backgroundColor = 'rgb(0,0,0)';
 
 	//	Get the offset values (for input and other things)
 	this.offset = new Phaser.Point;
 
+    this.canvas = Phaser.Canvas.create(width, height);    
+
+    //  The Pixi Stage which is hooked to the renderer
+    this._stage = new PIXI.Stage(0x000000, false);
+    this._stage.name = '_stage_root';
+
 	Phaser.Canvas.getOffset(this.canvas, this.offset);
 
 	this.bounds = new Phaser.Rectangle(this.offset.x, this.offset.y, this.game.width, this.game.height);
 
+    this.scaleMode = Phaser.StageScaleMode.NO_SCALE;
+    this.scale = new Phaser.StageScaleMode(this.game, width, height);
+    this.aspectRatio = width / height;
+
 	var _this = this;
 
     this._onChange = function (event) {
@@ -68,4 +83,19 @@ Phaser.Stage.prototype = {
 
     },
 
-};
+};
+
+Object.defineProperty(Phaser.Stage.prototype, "backgroundColor", {
+
+    get: function () {
+        return this._backgroundColor;
+    },
+
+    set: function (color) {
+        this._stage.setBackgroundColor(color);
+        this._backgroundColor = color;
+    },
+
+    enumerable: true,
+    configurable: true
+});

src/core/World.js

@@ -2,19 +2,12 @@ Phaser.World = function (game) {
 
 	this.game = game;
 
-	this._stage = new PIXI.Stage(0x000000);
-	this._stage.name = '_stage_root';
-
 	this.bounds = new Phaser.Rectangle(0, 0, game.width, game.height);
 
 };
 
 Phaser.World.prototype = {
 
-	_stage: null,
-	_stage: null,
-	_length: 0,
-
 	bounds: null,
 	camera: null,
 
@@ -29,27 +22,27 @@ Phaser.World.prototype = {
 
 	add: function (gameobject) {
 
-		this._stage.addChild(gameobject);
+		this.game.stage._stage.addChild(gameobject);
 		return gameobject;
 
 	},
 
 	addAt: function (gameobject, index) {
 
-		this._stage.addChildAt(gameobject, index);
+		this.game.stage._stage.addChildAt(gameobject, index);
 		return gameobject;
 
 	},
 
 	getAt: function (index) {
 
-		return this._stage.getChildAt(index);
+		return this.game.stage._stage.getChildAt(index);
 
 	},
 
 	remove: function (gameobject) {
 
-		this._stage.removeChild(gameobject);
+		this.game.stage._stage.removeChild(gameobject);
 		return gameobject;
 
 	},
@@ -60,9 +53,9 @@ Phaser.World.prototype = {
 
 		this.currentRenderOrderID = 0;
 
-		if (this._stage.first._iNext)
+		if (this.game.stage._stage.first._iNext)
 		{
-			var currentNode = this._stage.first._iNext;
+			var currentNode = this.game.stage._stage.first._iNext;
 
 			do	
 			{
@@ -73,7 +66,7 @@ Phaser.World.prototype = {
 
 				currentNode = currentNode._iNext;
 			}
-			while (currentNode != this._stage.last._iNext)
+			while (currentNode != this.game.stage._stage.last._iNext)
 		}
 
 	},
@@ -93,9 +86,9 @@ Phaser.World.prototype = {
 
 	bringToTop: function (child) {
 
-		if (child !== this._stage.last)
+		if (child !== this.game.stage._stage.last)
 		{
-			this.swapChildren(child, this._stage.last);
+			this.swapChildren(child, this.game.stage._stage.last);
 		}
 
 		return child;
@@ -116,8 +109,8 @@ Phaser.World.prototype = {
 		var child2Prev = child2._iPrev;
 		var child2Next = child2._iNext;
 
-		var endNode = this._stage.last._iNext;
-		var currentNode = this._stage.first;
+		var endNode = this.game.stage._stage.last._iNext;
+		var currentNode = this.game.stage._stage.first;
 
 		do	
 		{

src/input/Input.js

@@ -7,9 +7,6 @@
 Phaser.Input = function (game) {
 
 	this.game = game;
-
-    // this.inputObjects = [];
-    // this.totalTrackedObjects = 0;
 
 };
 
@@ -397,16 +394,7 @@ Phaser.Input.prototype = {
             this.onTap = new Phaser.Signal();
             this.onHold = new Phaser.Signal();
 
-            for (var i = 0; i < this.totalTrackedObjects; i++)
-            {
-                if (this.inputObjects[i] && this.inputObjects[i].input)
-                {
-                    this.inputObjects[i].input.reset();
-                }
-            }
-
-            this.inputObjects.length = 0;
-            this.totalTrackedObjects = 0;
+            this.interactiveItems.callAll('reset');
         }
 
         this._pollCounter = 0;

src/system/Canvas.js

@@ -7,12 +7,25 @@
 
 Phaser.Canvas = {
 
+    create: function (width, height) {
+
+        width = width || 256;
+        height = height || 256;
+
+        var canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+
+        return canvas;
+
+    },
+
     /**
     * Get the DOM offset values of any given element
     */    
     getOffset: function (element, point) {
 
-        if (typeof point === "undefined") { point = new Phaser.Point; }
+        point = point || new Phaser.Point;
 
         var box = element.getBoundingClientRect();
         var clientTop = element.clientTop || document.body.clientTop || 0;
@@ -48,7 +61,7 @@ Phaser.Canvas = {
     */
     setBackgroundColor: function (canvas, color) {
 
-        if (typeof color === "undefined") { color = 'rgb(0,0,0)'; }
+        color = color || 'rgb(0,0,0)';
 
         canvas.style.backgroundColor = color;
 
@@ -66,7 +79,7 @@ Phaser.Canvas = {
     */
     setTouchAction: function (canvas, value) {
 
-        if (typeof value === "undefined") { value = 'none'; }
+        value = value || 'none';
 
         canvas.style.msTouchAction = value;
         canvas.style['ms-touch-action'] = value;
@@ -88,8 +101,8 @@ Phaser.Canvas = {
     */
     addToDOM: function (canvas, parent, overflowHidden) {
 
-        if (typeof parent === "undefined") { parent = ''; }
-        if (typeof overflowHidden === "undefined") { overflowHidden = true; }
+        parent = parent || '';
+        overflowHidden = overflowHidden || true;
 
         if ((parent !== '' || parent !== null) && document.getElementById(parent))
         {