Refactoring RenderTexture to remove the matrix stack and add in support for drawing Game Objects and arrays of them

Author: photonstorm

src/gameobjects/rendertexture/RenderTexture.js

@@ -57,7 +57,6 @@ var RenderTexture = new Class({
         Components.Flip,
         Components.GetBounds,
         Components.Mask,
-        Components.MatrixStack,
         Components.Origin,
         Components.Pipeline,
         Components.ScaleMode,
@@ -77,7 +76,7 @@ var RenderTexture = new Class({
 
         GameObject.call(this, scene, 'RenderTexture');
 
-        this.initMatrixStack();
+        // this.initMatrixStack();
 
         /**
          * A reference to either the Canvas or WebGL Renderer that the Game instance is using.
@@ -138,6 +137,8 @@ var RenderTexture = new Class({
          */
         this.framebuffer = null;
 
+        this.currentMatrix = new Components.TransformMatrix();
+
         if (this.renderer.type === CONST.WEBGL)
         {
             var gl = this.renderer.gl;
@@ -146,6 +147,8 @@ var RenderTexture = new Class({
             this.fill = RenderTextureWebGL.fill;
             this.clear = RenderTextureWebGL.clear;
             this.draw = RenderTextureWebGL.draw;
+            this.drawFrame = RenderTextureWebGL.drawFrame;
+            this.drawGameObject = RenderTextureWebGL.drawGameObject;
             this.texture = this.renderer.createTexture2D(0, gl.NEAREST, gl.NEAREST, gl.CLAMP_TO_EDGE, gl.CLAMP_TO_EDGE, gl.RGBA, null, width, height, false);
             this.framebuffer = this.renderer.createFramebuffer(width, height, this.texture, false);
         }

src/gameobjects/rendertexture/RenderTextureCanvas.js

@@ -42,18 +42,33 @@ var RenderTextureCanvas = {
 
     /**
      * Draws the Texture Frame to the Render Texture at the given position.
+     * 
+     * You can either pass in a Game Object frame property:
+     * 
+     * ```javascript
+     * var rt = this.add.renderTexture(100, 100, 400, 300);
+     * var bunny = this.make.sprite({ key: 'bunny' }, false);
+     * rt.draw(bunny.frame, 0, 0);
+     * ```
+     * 
+     * Or get a frame reference from the Texture Manager:
+     * 
+     * ```javascript
+     * var rt = this.add.renderTexture(100, 100, 400, 300);
+     * var bunny = this.textures.getFrame('bunny');
+     * rt.draw(bunny, 0, 0);
+     * ```
      *
      * @method Phaser.GameObjects.RenderTexture#draw
      * @since 3.2.0
      *
-     * @param {Phaser.Textures.Texture} texture - Currently unused.
-     * @param {Phaser.Textures.Frame} frame - The Texture Frame that will be drawn to the Render Texture. Get this from the Texture Manager via `this.textures.getFrame(key)`.
+     * @param {Phaser.Textures.Frame} frame - The Texture Frame that will be drawn to the Render Texture.
      * @param {number} x - The x position to draw the frame at.
      * @param {number} y - The y position to draw the frame at.
      *
-     * @return {Phaser.GameObjects.RenderTexture} This Game Object.
+     * @return {this} This Game Object.
      */
-    draw: function (texture, frame, x, y)
+    draw: function (frame, x, y)
     {
         var cd = frame.canvasData;
         var source = frame.source.image;

src/gameobjects/rendertexture/RenderTextureWebGL.js

@@ -1,3 +1,5 @@
+var Utils = require('../../renderer/webgl/Utils');
+
 var RenderTextureWebGL = {
 
     /**
@@ -56,41 +58,105 @@ var RenderTextureWebGL = {
 
     /**
      * Draws the Texture Frame to the Render Texture at the given position.
+     * 
+     * You can either pass in a Game Object frame property:
+     * 
+     * ```javascript
+     * var rt = this.add.renderTexture(100, 100, 400, 300);
+     * var bunny = this.make.sprite({ key: 'bunny' }, false);
+     * rt.draw(bunny.frame, 0, 0);
+     * ```
+     * 
+     * Or get a frame reference from the Texture Manager:
+     * 
+     * ```javascript
+     * var rt = this.add.renderTexture(100, 100, 400, 300);
+     * var bunny = this.textures.getFrame('bunny');
+     * rt.draw(bunny, 0, 0);
+     * ```
      *
      * @method Phaser.GameObjects.RenderTexture#draw
      * @since 3.2.0
      *
-     * @param {Phaser.Textures.Texture} texture - Currently unused.
-     * @param {Phaser.Textures.Frame} frame - The Texture Frame that will be drawn to the Render Texture. Get this from the Texture Manager via `this.textures.getFrame(key)`.
+     * @param {Phaser.Textures.Frame} frame - The Texture Frame that will be drawn to the Render Texture.
      * @param {number} x - The x position to draw the frame at.
      * @param {number} y - The y position to draw the frame at.
+     * @param {number} [tint] - A tint color to be applied to the frame drawn to the Render Texture.
      *
-     * @return {Phaser.GameObjects.RenderTexture} This Game Object.
+     * @return {this} This Game Object.
      */
-    draw: function (texture, frame, x, y, tint)
+    draw: function (stamp, x, y, tint)
     {
-        if (tint === undefined)
-        {
-            tint = (this.globalTint >> 16) + (this.globalTint & 0xff00) + ((this.globalTint & 0xff) << 16);
-        }
-        else
+        if (x === undefined) { x = 0; }
+        if (y === undefined) { y = 0; }
+
+        if (!Array.isArray(stamp))
         {
-            tint = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16);
+            stamp = [ stamp ];
         }
 
         this.renderer.setFramebuffer(this.framebuffer);
 
         var pipeline = this.pipeline;
 
-        pipeline.projOrtho(0, pipeline.width, 0, pipeline.height, -1000.0, 1000.0);
+        pipeline.projOrtho(0, this.width, 0, this.height, -1000.0, 1000.0);
 
-        pipeline.drawTextureFrame(frame, x, y, tint, this.globalAlpha, this.currentMatrix, null);
+        for (var i = 0; i < stamp.length; i++)
+        {
+            if (stamp[i].frame)
+            {
+                this.drawGameObject(stamp[i], x, y);
+            }
+            {
+                this.drawFrame(stamp[i], x, y, tint);
+            }
+        }
+
+        pipeline.flush();
 
         this.renderer.setFramebuffer(null);
 
         pipeline.projOrtho(0, pipeline.width, pipeline.height, 0, -1000.0, 1000.0);
 
         return this;
+    },
+
+    drawGameObject: function (gameObject, x, y)
+    {
+        var getTint = Utils.getTintAppendFloatAlpha;
+
+        this.pipeline.batchTextureFrame(
+            gameObject,
+            gameObject.frame,
+            x, y,
+            gameObject.width, gameObject.height,
+            gameObject.scaleX, gameObject.scaleY,
+            gameObject.rotation,
+            gameObject.flipX, gameObject.flipY,
+            gameObject.displayOriginX, gameObject.displayOriginY,
+            getTint(gameObject._tintTL, this.alpha * gameObject._alphaTL),
+            getTint(gameObject._tintTR, this.alpha * gameObject._alphaTR),
+            getTint(gameObject._tintBL, this.alpha * gameObject._alphaBL),
+            getTint(gameObject._tintBR, this.alpha * gameObject._alphaBR),
+            (gameObject._isTinted && gameObject.tintFill),
+            null
+        );
+    },
+
+    drawFrame: function (frame, x, y, tint)
+    {
+        if (tint === undefined)
+        {
+            tint = (this.globalTint >> 16) + (this.globalTint & 0xff00) + ((this.globalTint & 0xff) << 16);
+        }
+        else
+        {
+            tint = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16);
+        }
+
+        this.pipeline.drawTextureFrame(frame, x, y, tint, this.globalAlpha, this.currentMatrix, null);
+
+        // pipeline.drawTextureFrame(frame, x, y, tint, this.globalAlpha, [1,0,0,1,0,0,0,0,1], null);
     }
 
 };