Skip to content

Releases: pixijs/pixijs

v8.0.0-beta.8

02 Nov 15:20
@Zyie Zyie
v8.0.0-beta.8
ce7fec5
Compare
Choose a tag to compare
v8.0.0-beta.8 Pre-release
Pre-release

ℹ️ INFO

See here for list of changes for PixiJS v8
https://github.com/pixijs/pixijs/releases/tag/v8.0.0-beta.7
https://github.com/pixijs/pixijs/releases/tag/v8.0.0-beta.6
https://github.com/pixijs/pixijs/releases/tag/v8.0.0-beta.4
https://github.com/pixijs/pixijs/releases/tag/v8.0.0-beta.2
https://github.com/pixijs/pixijs/releases/tag/v8.0.0-beta.0

💾 Download

Development Build:

Production Build:

Changed

v8.0.0-beta.7...v8.0.0-beta.8

🔥 Breaking

  • Breaking: set default alpha mode to premultiply-alpha-on-upload by @GoodBoyDigital in #9821
    This is a breaking change for anyone using v8, this change now matches how v7 handles premultiply alpha
  • Breaking: rename font parsers by @GoodBoyDigital in #9834
    • TextFormat -> bitmapFontTextParser
    • XMLStringFormat -> bitmapFontXMLStringParser
    • XMLFormat -> bitmapFontXMLParser

🎁 Added

🐛 Fixed

🧹 Chores

New Contributors

Contributors

yungzhu, GoodBoyDigital, and 2 other contributors
Assets 10

v8.0.0-beta.7

30 Oct 16:18
@Zyie Zyie
v8.0.0-beta.7
733732f
Compare
Choose a tag to compare
v8.0.0-beta.7 Pre-release
Pre-release

ℹ️ INFO

See here for list of changes for PixiJS v8
https://github.com/pixijs/pixijs/releases/tag/v8.0.0-beta.6
https://github.com/pixijs/pixijs/releases/tag/v8.0.0-beta.4
https://github.com/pixijs/pixijs/releases/tag/v8.0.0-beta.2
https://github.com/pixijs/pixijs/releases/tag/v8.0.0-beta.0

💾 Download

Development Build:

Production Build:

Changed

v8.0.0-beta.6...v8.0.0-beta.7

🔥 Breaking

  • Breaking: remove the texture listener on sprite view by @GoodBoyDigital in #9803
    This PR removes the dynamic addition and removal of update events for textures for performance optimization. When swapping textures on a sprite, it was observed that about 70% of the rendering time was spent on managing these listeners.

    With this change any modifications to a texture (e.g., changing the frame) will not be immediately reflected in sprites using that texture. To see the changes, developers will need to either:

    • Reassign the texture to the sprite, or
    • Call onUpdate() manually.

    This trade-off is justified as developers are more likely to swap textures on sprites every frame than to modify existing textures—modifying textures frequently is a discouraged practice.

🎁 Added

🐛 Fixed

🧹 Chores

Full Changelog: v8.0.0-beta.6...v8.0.0-beta.7

Contributors

GoodBoyDigital, Zyie, and 2 other contributors
Assets 10

v8.0.0-beta.6

20 Oct 15:12
@Zyie Zyie
v8.0.0-beta.6
7463526
Compare
Choose a tag to compare
v8.0.0-beta.6 Pre-release
Pre-release

ℹ️ INFO

See here for list of changes for PixiJS v8
https://github.com/pixijs/pixijs/releases/tag/v8.0.0-beta.0

💾 Download

Development Build:

Production Build:

Changed

v8.0.0-beta.5...v8.0.0-beta.6

🔥 Breaking

  • Breaking: Renamed pixi.js/blendModes to pixi.js/advanced-blend-modes

🎁 Added

  • Added: Add support for Webworker environment by @Zyie in #9757 
    import { DomAdapter, WebworkerAdapter, autodetectRenderer } from "pixi.js";

DomAdapter.set(WebworkerAdapter);
await autodetectRenderer(); // sets up webworker environment
  • Added: Compressed textures support KTX/DDS/Basis by @GoodBoyDigital @Zyie in #9768

🐛 Fixed

Full Changelog: v8.0.0-beta.5...v8.0.0-beta.6

Contributors

GoodBoyDigital, Zyie, and achamas-playco
Assets 10

v7.3.2

20 Oct 15:22
@bigtimebuddy bigtimebuddy
v7.3.2
c04c09c
Compare
Choose a tag to compare
v7.3.2

💾 Download

Development Build:

Production Build:

Documentation:

Changed

v7.3.1...v7.3.2

🐛 Fixed

🧹 Chores

