Added the CanvasUtils class and moved some stuff out of Stage into it.

Author: photonstorm

Phaser/Phaser.csproj

@@ -16,6 +16,10 @@
     <IISExpressUseClassicPipelineMode />
   </PropertyGroup>
   <ItemGroup>
+    <TypeScriptCompile Include="utils\CanvasUtils.ts" />
+    <Content Include="utils\CanvasUtils.js">
+      <DependentUpon>CanvasUtils.ts</DependentUpon>
+    </Content>
     <Content Include="_definitions.ts" />
     <TypeScriptCompile Include="Phaser.ts" />
     <TypeScriptCompile Include="particles\Emitter.ts" />

Phaser/Stage.ts

@@ -32,26 +32,13 @@ module Phaser {
             this.canvas = <HTMLCanvasElement> document.createElement('canvas');
             this.canvas.width = width;
             this.canvas.height = height;
+            this.context = this.canvas.getContext('2d');
 
-            if ((parent !== '' || parent !== null) && document.getElementById(parent))
-            {
-                document.getElementById(parent).appendChild(this.canvas);
-                document.getElementById(parent).style.overflow = 'hidden';
-            }
-            else
-            {
-                document.body.appendChild(this.canvas);
-            }
+            Phaser.CanvasUtils.addToDOM(this.canvas, parent, true);
+            Phaser.CanvasUtils.setTouchAction(this.canvas);
 
-            //  Consume default actions on the canvas
-            this.canvas.style.msTouchAction = 'none';
-            this.canvas.style['ms-touch-action'] = 'none';
-            this.canvas.style['touch-action'] = 'none';
-            this.canvas.style.backgroundColor = 'rgb(0,0,0)';
             this.canvas.oncontextmenu = function(event) { event.preventDefault(); };
 
-            this.context = this.canvas.getContext('2d');
-
             this.css3 = new Phaser.Display.CSS3Filters(this.canvas);
 
             this.scaleMode = StageScaleMode.NO_SCALE;
@@ -280,13 +267,6 @@ module Phaser {
 
         }
 
-        public setImageRenderingCrisp() {
-            this.canvas.style['image-rendering'] = 'crisp-edges';
-            this.canvas.style['image-rendering'] = '-moz-crisp-edges';
-            this.canvas.style['image-rendering'] = '-webkit-optimize-contrast';
-            this.canvas.style['-ms-interpolation-mode'] = 'nearest-neighbor';
-        }
-
         public pauseGame() {
 
             this.game.paused = true;

Phaser/_definitions.ts

@@ -93,6 +93,7 @@
 
 /// <reference path="ui/Button.ts" />
 
+/// <reference path="utils/CanvasUtils.ts" />
 /// <reference path="utils/CircleUtils.ts" />
 /// <reference path="utils/ColorUtils.ts" />
 /// <reference path="utils/PointUtils.ts" />

Phaser/utils/CanvasUtils.js

@@ -0,0 +1,19 @@
+var Shapes;
+(function (Shapes) {
+
+    var Point = Shapes.Point = (function () {
+        function Point(x, y) {
+            this.x = x;
+            this.y = y;
+        }
+        Point.prototype.getDist = function () {
+            return Math.sqrt((this.x * this.x) + (this.y * this.y));
+        };
+        Point.origin = new Point(0, 0);
+        return Point;
+    })();
+
+})(Shapes || (Shapes = {}));
+
+var p = new Shapes.Point(3, 4);
+var dist = p.getDist(); 

Phaser/utils/CanvasUtils.ts

@@ -0,0 +1,93 @@
+/// <reference path="../_definitions.ts" />
+
+/**
+* Phaser - CanvasUtils
+*
+* A collection of methods useful for manipulating canvas objects.
+*/
+
+module Phaser {
+
+    export class CanvasUtils {
+
+        public static getAspectRatio(canvas: HTMLCanvasElement): number {
+            return canvas.width / canvas.height;
+        }
+
+        public static setBackgroundColor(canvas: HTMLCanvasElement, color: string = 'rgb(0,0,0)'): HTMLCanvasElement {
+
+            canvas.style.backgroundColor = color;
+            return canvas;
+
+        }
+
+        public static setTouchAction(canvas: HTMLCanvasElement, value: string= 'none'): HTMLCanvasElement {
+
+            canvas.style.msTouchAction = value;
+            canvas.style['ms-touch-action'] = value;
+            canvas.style['touch-action'] = value;
+
+            return canvas;
+
+        }
+
+        public static addToDOM(canvas: HTMLCanvasElement, parent: string = '', overflowHidden: boolean = true): HTMLCanvasElement {
+
+            if ((parent !== '' || parent !== null) && document.getElementById(parent))
+            {
+                document.getElementById(parent).appendChild(canvas);
+
+                if (overflowHidden)
+                {
+                    document.getElementById(parent).style.overflow = 'hidden';
+                }
+            }
+            else
+            {
+                document.body.appendChild(canvas);
+            }
+
+            return canvas;
+
+        }
+
+        public static setTransform(context: CanvasRenderingContext2D, translateX: number, translateY: number, scaleX: number, scaleY: number, skewX: number, skewY: number): CanvasRenderingContext2D {
+
+            context.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY);
+
+            return context;
+
+        }
+
+        public static setSmoothingEnabled(context: CanvasRenderingContext2D, value: boolean): CanvasRenderingContext2D {
+
+            context['imageSmoothingEnabled'] = value;
+            context['mozImageSmoothingEnabled'] = value;
+            context['oImageSmoothingEnabled'] = value;
+            context['webkitImageSmoothingEnabled'] = value;
+            context['msImageSmoothingEnabled'] = value;
+            return context;
+
+        }
+
+        public static setImageRenderingCrisp(canvas: HTMLCanvasElement): HTMLCanvasElement {
+
+            canvas.style['image-rendering'] = 'crisp-edges';
+            canvas.style['image-rendering'] = '-moz-crisp-edges';
+            canvas.style['image-rendering'] = '-webkit-optimize-contrast';
+            canvas.style.msInterpolationMode = 'nearest-neighbor';
+            return canvas;
+
+        }
+
+        public static setImageRenderingBicubic(canvas: HTMLCanvasElement): HTMLCanvasElement {
+
+            canvas.style['image-rendering'] = 'auto';
+            canvas.style.msInterpolationMode = 'bicubic';
+            return canvas;
+
+        }
+
+    }
+
+}

Tests/phaser-debug.js

@@ -13120,6 +13120,10 @@ var Phaser;
             * @type {string}
             */
             this.crossOrigin = '';
+            //  If you want to append a URL before the path of any asset you can set this here.
+            //  Useful if you need to allow an asset url to be configured outside of the game code.
+            //  MUST have / on the end of it!
+            this.baseURL = '';
             this.game = game;
 
             this._keys = [];
@@ -13326,15 +13330,15 @@ var Phaser;
                         return _this.fileError(file.key);
                     };
                     file.data.crossOrigin = this.crossOrigin;
