2 posts tagged with "Text Improvements"

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 团队

PixiJS 更新 - v8.12.0

August 6, 2025 · 9 min read

Zyie

PixiJS Admin

PixiJS v8.12.0 已发布，它带来了我们首次“错误狩猎月”的成果。

🌐 PixiJS v8.12.0 is out, and it brings with it the results of our first-ever Bug Hunt Month.

整个七月，我们将注意力完全集中在漏洞上，修复它们，对它们进行分类处理，关闭陈旧的漏洞，并为关键漏洞添加赏金。结果呢？这是我们迄今为止最富有成效的维护月份之一：

🌐 Throughout July, we put our focus entirely on bugs, fixing them, triaging them, closing stale ones, and adding bounties for critical ones. The result? One of our most productive maintenance months to date:

修复了45个错误
已关闭 250+ 个问题
几十个已分级和澄清的问题
已分配并支付的若干赏金

衷心感谢在本月帮助报告、调试、测试或修复问题的每一位朋友。我们有几位新的贡献者加入，并对引擎做出了有意义的改进。

🌐 A big thank-you to everyone who helped report, debug, test, or fix problems during the month. We had several new contributors jump in and make meaningful improvements to the engine.

让我们来看一下这个版本中发生了哪些变化。

🌐 Let's take a look at what's changed in this release.

一些有用的补充

🌐 A Few Helpful Additions

虽然这主要是一个修复错误的版本，但我们确实加入了一些有用的新增功能：

🌐 While this was mostly a bug-fix release, we did sneak in a few useful additions:

使用 cacheAsTexture 时，你现在可以控制 scaleMode
```
container.cacheAsTexture({
  scaleMode: 'nearest',
});
```
我们在 TextureSource 上暴露了一个 maxAnisotropy 属性，以与其他传递的 TextureStyle 属性保持一致。
```
texture.source.maxAnisotropy = 16;
```
新的 DomAdapter.createImage() 函数用于创建图片元素。这允许诸如 Node 之类的环境创建像 SVG 这样的东西。
```
const image = DomAdapter.get().createImage();
image.src = 'path/to/image.svg';
```

你现在可以在 PixiJS 和其他渲染引擎之间共享 WebGPU 适配器/设备

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const app = new Application();
await app.init({ gpu: { adapter, device } });

资源 loadParser 已被弃用，并被 parser 替代，解析器的名称也已被弃用并简化

// Old way
await Assets.load({ src: 'path/to/asset', data: { loadParser: 'loadJson' } });
// New way
await Assets.load({ src: 'path/to/asset', data: { parser: 'json' } });

// Name changes
// 'loadJson' -> 'json'
// 'loadSvg' -> 'svg'
// 'loadTxt' -> 'text'
// 'loadVideo' -> 'video'
// 'loadWebFont' -> 'web-font'
// 'loadBitmapFont' -> 'bitmap-font'
// 'spritesheetLoader' -> 'spritesheet'
// 'loadTextures' -> 'texture'
// 'loadBasis' -> 'basis'
// 'loadDds' -> 'dds'
// 'loadKtx2' -> 'ktx2'
// 'loadKtx' -> 'ktx'

一个新的 WorkerManager.reset() 方法有助于释放内存并重置工作池，对于需要清理旧工作线程的长期运行应用非常有用。
```
app.destroy(true, true); // Destroy the app
WorkerManager.reset(); // Reset the worker pool
```

超过35个错误修复

🌐 Over 35 Bug Fixes

此版本包含针对各个字段的定向修复：

🌐 This release includes targeted fixes across a wide range of areas:

遮罩现在在视口外也能正确显示
AnimatedSprite.destroy() 现在行为正常
HTML文本标签和样式的处理更可靠
Pattern 和 gradient 填充在已安装的 BitmapText 中按预期呈现
BitmapFont 获得了多个布局和渲染修复
几个与遮罩、变换原点和剔除相关的问题已解决
已解决可访问性和缩放问题

如果你对详细信息感兴趣，可以在 GitHub 查看完整的更新日志。

🌐 You can view the full changelog on GitHub if you're interested in the details.

内部工具和开发体验

🌐 Internal Tools and Dev Experience

除了修复和功能之外，我们还进行了一些内部改进：

🌐 Beyond the fixes and features, we also made a number of internal improvements:

添加了 StackBlitz 集成，使共享和测试更加方便。你可以在这里查看：StackBlitz 示例
改进了我们的 GitHub 问题模板和关于复现步骤的自动化。我们现在要求新问题必须提供复现步骤，以帮助我们更有效地处理它们。如果没有提供复现步骤，问题将在 7 天后自动关闭。
更新了 Node 兼容性，以在构建项目时支持 Node 24。

这些更改不会面向用户，但它们应该会让贡献和调试的体验更加顺畅。

🌐 These changes aren't user-facing, but they should make contributing and debugging a smoother experience.

漏洞赏金计划

🌐 Bug Bounty Program

作为漏洞猎月的一部分，我们正式推出了我们的漏洞赏金计划。如果你是贡献者，这意味着修复某些问题可能会获得小额奖励，尤其是那些难以重现或对用户至关重要的漏洞。