Contributors

bigtimebuddy, epaezrubio, and 4 other contributors
Assets 26

v8.0.0-beta.5

07 Oct 09:13
@Zyie Zyie
v8.0.0-beta.5
653cdeb
Compare
Choose a tag to compare
v8.0.0-beta.5 Pre-release
Pre-release

ℹ️ INFO

Hotfix for advance blend modes

See here for list of changes for PixiJS v8
https://github.com/pixijs/pixijs/releases/tag/v8.0.0-beta.4
https://github.com/pixijs/pixijs/releases/tag/v8.0.0-beta.2
https://github.com/pixijs/pixijs/releases/tag/v8.0.0-beta.0

Assets 10

v8.0.0-beta.4

06 Oct 16:17
@Zyie Zyie
v8.0.0-beta.4
1ee5ce9
Compare
Choose a tag to compare
v8.0.0-beta.4 Pre-release
Pre-release

ℹ️ INFO

See here for list of changes for PixiJS v8
https://github.com/pixijs/pixijs/releases/tag/v8.0.0-beta.0

💾 Download

Development Build:

Production Build:

Changed

v8.0.0-beta.3...v8.0.0-beta.4

🔥 Breaking

  • Breaking: Remove settings object by @Zyie in #9737 
    // Can also be passed into the renderer directly e.g `autoDetectrenderer({resolution: 1})` 
settings.RESOLUTION -> AbstractRenderer.defaultOptions.resolution

// Can also be passed into the renderer directly e.g `autoDetectrenderer({failIfMajorPerformanceCaveat: false})` 
setting.FAIL_IF_MAJOR_PERFORMANCE_CAVEAT -> AbstractRenderer.defaultOptions.failIfMajorPerformanceCaveat

settings.ADAPTER -> DOMAdapter.get()/DOMAdapter.set()
  • Breaking: Application type now accepts Renderer instead of view by @Zyie in #9740 
    const app = new Application<Renderer<HTMLCanvasElement>()

app.canvas // HTMLCanvasElement
    this also works with just initialising a renderer 
    const webgl = new WebGLRenderer<HTMLCanvasElement>()
const webgpu = new WebGPURenderer<HTMLCanvasElement>()
  • Breaking: Adjust Texture.from by @Zyie in #9744
    • Texture.fromBuffer removed, use Texture.from
    • Texture.from can now generate a texture from resources such as HTMLCanvasElement/HTMLImageElement/HTMLVideoElement
  • Breaking: Convert blend mode filters to extensions by @Zyie in #9745
    • The new complex blendModes e.g 'vivid-light have been moved out into extensions to decrease bundle size
    • If you want access to the new blend mode you can do the following:
      import 'pixi.js/blendModes' // adds all new blend modes

  // or
  import {extensions, VividLightBlend} from 'pixi.js'
  extensions.add(VividLightBlend)
  container.blendMode = 'vivid-light' // only this blend mode will be available

🎁 Added

  • Added: HTML tagStyles by @GoodBoyDigital in #9734

    • HTMLText now has a new param called tagStyles were you can define custom tags in your text 👍

      new Text({
    text:'<red>Red</red>,<blue>Blue</blue>,<green>Green</green>', 
    renderMode:'html',
    style:{
        fontFamily: 'DM Sans',
        fill: 'white',
        fontSize:100,
        tagStyles:{
            red:{
                fill:'red',
            },
            blue:{
                fill:'blue',
            },
            green:{
                fill:'green',
            }
        }
        }
 });

      result:
      image

🐛 Fixed

🧹 Chores

New Contributors

Full Changelog: v8.0.0-beta.3...v8.0.0-beta.4

Contributors

pagoru, GoodBoyDigital, and Zyie
Assets 10

v8.0.0-beta.3

29 Sep 22:44
@Zyie Zyie
v8.0.0-beta.3
a7383f5
Compare
Choose a tag to compare
v8.0.0-beta.3 Pre-release
Pre-release

ℹ️ INFO

Hotfix for mixin types

See here for list of changes for PixiJS v8
https://github.com/pixijs/pixijs/releases/tag/v8.0.0-beta.0

Assets 10

v8.0.0-beta.2

29 Sep 15:40
@Zyie Zyie
v8.0.0-beta.2
7e2d824
Compare
Choose a tag to compare
v8.0.0-beta.2 Pre-release
Pre-release

ℹ️ INFO

See here for list of changes for PixiJS v8
https://github.com/pixijs/pixijs/releases/tag/v8.0.0-beta.0

💾 Download

Development Build:

Production Build:

Changed

v8.0.0-beta.1...v8.0.0-beta.2

🎁 Added

