位图文本

¥Bitmap Text

BitmapText 是 PixiJS 中一款高性能的文本渲染解决方案。与将每个字符串栅格化为新纹理的 Text 类不同，BitmapText 从预先生成的纹理图集中绘制字符。这种设计允许你以最小的开销渲染数以万计的文本对象。

¥BitmapText is a high-performance text rendering solution in PixiJS. Unlike the Text class, which rasterizes each string into a new texture, BitmapText draws characters from a pre-generated texture atlas. This design allows you to render tens of thousands of text objects with minimal overhead.

import { Assets, BitmapText } from 'pixi.js';

await Assets.load('fonts/MyFont.fnt');

const text = new BitmapText({
    text: 'Loaded font!',
    style: {
        fontFamily: 'MyFont',
        fontSize: 32,
        fill: '#ffcc00',
    },
});

为什么使用 `BitmapText`？

¥Why Use BitmapText?

✅ 快速渲染：非常适合 HUD、计分器、计时器等。

¥✅ Fast rendering: Perfect for HUDs, score counters, timers, etc.
✅ 无需逐帧光栅化：文本更改开销很小。

¥✅ No per-frame rasterization: Text changes are cheap.
✅ 高效内存使用：在所有实例之间共享字形纹理。

¥✅ Efficient memory usage: Shares glyph textures across all instances.
✅ 支持 MSDF/SDF 字体：清晰缩放，无模糊。

¥✅ Supports MSDF/SDF fonts: Crisp scaling without blurring.

理想用例：

¥Ideal use cases:

频繁更新文本

¥Frequently updating text
大量文本实例

¥Large numbers of text instances
高性能或移动项目

¥High-performance or mobile projects

如何加载和使用位图字体

¥How to Load and Use Bitmap Fonts

字体加载

¥Font Loading

PixiJS 支持 AngelCode BMFont 格式以及与 MSDF 兼容的 .fnt 和 .xml 文件。你可以使用 Assets API 加载这些文件。

¥PixiJS supports AngelCode BMFont format and MSDF-compatible .fnt and .xml files. You can load these files using the Assets API.

加载完成后，你可以使用 fontFamily 属性创建一个包含已加载字体的 BitmapText 实例。

¥Once loaded, you can create a BitmapText instance with the loaded font using the fontFamily property.

import { Assets, BitmapText } from 'pixi.js';

await Assets.load('fonts/MyFont.fnt');

const text = new BitmapText({
    text: 'Loaded font!',
    style: {
        fontFamily: 'MyFont',
        fontSize: 32,
        fill: '#ffcc00',
    },
});

MSDF 和 SDF 字体

¥MSDF and SDF Fonts

PixiJS 支持 MSDF（多通道有符号距离场）和 SDF 格式，以实现清晰、分辨率无关的文本。这些字体在任何大小和比例下都保持清晰。

¥PixiJS supports MSDF (multi-channel signed distance field) and SDF formats for crisp, resolution-independent text. These fonts remain sharp at any size and scale.

你可以使用 AssetPack 等工具生成 MSDF/SDF 字体，这些工具可以接收 .ttf 或 .otf 字体并生成支持 MSDF/SDF 的位图字体图集。

¥You can generate MSDF/SDF fonts using tools like AssetPack which can take a .ttf or .otf font and generate a bitmap font atlas with MSDF/SDF support.

使用 MSDF/SDF 字体与使用常规位图字体类似，只需加载相应的字体文件即可：

¥Using MSDF/SDF fonts is similar to using regular bitmap fonts and just requires you to load the appropriate font file:

import { Assets, BitmapText } from 'pixi.js';

await Assets.load('fonts/MyMSDFFont.fnt');

const text = new BitmapText({
    text: 'Loaded MSDF font!',
    style: {
        fontFamily: 'MyMSDFFont',
    },
});

限制和注意事项

¥Limitations and Caveats

❌ 无法更新分辨率

¥❌ Cannot Update Resolution

BitmapText.resolution 不可变。它必须由 BitmapFont 处理

¥BitmapText.resolution is not mutable. It must be handled by the BitmapFont

text.resolution = 2;
// ⚠️ [BitmapText] dynamically updating the resolution is not supported.

⚠️ 不适用于大型字符集

¥⚠️ Large Character Sets Not Practical

位图字体受纹理大小限制。CJK 或富含表情符号的集合可能需要过多的内存。使用 Text 或 HTMLText 进行动态国际化或表情符号支持。

¥Bitmap fonts are limited by texture size. CJK or emoji-rich sets may require too much memory. Use Text or HTMLText for dynamic internationalization or emoji support.

API 参考

¥API Reference

为什么使用 BitmapText？​

如何加载和使用位图字体​

字体加载​

MSDF 和 SDF 字体​