@pixi/node

We are now a part of the Open Collective and with your support you can help us make PixiJS even better. To make a donation, simply click the button below and we'll love you forever!

Setup

Install

npm install @pixi/node

There is no default export. The correct way to import PixiJS is:

import * as PIXI from "@pixi/node";

Error installing gl package

In most cases installing gl from npm should just work. However, if you run into problems you might need to adjust your system configuration and make sure all your dependencies are up to date

Please refer to the gl installation guide for more information.

Error installing canvas package

The canvas library currently being used does not have a pre-built version for every environment. When the package detects an unsupported environment, it will try to build from source.

To build from source you will need to make sure you have the following dependencies installed and then reinstall:

brew install pkg-config cairo pango libpng jpeg giflib librsvg

For non-mac users, please refer to the canvas installation guide for more information.

Error unable to auto-detect a suitable renderer

When running in a headless environment (e.g. server or continuous integration), use xvfb as a virtual frame buffer. Install with:

sudo apt-get install xvfb

And then use with node when starting the program:

xvfb-run node ./src/index.js

Basic Usage Example

import { Application, Assets, Sprite } from '@pixi/node';
import path from 'path';
import { writeFileSync } from 'fs';

// This package requires the new asset loader to be used.
// Initialize the new assets loader
await Assets.init();

// The application will create a renderer using WebGL. It will also setup the ticker
// and the root stage Container.
const app = new Application();

// load a sprite
const bunnyTexture = await Assets.load(path.join(process.cwd(), 'assets/bunny.png'));
// create sprite from texture
const bunny = Sprite.from(bunnyTexture);

// Setup the position of the bunny
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;

// Rotate around the center
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;

// Add the bunny to the scene we are building.
app.stage.addChild(bunny);

// Listen for frame updates
app.ticker.add(() => {
    // each frame we spin the bunny around a bit
    bunny.rotation += 0.01;
});

// extract and save the stage
app.renderer.render(app.stage);
const base64Image = app.renderer.extract
    .canvas(app.stage)
    .toDataURL('image/png');

const base64Data = base64Image.replace(/^data:image\/png;base64,/, '');
const output = `./test.png`;

writeFileSync(output, base64Data, 'base64');

Full environment setup with Docker 🐳

NOTE: It is recommended to add node_modules to your .dockerignore file.

# Set the base image
FROM node:16

# Create and set the working directory
WORKDIR /usr/src/app

# Add dependencies for gl, canvas and xvfb
# Important! These dependencies must be installed before running `npm install`
RUN apt-get update \
    && apt-get install -y build-essential libcairo2-dev libgif-dev libglew-dev libglu1-mesa-dev libjpeg-dev libpango1.0-dev librsvg2-dev libxi-dev pkg-config xvfb \
    && rm -rf /var/lib/apt/lists/*

# Install app dependencies
COPY package*.json ./
RUN npm install

# Bundle app source
COPY . .

# Start the server
EXPOSE 3000
CMD xvfb-run node ./src/index.js

License

This content is released under the (http://opensource.org/licenses/MIT) MIT License.