Adds resolution property in BitmapText (pixijs#8357)

michaeljherrmann · May 23, 2022 · 45052e2 · 45052e2
1 parent f07f871
commit 45052e2
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 2 deletions.
diff --git a/packages/text-bitmap/src/BitmapText.ts b/packages/text-bitmap/src/BitmapText.ts
@@ -81,6 +81,16 @@ export class BitmapText extends Container
     /** Set to `true` if the BitmapText needs to be redrawn. */
     public dirty: boolean;
 
+    /**
+     * The resolution / device pixel ratio of the canvas.
+     *
+     * This is set to automatically match the renderer resolution by default, but can be overridden by setting manually.
+     *
+     * @default PIXI.settings.RESOLUTION
+     */
+    _resolution: number;
+    _autoResolution: boolean;
+
     /**
      * Private tracker for the width of the overall text.
      *
@@ -215,6 +225,8 @@ export class BitmapText extends Container
         this._anchor = new ObservablePoint((): void => { this.dirty = true; }, this, 0, 0);
         this._roundPixels = settings.ROUND_PIXELS;
         this.dirty = true;
+        this._resolution = settings.RESOLUTION;
+        this._autoResolution = true;
         this._textureCache = {};
     }
 
@@ -608,6 +620,12 @@ export class BitmapText extends Container
 
     _render(renderer: Renderer): void
     {
+        if (this._autoResolution && this._resolution !== renderer.resolution)
+        {
+            this._resolution = renderer.resolution;
+            this.dirty = true;
+        }
+
         // Update the uniform
         const { distanceFieldRange, distanceFieldType, size } = BitmapFont.available[this._fontName];
 
@@ -624,7 +642,7 @@ export class BitmapText extends Container
 
             for (const mesh of this._activePagesMeshData)
             {
-                mesh.mesh.shader.uniforms.uFWidth = worldScale * distanceFieldRange * fontScale * renderer.resolution;
+                mesh.mesh.shader.uniforms.uFWidth = worldScale * distanceFieldRange * fontScale * this._resolution;
             }
         }
 
@@ -874,6 +892,31 @@ export class BitmapText extends Container
         return this._textHeight;
     }
 
+    /**
+     * The resolution / device pixel ratio of the canvas.
+     *
+     * This is set to automatically match the renderer resolution by default, but can be overridden by setting manually.
+     *
+     * @default 1
+     */
+    get resolution(): number
+    {
+        return this._resolution;
+    }
+
+    set resolution(value: number)
+    {
+        this._autoResolution = false;
+
+        if (this._resolution === value)
+        {
+            return;
+        }
+
+        this._resolution = value;
+        this.dirty = true;
+    }
+
     destroy(options?: boolean | IDestroyOptions): void
     {
         const { _textureCache } = this;

diff --git a/packages/text-bitmap/test/BitmapText.tests.ts b/packages/text-bitmap/test/BitmapText.tests.ts
@@ -1,7 +1,8 @@
 import path from 'path';
 import fs from 'fs';
 import { BitmapText, BitmapFont } from '@pixi/text-bitmap';
-import { Texture } from '@pixi/core';
+import { settings } from '@pixi/settings';
+import { Texture, Renderer } from '@pixi/core';
 import sinon from 'sinon';
 import { expect } from 'chai';
 
@@ -185,4 +186,51 @@ describe('BitmapText', function ()
 
         expect(() => text.updateText()).to.not.throw();
     });
+
+    it('should set the text resolution to match the resolution setting when constructed time', function ()
+    {
+        const text = new BitmapText('foo', {
+            fontName: this.font.font,
+        });
+
+        expect(text.resolution).to.equal(settings.RESOLUTION);
+    });
+
+    it('should update the text resolution to match the renderer resolution when being rendered to screen', function ()
+    {
+        const text = new BitmapText('foo', {
+            fontName: this.font.font,
+        });
+
+        expect(text.resolution).to.equal(settings.RESOLUTION);
+
+        const renderer = new Renderer({ resolution: 2 });
+
+        expect(renderer.resolution).to.equal(2);
+
+        renderer.render(text);
+
+        expect(text.resolution).to.equal(renderer.resolution);
+
+        renderer.destroy();
+    });
+
+    it('should use any manually set text resolution over the renderer resolution', function ()
+    {
+        const text = new BitmapText('foo', {
+            fontName: this.font.font,
+        });
+
+        text.resolution = 3;
+
+        expect(text.resolution).to.equal(3);
+
+        const renderer = new Renderer({ resolution: 2 });
+
+        renderer.render(text);
+
+        expect(text.resolution).to.equal(3);
+
+        renderer.destroy();
+    });
 });