Skip to main content

PixiJS 加入 Spine 4.2 物理革命!🚀

· 6 min read
Mat Groves
PixiJS Creator

我们有令人兴奋的消息要告诉所有动画爱好者和游戏开发者!Spine 团队刚刚凭借 Spine 4.2 的发布取得了巨大成功,其中包含了一些非常棒的新功能。对我们 PixiJS 用户来说最棒的部分是什么?我们今天就可以在 v7 和 v8 中开始利用这些卓越的功能!

🌐 We have exciting news for all animation enthusiasts and game developers! The Spine team has just smashed it out of the park with the release of Spine 4.2, which includes some truly great new features. The best part for us PixiJS users? We can start leveraging these remarkable features today in both v7 and v8!

对于不熟悉的人来说,Spine 是创建精美二维动画的标准工具。它提供了直观的编辑器和大量运行时,以确保你的动画可以在多个平台上使用。PixiJS 支持 Spine 几乎有和它们存在的时间一样长(大约10年)!就我个人而言,我们也大约同样时间一直在使用 Spine 发布游戏。

🌐 For those unfamiliar, Spine is the standard for creating stunning 2D animations. It offers an intuitive editor and a multitude of runtimes to ensure that your animations can be utilized across various platforms. PixiJS has supported Spine for almost as long as both have existed (around 10 years)! Personally, we have been shipping games with Spine for about that long as well.

最初,我们维护自己的播放器。这运作良好,但随着 Spine 的发展和新版本的推出,我们不得不投入大量时间和精力来修改自定义播放器。在过去的一年里,Esoteric 团队一直在管理 v7 版本的播放器,而 PixiJS 的 elementalcode 在他们出色的 HTML5 运行时基础上完成了最初的实现。这意味着,当这些令人惊叹的更新发布时,PixiJS 社区几乎可以立即使用它们!

🌐 Initially, we maintained our own player. This worked well, but as Spine evolved and new releases were introduced, we had to invest considerable time and energy to modify our custom player. In the past year, the Esoteric team has been managing the v7 version of the player after PixiJS's elementalcode made the initial implementation on top of their excellent HTML5 runtime. This means that as these incredible updates are released, the PixiJS community can use them almost immediately!

这里有一些令人兴奋的新功能:

🌐 Here are a few of the exciting new features:

🏋️‍♂️ 脊柱物理学

🌐 🏋️‍♂️ Physics in Spine

Spine 4.2 通过内置物理系统革新了动画,使骨骼能够通过模拟现实世界的物理运动自然移动。这意味着:

🌐 Spine 4.2 revolutionizes animation with built-in physics, allowing bones to move naturally by simulating real-world physics. This means:

  • 自动次级动作:通过自动化的头发、服装等运动节省时间并增强动画效果。
  • 动态动作:享受能够响应角色动作和动画的流畅且真实的物理效果。

📎 附件

🌐 📎 Attachments

你现在可以使用一个简单易用的 API,将任何 PixiJS 容器附加到动画中的一个插槽上。

🌐 You can now attach any PixiJS Container to a slot in your animation with a simple-to-use API.

  • addSlotObject(slotName, object)
  • removeSlotObject(slotName)
  • getSlotObject(slotName)

🏎️ v8 脊柱播放器测试版

🌐 🏎️ v8 Spine Player Beta

我们没有忘记 v8!正如我们在设计 v8 时的目标是成为最快的 WebGPU(和 WebGL!)渲染器一样,我们将同样的关注应用到了 v8 版本的 Spine 上。以下是一些令人印象深刻的统计数据:

🌐 We have not forgotten about v8! Just as we engineered v8 with the goal of being the fastest WebGPU (and WebGL!) renderer available, we applied this same focus to the v8 implementation of Spine. Here are some impressive statistics:

  • 快50%:享受显著的性能提升,比之前的v7版本快超过50%。
  • 内存减少50%:我们优化了内存使用,相比当前的v7版本减少了超过50%。

我们自豪地说,这是在网页上渲染 Spine 动画的最快方式之一,如果不是最快的话 🏆。准备好轻松创建流畅、高性能的动画吧。

🌐 We are proud to say that this is one of if not the fastest way to render Spine animations on the web 🏆. Get ready to create smooth, high-performance animations with ease.

我们计划在把所有细节处理完之后,将这个实现交回给Spine团队。最后缺失的功能是暗色调属性,目前在v8渲染时还没有考虑到。除此之外,其他所有功能都已经具备。如果你不使用暗色调,那么这个版本在v8上运行会非常好;我们已经在我们的游戏中投入生产中使用它了!

🌐 We plan on handing this implementation back over to the Spine team once we have dotted all the i's and crossed the t's. The last missing feature is the dark-tint property, which is not currently taken into account when rendering in v8. Other than that, all other features are present. If you are not using dark-tint, then this version will work great on v8; we are already using it in production for our games!

我们在仓库中包含了所有示例供你使用 这里

🌐 We included all the examples in the repo for you to play with here.

你也可以在这里查看实时 v8 示例

🌐 You can also check out the live v8 examples here

📲 保持联系

🌐 📲 Stay Connected

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

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