Skip to main content

One post tagged with "Documentation"

View All Tags

PixiJS 更新 - v8.10.0

· 10 min read
Zyie
Zyie
PixiJS Admin

PixiJS v8.10.0 对我们的文档进行了重大改进，同时还进行了几项更新，以增强文本渲染和开发者控制。新的内容如下：

🌐 PixiJS v8.10.0 introduces a major overhaul of our documentation along with several updates that enhance text rendering and developer control. Here's what's new:

  • 完整文档改造：改进的指南、API 文档以及更好的组织
  • 文本修剪：通过自动去除空白优化文本渲染
  • 文本筛选器：直接在文本样式配置中应用筛选器
  • 可调节文本纹理样式：通过新的纹理样式选项微调文本的纹理呈现方式

文档全面改革​

🌐 Documentation Overhaul

通过此次发布，我们对文档进行了重大投入，以使 PixiJS 对新手和有经验的开发者都更加易于访问和使用。

🌐 With this release, we are making a significant investment in our documentation to make PixiJS more accessible and easier to use for both new and experienced developers.

这一变化是由我们去年收集的调查结果推动的，调查结果显示需要更清晰、更有条理的文档。我们希望确保开发者能够快速找到他们所需的信息，无论他们是刚开始使用还是希望加深对 PixiJS 的理解。考虑到这一点，我们已经完全重新设计了文档的结构和内容。

🌐 This change is driven by the survey results we gathered last year, which highlighted the need for clearer, more organized documentation. We want to ensure that developers can quickly find the information they need, whether they are just starting out or looking to deepen their understanding of PixiJS. With that in mind, we have completely revamped our documentation structure and content.

注意

正如任何重大变更一样，也有需要改进的地方。我们欢迎你的反馈，以便我们在持续改进文档时参考。

新网站文档​

🌐 New Website Documentation

我们已经扩展并重组了我们的指南，现在涵盖了 PixiJS 的所有核心字段，并改进了入门部分。目标是为新用户提供更清晰的入门点，并为有经验的开发者提供更全面的资源。

🌐 We've expanded and restructured our guides to now cover all core areas of PixiJS with improved getting started. The goal is to provide clearer entry points for new users and more comprehensive resources for experienced developers.

增强的 API 文档​

🌐 Enhanced API Documentation

我们已经从 WebDoc 转向 TypeDoc 用于我们的 API 生成。此更改带来了对 TypeScript 的更好支持，并允许我们在整个文档中提供更详细和准确的信息。

🌐 We've transitioned from WebDoc to TypeDoc for our API generation. This change brings improved support for TypeScript and allows us to provide more detailed and accurate information throughout the documentation.

随着这次技术变革，我们也重新思考了API 文档的组织方式。我们没有将所有内容呈现在一个单一的、整体的参考中，而是将 API 分为两个部分：标准和高级。

🌐 Alongside this technical shift, we've also rethought how the API Documentation is organized. Rather than presenting everything in a single, monolithic reference, we've categorized the APIs into two sections: Standard and Advanced.

  • 标准 API 覆盖了最常用的功能——这些是构建大多数 PixiJS 应用的基础。
  • 高级 API 包括更复杂或专业化的工具，这些工具对于特定的使用场景非常有价值，但并非所有用户都需要。

这个新结构旨在减少新手的认知负荷。开发者可以专注于最相关的 API，而不会被整个库的全部内容所淹没。

🌐 This new structure is designed to reduce cognitive load for newcomers. Developers can focus on the most relevant APIs without being overwhelmed by the full scope of the library.

对于需要访问更高级功能的人，在 API 文档的右上角有一个标记为 “高级” 的简单切换。启用它可以在需要时显示完整的 API 功能。

🌐 For those who need access to more advanced features, there's a simple toggle in the top-right corner of the API documentation labeled "Advanced". Enabling it reveals the full API surface when needed.

API Documentation Screenshot

我们也借此机会改进了文档本身的清晰度。对于每一个 Standard API，我们的目标是提供：

🌐 We've also taken this opportunity to improve the clarity of the documentation itself. For each Standard API, we aim to provide:

  • 对其目的的清晰解释
  • 实际使用示例
  • 相关 API 的链接，便于更轻松地探索

这些改进旨在帮助开发者更好地理解如何有效使用 PixiJS——无论他们是刚刚入门还是希望深入研究。

🌐 These improvements are intended to help developers better understand how to use PixiJS effectively—whether they're just getting started or looking to dig deeper.

公共与内部 API​

🌐 Public vs Internal APIs

为了帮助更清晰地界定开发者应依赖的内容和仅供内部使用的内容，我们已经审计了整个代码库，并相应地标记了 API。内部方法现在已从 API 文档中排除。这使公共 API 的表面更加稳定，并降低了无意依赖内部行为的风险。

🌐 To help define a clearer boundary between what developers should rely on and what is meant for internal use, we've audited the entire codebase and marked APIs accordingly. Internal methods are now excluded from the API docs. This makes the public API surface more stable and reduces the risk of unintentional dependency on internal behaviors.

