3 posts tagged with "Improvements"

我们很高兴地宣布 PixiJS v8.7.0 的发布，它包含了许多你一直在要求的新功能和改进。此版本包括：

🌐 We're happy to announce the release of PixiJS v8.7.0, featuring a number of new features and improvements that you have been asking for. This version includes:

• 渲染层：独立于场景图层级控制对象的渲染顺序。
• GIF 支持：加载和操作带有播放控制的动画 GIF。
• Three.js 集成：简化在同一个项目中使用 PixiJS 和 Three.js（以及其他 WebGL 项目）。

这里更详细地看看这些功能及其提供的内容。

🌐 Here's a closer look at these features and what they offer.

让我们仔细看看这些新功能和改进。

🌐 Let's take a closer look at these new features and improvements.

渲染图层​

🌐 Render Layers

渲染层让你可以更好地控制对象的渲染顺序，而无需更改它们的逻辑层级。

🌐 Render Layers give you more control over the rendering order of objects, without requiring changes to their logical hierarchy.

此功能适用于：

🌐 This feature is useful for:

• 将像生命值条或分数计数器这样的 UI 元素保持在其他对象之上。
• 在复杂场景中管理对象渲染。
• 在教程或覆盖层中高亮元素。

例如，你可以使用渲染层来确保UI生命值条始终显示在移动角色的上方，而不管场景图的层级结构如何。

🌐 For example, you can use Render Layers to ensure a UI health bar stays on top of a moving character, regardless of the scene graph hierarchy.

更多详细信息请参见 渲染图层指南。

🌐 More details are available in the Render Layers guide.

PixiJS 的老用户可能还记得 layers 插件，它提供了类似的功能。渲染层是一个更为集成且高性能的解决方案，直接内置于 PixiJS 的核心中。

🌐 Older users of PixiJS may remember the layers plugin, which provided similar functionality. Render Layers are a more integrated and performant solution that is built directly into the core of PixiJS.

GIF 支持​

🌐 GIF Support

PixiJS 现在支持动画 GIF，为开发者提供以下功能：

🌐 PixiJS now supports animated GIFs, offering developers the ability to:

• 播放、停止或循环 GIF。
• 调整播放速度。
• 以编程方式跳转到特定帧。

此功能非常适合向你的项目添加动态动画元素。

🌐 This feature is ideal for adding dynamic animated elements to your projects.

你可以在 GIF API 文档 中找到完整的 API 详情。

🌐 You can find the full API details in the GIF API Documentation.

与 three.js（以及其他 WebGL 项目）集成​

🌐 Integrating with three.js (and other WebGL projects)

由于共享 WebGL 上下文支持的改进，将 PixiJS 与 Three.js（以及其他 WebGL 项目）集成现在更容易了。这使得将 PixiJS 的 2D 功能与 Three.js 的 3D 渲染结合起来更加直接。

🌐 Integrating PixiJS with Three.js (and other WebGL projects) is now easier, thanks to improvements in shared WebGL context support. This makes it more straightforward to combine PixiJS's 2D capabilities with Three.js's 3D rendering.

详细指南可在这里获取。

🌐 A detailed guide is available here.

额外更新​

🌐 Additional Updates

此次发布还包括各种改进和错误修复。有关完整的更改列表，请查看 更新日志。

🌐 This release also includes various improvements and bug fixes. For a complete list of changes, check out the changelog.

结论​

🌐 Conclusion

我们鼓励你尝试这些新功能并分享你的反馈。你可以通过 Discord 与我们联系，或开启一个 讨论。

🌐 We encourage you to try out these new features and share your feedback. You can connect with us on Discord or start a discussion.

感谢你使用 PixiJS，我们期待看到你使用 v8.7.0 创作的作品。

🌐 Thank you for using PixiJS, and we look forward to seeing what you create with v8.7.0.

正如我们在之前的PixiJS 更新文章中提到的，我们正专注于让 PixiJS 更易于使用和理解。今天，我们将项目向这个目标推进了一步，我们很高兴地介绍PixiJS Create。

🌐 As we mentioned in our previous PixiJS Update post, we are focusing on making PixiJS easier to use and understand. Today we're pushing the project one step closer to that goal and we’re excited to introduce PixiJS Create.

一个易于使用的命令行工具，为使用你喜爱的打包工具的 PixiJS 提供模板，以及一个新的“创作模板”，帮助你开始使用 PixiJS 及其生态系统。

🌐 An easy to use CLI that provides templates for using PixiJS with your favourite bundler, as well as a new "Creation Template" to get you started with PixiJS and its ecosystem.

🚀 入门​

🌐 🚀 Getting Started

PixiJS Create 是一个新的 CLI 工具，简化了设置 PixiJS 项目的过程。它提供了一种快速简便的方式，通过一个命令即可创建一个新的 PixiJS 项目，并配备你开始所需的工具。

无论你更喜欢使用 Vite、Webpack 还是 esbuild，PixiJS Create 都能满足你的需求。 只需运行即可：

🌐 Whether you prefer using Vite, Webpack, or esbuild, PixiJS Create has you covered. It is as simple as running:

NPM：

