Skip to main content

文本

🌐 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