Skip to main content

PixiJS Update - Survey & v8.6.0

· 7 min read
Zyie

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.

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​

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:

  • More Examples:
    • Adding more examples for both beginners and experienced developers to learn from to the website.
    • Add example/guide for each feature we introduce on release, to help you understand how to use it right away.
  • Updated Guides:
    • Overhaul our current set of guides to better reflect the current state of PixiJS.
    • Add more guides to cover the basics of PixiJS
  • Starter Templates:
    • Create a set of starter templates to help you get up and running quickly. These templates will be available through an npm create command.
  • API Doc Improvements:
    • Improve documentation of types.
    • Include inline examples and explanations.
    • Ensure all public API's are written from the perspective of the user, not the developer.
    • Look into providing a toggle for exposing internal API's, with the default being to hide them. This will help reduce the noise in the API docs for most users while stil giving plugin developers access to the internals.
  • Migration Guide:
    • Improving the migration guide to help you upgrade your codebase to the latest version of PixiJS.
    • Explore backporting more deprecations where possible to help you upgrade your codebase more easily.

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: Containers now have a cacheAsTexture() function. It behaves similarly to cacheAsBitmap from v7 and will render the container to a texture instead of rendering the container itself.

    This can be great for performance if the container is static, as instead of rendering all the children etc., it will just render a single texture. As well as this the process of caching is also relatively low cost, with the trade-off being memory usage as the use of a texture does increase memory (for the texture itself).

    Guide

    We have a full guide on this feature here.

  • pixelLine: The pixelLine property is a neat feature of the PixiJS Graphics API that allows you to create lines that remain 1 pixel thick, regardless of scaling or zoom level. This feature is especially useful for achieving crisp, pixel-perfect visuals, particularly in retro-style or grid-based games, technical drawing, or UI rendering.

    Guide

    We have a full guide on this feature here.

  • New Global Methods: We have added three new functions to Container to make it easier to work with global transforms / tints / alphas.

    • getGlobalTransform

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

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

    • getGlobalTint

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

    • getGlobalAlpha

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

    if skipUpdate is true - it will be faster but may be outdated - uses the last rendered data

    if skipUpdate is false - it will be 100% accurate but slower - recalculates transform chain

v8.5.0​

  • ParticleContainer: Faster than ever, optimized for rendering a million particles effortlessly.

    The ParticleContainer shines when you need insane numbers of visual elements on-screen, especially when you want them moving and interacting in real time. Whether you're building particle effects, swarms of characters, or abstract art installations, PixiJS v8 has you covered. The static vs. dynamic property system gives you granular control over performance, allowing you to fine-tune the balance between flexibility and speed.

    Blog

    We have a blog post on this feature here.

  • Inverse Masking: You can now use element.setMask({ mask, inverse: true }) to create an inverse mask effect. This is great for creating cut-out effects or other creative visuals.

v8.4.0​

  • Multiview: Support for renderering the same context to multiple canvases. Eliminating the need for multiple PixiJS instances and duplicating resources. Simply add await app.init({ multiView: true}) and when rendering, pass in the target canvas to render to. renderer.render({ container, target: canvasOnDom1 })

    EXPERIMENTAL

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

v8.3.0​

  • PerspectiveMesh: A new mesh type that allows you to create 3D perspective effect

v8.2.0​

  • Container Reparenting: You can now reparent a container to another container without it looking visually different with two new methods reparentChild(child) and reparentChildAt(child, 1).

    Usually when you move a child from one container to another, it will visually jump to the new container. This is because the child's transform is relative to the parent container. With these new methods, the child will keep its position and scale relative to the new parent container.

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

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

    // visually the sprite will remain in the same position and scale
    // despite container1 and container2 having different scales.
    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.

    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 and PixiJS on social media for the latest updates. Join our vibrant community on Discord for real-time discussions and support.