Add support for sub-textures to BitmapFont (#10494)

pixijs · Apr 30, 2024 · b9186f9 · b9186f9
1 parent 75bcada
commit b9186f9
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 5 deletions.
diff --git a/src/scene/text-bitmap/BitmapFont.ts b/src/scene/text-bitmap/BitmapFont.ts
@@ -44,11 +44,14 @@ export class BitmapFont extends AbstractBitmapFont<BitmapFont>
         Object.keys(data.chars).forEach((key: string) =>
         {
             const charData = data.chars[key];
-            const textureSource = textures[charData.page].source;
+            const {
+                frame: textureFrame,
+                source: textureSource,
+            } = textures[charData.page];
 
             const frameReal = new Rectangle(
-                charData.x,
-                charData.y,
+                charData.x + textureFrame.x,
+                charData.y + textureFrame.y,
                 charData.width,
                 charData.height,
             );

diff --git a/tests/renderering/text/BitmapFont.tests.ts b/tests/renderering/text/BitmapFont.tests.ts
@@ -1,10 +1,11 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { Cache } from '../../../src/assets/cache/Cache';
+import { Rectangle } from '../../../src/maths/shapes/Rectangle';
+import { Texture } from '../../../src/rendering/renderers/shared/texture/Texture';
 import { TextStyle } from '../../../src/scene/text/TextStyle';
+import { BitmapFont } from '../../../src/scene/text-bitmap/BitmapFont';
 import { BitmapFontManager } from '../../../src/scene/text-bitmap/BitmapFontManager';
 
-import type { BitmapFont } from '../../../src/scene/text-bitmap/BitmapFont';
-
 describe('BitmapFont', () =>
 {
     describe('from', () =>
@@ -103,5 +104,41 @@ describe('BitmapFont', () =>
         {
             expect(() => BitmapFontManager.install('foo', {}, { chars: [] })).toThrow();
         });
+
+        it('should use sub-texture as a font texture', () =>
+        {
+            const frame = new Rectangle(10, 20, 100, 100);
+            const texture = new Texture({
+                frame,
+            });
+            const font = new BitmapFont({
+                textures: [texture],
+                data: {
+                    baseLineOffset: 0,
+                    chars: {
+                        a: {
+                            id: 65,
+                            page: 0,
+                            x: 0,
+                            y: 0,
+                            width: 10,
+                            height: 10,
+                            letter: 'a',
+                            xOffset: 0,
+                            yOffset: 0,
+                            kerning: {},
+                            xAdvance: 0,
+                        },
+                    },
+                    pages: [{ id: 0, file: '' }],
+                    lineHeight: 12,
+                    fontSize: 10,
+                    fontFamily: 'font',
+                }
+            });
+
+            expect(font.chars.a.texture.frame.x).toBe(10);
+            expect(font.chars.a.texture.frame.y).toBe(20);
+        });
     });
 });