新功能 🎉​

🌐 New Features 🎉

既然我们已经讲解了文档的全面改版，现在让我们深入了解 PixiJS v8.10.0 中引入的新功能：

🌐 Now that we've covered the documentation overhaul, let's dive into the new features introduced in PixiJS v8.10.0:

已烘焙文本过滤器​

🌐 Baked Text Filters

文本滤镜现在可以在创建时应用，将效果直接烘焙到纹理中。这可以避免运行时滤镜的开销，并允许更具表现力的样式，如轮廓和投影，而不会带来性能损失。

🌐 Text filters can now be applied at creation time, baking the effect directly into the texture. This avoids runtime filter costs and allows more expressive styles, such as outlines and drop shadows, without performance penalties.

要使用此功能，你现在可以直接在 TextStyle 配置中指定过滤器：

🌐 To use this feature, you can now specify filters directly in the TextStyle configuration:

const style = new TextStyle({
  fontFamily: 'Arial',
  fontSize: 36,
  fill: '#ffffff',
  filters: [new BlurFilter()],
});
const text = new PIXI.Text({ text: 'Hello, PixiJS!', style });

此外，filterSystem 中新增了一个 generateFilteredTexture 方法：

🌐 Additionally, a new generateFilteredTexture method has been added to filterSystem:

const blurFilter = new BlurFilter();
const filteredTexture = renderer.filters.generateFilteredTexture({
  texture,
  filters: [blurFilter],
});

文本裁剪​

🌐 Text Trimming

自动删除文本周围不必要的空白。

🌐 Automatically remove unnecessary whitespace around text.

性能警告

这是一个成本很高的操作，因为它需要扫描像素的 alpha 值。避免在动态文本中使用 trim: true，因为它可能会显著影响性能。

要启用文本裁剪，只需在 TextStyle 中设置 trim 属性：

🌐 To enable text trimming, simply set the trim property in the TextStyle:

const style = new TextStyle({
  fontFamily: 'Arial',
  fontSize: 36,
  fill: '#ffffff',
  trim: true, // Enable text trimming
});
const text = new Text({ text: '   Hello, PixiJS!   ', style });

此方法对纹理应用一个或多个滤镜，并返回一个新的、经过滤镜处理的结果。

🌐 This method applies one or more filters to a texture and returns a new, filtered result.

纹理缩放模式​

🌐 Texture Scale Modes

你现在可以明确设置文本的纹理过滤，这在渲染像素字体或需要控制纹理采样方式时非常有用。

🌐 You can now explicitly set texture filtering for text, useful when rendering pixel fonts or when you need control over how the texture is sampled.

要调整纹理缩放模式，请在 TextStyle 中使用 textureStyle 属性：

🌐 To adjust the texture scale mode, use the textureStyle property in the TextStyle:

const style = new TextStyle({
  fontFamily: 'Arial',
  fontSize: 36,
  fill: '#ffffff',
  textureStyle: {
    scaleMode: 'nearest', // Set the texture scale mode
  },
});
const text = new Text({ text: 'Hello, PixiJS!', style });

v8.9.0 和 v8.8.0 的亮点​

🌐 Highlights from v8.9.0 and v8.8.0

我们之前遗漏了突出介绍前两个版本，因此这里是 v8.9.0 和 v8.8.0 的一些关键功能：

🌐 We missed highlighting the previous two releases, so here are some key features from v8.9.0 and v8.8.0:

DOM 容器​

🌐 DOM Container

DOMContainer 让开发者能够同步于 PixiJS 场景转换和动画化 DOM 元素。这对于覆盖原生输入框、文本区域或其他 HTML 控件，同时保持对它们位置和旋转的控制非常有用。

🌐 The DOMContainer lets developers transform and animate DOM elements in sync with PixiJS scenes. This is useful for overlaying native inputs, textareas, or other HTML controls while retaining control over their positioning and rotation.

九切片精灵锚点​

🌐 NineSlice Sprite Anchor

NineSliceSprite 现在支持 anchor 属性，使旋转和缩放行为能够像对其他精灵一样工作。

展望未来​

🌐 Looking Ahead

从 v8.10.0 开始，我们将 PixiJS 的发布节奏改为每月一次。这将使我们能够更可预测地发布改进、修复错误和新增功能，并保持项目以稳定的步伐发展。

🌐 Starting with v8.10.0, we're moving to a monthly release cadence for PixiJS. This will allow us to ship improvements, bug fixes, and new features more predictably and keep the project evolving at a steady pace.

虽然每次发布的规模和范围可能不同，但目标是提供更容易采用和整合到项目中的增量更新。

🌐 While the size and scope of each release may vary, the goal is to provide incremental updates that are easier to adopt and integrate into projects.

你可以在这里查看完整的更新日志，或在Discord或GitHub上加入讨论。

🌐 You can review the complete changelog here, or join the discussion on Discord or GitHub.

感谢你使用 PixiJS，我们期待看到你使用这些新功能创作的作品！

🌐 Thank you for using PixiJS, and we look forward to seeing what you create with these new features!