Skip to content

Releases: pixijs/pixijs

v8.0.0-alpha.0

15 Jun 10:00
Compare
Choose a tag to compare
v8.0.0-alpha.0 Pre-release
Pre-release

🚨 WARNING 🚨

This project is currently highly experimental and subject to large changes before we reach an official launch.

🎁 NEW 🎁

  • WebGPU Renderer and overhaul of WebGL renderer
    • up to 2.5x faster!
  • Reactive renderer, only update transform of something that changes. If nothing changes then nothing is updated.
  • Advanced Blend Modes - All them cool photoshop filters? Pixi v8 has them all! Vivid Light, Color burn the lot! Parity with Canvas and more

🔥 Breaking Changes

Below is a non complete list of breaking changes. This will be updated fully before the official release

  • PixiJS will now need to be initialised asynchronously. With the introduction of the WebGPU renderer PixiJS will now need to be awaited before being used
    Old:

    import { Application } from 'pixi.js'
    
    const app = new Application();
    
    // do pixi things

    New:

    import { Application } from 'pixi.js'
    
    const app = new Application();
    
    (async () => {
       await app.init({
           // application options
       });
    
       // do pixi things
    })()
  • Graphics API has been overhauled
    Old:

    graphics
        .beginFill(0xDE3249)
        .drawRect(50, 50, 100, 100);
        .endFill();

    New:

    graphics
        .rect(50, 50, 100, 100)
        .fill(0xDE3249)
  • Text is now one unified class. You specify the rendering mode in the constructor
    Old:

    new Text('hello')
    new BitmapText('hello')

    New:

    new Text({ text: 'hello', renderMode: 'canvas' });
    new Text({ text: 'hello', renderMode: 'bitmap' });
  • A Ticker instance is now passed to the callback
    Old:

    Ticker.shared.add((dt)=> {
        bunny.rotation += dt
    });

    New:

    Ticker.shared.add((ticker)=> {
        bunny.rotation += ticker.deltaTime;
    });

v7.2.4

06 Apr 19:32
Compare
Choose a tag to compare

💾 Download

Development Build:

Production Build:

Documentation:

Changed

v7.2.3...v7.2.4

🐛 Fixed

