Feature-Request: V8 support sub-Textures when creating BitmapFont objects

[alvov-evo]

Current Behavior

BitmapFont doesn't seem to use texture with defined frame but rather a source texture of that framed texture.

Expected Behavior

BitmapFont uses texture with defined frame.

Steps to Reproduce

Let there be multiple bitmap font textures combined into one sprite sheet file.

const sprite = new PIXI.Spritesheet(texture, data);
await sprite.parse();

const fontTexture = sprite.textures.font;

Create BitmapFont with a constructor as follows:

const font = new PIXI.BitmapFont({
    data: fontData,
    textures: [fontTexture],
});

Then create BitmapText using font family of this font:

    const bitmapFontText = new PIXI.BitmapText({
        text: 'some text,
        style: {
            fontFamily: 'Desyrel',
        },
    });

In that case BitmapFont doesn't seem to use fontTexture as source, but would rather use the whole sprite texture.

For instance, I've created a sprite sheet image with two Desyrel fonts: yellow on the left and green on the right.
Please check the playground: https://www.pixiplayground.com/#/edit/T5-gUiUddcNFhan8QaTPD
I pass the texture referring to the "green" texture to BitmapFont (so rendered text should be green), but it still seems to use the source sprite sheet texture (rendered text is yellow).
(Sorry for the somewhat messy playground example)

Environment

• pixi.js version: 8.1.0
• Running Example: https://www.pixiplayground.com/#/edit/T5-gUiUddcNFhan8QaTPD

Possible Solution

No response

Additional Information

No response

[bigtimebuddy]

Yeah, that's right, the fontTexture here assumes the fontData contains coordinates relative to the entire Texture's source. I would put this as a feature request since the behavior is currently undefined.

There seems to be a simple solution:

pixijs/src/scene/text-bitmap/BitmapFont.ts

Lines 46 to 59 in ff67a1d

	const charData = data.chars[key];
	const textureSource = textures[charData.page].source;
	const frameReal = new Rectangle(
	charData.x,
	charData.y,
	charData.width,
	charData.height,
	);
	const texture = new Texture({
	source: textureSource,
	frame: frameReal
	});

We could simply offset Rectangle's x and y values by the Texture's frame. I think that would probably be enough!

[alvov-evo]

Thank you for the response!

I forgot to mention that the same case worked in version 7.x (7.3.2 at least), that's why I thought it's a regression.
Now that I know where to look at, I think it previously did a similar thing to what you've proposed:

pixijs/packages/text-bitmap/src/BitmapFont.ts

Lines 224 to 229 in 9104ebd

	const rect = new Rectangle(
	x + (pageTextures[page].frame.x / res),
	y + (pageTextures[page].frame.y / res),
	width,
	height
	);

Any way, I can confirm this solution works for my case 🙇‍♂️

[bigtimebuddy]

Nice. Would you mind making a PR for this change @alvov-evo?

[alvov-evo]

@bigtimebuddy done