First pass of the newly re-structured Canvas Renderer (still using old texture system though).

Author: photonstorm

build/config.php

@@ -133,6 +133,10 @@
     <script src="$path/src/textures/parsers/JSONHash.js"></script>
     <script src="$path/src/textures/parsers/SpriteSheet.js"></script>
 
+    <script src="$path/src/renderer/canvas/CanvasRenderer.js"></script>
+    <script src="$path/src/renderer/canvas/gameobjects/Container.js"></script>
+    <script src="$path/src/renderer/canvas/gameobjects/Sprite.js"></script>
+
 
 EOL;
 

src/Phaser.js

@@ -542,7 +542,13 @@ var Phaser = Phaser || {    // jshint ignore:line
         NEAREST: 1
     },
 
-    PIXI: PIXI || {},
+    Renderer: {
+
+    },
+
+    PIXI: PIXI || {
+        
+    },
 
     //  Used to create IDs for various Pixi objects.
     _UID: 0

src/core/Game.js

@@ -685,10 +685,12 @@ Phaser.Game.prototype = {
             return;
         }
 
+        var c = (this.renderType === Phaser.CANVAS) ? 'Canvas' : 'WebGL';
+
         if (!this.device.ie)
         {
             var args = [
-                '%c %c %c %c %c Phaser v' + Phaser.VERSION + ' / Pixi.js  %c http://phaser.io',
+                '%c %c %c %c %c Phaser v' + Phaser.VERSION + ' / Pixi.js / ' + c + '  %c http://phaser.io',
                 'background: #ff0000',
                 'background: #ffff00',
                 'background: #00ff00',
@@ -739,7 +741,8 @@ Phaser.Game.prototype = {
                 //  They requested Canvas and their browser supports it
                 this.renderType = Phaser.CANVAS;
 
-                this.renderer = new PIXI.CanvasRenderer(this);
+                // this.renderer = new PIXI.CanvasRenderer(this);
+                this.renderer = new Phaser.Renderer.Canvas(this);
 
                 this.context = this.renderer.context;
             }

src/gameobjects/components/Children.js

@@ -46,6 +46,11 @@ Phaser.Component.Children.prototype = {
 
     addAt: function (child, index) {
 
+        if (this.list.length === 0)
+        {
+            return this.add(child);
+        }
+
         if (index >= 0 && index <= this.list.length)
         {
             if (child.parent)

src/pixi/display/DisplayObjectContainer.js

@@ -33,6 +33,8 @@ PIXI.DisplayObjectContainer = function () {
     * @default
     */
     this.ignoreChildInput = false;
+
+    this.render = Phaser.Renderer.Canvas.GameObjects.Container.render;
 
 };
 

src/pixi/display/Sprite.js

@@ -116,6 +116,8 @@ PIXI.Sprite = function (texture) {
 
     this.renderable = true;
 
+    this.render = Phaser.Renderer.Canvas.GameObjects.Sprite.render;
+
 };
 
 // constructor

src/pixi/renderers/webgl/WebGLRenderer.js

@@ -499,6 +499,8 @@ PIXI.WebGLRenderer.prototype.updateCompressedTexture = function (texture) {
 };
 
 /**
+ * Note: Moved to TextureManager class.
+ * 
  * Updates and Creates a WebGL texture for the renderers context.
  *
  * @method updateTexture

src/renderer/canvas/CanvasRenderer.js

@@ -0,0 +1,277 @@
+/**
+* @author       Richard Davey <rich@photonstorm.com>
+* @author       Mat Groves (@Doormat23)
+* @copyright    2016 Photon Storm Ltd.
+* @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+*/
+
+/**
+* A Camera is your view into the game world. It has a position and size and renders only those objects within its field of view.
+* The game automatically creates a single Stage sized camera on boot. Move the camera around the world with Phaser.Camera.x/y
+*
+* @class Phaser.Camera
+* @constructor
+* @param {Phaser.Game} game - Game reference to the currently running game.
+*/
+Phaser.Renderer.Canvas = function (game)
+{
+    console.log('CanvasRenderer Alive');
+
+    /**
+    * @property {Phaser.Game} game - A reference to the currently running Game.
+    */
+    this.game = game;
+
+    this.type = Phaser.CANVAS;
+
+    // this.resolution = game.resolution;
+
+    /**
+     * This sets if the CanvasRenderer will clear the canvas or not before the new render pass.
+     * If the Stage is NOT transparent Pixi will use a canvas sized fillRect operation every frame to set the canvas background color.
+     * If the Stage is transparent Pixi will use clearRect to clear the canvas every frame.
+     * Disable this by setting this to false. For example if your game has a canvas filling background image you often don't need this set.
+     *
+     * @property clearBeforeRender
+     * @type Boolean
+     * @default
+     */
+    this.clearBeforeRender = game.clearBeforeRender;
+
+    /**
+     * Whether the render view is transparent
+     *
+     * @property transparent
+     * @type Boolean
+     */
+    this.transparent = game.transparent;
+
+    /**
+     * Whether the render view should be resized automatically
+     *
+     * @property autoResize
+     * @type Boolean
+     */
+    this.autoResize = false;
+
+    /**
+     * The width of the canvas view
+     *
+     * @property width
+     * @type Number
+     * @default 800
+     */
+    this.width = game.width * game.resolution;
+
+    /**
+     * The height of the canvas view
+     *
+     * @property height
+     * @type Number
+     * @default 600
+     */
+    this.height = game.height * game.resolution;
+
+    /**
+     * The canvas element that everything is drawn to.
+     *
+     * @property view
+     * @type HTMLCanvasElement
+     */
+    this.view = game.canvas;
+
+    /**
+     * The canvas 2d context that everything is drawn with
+     * @property context
+     * @type CanvasRenderingContext2D
+     */
+    this.context = this.view.getContext('2d', {
+        alpha: this.transparent
+    });
+
+    this.smoothProperty = Phaser.Canvas.getSmoothingPrefix(this.context);
+
+    this.roundPixels = false;
+
+    var so = 'source-over';
+
+    this.blendModes = [ so, 'lighter', so, so, so, so, so, so, so, so, so, so, so, so, so, so, so ];
+
+    this.currentBlendMode = 0;
+    this.currentScaleMode = 0;
+
+    if (this.game.device.canUseMultiply)
+    {
+        this.mapBlendModes();
+    }
+
+    this.resize(this.width, this.height);
+
+    // this.renderTypes = [];
+    // this.renderTypes[Phaser.GROUP] = Phaser.Renderer.Canvas.GameObjects.Container;
+    // this.renderTypes[Phaser.SPRITE] = Phaser.Renderer.Canvas.GameObjects.Sprite;
+
+};
+
+Phaser.Renderer.Canvas.GameObjects = {
+    //  Populated by the GameObjects classes
+};
+
+Phaser.Renderer.Canvas.prototype.constructor = Phaser.Renderer.Canvas;
+
+Phaser.Renderer.Canvas.prototype = {
+
+    /**
+     * Maps Blend modes to Canvas blend modes.
+     *
+     * @method mapBlendModes
+     * @private
+     */
+    mapBlendModes: function ()
+    {
+        var modes = Phaser.blendModes;
+
+        this.blendModes[modes.MULTIPLY] = 'multiply';
+        this.blendModes[modes.SCREEN] = 'screen';
+        this.blendModes[modes.OVERLAY] = 'overlay';
+        this.blendModes[modes.DARKEN] = 'darken';
+        this.blendModes[modes.LIGHTEN] = 'lighten';
+        this.blendModes[modes.COLOR_DODGE] = 'color-dodge';
+        this.blendModes[modes.COLOR_BURN] = 'color-burn';
+        this.blendModes[modes.HARD_LIGHT] = 'hard-light';
+        this.blendModes[modes.SOFT_LIGHT] = 'soft-light';
+        this.blendModes[modes.DIFFERENCE] = 'difference';
+        this.blendModes[modes.EXCLUSION] = 'exclusion';
+        this.blendModes[modes.HUE] = 'hue';
+        this.blendModes[modes.SATURATION] = 'saturation';
+        this.blendModes[modes.COLOR] = 'color';
+        this.blendModes[modes.LUMINOSITY] = 'luminosity';
+
+    },
+
+    resize: function (width, height)
+    {
+        this.width = width * this.game.resolution;
+        this.height = height * this.game.resolution;
+
+        this.view.width = this.width;
+        this.view.height = this.height;
+
+        if (this.autoResize)
+        {
+            this.view.style.width = (this.width / this.game.resolution) + 'px';
+            this.view.style.height = (this.height / this.game.resolution) + 'px';
+        }
+
+        if (this.smoothProperty)
+        {
+            this.context[this.smoothProperty] = (this.scaleMode === Phaser.scaleModes.LINEAR);
+        }
+
+    },
+
+    /**
+     * Renders the Phaser.Stage to the canvas view, then iterates through its children.
+     *
+     * @method render
+     * @param stage {Phaser.Stage}
+     */
+    render: function (stage)
+    {
+        this.context.setTransform(1, 0, 0, 1, 0, 0);
+        this.context.globalAlpha = 1;
+        this.context.globalCompositeOperation = 'source-over';
+
+        this.currentBlendMode = 0;
+        this.currentScaleMode = 0;
+
+        //  Add Pre-render hook
+
+        // this.renderSession.currentBlendMode = 0;
+        // this.renderSession.shakeX = this.game.camera._shake.x;
+        // this.renderSession.shakeY = this.game.camera._shake.y;
+
+        //  Is this needed any longer?
+        /*
+        if (navigator.isCocoonJS && this.view.screencanvas)
+        {
+            this.context.fillStyle = "black";
+            this.context.clear();
+        }
+        */
+        
+        if (this.clearBeforeRender)
+        {
+            if (this.transparent)
+            {
+                this.context.clearRect(0, 0, this.width, this.height);
+            }
+            else if (stage._bgColor)
+            {
+                this.context.fillStyle = stage._bgColor.rgba;
+                this.context.fillRect(0, 0, this.width , this.height);
+            }
+        }
+
+        stage.render(this, stage);
+
+        //  Add Post-render hook
+
+    },
+
+    /**
+     * This method adds it to the current stack of masks.
+     *
+     * @method pushMask
+     * @param maskData {Object} the maskData that will be pushed
+     * @param renderSession {Object} The renderSession whose context will be used for this mask manager.
+     */
+    pushMask: function (maskData)
+    {
+        this.context.save();
+        
+        var cacheAlpha = maskData.alpha;
+        var transform = maskData.worldTransform;
+
+        var resolution = this.game.resolution;
+
+        this.context.setTransform(
+            transform.a * resolution,
+            transform.b * resolution,
+            transform.c * resolution,
+            transform.d * resolution,
+            transform.tx * resolution,
+            transform.ty * resolution
+        );
+
+        // PIXI.CanvasGraphics.renderGraphicsMask(maskData, context);
+
+        this.context.clip();
+
+        maskData.worldAlpha = cacheAlpha;
+
+    },
+
+    popMask: function ()
+    {
+        this.context.restore();
+    },
+
+    /**
+     * Removes everything from the renderer and optionally removes the Canvas DOM element.
+     *
+     * @method destroy
+     * @param [removeView=true] {boolean} Removes the Canvas element from the DOM.
+     */
+    destroy: function ()
+    {
+        //  CanvasPool
+
+        this.view = null;
+        this.context = null;
+        this.maskManager = null;
+
+    }
+
+};
+