Skip to main content

PixiJS Update - v8.12.0

ยท 6 min read
Zyie
PixiJS Admin

PixiJS v8.12.0 is out, and it brings with it the results of our first-ever Bug Hunt Month.

Throughout July, we put our focus entirely on bugs, fixing them, triaging them, closing stale ones, and adding bounties for critical ones. The result? One of our most productive maintenance months to date:

  • 45 bugs fixed
  • 250+ issues closed
  • Dozens of triaged and clarified issues
  • Several bounties assigned and paid out

A big thank-you to everyone who helped report, debug, test, or fix problems during the month. We had several new contributors jump in and make meaningful improvements to the engine.

Let's take a look at what's changed in this release.

A Few Helpful Additionsโ€‹

While this was mostly a bug-fix release, we did sneak in a few useful additions:

  • You can now control the scaleMode when using cacheAsTexture
    container.cacheAsTexture({
    scaleMode: 'nearest',
    });
  • We've exposed a maxAnisotropy property on TextureSource to align with other TextureStyle properties being passed through.
    texture.source.maxAnisotropy = 16;
  • New DomAdapter.createImage() function for creating image elements. This allows environments such as Node to create things like SVG's.
    const image = DomAdapter.get().createImage();
    image.src = 'path/to/image.svg';
  • You can now share a WebGPU adapter/device between PixiJS and other rendering engines
    const adapter = await navigator.gpu.requestAdapter();
    const device = await adapter.requestDevice();

    const app = new Application();
    await app.init({ gpu: { adapter, device } });
  • Asset loadParser has been deprecated and replaced with parser and the names of the parsers have been deprecated and simplified
    // Old way
    await Assets.load({ src: 'path/to/asset', data: { loadParser: 'loadJson' } });
    // New way
    await Assets.load({ src: 'path/to/asset', data: { parser: 'json' } });

    // Name changes
    // 'loadJson' -> 'json'
    // 'loadSvg' -> 'svg'
    // 'loadTxt' -> 'text'
    // 'loadVideo' -> 'video'
    // 'loadWebFont' -> 'web-font'
    // 'loadBitmapFont' -> 'bitmap-font'
    // 'spritesheetLoader' -> 'spritesheet'
    // 'loadTextures' -> 'texture'
    // 'loadBasis' -> 'basis'
    // 'loadDds' -> 'dds'
    // 'loadKtx2' -> 'ktx2'
    // 'loadKtx' -> 'ktx'
  • A new WorkerManager.reset() method helps release memory and reset the worker pool, which is useful for long-running applications that need to clear out old workers.
    app.destroy(true, true); // Destroy the app
    WorkerManager.reset(); // Reset the worker pool

Over 35 Bug Fixesโ€‹

This release includes targeted fixes across a wide range of areas:

  • Masks now render correctly when outside the viewport
  • AnimatedSprite.destroy() now behaves correctly
  • HTMLText tags and styles are handled more reliably
  • Pattern and gradient fills render as expected for installed BitmapText
  • BitmapFont gets multiple layout and rendering fixes
  • Several issues with masking, transform origin, and culling were resolved
  • Accessibility and scaling quirks are addressed

You can view the full changelog on GitHub if you're interested in the details.

Internal Tools and Dev Experienceโ€‹

Beyond the fixes and features, we also made a number of internal improvements:

  • Added StackBlitz integration to make sharing and testing easier. You can check it out here: StackBlitz Example
  • Improved our GitHub issue templates and automation around reproduction steps. We are now requiring a reproduction for new issues to help us address them more effectively. If no reproduction is provided, the issue will be closed automatically after 7 days.
  • Updated Node compatibility to support Node 24 when building the project.

These changes aren't user-facing, but they should make contributing and debugging a smoother experience.


Bug Bounty Programโ€‹

As part of Bug Hunt Month, we officially launched our bug bounty program. If you're a contributor, this means some issues may come with a small reward for fixing them, especially bugs that are tough to reproduce or critical to users.

If you're looking to contribute to PixiJS, this is a great way to get started. You can find all current bounty-tagged issues here.

Why We're Doing Thisโ€‹

We believe in the power of open source and community collaboration. Our bug bounty program is designed to:

  • Encourage contributors to tackle important, impactful issues.
  • Recognize the hard work involved in debugging and fixing complex problems.
  • Acknowledge that the PixiJS core team is small and often focused on other critical tasks, your contributions help get issues resolved faster.
  • Make PixiJS even better for everyone.

Sponsoring Bountiesโ€‹

If you are a developer or company working on a project and would like to sponsor a one-off bounty, please contact Matt Karl @bigtimebuddy at hello@mattkarl.com to arrange the details.

Sponsors can make one-time donations directly to our Open Collective to fund the bounty.


PixiJS Layout v3.1.0โ€‹

Alongside the main engine update, we also shipped a new version of PixiJS Layout.

This update includes a few key quality-of-life improvements:

  • You can now define a custom default Yoga config
    const config = getYoga().Config.create();

    config.setExperimentalFeatureEnabled(ExperimentalFeature.WebFlexBasis, true);
    setYogaConfig(config);
  • New options make drag easing more controllable
    const container = new LayoutContainer({
    layout: {
    overflow: 'scroll',
    },
    trackpad: {
    // Constrain scrolling within bounds
    constrain: true,
    // Percentage of overflow allowed when dragging beyond x-axis limit
    xConstrainPercent: 0.2,
    // Percentage of overflow allowed when dragging beyond y-axis limit
    yConstrainPercent: 0.2
    },
    });

We also fixed several bugs related to layout updates, reparenting, visibility, and container sizing. These fixes make layout behavior more predictable and align better with how developers expect Flexbox-style layouts to behave.

We've also improved StackBlitz integration and our bug reporting flow here as well.

Documentation is available at layout.pixijs.io

Install with:

npm install @pixi/layout@3.1.0

Get the Latest PixiJSโ€‹

Install via npm:

npm install pixi.js@8.12.0

Or use via CDN:

Development builds:

Production builds:

Documentation: https://pixijs.download/v8.12.0/docs/index.html


Conclusionโ€‹

That wraps up our July update. If you're interested in contributing, we're always looking for help on open issues, bounty-tagged or otherwise.

Thanks again to everyone who made Bug Hunt Month a success. We're excited to see what you build next!

Happy creating!

The PixiJS Team