🧹 Chores

  • Chore: Add more payload properties for beta.pixijs.com event (#9300) @baseten

v7.2.3

24 Mar 19:48
Compare
Choose a tag to compare

v7.2.2

21 Mar 12:21
Compare
Choose a tag to compare

v7.2.1

17 Mar 16:48
Compare
Choose a tag to compare

💾 Download

Development Build:

Production Build:

Documentation:

Changed

v7.2.0...v7.2.1

🐛 Fixed

Warning
About TypeScript 5.0: There's a fix in this release to support TypeScript 5.0, however, PixiJS includes a dependency for @types/css-font-loading-module (0.0.7) this package that is only compatible with TS 4.x. For errors related to this dependency, you can suppress it by overriding the version to be ^0.0.8 in package.json:

{
    "overrides": {
        "@types/css-font-loading-module": "^0.0.8"
    }
}

v7.2.0

14 Mar 19:20
Compare
Choose a tag to compare

📣 Overview

This is a big release that we've been working on for awhile. We want to highlight some of the new features available in this release which we think will make developer's lives much easier.

🔠 HTMLText

This release adds HTMLText. Previously this was available as a plugin but we have decided to make it available by default in pixi.js, pixi.js-legacy (the Web Worker and node bundles does not support HTMLText yet).

🌈 Color

We have standardized color inputs all over PixiJS by creating a Color class. No longer do some color inputs accept only integers, some accept RGBA floats, some strings. You can now use whatever color format you choose for things like backgroundColor, tint, Graphics fill and stroke, text colors. Color inputs include: #ff0000, #f00, "red", "rgb(255, 0, 0)", 0xff0000, and many more!

💻 Event Modes

The new event-based system that replaced InteractionManager from v6 still had some work in order to fully support old features. In order to bridge the gap, we have deprecated interactive (boolean) and replaced with eventMode.

eventMode Description
none Ignores all interaction events, similar to CSS's pointer-events: none, good optimization for non-interactive children
passive Does not emit events and ignores hit testing on itself but does allow for events and hit testing only its interactive children. If you want to be compatible with v6, set this as your default eventMode (see options in Renderer, Application, etc)
auto Does not emit events and but is hit tested if parent is interactive. Same as interactive = false in v7
static Emit events and is hit tested. Same as interaction = true in v7, useful for objects like buttons that do not move.
dynamic Emits events and is hit tested but will also receive mock interaction events fired from a ticker to allow for interaction when the mouse isn't moving. This is useful for elements that independently moving or animating.

👟 Global Move Events

Introduces new global move events that are dispatched globally regardless of hit-testing the current object. These are similar to *move events in v6 and are useful for creating drag interactions with a reference to the main root stage Container.

  • globalpointermove
  • globaltouchmove
  • globalmousemove

❗ Other Important Changes

Node Bundle Moving

We have decided to move @pixi/node to it's own repository and will no longer be part of this repository. There are a few reasons: lack of adoption, burden of installing Node-based canvas and gl dependencies, stability of Adapter and extension APIs. We will continue to support this bundle but will do releases independent of PixiJS.

Return of peerDependencies

We reverted a major change in v7 which was to eliminate the use of peerDependencies. This unfortunately broke CDN delivery systems that ship ESM builds (jsdelivr, skypack, etc) also it had negative impact on new tools like Yarn 3. Because we rolled-back this change, it's very important that when you update PixiJS from now on, you complete remove the old version before installing the new one. Please see this wiki page on Upgrading PixiJS.

💾 Download

Development Build:

Production Build:

Documentation:

Changed

v7.1.4...v7.2.0

🎁 Added

  • Add new Color class (#9061, #9087, #9096, #9097, #9145, #9147, #9154, #9165, #9171, #9199) @bigtimebuddy
    • Add ColorSource support for Graphics line and fill style
    • Add ColorSource support for BaseRenderTexture's clearColor
    • Add ColorSource support for RenderTextureSystem's clear
    • Add ColorSource support for CanvasContextSystem's clear
    • Add backgroundColor Color getter to BackgroundSystem
    • Support ColorSource with Graphics tint (#9180)
    • Support ColorSource with Mesh & BitmapText tint (#9181)
    • Support ColorSource with Sprite tint (#9182)
    • Support ColorSource with ParticleContainer tint (#9183)
import { Graphics } from 'pixi.js';

const graphics = new Graphics()
  .beginFill('red')
  .lineStyle({ color: 'yellow', width: 10 })
  .drawCircle(0, 0, 100);
await Assets.load({
  src: `textures/file.other`, // extension is unknown
  loadParser: 'loadTextures' // will force it to be handled as a texture
});

🚽 Deprecated

  • Deprecates the following color utilities (#9061) @bigtimebuddy
    • utils.rgb2hex => new Color(rgb).toNumber()
    • utils.string2hex => new Color(string).toNumber()
    • utils.hex2string => new Color(hex).toHex()
    • utils.hex2rgb => new Color(hex).toRgbArray()
    • utils.premultiplyRgba => new Color(rgba).premultiply(alpha).toArray()
    • utils.premultiplyTint => new Color(tint).toPremultiplied(alpha)
    • utils.premultiplyTintToRgba => new Color(tint).premultiply(alpha).toArray()
  • Deprecates interactive boolean setting, see new eventMode instead (#9089, #9172) @Zyie
  • Deprecates Asset.preferWorkers, use Asset.setPreferences instead (#9184) @bigtimebuddy
  • Migrate @pixi/node bundle to separate project (#9217) @bigtimebuddy

🐛 Fixed

🧹 Chores

v7.2.0-rc.3

v7.2.0-rc.2

v7.2.0-rc

v7.1.4

02 Mar 16:41
Compare
Choose a tag to compare