Babylon.js and Pixi.js

Pixi.js is a fast, lightweight, open source 2D library with full support for WebGL and very fast rendering. It works great as a UI in combination with Babylon.js, making it a perfect duo for your web game world.

Setup Pixi.js rendering

const pixiRenderer = new PIXI.WebGLRenderer({
  context: engine._gl,
  view: engine.getRenderingCanvas(),
  clearBeforeRender: false,
  autoStart: false,
});

Add Pixi.js Sprites to Stage

const stage = new PIXI.Container();
const sprite = PIXI.Sprite.from("https://i.imgur.com/1yLS2b8.jpg");
sprite.anchor.set(0.5);
sprite.position.set(canvas.width / 2, canvas.height / 2);
stage.addChild(sprite);

The clearBeforeRender and autoStart properties are very important and must both be set to false.

Rendering Sequence

The render sequence of Babylon.js and Pixi.js is also very important: Babylon.js must be rendered first.

engine.runRenderLoop(function () {
  scene.render();
  engine.wipeCaches(true);

  pixiRenderer.reset();
  pixiRenderer.render(stage);
});

Working JSFiddle Example Pixi.js in Front

It is possible to place a Pixi.js stage behind a Babylon.js scene provided you use

scene.autoClear = false;

to make the background of the scene transparent. In this case, render Pixi.js before Babylon.js.

engine.runRenderLoop(function () {
  pixiRenderer.reset();
  pixiRenderer.render(stage);

  scene.autoClear = false;
  scene.render();
  engine.wipeCaches(true);
});

It is also possible to combine these and have Pixi.js stages behind and in front of a Babylon.js scene.

engine.runRenderLoop(function () {
  pixiRenderer.reset();
  pixiRenderer.render(stage);

  scene.autoClear = false;
  scene.render();
  engine.wipeCaches(true);

  pixiRenderer.reset();
  pixiRenderer.render(stage1);
});

JSFiddle Example Multiple Pixi.js Stages

WebGL1 Problems

When your browser is running WebGL1, you need to reset the Pixi.js context first for each render, as shown below.

engine.runRenderLoop(function () {
  if (engine.webGLVersion === 1) {
    pixiRenderer.reset();
  }
  scene.render();
  engine.wipeCaches(true);

  pixiRenderer.reset();
  pixiRenderer.render(stage);
});

Spine animation with pixi.js

image info

Running 2D Spine animation is now easy using the Pixi spine extension at https://github.com/pixijs/pixi-spine. Here's some sample code showing how to run a simple spineboy animation.

loader.add("spineboy", "https://raw.githubusercontent.com/pixijs/examples/gh-pages/examples/assets/pixi-spine/spineboy-pro.json");

loader.load((loader, resources) => {
  let spineboy = new PIXI.spine.Spine(resources.spineboy.spineData);
  spineboy.scale.set(0.4);
  spineboy.state.setAnimation(0, "portal", false);
  spineboy.x = 1000;
  spineboy.y = 650;
  spineboy.state.getCurrent(0).onComplete = () => {
    spineboy.state.setAnimation(0, "shoot", true);
  };
  pixi.stage.addChild(spineboy);
});

Working playground with spine animation For more API information about Spine animation, visit GitHub.

Pixi.js Versions

Always use the latest released version of Pixi.js