Lots of Canvas Renderer fixes.

Merged CONST with Phaser export.
Fixed GetObjectValue check.
Added drawImage data to Frame.

v3/src/boot/Config.js

@@ -18,7 +18,7 @@ var defaultBannerColor = [
 
 var defaultBannerTextColor = '#ffffff';
 
-function Config (config)
+var Config = function (config)
 {
     if (config === undefined) { config = {}; }
 
@@ -42,7 +42,7 @@ function Config (config)
     this.gameVersion = GetObjectValue(config, 'version', '');
 
     //  If you do: { banner: false } it won't display any banner at all
-    this.hideBanner = (GetObjectValue(config, 'banner', false) === false);
+    this.hideBanner = (GetObjectValue(config, 'banner', null) === false);
 
     this.hidePhaser = GetObjectValue(config, 'banner.hidePhaser', false);
     this.bannerTextColor = GetObjectValue(config, 'banner.text', defaultBannerTextColor);
@@ -55,8 +55,7 @@ function Config (config)
     //  Callbacks
     this.preBoot = GetObjectValue(config, 'callbacks.preBoot', NOOP);
     this.postBoot = GetObjectValue(config, 'callbacks.postBoot', NOOP);
-
+};
-}
 
 Config.prototype.constructor = Config;
 

v3/src/boot/Game.js

@@ -15,7 +15,7 @@ var DOMContentLoaded = require('../dom/DOMContentLoaded');
 var CreateRenderer = require('./CreateRenderer');
 var RandomDataGenerator = require('../math/random-data-generator/RandomDataGenerator');
 var StateManager = require('../state/StateManager');
