Text supports high dpi resolution for its internal canvas

Author: photonstorm

src/gameobjects/text/TextStyle.js

@@ -40,6 +40,7 @@ var propertyMap = {
     maxLines: [ 'maxLines', 0 ],
     fixedWidth: [ 'fixedWidth', 0 ],
     fixedHeight: [ 'fixedHeight', 0 ],
+    resolution: [ 'resolution', 0 ],
     rtl: [ 'rtl', false ],
     testString: [ 'testString', '|MÉqgy' ],
     baselineX: [ 'baselineX', 1.2 ],
@@ -259,6 +260,17 @@ var TextStyle = new Class({
          */
         this.fixedHeight;
 
+        /**
+         * The resolution the text is rendered to its internal canvas at.
+         * The default is 0, which means it will use the resolution set in the Game Config.
+         *
+         * @name Phaser.GameObjects.Text.TextStyle#resolution
+         * @type {number}
+         * @default 0
+         * @since 3.12.0
+         */
+        this.resolution;
+
         /**
          * Whether the text should render right to left.
          *

src/gameobjects/text/static/Text.js

@@ -141,16 +141,6 @@ var Text = new Class({
          */
         this.text = '';
 
-        /**
-         * The resolution of the text.
-         *
-         * @name Phaser.GameObjects.Text#resolution
-         * @type {number}
-         * @default 1
-         * @since 3.0.0
-         */
-        this.resolution = 1;
-
         /**
          * Specify a padding value which is added to the line width and height when calculating the Text size.
          * Allows you to add extra spacing if the browser is unable to accurately determine the true font dimensions.
@@ -201,6 +191,12 @@ var Text = new Class({
          */
         this.dirty = false;
 
+        //  If resolution wasn't set, then we get it from the game config
+        if (this.style.resolution === 0)
+        {
+            this.style.resolution = scene.sys.game.config.resolution;
+        }
+
         this.initRTL();
 
         if (style && style.padding)
@@ -951,7 +947,7 @@ var Text = new Class({
         var canvas = this.canvas;
         var context = this.context;
         var style = this.style;
-        var resolution = this.resolution;
+        var resolution = style.resolution;
         var size = style.metrics;
 
         style.syncFont(canvas, context);
@@ -1004,7 +1000,7 @@ var Text = new Class({
 
         context.save();
 
-        // context.scale(resolution, resolution);
+        context.scale(resolution, resolution);
 
         if (style.backgroundColor)
         {
@@ -1105,7 +1101,6 @@ var Text = new Class({
             autoRound: this.autoRound,
             text: this.text,
             style: this.style.toJSON(),
-            resolution: this.resolution,
             padding: {
                 left: this.padding.left,
                 right: this.padding.right,

src/gameobjects/text/static/TextCanvasRenderer.js

@@ -89,7 +89,7 @@ var TextCanvasRenderer = function (renderer, src, interpolationPercentage, camer
 
     ctx.scale(src.flipX ? -1 : 1, src.flipY ? -1 : 1);
 
-    ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, -src.displayOriginX, -src.displayOriginY, canvas.width, canvas.height);
+    ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, -src.displayOriginX, -src.displayOriginY, canvas.width / src.style.resolution, canvas.height / src.style.resolution);
 
     ctx.restore();
 };

src/gameobjects/text/static/TextWebGLRenderer.js

@@ -42,7 +42,7 @@ var TextWebGLRenderer = function (renderer, src, interpolationPercentage, camera
         src.canvasTexture,
         src.canvasTexture.width, src.canvasTexture.height,
         src.x, src.y,
-        src.canvasTexture.width, src.canvasTexture.height,
+        src.canvasTexture.width / src.style.resolution, src.canvasTexture.height / src.style.resolution,
         src.scaleX, src.scaleY,
         src.rotation,
         src.flipX, src.flipY,