@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

$3

``
npm install @pixi/node
`

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

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

$3

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.

$3

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.

$3


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

`js
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.

`Dockerfile


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
``

$3

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