🐛 Fixed

🧹 Chores

  • Chore: Refactor folder structure by @Zyie in #9699

Full Changelog: v8.0.0-beta.1...v8.0.0-beta.2

Contributors

GoodBoyDigital, Zyie, and achamas-playco
Assets 10

v8.0.0-beta.1

25 Sep 18:17
@Zyie Zyie
v8.0.0-beta.1
7a4e9d3
Compare
Choose a tag to compare
v8.0.0-beta.1 Pre-release
Pre-release

ℹ️ INFO

Hotfix performance issue

See here for list of changes for PixiJS v8
https://github.com/pixijs/pixijs/releases/tag/v8.0.0-beta.0

Assets 2

v8.0.0-beta.0

25 Sep 16:26
@Zyie Zyie
v8.0.0-beta.0
b3b96b5
Compare
Choose a tag to compare
v8.0.0-beta.0 Pre-release
Pre-release

🚨 WARNING 🚨

These beta releases are still subject to API changes

🎁 NEW 🎁

New Package Structure

  • No more "lerna," PixiJS is now just one package with one import root: import {stuff} from ‘pixi.js’. This change means we now have much better tree shaking during app compilation, reducing bundle size if not imported.

    Old:

    import { Sprite } from "@pixi/sprite";
import { Graphic } from "@pixi/graphics";

    New:

    import { Sprite, Graphic } from "pixi.js";

Renderer Initialization Update

  • When initializing a renderer, this process is now asynchronous, serving two purposes:

    • Identifying and loading the necessary renderer code (minimizing bundling).
    • Allowing asynchronous initialization of webGPU.

  • We are using dynamic imports to correctly load the necessary renderer code, meaning you should only be loading the code you need!

    import { Application, autoDetectRenderer } from "pixi.js";

const app = new Application();

(async () => {
  await app.init({
    // application options
  });

  // or
  const renderer = await autoDetectRenderer({}); // WebGL or WebGPU

  // do pixi things
})();

WebGPU Renderer & New Architecture

  • PixiJS now supports rendering using the WebGPU API. It gracefully falls back to the WebGL renderer if WebGPU is not available.
  • RenderPipes:
    • The renderer now uses a pipeline system to render objects. This allows for more flexibility and extensibility.
    • This means that render logic is no longer within the Item (e.g., Sprite); it now relies on the renderer to handle changes in data.
  • Pixi can render in two modes:
    • 'Fast mode' when the scene structure remains unchanged between frames.
    • 'Regular mode' for scenes that change.
    • Scene changes include:
      • Adding or removing a child element.
      • Changing element visibility.
      • Swapping a texture or blendMode on a batched element.
      • Rebuilding a Graphics/Mesh that has been batched.
    • Regular mode is as fast as or faster than v7's rendering methods in many cases.
  • Pixi also now reactively renders the scene
    • Only updates the transform of elements that have changed.
  • The changes to the renderer have allowed us to make some significant performance improvements:
    • In 'Fast' mode, v8 achieves up to 200% higher FPS than v7 in Chrome Canary.
    • In 'Regular' mode, v8 achieves up to 50% higher FPS in Chrome Canary.
  • We have also added a shader compiler that lets us build shaders lego style by stacking shader bits together to change functionality. This will give us a platform to take shaders to the next level.

DisplayObject Overhaul

  • DisplayObject has been removed and replaced with Container. Container now accepts a view that allows it to render something to the screen. This won’t affect you as we still have Sprite, ‘Mesh’ etc. Its just a little more organised under the hood
  • From v8, only Container's are allowed to have children. This means you can no longer do sprite.addChild(child). Instead you must do container.addChild(sprite, child). 
    const wrapper = new Container();
const sprite = new Sprite();
const child = new Sprite();
wrapper.addChild(sprite, child);
  • Layers: Container now has a layer property. This allows you to group objects together and move them around without the cost of transforming the scene graph.
  • Blend modes are now inherited from the parent container.
  • Tint is also inherited, allowing tinting of all children in a container.
  • We have also added support for a wide range of Photoshop-like filters, including Vivid Light, Color Burn, and more.
  • Bounds now calculated without affecting scene graph transforms

Texture Overhaul

  • Textures have been completely rewritten and contain a lot less code than before. This has made it much easier for us to maintain compared to v7.
  • A Texture now consist of TextureSource, TextureStyle, and TextureLayout
  • Added antialias option to all textures

