Canvas RenderTexture rendering added

Author: bitnenfer

src/gameobjects/rendertexture/RenderTexture.js

@@ -2,7 +2,9 @@ var Class = require('../../utils/Class');
 var Components = require('../components');
 var GameObject = require('../GameObject');
 var RenderTextureWebGL = require('./RenderTextureWebGL');
+var RenderTextureCanvas = require('./RenderTextureCanvas');
 var Render = require('./RenderTextureRender');
+var CanvasPool = require('../../display/canvas/CanvasPool');
 
 var RenderTexture = new Class({
 
@@ -48,11 +50,12 @@ var RenderTexture = new Class({
         }
         else
         {
-            // For now we'll just add canvas stubs
-            this.fill = function () {};
-            this.clear = function () {};
-            this.draw = function () {};
-            this.drawFrame = function () {};
+            this.fill = RenderTextureCanvas.fill;
+            this.clear = RenderTextureCanvas.clear;
+            this.draw = RenderTextureCanvas.draw;
+            this.drawFrame = RenderTextureCanvas.drawFrame;
+            this.canvas = CanvasPool.create2D(null, width, height);
+            this.context = this.canvas.getContext('2d'); 
         }
 
         this.setPosition(x, y);

src/gameobjects/rendertexture/RenderTextureCanvas.js

@@ -0,0 +1,30 @@
+var RenderTextureCanvas = {
+
+    fill: function (rgb)
+    {
+        var ur = ((rgb >> 16)|0) & 0xff;
+        var ug = ((rgb >> 8)|0) & 0xff;
+        var ub = (rgb|0) & 0xff;
+
+        this.context.fillStyle = 'rgb(' + ur + ',' + ug + ',' + ub + ')';
+        this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+        return this;
+    },
+
+    clear: function ()
+    {
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        return this;
+    },
+
+    draw: function (texture, frame, x, y)
+    {
+        var matrix = this.currentMatrix;
+        this.context.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+        this.context.drawImage(texture.source[frame.sourceIndex].image, frame.x, frame.y, frame.width, frame.height, x, y, frame.width, frame.height);
+        return this;
+    }
+
+};
+
+module.exports = RenderTextureCanvas;

src/gameobjects/rendertexture/RenderTextureCanvasRenderer.js

@@ -7,6 +7,59 @@ var RenderTextureCanvasRenderer = function (renderer, renderTexture, interpolati
         return;
     }
 
+    var ctx = renderer.currentContext;
+
+    if (renderer.currentBlendMode !== renderTexture.blendMode)
+    {
+        renderer.currentBlendMode = renderTexture.blendMode;
+        ctx.globalCompositeOperation = renderer.blendModes[renderTexture.blendMode];
+    }
+
+    if (renderer.currentAlpha !== renderTexture.alpha)
+    {
+        renderer.currentAlpha = renderTexture.alpha;
+        ctx.globalAlpha = renderTexture.alpha;
+    }
+
+    if (renderer.currentScaleMode !== renderTexture.scaleMode)
+    {
+        renderer.currentScaleMode = renderTexture.scaleMode;
+    }
+
+    var dx = 0;
+    var dy = 0;
+
+    var fx = 1;
+    var fy = 1;
+
+    if (renderTexture.flipX)
+    {
+        fx = -1;
+        dx -= renderTexture.canvas.width - renderTexture.displayOriginX;
+    }
+    else
+    {
+        dx -= renderTexture.displayOriginX;
+    }
+
+    if (renderTexture.flipY)
+    {
+        fy = -1;
+        dy -= renderTexture.canvas.height - src.displayOriginY;
+    }
+    else
+    {
+        dy -= renderTexture.displayOriginY;
+    }
+
+    ctx.save();
+    ctx.translate(renderTexture.x - camera.scrollX * renderTexture.scrollFactorX, renderTexture.y - camera.scrollY * renderTexture.scrollFactorY);
+    ctx.rotate(renderTexture.rotation);
+    ctx.scale(renderTexture.scaleX, renderTexture.scaleY);
+    ctx.scale(fx, fy);
+    ctx.drawImage(renderTexture.canvas, dx, dy);
+    ctx.restore();
+
 };
 
 module.exports = RenderTextureCanvasRenderer;

src/gameobjects/rendertexture/RenderTextureWebGL.js

@@ -24,18 +24,11 @@ var RenderTextureWebGL = {
         return this;
     },
 
-    draw: function (texture, x, y)
+    draw: function (texture, frame, x, y)
     {
+        var glTexture = texture.source[frame.sourceIndex].glTexture;
         this.renderer.setFramebuffer(this.framebuffer);
-        this.renderer.pipelines.TextureTintPipeline.drawTexture(texture, x, y, 0, 0, texture.width, texture.height, this.currentMatrix);
-        this.renderer.setFramebuffer(null);
-        return this;
-    },
-
-    drawFrame: function (texture, x, y, frame)
-    {
-        this.renderer.setFramebuffer(this.framebuffer);
-        this.renderer.pipelines.TextureTintPipeline.drawTexture(texture, frame.x, frame.y, frame.width, frame.height, texture.width, texture.height, this.currentMatrix);
+        this.renderer.pipelines.TextureTintPipeline.drawTexture(glTexture, x, y, frame.x, frame.y, frame.width, frame.height, this.currentMatrix);
         this.renderer.setFramebuffer(null);
         return this;
     }