Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pixijs/node

Run PixiJS but in Node.js environments, no browser required!
https://github.com/pixijs/node

canvas canvas2d glsl nodejs pixijs rendering webgl2

Last synced: 3 days ago
JSON representation

Run PixiJS but in Node.js environments, no browser required!

Awesome Lists containing this project

README 

        
# @pixi/node



**We are now a part of the [Open Collective](https://opencollective.com/pixijs) 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:



```js

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](https://www.npmjs.com/package/gl/v/4.5.3-win64.0#system-dependencies) for more information.



### Error installing canvas package



The [canvas](https://www.npmjs.com/package/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](https://www.npmjs.com/package/canvas#compiling) 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



```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.view.toDataURL('image/png');

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

const output = `./test.png`;



writeFileSync(output, base64Data, 'base64');



process.exit(0);

```



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

```



### License



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