Skip to main content

文本

¥Text

文本在游戏和应用中至关重要，PixiJS 提供了三种不同的系统来满足不同的需求：

¥Text is essential in games and applications, and PixiJS provides three different systems to cover different needs:

  • Text：高质量、样式化的光栅文本

    ¥Text: High-quality, styled raster text

  • BitmapText：超快、GPU 优化的位图字体

    ¥BitmapText: Ultra-fast, GPU-optimized bitmap fonts

  • HTMLText：Pixi 场景中格式丰富的 HTML

    ¥HTMLText: Richly formatted HTML inside the Pixi scene

每种方法在保真度、速度和灵活性方面都有所取舍。让我们看看何时以及如何使用每个节点。

¥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 的字体控制

    ¥Full CSS-like font control

  • 阴影、渐变和对齐

    ¥Drop shadows, gradients, and alignment

  • 支持动态内容和布局

    ¥Support for dynamic content and layout

在以下情况下使用：

¥Use it when:

  • 你需要详细的字体控制

    ¥You need detailed font control

  • 文本偶尔会更改。

    ¥Text changes occasionally

  • 保真度比速度更重要

    ¥Fidelity is more important than speed

避免以下情况：

¥Avoid when:

  • 你每帧都会更改文本

    ¥You're changing text every frame

  • 你需要渲染数百个实例

    ¥You need to render hundreds of instances

BitmapText：高性能字形渲染​

¥BitmapText: High-Performance Glyph Rendering

BitmapText 使用预先烘焙的位图字体图片作为字形，完全绕过字体光栅化。这给出了：

¥BitmapText uses a pre-baked bitmap font image for glyphs, bypassing font rasterization entirely. This gives:

  • 高渲染速度

    ¥High rendering speed

  • 非常适合数千个不断变化的标签。

    ¥Ideal for thousands of changing labels

  • 低内存占用

    ¥Low memory usage

在以下情况下使用：

¥Use it when:

  • 你需要渲染大量动态文本

    ¥You need to render lots of dynamic text

  • 你优先考虑性能而不是样式

    ¥You prioritize performance over styling

  • 你预定义了字符和样式

    ¥You predefine the characters and styles

避免以下情况：

¥Avoid when:

  • 你需要细粒度的样式控制

    ¥You need fine-grained style control

  • 你经常更改字体或字体大小

    ¥You change fonts or font sizes frequently

要使用 BitmapText，你必须首先通过以下方式注册位图字体：

¥To use BitmapText, you must first register a bitmap font via:

  • BitmapFont.from(...) 可即时创建，或者

    ¥BitmapFont.from(...) to create on the fly, or

  • 如果使用第三方 BMFont 或 AngelCode 导出，则使用 Assets.load(...)

    ¥Assets.load(...) if using a 3rd-party BMFont or AngelCode export

HTMLText：场景内 HTML 样式​

¥HTMLText: Styled HTML Inside the Scene

HTMLText 允许你在 PixiJS 场景中渲染真实的 HTML 标记。这允许：

¥HTMLText lets you render actual HTML markup in your PixiJS scene. This allows:

  • <b>、<i>、<span> 样式格式

    ¥<b>, <i>, <span> style formatting

  • 精细布局和文本流

    ¥Fine layout and text flow

  • 表情符号、RTL、链接等

    ¥Emoji, RTL, links, and more

在以下情况下使用：

¥Use it when:

  • 你需要复杂的 HTML 样式标记

    ¥You want complex HTML-style markup

  • 静态或半动态内容

    ¥Static or semi-dynamic content

  • 你的用户期望 "document-like" 布局

    ¥Your users expect "document-like" layout

避免以下情况：

¥Avoid when:

  • 你需要像素级完美性能

    ¥You need pixel-perfect performance

  • 你正在渲染数百个文本块

    ¥You're rendering hundreds of text blocks

  • 你需要 GPU 文本效果

    ¥You need GPU text effects

后续步骤​

¥Next Steps

每种文本类型都有相应的指南，其中详细介绍了设置、字体加载、样式选项和限制：

¥Each text type has a corresponding guide that covers setup, font loading, style options, and limitations in more detail:

API 参考​

¥API Reference