🌐 As part of Bug Hunt Month, we officially launched our bug bounty program. If you're a contributor, this means some issues may come with a small reward for fixing them, especially bugs that are tough to reproduce or critical to users.

如果你想为 PixiJS 做出贡献，这是一个很好的起点。你可以在这里找到所有当前带有赏金标签的问题。

🌐 If you're looking to contribute to PixiJS, this is a great way to get started. You can find all current bounty-tagged issues here.

我们为什么要这样做

🌐 Why We're Doing This

我们相信开源和社区协作的力量。我们的漏洞赏金计划旨在：

🌐 We believe in the power of open source and community collaboration. Our bug bounty program is designed to:

鼓励贡献者处理重要且有影响力的问题。
认可在调试和修复复杂问题中所付出的辛勤努力。
请理解 PixiJS 核心团队规模较小，且经常专注于其他关键任务，你的贡献有助于更快地解决问题。
让 PixiJS 对每个人都更好。

赞助赏金

🌐 Sponsoring Bounties

如果你是开发者或公司，正在进行某个项目并希望赞助一次性赏金，请联系 Matt Karl @bigtimebuddy 或发送邮件至 hello@mattkarl.com 商议具体事宜。

🌐 If you are a developer or company working on a project and would like to sponsor a one-off bounty, please contact Matt Karl @bigtimebuddy at hello@mattkarl.com to arrange the details.

赞助商可以直接向我们的 Open Collective 进行一次性捐款来资助赏金。

🌐 Sponsors can make one-time donations directly to our Open Collective to fund the bounty.

PixiJS 布局 v3.1.0

🌐 PixiJS Layout v3.1.0

除了主要引擎更新之外，我们还发布了 PixiJS Layout 的新版本。

🌐 Alongside the main engine update, we also shipped a new version of PixiJS Layout.

此更新包含一些关键的生活质量改进：

🌐 This update includes a few key quality-of-life improvements:

你现在可以定义自定义的默认 Yoga 配置

const config = getYoga().Config.create();

config.setExperimentalFeatureEnabled(ExperimentalFeature.WebFlexBasis, true);
setYogaConfig(config);

新的选项使拖动缓动更加可控

const container = new LayoutContainer({
    layout: {
        overflow: 'scroll',
    },
    trackpad: {
        // Constrain scrolling within bounds
        constrain: true,
        // Percentage of overflow allowed when dragging beyond x-axis limit
        xConstrainPercent: 0.2,
        // Percentage of overflow allowed when dragging beyond y-axis limit
        yConstrainPercent: 0.2
    },
});

我们还修复了与布局更新、重新设置父级、可见性和容器大小相关的几个错误。这些修复使布局行为更加可预测，并且更符合开发者对 Flexbox 风格布局的预期。

🌐 We also fixed several bugs related to layout updates, reparenting, visibility, and container sizing. These fixes make layout behavior more predictable and align better with how developers expect Flexbox-style layouts to behave.

我们也改进了 StackBlitz 集成以及这里的错误报告流程。

🌐 We've also improved StackBlitz integration and our bug reporting flow here as well.

文档可在 layout.pixijs.io 获取

🌐 Documentation is available at layout.pixijs.io

安装方式：

🌐 Install with:

npm install @pixi/layout@3.1.0

获取最新的 PixiJS

🌐 Get the Latest PixiJS

通过 npm 安装：

🌐 Install via npm:

npm install pixi.js@8.12.0

或者通过 CDN 使用：

🌐 Or use via CDN:

开发版本：

生产构建：

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

结论

🌐 Conclusion

这就总结了我们的七月更新。如果你有兴趣参与，我们一直在寻找帮助处理未解决的问题，无论是否标有悬赏标签。

🌐 That wraps up our July update. If you're interested in contributing, we're always looking for help on open issues, bounty-tagged or otherwise.

再次感谢所有让错误狩猎月取得成功的人。我们很期待看到你们接下来会创造什么！

🌐 Thanks again to everyone who made Bug Hunt Month a success. We're excited to see what you build next!

创作愉快！

🌐 Happy creating!

PixiJS 团队

画布渲染器（实验性）​

标记文本​

SplitText 稳定性改进​

文本渲染修复​

更多添加​

错误修复​

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

新贡献者​

获取最新的 PixiJS​

收尾​

一些有用的补充​

超过35个错误修复​

内部工具和开发体验​

漏洞赏金计划​

我们为什么要这样做​

赞助赏金​

PixiJS 布局 v3.1.0​

获取最新的 PixiJS​

结论​

画布渲染器（实验性）

标记文本

SplitText 稳定性改进

文本渲染修复

更多添加

错误修复

即将到来：3D，PixiJS 风格

新贡献者

获取最新的 PixiJS

收尾

一些有用的补充

超过35个错误修复

内部工具和开发体验

漏洞赏金计划

我们为什么要这样做

赞助赏金

PixiJS 布局 v3.1.0

获取最新的 PixiJS

结论