Skip to main content

PixiJS 更新 - 调查与 v8.6.0

· 8 min read
Zyie
Zyie
PixiJS Admin

感谢所有参与我们调查的朋友！有一件事非常清楚地传达出来：更好的文档是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!

📖 改进文档​

🌐 📖 Improving Documentation

文档对于像 PixiJS 这样的库至关重要，我们也意识到文档还有提升的空间。以下是我们为改进文档所做更改的列表：

🌐 Documentation is critical for a library like PixiJS, and we recognize there’s room for growth. Below is a list of the changes we’re making to improve the documentation:

  • 更多示例：
    • 为初学者和有经验的开发者在网站上增加更多示例供学习。
    • 为我们在版本中介绍的每个功能添加示例/指南，以帮助你立即了解如何使用它。
  • 更新指南：
    • 彻底检修我们当前的指南，以更好地反映 PixiJS 的现状。
    • 增加更多指南以涵盖 PixiJS 的基础知识
  • 起始模板：
    • 创建一套入门模板，帮助你快速启动。这些模板可以通过 npm create 命令使用。
  • API 文档改进：
    • 改进类型文档。
    • 包含内联示例和解释。
    • 确保所有公共 API 都是从用户的角度编写的，而不是开发者的角度。
    • 考虑提供一个切换选项来公开内部 API，默认设置为隐藏它们。这将有助于减少大多数用户在 API 文档中的干扰，同时仍然让插件开发者可以访问内部内容。
  • 迁移指南：
    • 改进迁移指南，帮助你将代码库升级到最新版本的 PixiJS。
    • 尽可能探索回移更多已弃用的功能，以帮助你更轻松地升级代码库。

这些变化需要时间，但它们在我们的优先事项列表中排名很高。如果你有任何建议或反馈，请在 Bluesky 或 Discord 告诉我们。

🌐 These changes will take time, but they are high on our priority list. If you have any suggestions or feedback, please let us know on Bluesky or Discord.

✨ 有什么新内容？​

🌐 ✨ What’s New?

我们一直在努力推出新功能和改进，但说实话——我们在宣布这些方面做得并不出色。以下是我们最近发布的一些亮点的简要概述。

🌐 We’ve been hard at work delivering new features and improvements, but let’s be honest—we haven’t done the best job announcing them. Here’s a quick rundown of the highlights from our recent releases.

NOTE

We will be bringing out more detailed guides/examples on all of these features as well, this is just the start!

v8.6.0​

  • cacheAsTexture: 容器现在有一个 cacheAsTexture() 函数。它的行为类似于 v7 中的 cacheAsBitmap，并且会将容器渲染到纹理上，而不是渲染容器本身。

    如果容器是静态的，这对于性能可能非常有利，因为它不会渲染所有的子元素等，而是只渲染一个单一的纹理。除此之外，缓存的过程也相对低成本，权衡的是内存使用，因为使用纹理确实会增加内存（纹理本身所占用的内存）。

    指南

    我们有一份关于此功能的完整指南 这里。

  • pixelLine：pixelLine 属性是 PixiJS Graphics API 的一个非常棒的功能，它允许你创建的线条无论在缩放或放大多少倍时都保持 1 像素的粗细。这个功能在实现清晰、像素完美的视觉效果时尤其有用，特别是在复古风格或基于网格的游戏、技术绘图或用户界面渲染中。

    指南

    我们有一份关于此功能的完整指南 这里。

  • 新的全局方法：我们在 Container 中添加了三个新函数，以便更轻松地处理全局变换 / 色调 / 透明度。

    • 获取全局变换

      const skipUpdate = false;
      const outMatrix = new Matrix();

      // writes and returns outMatrix;
      const globalTransform = container.getGlobalTransform(outMatrix, skipUpdate);

    • 获取全局色调

      const skipUpdate = false;
      // returns rgb color
      const globalTint = container.getGlobalTint(skipUpdate);

    • 获取全局透明度

      const skipUpdate = false;
      // returns alpha as number;
      const globalAlpha = container.getGlobalAlpha(skipUpdate);
    信息

    如果 skipUpdate 为真 - 它会更快但可能是过时的 - 使用最后渲染的数据

    如果 skipUpdate 为假——它将是 100% 准确的，但速度较慢——重新计算变换链 :::

v8.5.0​

  • 粒子容器：比以往更快，优化以轻松渲染一百万个粒子。

    ParticleContainer 在你需要屏幕上呈现大量视觉元素时表现出色，尤其是当你希望它们实时移动和互动时。无论你是在构建粒子效果、群体角色，还是抽象艺术装置，PixiJS v8 都能满足你的需求。静态与动态属性系统让你对性能进行精细控制，使你能够在灵活性和速度之间进行微调。

    博客

    我们有一篇关于此功能的博客文章 这里。

  • 反向遮罩：你现在可以使用 element.setMask({ mask, inverse: true }) 创建反向遮罩效果。这对于创建剪切效果或其他创意视觉效果非常有用。

v8.4.0​

  • 多视图：支持将相同的内容渲染到多个画布上。无需多个 PixiJS 实例和重复资源。只需添加 await app.init({ multiView: true})，在渲染时传入要渲染的目标画布即可。renderer.render({ container, target: canvasOnDom1 })
EXPERIMENTAL

This feature is still experimental and currently interaction only works on the first canvas.

v8.3.0​

  • PerspectiveMesh：一种新的网格类型，允许你创建三维透视效果

v8.2.0​

  • 容器重新父化：你现在可以通过两个新方法 reparentChild(child) 和 reparentChildAt(child, 1) 将一个容器重新归属到另一个容器，而不会在视觉上有所不同。

    通常当你将一个子元素从一个容器移动到另一个容器时，它会在视觉上跳到新的容器中。这是因为子元素的变换是相对于父容器的。使用这些新方法，子元素将在新的父容器中保持其位置和缩放比例。

    const container1 = new Container();
    const container2 = new Container();

const sprite = new Sprite(); container1.scale = 5; container1.addChild(sprite);

// 从视觉上看，精灵将在相同的位置和缩放比例下保持不变 // 尽管 container1 和 container2 有不同的缩放比例。 container2.reparentChild(sprite);


### v8.1.0

- **Generic Typing for Container**: You can now specify the type of children that a container can have. e.g.
  ```typescript
  const container = new Container<Sprite>();
  container.addChild(new Sprite());
  container.addChild(new Graphics()); // This will throw a type error
  ```
- **DTS Bundles**: We now provide a single TypeScript definition file with all pixi exports under the `PIXI` namespace, similar to the defintion file we generated in v6. This can be useful for users that are using PixiJS in a non-module environment, and need to include the definition file manually.

 This file can be found on all of our releases on Github in the "Assets" section, or through `https://pixijs.download/vX.X.X/pixi.d.ts`.

## 🗣️ Looking Ahead

We’re committed to addressing the feedback you’ve shared and continuing to improve PixiJS. In addition to better documentation, you can expect more regular updates to keep you informed about what’s new.

Your input is vital to PixiJS’s success, and we encourage you to share your thoughts through Bluesky, Github, and the Discord channel. Thanks for your continued support as we work to make PixiJS better for everyone.

The PixiJS Team

## 🌐 Stay Connected

Follow [Zyie](https://bsky.app/profile/zyie.bsky.social) and [PixiJS](https://bsky.app/profile/pixijs.com) on social media for the latest updates. Join our vibrant community on [Discord](https://discord.gg/nrnDP9wtyX) for real-time discussions and support.