One post tagged with "Tagged Text"

PixiJS 更新 - v8.16.0

February 4, 2026 · 10 min read

PixiJS Admin

PixiJS v8.16.0 带来了两个主要功能：一个用于没有 WebGL/WebGPU 环境的实验性Canvas 渲染器，以及用于无需多个文本对象即可进行内联样式的标签文本。此版本还包括重大 SplitText 稳定性改进和广泛的引擎稳定性更新。

🌐 PixiJS v8.16.0 brings two headline features: an experimental Canvas renderer for environments without WebGL/WebGPU, and tagged text for inline styling without multiple text objects. This release also includes major SplitText stability improvements and broad engine stability updates.

画布渲染器（实验性）

🌐 Canvas renderer (experimental)

PixiJS 在 v8 中重新引入了 Canvas 2D 渲染器。它生成的构建更小，在旧硬件上运行良好，并且可以在没有 GPU 上下文的环境中工作。如果设备不支持 WebGL 或 WebGPU，PixiJS 会自动回退到 Canvas。无需配置，你的应用将继续运行。

🌐 PixiJS welcomes back the Canvas 2D renderer in v8. It produces a smaller build, runs well on older hardware, and works in environments where a GPU context isn't available. If a device doesn't support WebGL or WebGPU, PixiJS falls back to Canvas automatically. No configuration needed, your app keeps running.

如果你想始终使用 Canvas 渲染器，请明确设置偏好：

🌐 If you want to always use the Canvas renderer, set the preference explicitly:

await app.init({
    preference: 'canvas',
});

这是一个早期的实验性版本。Canvas 渲染器并不支持 GPU 渲染器的所有功能，但它可以处理核心用例：精灵、图形、文本和基础滤镜。如果遇到问题，请提交错误报告。

🌐 This is an early, experimental release. The Canvas renderer doesn't cover every feature the GPU renderers support, but it handles core use cases: sprites, graphics, text, and basic filters. If you run into issues, please file a bug.

感谢 @krzys 和 @Zyie 发货这一点。

🌐 Thanks to @krzys and @Zyie for shipping this.

标记文本

🌐 Tagged text

对字符串的部分进行样式化曾经意味着将文本拆分到多个对象中并自行管理布局。带标签的文本消除了这种麻烦。在你的 TextStyle 上定义标签样式一次，然后在字符串中使用内联标签：

🌐 Styling parts of a string used to mean splitting text across multiple objects and managing layout yourself. Tagged text removes that friction. Define tag styles once on your TextStyle, then use inline tags in your string:

const text = new Text({
    text: '<bold>Important:</bold> This is <highlight>highlighted</highlight> text',
    style: {
        fontFamily: 'Arial',
        fontSize: 28,
        fill: 'white',
        tagStyles: {
            bold: { fontWeight: 'bold', fill: 'yellow' },
            highlight: { fill: 'cyan', fontSize: 32 },
        },
    },
});

标签可以嵌套，并且每个标签都继承自基础样式。这在今天可以与 Text 和 HTMLText 一起使用；BitmapText 支持即将推出。

🌐 Tags can be nested, and each tag inherits from the base style. This works with Text and HTMLText today; BitmapText support is coming soon.

SplitText 稳定性改进

🌐 SplitText stability improvements

SplitText 在此版本中进行了重大改进。它现在更接近标准 Text 行为，并且可以处理更广泛的 TextStyle 配置。主要变化如下：

字符定位在不同的字体大小、粗细和样式下更为准确。
SplitText.from 通过将源锚点映射到枢轴坐标来正确传递源锚点。
当你调用 styleChanged() 时，样式更改会自动传播：
```
splitText.style.fontSize = 32;
splitText.styleChanged();
```
SplitBitmapText 现在默认使用 white 填充，与 BitmapText 的行为一致。如果你以前手动传递 fill: 'white'，可以将其移除。

与以前的版本相比，这些更改可能会导致位置略有偏移。如果升级后你的文本看起来不对，新的位置是更正确的。

🌐 These changes may cause slight positional shifts compared to previous versions. If your text looks off after upgrading, the new positions are more correct.

文本渲染修复

🌐 Text rendering fixes

在此版本中解决了几个长期存在的文本问题：

🌐 Several long-standing text issues are resolved in this release:

HTMLText 自动换行：现在会遵守 breakWords，超过 wordWrapWidth 的单词不再被裁剪。
HTMLText alpha：填充和描边的 alpha 值现在可以正确渲染。
文本对齐：align: 'right' 和 align: 'center' 产生正确的位置。
HTML文本测量：测量精度提高，减少了布局不一致性。

错误修复

🌐 Bug fixes

除了以上的文本修复之外，此版本还解决了：

🌐 Beyond the text fixes above, this release addresses:

