Skip to main content

PixiJS Update - v8.7.0

· 3 min read
Zyie
Zyie
PixiJS Admin

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:

  • Render Layers: Control the rendering order of objects independently of their scene graph hierarchy.
  • GIF Support: Load and manipulate animated GIFs with playback controls.
  • Three.js Integration: Simplify the use of PixiJS and Three.js (and other WebGL projects) in the same project.

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​

NOTE

The Render Layers API is experimental and may change in future releases.

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

This feature is useful for:

  • Keeping UI elements like health bars or score counters on top of other objects.
  • Managing object rendering in complex scenes.
  • Highlighting elements in tutorials or overlays.

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.

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 Support​

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

  • Play, stop, or loop GIFs.
  • Adjust playback speed.
  • Jump to specific frames programmatically.

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

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

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

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​

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

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