Skip to main content

PixiJS Joins the Spine 4.2 Physics Revolution! 🚀

· 3 min read
Mat Groves
Mat Groves
PixiJS Creator

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!

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.

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 revolutionizes animation with built-in physics, allowing bones to move naturally by simulating real-world physics. This means:

  • Automatic Secondary Motion: Save time and enhance your animations with automated movement for hair, clothing, and more.
  • Dynamic Movement: Enjoy fluid and realistic physics that respond to character movements and animations.

📎 Attachments​

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 Spine Player Beta​

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% Faster: Enjoy significant performance improvements, making it over 50% faster than the previous v7 version.
  • 50% Less Memory: We've optimized memory usage, reducing it by over 50% compared to the current v7 version.

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.

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.

You can also check out the live v8 examples here

📲 Stay Connected​

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