container.cullArea 现在在本地坐标空间中被正确解释，并在剔除检查之前转换到全局坐标（@jujurocket）。
graphics.texture(texture, 0x000000) 正确地应用了黑色色调，而不是将 0 视为“无色调”（@bigtimebuddy）。
WebGPU MSDF 着色器 使用 vColor 而不是 localUniforms.uColor，修复了 WebGPU 中位图字体的颜色（@Riphal）。
GlGeometrySystem 中VAO 缓存被保留，防止几何体损坏（@GoodBoyDigital）。
GC 系统 现在会将渲染组标记为脏，防止渲染状态过时 (@Zyie)。
WGSL 结构体反射 保留通用类型参数 (@stargazer-2697)。
视频加载器 现在会捕获加载错误，而不是默默失败 (@stargazer-2697)。
通过优化模块导入改进了树摇动（@Zyie）。
自定义资源解析器 现在可以在解析器中重写 src (@GoodBoyDigital)。

你可以在 GitHub 上查看完整的更新日志。

🌐 You can view the full changelog on GitHub.

即将到来：3D，PixiJS 风格

🌐 What's coming: 3D, the PixiJS way

虽然不属于此版本的一部分，但我们希望让你了解 PixiJS 的发展方向。我们正在积极将 3D 支持集成到引擎中，旨在与 2D 渲染器一起工作。

🌐 While not part of this release, we want to give you a look at where PixiJS is headed. We're actively building 3D support into the engine, designed to work alongside the 2D renderer.

交互体验越来越多地融合了二维和三维：二维界面覆盖在三维场景之上、三维元素嵌入二维世界以及大规模渲染大量简单三维对象。PixiJS 正在被扩展以直接处理这些情况，而无需使用单独的三维引擎或根本不同的工作流程。

🌐 Interactive experiences increasingly blend 2D and 3D: UI over 3D scenes, 3D elements embedded in 2D worlds, and large numbers of simple 3D objects rendered at scale. PixiJS is being extended to handle those cases directly, without requiring a separate 3D engine or a fundamentally different workflow.

这是最近一次内部测试，运行 200,000 个3D对象，带有阴影和动态光照，所有内容都由引擎自动批处理。无需手动管理绘制调用，也无需场景图的变通方法。你定义你的对象，PixiJS 处理剩下的部分：

🌐 Here's a recent internal test running 200,000 3D objects with shadows and dynamic lighting, all automatically batched by the engine. There's no manual draw-call management and no scene-graph workarounds. You define your objects, and PixiJS handles the rest:

使 PixiJS 在 2D 渲染中快速的相同批处理架构现在也被应用于 3D。材质、光照和阴影都通过相同的自动批处理管道流动，实现了在不牺牲简便性或性能的情况下处理大量对象。

🌐 The same batching architecture that makes PixiJS fast for 2D rendering is now being applied to 3D. Materials, lighting, and shadows all flow through the same automatic batching pipeline, enabling high object counts without sacrificing simplicity or performance.

我们的方法是有意持有观点。PixiJS并不是构建通用的3D引擎，而是专注于快速、可扩展的3D，并与2D紧密集成。

🌐 Our approach is to be intentionally opinionated. Rather than building a general-purpose 3D engine, PixiJS focuses on fast, scalable 3D that integrates tightly with 2D.

此版本中的立方体纹理、mip 级别渲染和数组层渲染是该 3D 管线的早期构建模块。

🌐 Cube textures, mip level rendering, and array layer rendering in this release are early building blocks for that 3D pipeline.

我们会在 Twitter/X 和 Bluesky 发布频繁的开发更新。如果你想实时看到这一进展，欢迎关注。

🌐 We're posting frequent development updates on Twitter/X and Bluesky. Follow along if you want to see this take shape in real time.

新贡献者

🌐 New contributors

欢迎我们的最新贡献者：

🌐 Welcome to our newest contributors:

感谢你的贡献！

🌐 Thank you for your contributions!

获取最新的 PixiJS

🌐 Get the latest PixiJS

通过 npm 安装：

🌐 Install via npm:

npm install pixi.js@8.16.0

或者通过 CDN 使用：

🌐 Or use via CDN:

开发版本：

生产构建：

文档: https://pixijs.download/v8.16.0/docs/index.html

收尾

🌐 Wrapping up

这就是 v8.16.0 中的新内容。如果你在使用 Canvas 渲染器或标记文本时遇到问题，请报告它们，以便我们进行改进。

🌐 That covers what's new in v8.16.0. If you hit issues with the Canvas renderer or tagged text, please report them so we can iterate.

感谢所有为此版本贡献修复和功能的人。

🌐 Thanks to everyone who contributed fixes and features to this release.

创作愉快！

🌐 Happy creating!

PixiJS 团队

画布渲染器（实验性）​

标记文本​

SplitText 稳定性改进​

文本渲染修复​

更多添加​

错误修复​

即将到来：3D，PixiJS 风格​

新贡献者​

获取最新的 PixiJS​

收尾​