Text updated to use proper texture frame and now supports crop

Author: photonstorm

src/gameobjects/text/static/Text.js

@@ -29,6 +29,7 @@ var TextStyle = require('../TextStyle');
  * @extends Phaser.GameObjects.Components.Alpha
  * @extends Phaser.GameObjects.Components.BlendMode
  * @extends Phaser.GameObjects.Components.ComputedSize
+ * @extends Phaser.GameObjects.Components.Crop
  * @extends Phaser.GameObjects.Components.Depth
  * @extends Phaser.GameObjects.Components.Flip
  * @extends Phaser.GameObjects.Components.GetBounds
@@ -55,6 +56,7 @@ var Text = new Class({
         Components.Alpha,
         Components.BlendMode,
         Components.ComputedSize,
+        Components.Crop,
         Components.Depth,
         Components.Flip,
         Components.GetBounds,
@@ -78,6 +80,15 @@ var Text = new Class({
 
         GameObject.call(this, scene, 'Text');
 
+        /**
+         * The renderer in use by this Text object.
+         *
+         * @name Phaser.GameObjects.Text#renderer
+         * @type {(Phaser.Renderer.Canvas.CanvasRenderer|Phaser.Renderer.WebGL.WebGLRenderer)}
+         * @since 3.12.0
+         */
+        this.renderer = scene.sys.game.renderer;
+
         this.setPosition(x, y);
         this.setOrigin(0, 0);
         this.initPipeline('TextureTintPipeline');
@@ -171,16 +182,6 @@ var Text = new Class({
          */
         this.height = 1;
 
-        /**
-         * The Canvas Texture that the text is rendered to for WebGL rendering.
-         *
-         * @name Phaser.GameObjects.Text#canvasTexture
-         * @type {HTMLCanvasElement}
-         * @default null
-         * @since 3.0.0
-         */
-        this.canvasTexture = null;
-
         /**
          * Whether the text or its settings have changed and need updating.
          *
@@ -197,6 +198,34 @@ var Text = new Class({
             this.style.resolution = scene.sys.game.config.resolution;
         }
 
+        /**
+         * The internal crop data object, as used by `setCrop` and passed to the `Frame.setCropUVs` method.
+         *
+         * @name Phaser.GameObjects.Text#_crop
+         * @type {object}
+         * @private
+         * @since 3.12.0
+         */
+        this._crop = this.resetCropObject();
+
+        //  Create a Texture for this Text object
+        this.texture = scene.sys.textures.addCanvas(null, this.canvas, true);
+
+        //  Get the frame
+        this.frame = this.texture.get();
+
+        //  Set the resolution
+        this.frame.source.resolution = this.style.resolution;
+
+        if (this.renderer && this.renderer.gl)
+        {
+            //  Clear the default 1x1 glTexture, as we override it later
+
+            this.renderer.deleteTexture(this.frame.source.glTexture);
+
+            this.frame.source.glTexture = null;
+        }
+
         this.initRTL();
 
         if (style && style.padding)
@@ -215,7 +244,6 @@ var Text = new Class({
         {
             scene.sys.game.renderer.onContextRestored(function ()
             {
-                this.canvasTexture = null;
                 this.dirty = true;
             }, this);
         }
@@ -1014,6 +1042,9 @@ var Text = new Class({
         {
             canvas.width = w;
             canvas.height = h;
+
+            this.frame.setSize(w, h);
+
             style.syncFont(canvas, context); // Resizing resets the context
         }
         else
@@ -1088,6 +1119,12 @@ var Text = new Class({
 
         context.restore();
 
+        if (this.renderer.gl)
+        {
+            this.frame.source.glTexture = this.renderer.canvasToTexture(canvas, this.frame.source.glTexture);
+            this.frame.glTexture = this.frame.source.glTexture;
+        }
+
         this.dirty = true;
 
         return this;
@@ -1152,6 +1189,8 @@ var Text = new Class({
         }
 
         CanvasPool.remove(this.canvas);
+
+        this.texture.destroy();
     }
 
 });

src/gameobjects/text/static/TextWebGLRenderer.js

@@ -27,27 +27,24 @@ var TextWebGLRenderer = function (renderer, src, interpolationPercentage, camera
     {
         return;
     }
-    
-    if (src.dirty)
-    {
-        src.canvasTexture = renderer.canvasToTexture(src.canvas, src.canvasTexture);
-        src.dirty = false;
-    }
 
+    var frame = src.frame;
+    var width = frame.width;
+    var height = frame.height;
     var getTint = Utils.getTintAppendFloatAlpha;
 
     this.pipeline.batchTexture(
         src,
-        src.canvasTexture,
-        src.canvasTexture.width, src.canvasTexture.height,
+        frame.glTexture,
+        width, height,
         src.x, src.y,
-        src.canvasTexture.width / src.style.resolution, src.canvasTexture.height / src.style.resolution,
+        width / src.style.resolution, height / src.style.resolution,
         src.scaleX, src.scaleY,
         src.rotation,
         src.flipX, src.flipY,
         src.scrollFactorX, src.scrollFactorY,
         src.displayOriginX, src.displayOriginY,
-        0, 0, src.canvasTexture.width, src.canvasTexture.height,
+        0, 0, width, height,
         getTint(src._tintTL, camera.alpha * src._alphaTL),
         getTint(src._tintTR, camera.alpha * src._alphaTR),
         getTint(src._tintBL, camera.alpha * src._alphaBL),