文本
🌐 Text
文本在游戏和应用中至关重要,PixiJS 提供了三种不同的系统来满足不同的需求:
🌐 Text is essential in games and applications, and PixiJS provides three different systems to cover different needs:
Text:高质量、样式化的光栅文本BitmapText:超高速、GPU优化的位图字体HTMLText:Pixi 场景中的丰富格式化 HTML
每种方法在逼真度、速度和灵活性上都有权衡。让我们看看何时以及如何使用每一种方法。
🌐 Each approach has tradeoffs in fidelity, speed, and flexibility. Let’s look at when and how to use each one.
Text:带有样式的富动态文本
🌐 Text: Rich Dynamic Text with Styles
Text 类使用浏览器的原生文本引擎进行渲染,然后将结果转换为纹理。这允许:
🌐 The Text class renders using the browser's native text engine, and then converts the result into a texture. This allows for:
- 完全类似 CSS 的字体控制
- 阴影、渐变和对齐
- 支持动态内容和布局
使用时:
- 你需要详细的字体控制
- 文本偶尔会更改。
- 保真度比速度更重要
避免使用时:
- 你每帧都会更改文本
- 你需要渲染数百个实例
BitmapText:高性能字形渲染
🌐 BitmapText: High-Performance Glyph Rendering
BitmapText 使用预先生成的位图字体图片来表示字形,完全绕过了字体光栅化。这带来了:
- 高渲染速度
- 非常适合数千个不断变化的标签。
- 低内存占用
使用时:
- 你需要渲染大量动态文本
- 你优先考虑性能而不是样式
- 你预定义了字符和样式
避免使用时:
- 你需要细粒度的样式控制
- 你经常更改字体或字体大小
要使用 BitmapText,你必须先通过以下方式注册位图字体:
🌐 To use BitmapText, you must first register a bitmap font via:
BitmapFont.from(...)即时创建,或者Assets.load(...)如果使用第三方 BMFont 或 AngelCode 导出
HTMLText:场景内 HTML 样式
🌐 HTMLText: Styled HTML Inside the Scene
HTMLText 让你在 PixiJS 场景中渲染实际的 HTML 标记。这允许:
<b>、<i>、<span>风格格式- 精细布局和文本流
- 表情符号、RTL、链接等
使用时:
- 你需要复杂的 HTML 样式标记
- 静态或半动态内容
- 你的用户期望“文档式”布局
避免使用时:
- 你需要像素级完美性能
- 你正在渲染数百个文本块
- 你需要 GPU 文本效果
后续步骤
🌐 Next Steps
每种文本类型都有相应的指南,其中详细介绍了设置、字体加载、样式选项和限制:
🌐 Each text type has a corresponding guide that covers setup, font loading, style options, and limitations in more detail:
API 参考
🌐 API Reference