RenderTexture.resize wouldn't correctly resize the texture under WebGL. Fix phaserjs#4034

Author: photonstorm

CHANGELOG.md

@@ -108,6 +108,7 @@ Doing this gives you the ability to modify the texture before this happens, allo
 * The Cameras `setScene` method, which is called automatically when a new Camera is created, will now call `updateSystem` which correctly increases the custom viewport counter. This fixes an issue with mini-cams inside of larger cameras not clipping their contents properly. If a Camera is moved to another Scene it also now correctly shrinks the total custom viewport counter.
 * Due to the two fixes above another bug was fixed: The ability for you to swap between Cameras with and without `setRenderToTexture` enabled with custom shaders. Previously if you used this with a custom shader then only the first Camera using the shader would render, the rest would appear black. Now, all Cameras using the custom shader work correctly. As a result all of the 'experimental' Camera rendering properties from 3.12 have been moved to stable.
 * If you destroyed a Game Object that had a custom cursor set during one of its input events the cursor didn't correctly reset. Fix #4033 (thanks @pantoninho)
+* `RenderTexture.resize` wouldn't correctly resize the texture under WebGL. Fix #4034 (thanks @jbpuryear)
 
 ### Examples, Documentation and TypeScript
 

src/gameobjects/rendertexture/RenderTexture.js

@@ -17,6 +17,10 @@ var UUID = require('../../utils/string/UUID');
 /**
  * @classdesc
  * A Render Texture.
+ * 
+ * A Render Texture is a special texture that allows any number of Game Objects to be drawn to it. You can take many complex objects and
+ * draw them all to this one texture, which can they be used as the texture for other Game Object's. It's a way to generate dynamic
+ * textures at run-time that are WebGL friendly and don't invoke expensive GPU uploads.
  *
  * @class RenderTexture
  * @extends Phaser.GameObjects.GameObject
@@ -156,12 +160,32 @@ var RenderTexture = new Class({
          */
         this._crop = this.resetCropObject();
 
-        //  Create a Texture for this Text object
+        /**
+         * The Texture corresponding to this Render Texture.
+         *
+         * @name Phaser.GameObjects.RenderTexture#texture
+         * @type {Phaser.Textures.Texture}
+         * @since 3.12.0
+         */
         this.texture = scene.sys.textures.addCanvas(UUID(), this.canvas);
 
-        //  Get the frame
+        /**
+         * The Frame corresponding to this Render Texture.
+         *
+         * @name Phaser.GameObjects.RenderTexture#frame
+         * @type {Phaser.Textures.Frame}
+         * @since 3.12.0
+         */
         this.frame = this.texture.get();
 
+        /**
+         * Internal saved texture flag.
+         *
+         * @name Phaser.GameObjects.RenderTexture#_saved
+         * @type {boolean}
+         * @private
+         * @since 3.12.0
+         */
         this._saved = false;
 
         /**
@@ -185,7 +209,7 @@ var RenderTexture = new Class({
         this.dirty = false;
 
         /**
-         * [description]
+         * A reference to the WebGL Rendering Context.
          *
          * @name Phaser.GameObjects.RenderTexture#gl
          * @type {WebGLRenderingContext}
@@ -256,25 +280,27 @@ var RenderTexture = new Class({
 
         if (width !== this.width || height !== this.height)
         {
-            if (this.canvas)
-            {
-                this.canvas.width = width;
-                this.canvas.height = height;
-            }
-            else
+            this.canvas.width = width;
+            this.canvas.height = height;
+
+            if (this.gl)
             {
                 var gl = this.gl;
 
                 this.renderer.deleteTexture(this.frame.source.glTexture);
                 this.renderer.deleteFramebuffer(this.framebuffer);
 
                 this.frame.source.glTexture = 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);
+                this.framebuffer = this.renderer.createFramebuffer(width, height, this.frame.source.glTexture, false);
 
                 this.frame.glTexture = this.frame.source.glTexture;
             }
 
+            this.frame.source.width = width;
+            this.frame.source.height = height;
+
             this.camera.setSize(width, height);
+
             this.frame.setSize(width, height);
 
             this.width = width;
@@ -829,18 +855,15 @@ var RenderTexture = new Class({
      */
     preDestroy: function ()
     {
-        if (this.canvas && !this._saved)
+        if (!this._saved)
         {
             CanvasPool.remove(this.canvas);
-        }
 
-        if (this.gl)
-        {
-            this.renderer.deleteFramebuffer(this.framebuffer);
-        }
+            if (this.gl)
+            {
+                this.renderer.deleteFramebuffer(this.framebuffer);
+            }
 
-        if (!this._saved)
-        {
             this.texture.destroy();
         }
     }

src/gameobjects/rendertexture/RenderTextureFactory.js

@@ -11,6 +11,10 @@ var RenderTexture = require('./RenderTexture');
  * Creates a new Render Texture Game Object and adds it to the Scene.
  *
  * Note: This method will only be available if the Render Texture Game Object has been built into Phaser.
+ * 
+ * A Render Texture is a special texture that allows any number of Game Objects to be drawn to it. You can take many complex objects and
+ * draw them all to this one texture, which can they be used as the texture for other Game Object's. It's a way to generate dynamic
+ * textures at run-time that are WebGL friendly and don't invoke expensive GPU uploads.
  *
  * @method Phaser.GameObjects.GameObjectFactory#renderTexture
  * @since 3.2.0