-                    file.data.src = file.url;
+                    file.data.src = this.baseURL + file.url;
                     break;
 
                 case 'audio':
                     file.url = this.getAudioURL(file.url);
 
                     if (file.url !== null) {
                         if (this.game.sound.usingWebAudio) {
-                            this._xhr.open("GET", file.url, true);
+                            this._xhr.open("GET", this.baseURL + file.url, true);
                             this._xhr.responseType = "arraybuffer";
                             this._xhr.onload = function () {
                                 return _this.fileComplete(file.key);
@@ -13349,7 +13353,7 @@ var Phaser;
                                 file.data = new Audio();
                                 file.data.name = file.key;
                                 file.data.preload = 'auto';
-                                file.data.src = file.url;
+                                file.data.src = this.baseURL + file.url;
                                 this.fileComplete(file.key);
                             } else {
                                 file.data = new Audio();
@@ -13358,7 +13362,7 @@ var Phaser;
                                     return _this.fileError(file.key);
                                 };
                                 file.data.preload = 'auto';
-                                file.data.src = file.url;
+                                file.data.src = this.baseURL + file.url;
                                 file.data.addEventListener('canplaythrough', Phaser.GAMES[this.game.id].load.fileComplete(file.key), false);
                                 file.data.load();
                             }
@@ -13368,7 +13372,7 @@ var Phaser;
                     break;
 
                 case 'text':
-                    this._xhr.open("GET", file.url, true);
+                    this._xhr.open("GET", this.baseURL + file.url, true);
                     this._xhr.responseType = "text";
                     this._xhr.onload = function () {
                         return _this.fileComplete(file.key);
@@ -13442,7 +13446,7 @@ var Phaser;
                     } else {
                         //  Load the JSON or XML before carrying on with the next file
                         loadNext = false;
-                        this._xhr.open("GET", file.atlasURL, true);
+                        this._xhr.open("GET", this.baseURL + file.atlasURL, true);
                         this._xhr.responseType = "text";
 
                         if (file.format == Loader.TEXTURE_ATLAS_JSON_ARRAY) {
@@ -14796,71 +14800,6 @@ var Phaser;
                 enumerable: true,
                 configurable: true
             });
-
-            //  MOVE THESE TO A UTIL
-            Body.prototype.render = function (context) {
-                context.beginPath();
-                context.strokeStyle = 'rgb(0,255,0)';
-                context.strokeRect(this.position.x - this.bounds.halfWidth, this.position.y - this.bounds.halfHeight, this.bounds.width, this.bounds.height);
-                context.stroke();
-                context.closePath();
-
-                //  center point
-                context.fillStyle = 'rgb(0,255,0)';
-                context.fillRect(this.position.x, this.position.y, 2, 2);
-
-                if (this.touching & Phaser.Types.LEFT) {
-                    context.beginPath();
-                    context.strokeStyle = 'rgb(255,0,0)';
-                    context.moveTo(this.position.x - this.bounds.halfWidth, this.position.y - this.bounds.halfHeight);
-                    context.lineTo(this.position.x - this.bounds.halfWidth, this.position.y + this.bounds.halfHeight);
-                    context.stroke();
-                    context.closePath();
-                }
-                if (this.touching & Phaser.Types.RIGHT) {
-                    context.beginPath();
-                    context.strokeStyle = 'rgb(255,0,0)';
-                    context.moveTo(this.position.x + this.bounds.halfWidth, this.position.y - this.bounds.halfHeight);
-                    context.lineTo(this.position.x + this.bounds.halfWidth, this.position.y + this.bounds.halfHeight);
-                    context.stroke();
-                    context.closePath();
-                }
-
-                if (this.touching & Phaser.Types.UP) {
-                    context.beginPath();
-                    context.strokeStyle = 'rgb(255,0,0)';
-                    context.moveTo(this.position.x - this.bounds.halfWidth, this.position.y - this.bounds.halfHeight);
-                    context.lineTo(this.position.x + this.bounds.halfWidth, this.position.y - this.bounds.halfHeight);
-                    context.stroke();
-                    context.closePath();
-                }
-                if (this.touching & Phaser.Types.DOWN) {
-                    context.beginPath();
-                    context.strokeStyle = 'rgb(255,0,0)';
-                    context.moveTo(this.position.x - this.bounds.halfWidth, this.position.y + this.bounds.halfHeight);
-                    context.lineTo(this.position.x + this.bounds.halfWidth, this.position.y + this.bounds.halfHeight);
-                    context.stroke();
-                    context.closePath();
-                }
-            };
-
-            /**
-            * Render debug infos. (including name, bounds info, position and some other properties)
-            * @param x {number} X position of the debug info to be rendered.
-            * @param y {number} Y position of the debug info to be rendered.
-            * @param [color] {number} color of the debug info to be rendered. (format is css color string)
-            */
-            Body.prototype.renderDebugInfo = function (x, y, color) {
-                if (typeof color === "undefined") { color = 'rgb(255,255,255)'; }
-                this.sprite.texture.context.fillStyle = color;
-                this.sprite.texture.context.fillText('Sprite: (' + this.sprite.width + ' x ' + this.sprite.height + ')', x, y);
-
-                //this.sprite.texture.context.fillText('x: ' + this._sprite.frameBounds.x.toFixed(1) + ' y: ' + this._sprite.frameBounds.y.toFixed(1) + ' rotation: ' + this._sprite.rotation.toFixed(1), x, y + 14);
-                this.sprite.texture.context.fillText('x: ' + this.bounds.x.toFixed(1) + ' y: ' + this.bounds.y.toFixed(1) + ' rotation: ' + this.sprite.transform.rotation.toFixed(0), x, y + 14);
-                this.sprite.texture.context.fillText('vx: ' + this.velocity.x.toFixed(1) + ' vy: ' + this.velocity.y.toFixed(1), x, y + 28);
-                this.sprite.texture.context.fillText('acx: ' + this.acceleration.x.toFixed(1) + ' acy: ' + this.acceleration.y.toFixed(1), x, y + 42);
-                this.sprite.texture.context.fillText('angVx: ' + this.angularVelocity.toFixed(1) + ' angAc: ' + this.angularAcceleration.toFixed(1), x, y + 56);
-            };
             return Body;
         })();
         Physics.Body = Body;
@@ -15013,7 +14952,7 @@ var Phaser;
         */
         Sprite.prototype.bringToTop = function () {
             if (this.group) {
-                //this.group.bringToTop(this);
+                this.group.bringToTop(this);
             }
         };
 
@@ -19757,7 +19696,7 @@ var Phaser;
                 //this.physics = new Phaser.Physics.Manager(this);
                 this.plugins = new Phaser.PluginManager(this, this);
 
-                this.load.onLoadComplete.addOnce(this.loadComplete, this);
+                this.load.onLoadComplete.add(this.loadComplete, this);
 
                 this.setRenderer(Phaser.Types.RENDERER_CANVAS);
 
@@ -19883,6 +19822,7 @@ var Phaser;
                     this._loadComplete = true;
                 } else {
                     //  Start the loader going as we have something in the queue
+                    this.load.onLoadComplete.add(this.loadComplete, this);
                     this.load.start();
                 }
             } else {