Canvas TileSprite

Author: bitnenfer

v3/src/gameobjects/tilesprite/TileSprite.js

@@ -47,6 +47,7 @@ var TileSprite = new Class({
 
         this.potWidth = this.frame.width;
         this.potHeight = this.frame.height; 
+        this.canvasPattern = null;
 
         if (resourceManager) 
         {
@@ -71,7 +72,7 @@ var TileSprite = new Class({
 
             this.tileTexture = resourceManager.createTexture(0, gl.LINEAR, gl.LINEAR, gl.REPEAT, gl.REPEAT, gl.RGBA, this.canvasBuffer, this.potWidth, this.potHeight);
 
-        }
+        } 
 
         this.canvasBuffer = CanvasPool.create2D(null, this.potWidth, this.potHeight);
         this.canvasBufferCtx = this.canvasBuffer.getContext('2d');
@@ -84,6 +85,7 @@ var TileSprite = new Class({
         if (!this.dirty)
             return;
 
+        this.canvasBuffer.width = this.canvasBuffer.width;
         this.canvasBufferCtx.drawImage(
             this.frame.source.image, 
             this.frame.cutX, this.frame.cutY,
@@ -96,6 +98,10 @@ var TileSprite = new Class({
         {
             this.renderer.uploadCanvasToGPU(this.canvasBuffer, this.tileTexture, true);
         }
+        else
+        {
+            this.canvasPattern = this.canvasBufferCtx.createPattern(this.canvasBuffer, 'repeat');
+        }
         this.dirty = false;
     }
 

v3/src/gameobjects/tilesprite/TileSpriteCanvasRenderer.js

@@ -5,6 +5,43 @@ var TileSpriteCanvasRenderer = function (renderer, src, interpolationPercentage,
     {
         return;
     }
+
+    var ctx = renderer.currentContext;
+    var frame = src.frame;
+
+    //  Blend Mode
+
+    if (renderer.currentBlendMode !== src.blendMode)
+    {
+        renderer.currentBlendMode = src.blendMode;
+        ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
+    }
+
+    //  Alpha
+
+    if (renderer.currentAlpha !== src.alpha)
+    {
+        renderer.currentAlpha = src.alpha;
+        ctx.globalAlpha = src.alpha;
+    }
+
+    //  Smoothing
+
+    if (renderer.currentScaleMode !== src.scaleMode)
+    {
+        renderer.currentScaleMode = src.scaleMode;
+    }
+
+    var dx = frame.x - (src.originX * src.width);
+    var dy = frame.y - (src.originY * src.height);
+
+    ctx.save();
+    ctx.translate(dx, dy);
+    ctx.translate(src.x - camera.scrollX, src.y - camera.scrollY);
+    ctx.fillStyle = src.canvasPattern;
+    ctx.translate(-this.tilePositionX, -this.tilePositionY);
+    ctx.fillRect(this.tilePositionX, this.tilePositionY, src.width, src.height);
+    ctx.restore();
 };
 
 module.exports = TileSpriteCanvasRenderer;

v3/src/renderer/webgl/WebGLRenderer.js

@@ -427,7 +427,6 @@ WebGLRenderer.prototype = {
             /* only call this once */
             dstTexture.texture = gl.createTexture();
         }
-        
         if (shouldUpdateResource)
         {
             /* Update resource */

v3/src/renderer/webgl/renderers/tilebatch/TileBatch.js

@@ -202,8 +202,8 @@ TileBatch.prototype = {
         var mva, mvb, mvc, mvd, mve, mvf, tx0, ty0, tx1, ty1, tx2, ty2, tx3, ty3;
         var sra, srb, src, srd, sre, srf, cma, cmb, cmc, cmd, cme, cmf;
         var alpha = gameObject.alpha;
-        var tilePositionX = gameObject.tilePositionX / width;
-        var tilePositionY = gameObject.tilePositionY / height;
+        var tilePositionX = gameObject.tilePositionX / gameObject.frame.width;
+        var tilePositionY = gameObject.tilePositionY / gameObject.frame.height;
         var texture = gameObject.tileTexture;
 
         tempMatrix.applyITRS(translateX, translateY, rotation, scaleX, scaleY);