Graphics Overhaul

  • Graphics API has been changed to make it more intuitive and easier to use. 
    graphics
  .rect(50, 50, 100, 100)
  .fill(0xde3249);
  • We added a GraphicsContext that powers all graphics now. These contexts can be shared between graphics
  • Added support for svg drawing
  • Added gradient support
  • Added GraphicsPath's that can be used to draw and share shapes.
    • also support svg paths! eg new GraphicsPath('M 100 350 q 150 -300 300 0')
  • You can now build a geometry from a path using buildGeometryFromPath(path)
  • Dynamic graphics are much faster: up to 60% faster.

Text Overhaul

  • Text has been completely rewritten and now uses a single class. You specify the rendering mode in the constructor 
    new Text({ text: "hello", renderMode: "canvas" });
new Text({ text: "hello", renderMode: "bitmap" });
new Text({ text: "hello", renderMode: "html" });
  • Dynamic bitmap fonts will generate glyphs on the fly, so no need to build the font first
  • bitmap font and canvas fonts layout almost identically now - so switching is much more trivial
  • text style supports the same fill style as graphics objects
  • bitmap text is now measured more efficiently
  • HTML text will now handle font loading the same way you load any other kind of font with Assets. No need to load these fonts in separately anymore

Other Changes

  • Options for all! We have tried to standardize all constructors of PixiJS objects using a single options param. This is great as it means we can easily add props in the future, and also unlocks the ability to mix object parameters.

🔥 Breaking Changes 🔥

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

Application

  • 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
})();

  • view renamed to canvas
    Old:

    const app = new Application();
document.body.appendChild(app.view);

    New:

    const app = new Application({ canvas: myCanvas });
await app.init();

document.body.appendChild(app.canvas);

Renderer

  • Renderer.render() now takes an object if passing multiple arguments
    Old:

    renderer.render(stage);
renderer.render(stage, renderTexture);

    New:

    renderer.render(stage);
renderer.render({ stage, renderTexture });

  • Renderer class no longer exists. Replaced with WebGLRenderer&WebGPURenderer. Renderer as a type still exists
    Old:

    const renderer = new Renderer();

    New:

    const renderer = new WebGLRenderer();
const renderer = new WebGPURenderer();
// or
const renderer = autoDetectRenderer(); // WebGL or WebGPU

Scene

  • Only Container's are allowed to have children
    Old:

    const sprite = new Sprite();
const child = new Sprite();
sprite.addChild(child);

    New:

    const wrapper = new Container();
const sprite = new Sprite();
const child = new Sprite();
wrapper.addChild(sprite, child);

  • Text is now one unified class. You specify the rendering mode in the constructor
    Old:

    new Text("hello");
new BitmapText("hello");
new HTMLText("hello");

    New:

    new Text({ text: "hello", renderMode: "canvas" });
new Text({ text: "hello", renderMode: "bitmap" });
new Text({ text: "hello", renderMode: "html" });

  • Text.dropShadow is now an object
    Old:

    text.dropShadow = true;
text.dropShadowAlpha = 1;
text.dropShadowAngle = Math.PI / 6;
text.dropShadowBlur = 0;
text.dropShadowColor = "black";
text.dropShadowDistance = 5;

    New:

    text.dropShadow = {
  alpha: 1,
  angle: Math.PI / 6,
  blur: 0,
  color: "black",
  distance: 5,
};

  • Text.stroke is now an object
    Old:

    text.stroke = "black";
text.strokeThickness = 0;

    New:

    text.stroke = {
  color: "black",
  width: 2,
};

  • NineSlicePlane renamed to NineSliceSprite and options converted to an object
    Old:

    new NineSlicePlane(texture, 10, 10, 10, 10);

    New:

    new NineSliceSprite({
  texture,
  leftWidth: 10,
  rightWidth: 10,
  topHeight: 10,
  bottomHeight: 10,
});

  • MeshGeometry&PlaneGeometry options converted to an object
    Old:

    new PlaneGeometry(100, 100, 10, 10);
new MeshGeometry(vertices, uvs, indices);

    New:

    new PlaneGeometry({
  width: 100,
  height: 100,
  verticesX: 10,
  verticesY: 10,
});
new MeshGeometry({
  positions: vertices,
  uvs,
  indices,
});

  • Mesh options converted to an object
    Old:

    new Mesh(geometry, shader, state, drawMode);

    New:

    // `drawMode` is now `geometry.topology`
geometry.topology = "triangle-strip";
new Mesh({ geometry, shader });

  • Mesh.material has been removed use Mesh.shader instead

Graphics

  • You no longer need to begin/end fills, you just draw the shape and fill it in one go.
    Old:
graphics
    .beginFill(0xDE3249)
    .drawRect(50, 50, 100, 100);
    .endFill();

New:

graphics
  .rect(50, 5...
Read more
Assets 2