-var TextureManager = require ('../textures/TextureManager');
+var TextureManager = require('../textures/TextureManager');
 
 var Game = function (config)
 {

v3/src/checksum.js

@@ -1,4 +1,4 @@
 var CHECKSUM = {
-build: 'cd5e7c40-d7b6-11e6-b751-619825ddff5c'
+build: '8ffe3950-dc3c-11e6-846b-836ccabf9869'
 };
 module.exports = CHECKSUM;

v3/src/components/Transform.js

@@ -43,8 +43,8 @@ var Transform = function (gameObject, x, y, scaleX, scaleY)
     //  GL Vertex Data
     this.glVertextData = { x0: 0, y0: 0, x1: 0, y1: 0, x2: 0, y2: 0, x3: 0, y3: 0 };
 
-    //  Canvas SetTransform Data
+    //  Canvas SetTransform data
-    this.canvasData = { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 };
+    this.canvasData = { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0, dx: 0, dy: 0 };
 
     this.immediate = false;
 
@@ -455,7 +455,7 @@ Transform.prototype = {
         this.cache.d = this.cache.cr * this._scaleY;
     },
 
-    updateVertexData: function (interpolationPercentage)
+    updateVertexData: function (interpolationPercentage, renderer)
     {
         if (!this.gameObject.frame || (!this._dirtyVertex && !this.interpolate))
         {
@@ -542,7 +542,7 @@ Transform.prototype = {
             h1 = _w1;
         }
 
-        if (frame.autoRound === 1 || (frame.autoRound === -1 && this.game.renderer.roundPixels))
+        if (frame.autoRound === 1 || (frame.autoRound === -1 && renderer.roundPixels))
         {
             tx |= 0;
             ty |= 0;
@@ -597,8 +597,10 @@ Transform.prototype = {
         };
     },
 
-    getCanvasTransformData: function (interpolationPercentage)
+    getCanvasTransformData: function (interpolationPercentage, renderer)
     {
+        var frame = this.gameObject.frame;
+
         var world = this.world;
         var data = this.canvasData;
 
@@ -613,6 +615,8 @@ Transform.prototype = {
             data.d = old.d + ((world.d - old.d) * interpolationPercentage);
             data.tx = old.tx + ((world.tx - old.tx) * interpolationPercentage);
             data.ty = old.ty + ((world.ty - old.ty) * interpolationPercentage);
+            data.dx = old.dx + ((frame.x - (this.anchorX * frame.width)) * interpolationPercentage);
+            data.dy = old.dy + ((frame.y - (this.anchorY * frame.height)) * interpolationPercentage);
         }
         else
         {
@@ -623,6 +627,16 @@ Transform.prototype = {
             data.d = world.d;
             data.tx = world.tx;
             data.ty = world.ty;
+            data.dx = frame.x - (this.anchorX * frame.width);
+            data.dy = frame.y - (this.anchorY * frame.height);
+        }
+
+        if (frame.autoRound === 1 || (frame.autoRound === -1 && renderer.roundPixels))
+        {
+            data.tx |= 0;
+            data.ty |= 0;
+            data.dx |= 0;
+            data.dy |= 0;
         }
 
         return data;

v3/src/gameobjects/image/ImageCanvasRenderer.js

@@ -11,11 +11,11 @@ var ImageCanvasRenderer = function (renderer, src, interpolationPercentage)
         return;
     }
 
-    var data = src.transform.getCanvasTransformData(interpolationPercentage);
+    var data = src.transform.getCanvasTransformData(interpolationPercentage, renderer);
     var tint = src.color._glTint;
     var bg = src.color._glBg;
 
-    renderer.batch.add(frame.source, src.blendMode, data, frame.uvs, alpha, tint, bg);
+    renderer.drawImage(frame, src.blendMode, data, alpha, tint, bg);
 };
 
 module.exports = ImageCanvasRenderer;

v3/src/gameobjects/image/ImageWebGLRenderer.js

@@ -11,7 +11,7 @@ var ImageWebGLRenderer = function (renderer, src, interpolationPercentage)
         return;
     }
 
-    var verts = src.transform.getVertexData(interpolationPercentage);
+    var verts = src.transform.getVertexData(interpolationPercentage, renderer);
     var index = src.frame.source.glTextureIndex;
     var tint = src.color._glTint;
     var bg = src.color._glBg;

v3/src/phaser.js

@@ -1,5 +1,8 @@
 require('./polyfills');
 
+var CONST = require('./const');
+var Extend = require('./utils/object/Extend');
+
 //  This object is exported globally
 
 var Phaser = {
@@ -41,6 +44,10 @@ var Phaser = {
 require('./gameobjects/image/ImageFactory');
 require('./gameobjects/container/ContainerFactory');
 
+//   Merge in the consts
+
+Phaser = Extend(false, Phaser, CONST);
+
 //  Export it
 
 module.exports = Phaser;

v3/src/renderer/canvas/BatchManager.js

@@ -1,98 +0,0 @@
-var DrawImageBatch = require('./batches/DrawImageBatch');
-
-var BatchManager = function (renderer, batchSize)
-{
-    this.renderer = renderer;
-
-    this.currentBatch = null;
-
-    this.drawImageBatch = new DrawImageBatch(this, batchSize);
-
-    // this.pixelBatch = new Batch.Pixel(this, batchSize);
-    // this.fxBatch = new Batch.FX(this, batchSize);
-};
-
-BatchManager.prototype.constructor = BatchManager;
-
-BatchManager.prototype = {
-
-    init: function ()
-    {
-        this.drawImageBatch.init();
-
-        // this.pixelBatch.init();
-        // this.fxBatch.init();
-
-        this.currentBatch = this.drawImageBatch;
-    },
-
-    start: function ()
-    {
-        this.currentBatch.start();
-    },
-
-    stop: function ()
-    {
-        this.currentBatch.stop();
-    },
-
-    setBatch: function (newBatch)
-    {
-        if (this.currentBatch.type === newBatch.type)
-        {
-            return false;
-        }
-
-        //  Flush whatever was in the current batch (if anything)
-        this.currentBatch.flush();
-
-        this.currentBatch = newBatch;
-
-        this.currentBatch.start(true);
-
-        return true;
-    },
-
-    //  Add a new entry into the current sprite batch
-//    add: function (source, blendMode, verts, uvs, textureIndex, alpha, tintColors, bgColors)
-    add: function (source, blendMode, )
-    {
-        var hasFlushed = false;
-
-        //  Check Batch Size and flush if needed
-        if (this.drawImageBatch.size >= this.drawImageBatch.maxSize)
-        {
-            this.drawImageBatch.flush();
-
-            hasFlushed = true;
-        }
-
-        this.drawImageBatch.add();
-    },
-
-    /*
-    addPixel: function (x0, y0, x1, y1, x2, y2, x3, y3, color)
-    {
-        var hasFlushed = this.setBatch(this.pixelBatch);
-
-        //  Check Batch Size and flush if needed
-        if (!hasFlushed && this.pixelBatch.size >= this.pixelBatch.maxSize)
-        {
-            this.pixelBatch.flush();
-        }
-
-        this.pixelBatch.add(x0, y0, x1, y1, x2, y2, x3, y3, color);
-    },
-    */
-
-    destroy: function ()
-    {
-        this.singleTextureBatch.destroy();
-
-        this.renderer = null;
-        this.gl = null;
-    }
-
-};
-
-module.exports = BatchManager;

v3/src/renderer/canvas/CanvasRenderer.js

@@ -1,4 +1,4 @@
-var BatchManager = require('./BatchManager');
+var DrawImage = require('./utils/DrawImage');
 
 var CanvasRenderer = function (game)
 {
@@ -38,10 +38,12 @@ var CanvasRenderer = function (game)
 
     this.roundPixels = false;
 
-    this.batch = new BatchManager(this, 4000);
+    //  Map to the required function
+    this.drawImage = DrawImage;
 
-    // var so = 'source-over';
+    var so = 'source-over';
-    // this.blendModes = [ so, 'lighter', so, so, so, so, so, so, so, so, so, so, so, so, so, so, so ];
+
+    this.blendModes = [ so, 'lighter', so, so, so, so, so, so, so, so, so, so, so, so, so, so, so ];
 
     this.currentAlpha = 1;
     this.currentBlendMode = 0;
@@ -51,8 +53,6 @@ var CanvasRenderer = function (game)
     this.endTime = 0;
     this.drawCount = 0;
 
-    this.blendModes = [];
-
     // this.tintMethod = this.tintWithPerPixel;
 
     this.init();
@@ -66,8 +66,6 @@ CanvasRenderer.prototype = {
     {
         this.mapBlendModes();
 
-        this.batch.init();
-
         this.resize(this.width, this.height);
     },
 
@@ -164,13 +162,9 @@ CanvasRenderer.prototype = {
 
         this.drawCount = 0;
 
-        this.batch.start();
-
         //  Could move to the State Systems or MainLoop
         this.game.state.renderChildren(this, state, interpolationPercentage);
 
-        this.batch.stop();
-
         this.endTime = Date.now();
 
         // console.log('%c render end ', 'color: #ffffff; background: #ff0000;');

v3/src/renderer/canvas/utils/DrawImage.js

@@ -0,0 +1,36 @@
+
+var DrawImage = function (frame, blendMode, transform, alpha, tint, bg)
+{
+    var ctx = this.context;
+    var cd = frame.canvasData;
+
+    //  Blend Mode
+
+    if (this.currentBlendMode !== blendMode)
+    {
+        this.currentBlendMode = blendMode;
+        ctx.globalCompositeOperation = this.blendModes[blendMode];
+    }
+
+    //  Alpha
+
+    if (this.currentAlpha !== alpha)
+    {
+        this.currentAlpha = alpha;
+        ctx.globalAlpha = alpha;
+    }
+
+    //  Smoothing (should this be a Game Object, or Frame / Texture level property?)
+
+    if (this.currentScaleMode !== frame.source.scaleMode)
+    {
+        // this.currentScaleMode = source.scaleMode;
+        // ctx[this.smoothProperty] = (source.scaleMode === Phaser.scaleModes.LINEAR);
+    }
+
+    ctx.setTransform(transform.a, transform.b, transform.c, transform.d, transform.tx, transform.ty);
+    ctx.drawImage(frame.source.image, cd.sx, cd.sy, cd.sWidth, cd.sHeight, transform.dx, transform.dy, cd.dWidth, cd.dHeight);
+
+};
+
+module.exports = DrawImage;

v3/src/textures/Frame.js

@@ -9,9 +9,7 @@ var Extend = require('../utils/object/Extend');
 /**
 * A Frame is a section of a Texture.
 *
-* Called TextureFrame during integration, will rename to Frame later.
+* @class Phaser.Frame
-*
-* @class Phaser.TextureFrame
 * @constructor
 * @param {Phaser.Texture} texture - The Texture this Frame belongs to.
 * @param {string} name - The unique (within the Texture) name of this Frame.
@@ -142,6 +140,14 @@ var Frame = function (texture, name, sourceIndex, x, y, width, height)
             y2: 0,
             x3: 0,
             y3: 0
+        },
+        drawImage: {
+            sx: x,
+            sy: y,
+            sWidth: width,
+            sHeight: height,
+            dWidth: width,
+            dHeight: height
         }
     };
 
@@ -165,17 +171,21 @@ Frame.prototype = {
     */
     setTrim: function (actualWidth, actualHeight, destX, destY, destWidth, destHeight)
     {
+        var data = this.data;
+        var ss = data.spriteSourceSize;
+        var di = data.drawImage;
+
         //  Store actual values
 
-        this.data.trim = true;
+        data.trim = true;
 
-        this.data.sourceSize.w = actualWidth;
+        data.sourceSize.w = actualWidth;
-        this.data.sourceSize.h = actualHeight;
+        data.sourceSize.h = actualHeight;
 
-        this.data.spriteSourceSize.x = destX;
+        ss.x = destX;
-        this.data.spriteSourceSize.y = destY;
+        ss.y = destY;
-        this.data.spriteSourceSize.w = destWidth;
+        ss.w = destWidth;
-        this.data.spriteSourceSize.h = destHeight;
+        ss.h = destHeight;
 
         //  Adjust properties
         this.x = destX;
@@ -183,6 +193,14 @@ Frame.prototype = {
         this.width = destWidth;
         this.height = destHeight;
 
+        //  drawImage data
+        di.sx = destX;
+        di.sy = destY;
+        di.sWidth = destWidth;
+        di.sHeight = destHeight;
+        di.dWidth = destWidth;
+        di.dHeight = destHeight;
+
         this.updateUVs();
 
         return this;
@@ -324,6 +342,23 @@ Object.defineProperties(Frame.prototype, {
             return this.data.uvs;
         }
 
+    },
+
+    /**
+    * Canvas Draw Image data
+    *
+    * @name Phaser.TextureFrame#canvasData
+    * @property {Object} canvasData
+    */
+    canvasData: {
+
+        enumerable: true,
+
+        get: function ()
+        {
+            return this.data.drawImage;
+        }
+
     }
 
 });

v3/src/utils/GetObjectValue.js

@@ -6,8 +6,7 @@ var GetObjectValue = function (source, key, defaultValue)
 {
     if (key.indexOf('.'))
     {
-        keys = key.split('.');
+        var keys = key.split('.');
-
         var parent = source;
         var value = defaultValue;
 
@@ -31,9 +30,8 @@ var GetObjectValue = function (source, key, defaultValue)
     }
     else
     {
-        return (source.hasOwnProperty(key) ? source[key] : defaultValue);
+        return (source.hasOwnProperty(key)) ? source[key] : defaultValue;
     }
-
+};
-}
 
 module.exports = GetObjectValue;