npm create pixi.js@latest

Yarn：

yarn create pixi.js

PNPM：

pnpm create pixi.js

包子：

🌐 Bun:

bun create pixi.js

然后只需按照提示选择你想要的模板，就可以开始了！

🌐 Then just follow the prompts to select your desired template and you're good to go!

在运行该工具时，你将会看到一个选项，可以选择 打包模板 或 创建模板。让我们仔细看看这两个选项。

🌐 When running the tool, you will be presented with an option of either a Bundler Template or a Creation Template. Let's take a closer look at each of these options.

🛠️ 打包器模板：简单且基础​

🌐 🛠️ Bundler Templates: Simple and Barebones

Bundler 模板是用于使用流行构建工具设置 PixiJS 项目的精简起点。这些模板仅关注基本要素，为你提供一个无额外复杂性的简单环境来启动项目。

🌐 Bundler Templates are stripped-down starting points for setting up PixiJS projects with popular build tools. These templates focus solely on the essentials, giving you a no-frills environment to start your project without any added complexity.

包括什么？​

🌐 What’s Included?

• 与主要打包工具的开箱即用集成，包括：
  • Vite v6 + PixiJS（推荐）
  • Webpack v5 + PixiJS
  • esbuild + PixiJS
  • PixiJS 通过 导入映射 导入

Bundler 模板非常适合如果你想完全控制项目的设置，同时又想跳过搭建整个项目的麻烦。它们轻量、高效，非常适合自定义工作流程。

🌐 Bundler Templates are ideal if you want complete control over your project’s setup while skipping the hassle of setting up an entire project. They’re lightweight, efficient, and perfect for custom workflows.

🎨 创作模板：功能丰富的起点​

🌐 🎨 Creation Templates: Feature-Rich Starting Points

创建模板超越了基础，提供了一个功能齐全的基础，用于使用 PixiJS 构建应用。这些模板解决了开发者在开始新项目时常遇到的常见问题，提供了简化屏幕管理、资源处理、音频等的工具。

🌐 Creation Templates go beyond the basics, offering a fully-featured foundation for building applications with PixiJS. These templates address common challenges developers face when starting a new project, providing tools that simplify screen management, asset handling, audio and more.

包括什么？​

🌐 What’s Included?

• 屏幕管理：轻松处理过渡并组织应用状态。
• 资源加载：内置支持 PixiJS AssetPack，使资源管理轻松自如。
• 音频播放：利用 PixiJS Sound 使用现代 WebAudio API 功能。
• 响应式设计：自动处理各种屏幕尺寸的调整。
• 简易界面：包含一个用于常见界面元素的基础界面库。
• 动画工具：包括预配置的库支持，如用于骨骼动画的 Spine 和用于平滑补间和过渡的 Motion。

创建模板非常适合希望从坚实的基础开始快速开发的开发者，使他们能够专注于构建出色的内容，而不是担心设置问题。

🌐 Creation Templates are perfect for developers who want to hit the ground running with a robust foundation, enabling them to focus on building amazing content rather than worrying about setup.

🌍 适用于每个平台的创作模板​

🌐 🌍 Creation Templates for Every Platform

对于创建模板，我们首先支持通用的基于网页的应用，但计划很快将模板生态系统扩展到其他平台：

🌐 For the creation templates we’re starting with support for general web-based applications but are planning to expand the template ecosystem to other platforms soon:

• 网页模板：通用创建模板（现已可用）。

即将推出：

🌐 Coming Soon:

• Discord 模板：使用他们的 SDK 构建用于 Discord 的多人应用。
• Facebook 模板：为 Facebook Instant Games 创建应用。
• YouTube 模板：开发 YouTube 可播放内容。

致谢​

🌐 Acknowledgements

该项目基于优秀的 create-vite 工具，并受到 Phaser 的 create-game 项目的启发。我们对他们的工作及其提供的灵感表示感谢。

🌐 This project is based on amazing create-vite tool and inspired by the create-game project by Phaser. We are grateful for their work and the inspiration it provided.

🌐 保持联系​

🌐 🌐 Stay Connected

关注 Zyie 和 PixiJS 的社交媒体，获取最新动态。加入我们在 Discord 的活跃社区，参与实时讨论和获取支持。

🌐 Follow Zyie and PixiJS on social media for the latest updates. Join our vibrant community on Discord for real-time discussions and support.

感谢所有参与我们调查的朋友！有一件事非常清楚地传达出来：更好的文档是PixiJS社区的首要任务。我们已经认真听取了大家的反馈，并且已经开始着手进行重大改进。

🌐 Thank you to everyone who participated in our survey! One thing came through loud and clear: better documentation is a top priority for the PixiJS community. We’ve taken your feedback to heart, and work is already underway to make significant improvements.

这篇文章是我们致力于更好沟通的一部分。我们将分享我们如何处理文档更新，并展示一些自 PixiJS v8 以来我们引入的可能未被注意到的优秀功能和改进！

🌐 This post is part of our commitment to better communication. We’ll share how we’re tackling documentation updates and shine a light on some of the great features and improvements we’ve introduced since PixiJS v8 that might have flown under the radar!