Pixi.js: Getting Pixi.js working with Node.js...

Created on 19 Mar 2018  路  17Comments  路  Source: pixijs/pixi.js

To whom it may concern,

Having a real basic problem here. Cannot get Pixi.js examples working with Node.js.

This is what I tried...

$ npm install pixi

$ cat main.js
// Require pixi module
var pixi = require('pixi');

// You can use either WebGLRenderer or CanvasRenderer
var renderer = pixi.WebGLRenderer(800, 600);
document.body.appendChild(renderer.view);

var stage = new pixi.Stage();
var bunnyTexture = pixi.Texture.fromImage("bunny.png");
var bunny = new pixi.Sprite(bunnyTexture);

bunny.position.x = 400;
bunny.position.y = 300;
bunny.scale.x = 2;
bunny.scale.y = 2;

stage.addChild(bunny);

requestAnimationFrame(animate);

function animate() {
    bunny.rotation += 0.01;

    renderer.render(stage);

    requestAnimationFrame(animate);
}


$ node main.js
/Users/spellegrino/node.js/pixi.js/node_modules/pixi/platform.js:11
!function(a){"use strict";module.exports={global:a,console:a.console,document:a.document,location:a.location,navigator:a.navigator,window:a.window,createCanvas:function(){return a.document.createElement("canvas")},createImage:function(){return new a.Image},createRequest:function(){return new a.XMLHttpRequest}}}("undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{});
                                                                                                                                                                                            ^

TypeError: Cannot read property 'createElement' of undefined
    at Object.module.exports.createCanvas (/Users/spellegrino/node.js/pixi.js/node_modules/pixi/platform.js:11:189)
    at Object.WebGLRenderer (/Users/spellegrino/node.js/pixi.js/node_modules/pixi/renderers/webgl/WebGLRenderer.js:11:134)
    at Object.<anonymous> (/Users/spellegrino/node.js/pixi.js/tmp/main.js:5:21)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:441:10)
    at startup (node.js:139:18)
    at node.js:968:3

What am I doing wrong?

Kind regards,

-Stacey Pellegrino

馃捑 v4.x (Legacy)

Most helpful comment

We successfully run pixi on node (for unit testing purposes) using jsdom + canvas, those errors you are getting are due to pixi trying to access the dom.

All 17 comments

Pretty sure you're using the deprecated https://github.com/drkibitz/node-pixi, which is a few years old. Try npm install pixi.js instead.

That said, I don't know if pixi.js supports rendering without a browser. Issues like Cannot read property 'createElement' of undefined might get thrown if there isn't a DOM, so maybe jsdom or something similar might help. Otherwise, no idea if WebGL/canvas can run on bare Node.js (without xvfb, Chrome headless, Firefox/Selenium, etc).

We successfully run pixi on node (for unit testing purposes) using jsdom + canvas, those errors you are getting are due to pixi trying to access the dom.

Just installed canvas on macOS with...

$ brew install pkg-config cairo pango libpng jpeg giflib

$ npm install canvas

Staceys-Air:tmp spellegrino$ ls -l node_modules/
total 0
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 abbrev
drwxr-xr-x   9 spellegrino  staff  288 19 Mar 11:01 ajv
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 ansi-regex
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 aproba
drwxr-xr-x  12 spellegrino  staff  384 19 Mar 11:01 are-we-there-yet
drwxr-xr-x   9 spellegrino  staff  288 19 Mar 11:01 asn1
drwxr-xr-x   7 spellegrino  staff  224 19 Mar 11:01 assert-plus
drwxr-xr-x  12 spellegrino  staff  384 19 Mar 11:01 asynckit
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 aws-sign2
drwxr-xr-x  10 spellegrino  staff  320 19 Mar 11:01 aws4
drwxr-xr-x   7 spellegrino  staff  224 19 Mar 11:01 balanced-match
drwxr-xr-x   5 spellegrino  staff  160 19 Mar 11:01 bcrypt-pbkdf
drwxr-xr-x   9 spellegrino  staff  288 19 Mar 10:52 bit-twiddle
drwxr-xr-x   7 spellegrino  staff  224 19 Mar 11:01 block-stream
drwxr-xr-x  11 spellegrino  staff  352 19 Mar 11:01 boom
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 brace-expansion
drwxr-xr-x  15 spellegrino  staff  480 19 Mar 11:01 canvas
drwxr-xr-x   7 spellegrino  staff  224 19 Mar 11:01 caseless
drwxr-xr-x   7 spellegrino  staff  224 19 Mar 11:01 co
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 code-point-at
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 combined-stream
drwxr-xr-x   9 spellegrino  staff  288 19 Mar 11:01 concat-map
drwxr-xr-x   7 spellegrino  staff  224 19 Mar 11:01 console-control-strings
drwxr-xr-x   8 spellegrino  staff  256 19 Mar 11:01 core-util-is
drwxr-xr-x   9 spellegrino  staff  288 19 Mar 11:01 cryptiles
drwxr-xr-x   9 spellegrino  staff  288 19 Mar 11:01 dashdash
drwxr-xr-x  15 spellegrino  staff  480 19 Mar 11:01 debug
drwxr-xr-x   8 spellegrino  staff  256 19 Mar 11:01 deep-extend
drwxr-xr-x   8 spellegrino  staff  256 19 Mar 11:01 delayed-stream
drwxr-xr-x  10 spellegrino  staff  320 19 Mar 11:01 delegates
drwxr-xr-x   8 spellegrino  staff  256 19 Mar 11:01 detect-libc
drwxr-xr-x  11 spellegrino  staff  352 19 Mar 10:52 earcut
drwxr-xr-x   9 spellegrino  staff  288 19 Mar 11:01 ecc-jsbn
drwxr-xr-x   8 spellegrino  staff  256 19 Mar 10:52 eventemitter3
drwxr-xr-x  12 spellegrino  staff  384 19 Mar 11:01 extend
drwxr-xr-x  11 spellegrino  staff  352 19 Mar 11:01 extsprintf
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 forever-agent
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 form-data
drwxr-xr-x   7 spellegrino  staff  224 19 Mar 11:01 fs.realpath
drwxr-xr-x  10 spellegrino  staff  320 19 Mar 11:01 fstream
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 fstream-ignore
drwxr-xr-x  21 spellegrino  staff  672 19 Mar 11:01 gauge
drwxr-xr-x   9 spellegrino  staff  288 19 Mar 11:01 getpass
drwxr-xr-x   9 spellegrino  staff  288 19 Mar 11:01 glob
drwxr-xr-x   9 spellegrino  staff  288 19 Mar 11:01 graceful-fs
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 har-schema
drwxr-xr-x   7 spellegrino  staff  224 19 Mar 11:01 har-validator
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 has-unicode
drwxr-xr-x  14 spellegrino  staff  448 19 Mar 11:01 hawk
drwxr-xr-x  11 spellegrino  staff  352 19 Mar 11:01 hoek
drwxr-xr-x  10 spellegrino  staff  320 19 Mar 11:01 http-signature
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 inflight
drwxr-xr-x   7 spellegrino  staff  224 19 Mar 11:01 inherits
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 ini
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 is-fullwidth-code-point
drwxr-xr-x   7 spellegrino  staff  224 19 Mar 11:01 is-typedarray
drwxr-xr-x  10 spellegrino  staff  320 19 Mar 11:01 isarray
drwxr-xr-x  12 spellegrino  staff  384 19 Mar 10:52 ismobilejs
drwxr-xr-x  10 spellegrino  staff  320 19 Mar 11:01 isstream
drwxr-xr-x   9 spellegrino  staff  288 19 Mar 11:01 jsbn
drwxr-xr-x  13 spellegrino  staff  416 19 Mar 11:01 json-schema
drwxr-xr-x  10 spellegrino  staff  320 19 Mar 11:01 json-stable-stringify
drwxr-xr-x  10 spellegrino  staff  320 19 Mar 11:01 json-stringify-safe
drwxr-xr-x   7 spellegrino  staff  224 19 Mar 11:01 jsonify
drwxr-xr-x   9 spellegrino  staff  288 19 Mar 11:01 jsprim
drwxr-xr-x   8 spellegrino  staff  256 19 Mar 11:01 mime-db
drwxr-xr-x   7 spellegrino  staff  224 19 Mar 11:01 mime-types
drwxr-xr-x  12 spellegrino  staff  384 19 Mar 10:52 mini-signals
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 minimatch
drwxr-xr-x   9 spellegrino  staff  288 19 Mar 11:01 minimist
drwxr-xr-x  10 spellegrino  staff  320 19 Mar 11:01 mkdirp
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 ms
drwxr-xr-x  30 spellegrino  staff  960 19 Mar 11:01 nan
drwxr-xr-x  10 spellegrino  staff  320 19 Mar 11:01 node-pre-gyp
drwxr-xr-x  12 spellegrino  staff  384 19 Mar 11:01 nopt
drwxr-xr-x   7 spellegrino  staff  224 19 Mar 11:01 npmlog
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 number-is-nan
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 oauth-sign
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 10:52 object-assign
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 once
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 os-homedir
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 os-tmpdir
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 osenv
drwxr-xr-x  16 spellegrino  staff  512 19 Mar 10:52 parse-uri
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 path-is-absolute
drwxr-xr-x  12 spellegrino  staff  384 19 Mar 11:01 performance-now
drwxr-xr-x   7 spellegrino  staff  224 19 Mar 10:52 pixi-gl-core
drwxr-xr-x   8 spellegrino  staff  256 19 Mar 11:01 pixi.js
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 process-nextick-args
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 punycode
drwxr-xr-x  12 spellegrino  staff  384 19 Mar 11:01 qs
drwxr-xr-x  14 spellegrino  staff  448 19 Mar 11:01 rc
drwxr-xr-x  18 spellegrino  staff  576 19 Mar 11:01 readable-stream
drwxr-xr-x   9 spellegrino  staff  288 19 Mar 10:52 remove-array-items
drwxr-xr-x   9 spellegrino  staff  288 19 Mar 11:01 request
drwxr-xr-x   8 spellegrino  staff  256 19 Mar 10:52 resource-loader
drwxr-xr-x   7 spellegrino  staff  224 19 Mar 11:01 rimraf
drwxr-xr-x   8 spellegrino  staff  256 19 Mar 11:01 safe-buffer
drwxr-xr-x   8 spellegrino  staff  256 19 Mar 11:01 semver
drwxr-xr-x   7 spellegrino  staff  224 19 Mar 11:01 set-blocking
drwxr-xr-x   8 spellegrino  staff  256 19 Mar 11:01 signal-exit
drwxr-xr-x  12 spellegrino  staff  384 19 Mar 11:01 sntp
drwxr-xr-x  11 spellegrino  staff  352 19 Mar 11:01 sshpk
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 string-width
drwxr-xr-x   7 spellegrino  staff  224 19 Mar 11:01 string_decoder
drwxr-xr-x   9 spellegrino  staff  288 19 Mar 11:01 stringstream
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 strip-ansi
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 strip-json-comments
drwxr-xr-x  11 spellegrino  staff  352 19 Mar 11:01 tar
drwxr-xr-x   8 spellegrino  staff  256 19 Mar 11:01 tar-pack
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 tough-cookie
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 tunnel-agent
drwxr-xr-x  14 spellegrino  staff  448 19 Mar 11:01 tweetnacl
drwxr-xr-x   7 spellegrino  staff  224 19 Mar 11:01 uid-number
drwxr-xr-x   8 spellegrino  staff  256 19 Mar 11:01 util-deprecate
drwxr-xr-x  16 spellegrino  staff  512 19 Mar 11:01 uuid
drwxr-xr-x  10 spellegrino  staff  320 19 Mar 11:01 verror
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 wide-align
drwxr-xr-x   6 spellegrino  staff  192 19 Mar 11:01 wrappy

`Now I get the following error...`

$ node main.js 
module.js:327
    throw err;
    ^

Error: Cannot find module 'pixi'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/Users/spellegrino/node.js/tmp/main.js:2:12)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:441:10)

Looks like you still have require('pixi') somewhere instead of require('pixi.js'). #2271 may be of interest to you, as well as the node-pixi or pixi-shim project.

Lastly, the error had your answer in plain text, Error: Cannot find module 'pixi'. I have a suspicion that you may be a bit new to Node.js. (Sincere apologies if you aren't.) Here are a couple resources to read up on so you don't have to thrash around:

I am new to node.js so forgive me.

if (!window.ArrayBuffer) {
     ^

ReferenceError: window is not defined
    at Object.<anonymous> (/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/polyfill/index.js:9:6)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/index.js:6:17)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)

Changed this...

$ grep node_modules main.js
var pixi = require('./node_modules/pixi.js');

You should read up on the resources I sent you, as well as the docs on jsdom. You'll find the answers there.

Installed jsdom modules...

$ npm install --save-dev --save-exact jsdom jsdom-global

I have no novice issues with require statements and have started using jsdom in my script now. But defining a pretend window doesn't have the desired result!

$ cat main.js 
const jsdom = require("jsdom");

const { JSDOM } = jsdom;

const window = (new JSDOM(``, { pretendToBeVisual: true })).window;
window.requestAnimationFrame(timestamp => {
  console.log(timestamp > 0);
});


// Require pixi module 
var pixi = require('pixi.js');

// You can use either WebGLRenderer or CanvasRenderer 
var renderer = pixi.WebGLRenderer(800, 600);
document.body.appendChild(renderer.view);

var stage = new pixi.Stage();
var bunnyTexture = pixi.Texture.fromImage("bunny.png");
var bunny = new pixi.Sprite(bunnyTexture);

bunny.position.x = 400;
bunny.position.y = 300;
bunny.scale.x = 2;
bunny.scale.y = 2;

stage.addChild(bunny);

requestAnimationFrame(animate);

function animate() {
    bunny.rotation += 0.01;

    renderer.render(stage);

    requestAnimationFrame(animate);

}
Staceys-Air:tmp spellegrino$ node main.js 
/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/polyfill/index.js:9
if (!window.ArrayBuffer) {
     ^

ReferenceError: window is not defined
    at Object.<anonymous> (/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/polyfill/index.js:9:6)
    at Module._compile (module.js:577:32)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)
    at Module.require (module.js:504:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/index.js:6:17)
    at Module._compile (module.js:577:32)

What am I doing wrong here or is there something else I need to do? Thanks.

global.window instead of const window
also why not use my pixi-shim ?
just const PIXI = require('pixi-shim')

Needed the following lines...

global.window = (new JSDOM(``, { pretendToBeVisual: true })).window;
window.requestAnimationFrame(timestamp => {
  console.log(timestamp > 0);
});

global.document = window.document;

global.navigator = {
  userAgent: 'node.js',
};

Changed...

var pixi = require('pixi.js');

...to...

const pixi = require('pixi-shim');

What is the advantage with using pixi-shim?

After all those changes and other errors resolved I now get the following error when trying to run...

$ node main.js 
pixi-shim: detected browser environment
pixi-shim: load pixijs
pixi-shim: initialized in: 1018.299ms
/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/core/renderers/webgl/WebGLRenderer.js:63
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
                                                                                            ^

TypeError: Cannot call a class as a function
    at _classCallCheck (/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/core/renderers/webgl/WebGLRenderer.js:63:99)
    at Object.WebGLRenderer (/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/core/renderers/webgl/WebGLRenderer.js:115:9)
    at Object.<anonymous> (/Users/spellegrino/node.js/tmp/main.js:33:21)
    at Module._compile (module.js:577:32)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)
    at Module.runMain (module.js:611:10)
    at run (bootstrap_node.js:387:7)

```

  1. look at the code of pixi-shim: https://github.com/Prozi/pixi-shim/blob/master/index.js

  2. as you can see jsdom and other things (like canvas library) get lazy* loaded for your convenience

  3. when you initialize jsdom manually before using pixi-shim you initialize window in node global.window enviromnent which leads to my pixi-shim thinking you're in browser and not initializing itself properly

  4. dont use anything besides pixi-shim on the node side, it's not required.

  5. advantages are listed here: https://github.com/Prozi/pixi-shim/blob/master/README.md + it uses latest pixi version + you dont have to include anything in you enviroment

  6. mind you its designed for node use, for frontend just require pixi normally

Just using pixi-shim and it now initialises properly but I get the same following error regarding WebGLRenderer.js...

$ node main.js
pixi-shim: polyfill dom
pixi-shim: load pixijs
pixi-shim: initialized in: 1684.430ms
/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/core/renderers/webgl/WebGLRenderer.js:63
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
                                                                                            ^

TypeError: Cannot call a class as a function
    at _classCallCheck (/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/core/renderers/webgl/WebGLRenderer.js:63:99)
    at Object.WebGLRenderer (/Users/spellegrino/node.js/tmp/node_modules/pixi.js/lib/core/renderers/webgl/WebGLRenderer.js:115:9)
    at Object.<anonymous> (/Users/spellegrino/node.js/tmp/main.js:20:21)
    at Module._compile (module.js:577:32)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)
    at Module.runMain (module.js:611:10)
    at run (bootstrap_node.js:387:7)

it looks like you have error on /Users/spellegrino/node.js/tmp/main.js:20 20th line of your code

Okay. Couldn't fix that line but found code on pixijs.com that does the same thing. It is the basic.js example. I include the reference to pixi-shim at the top and all loads fine...

$ cat basic.js 
const PIXI = require('pixi-shim');

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

// create a new Sprite from an image path
var bunny = PIXI.Sprite.fromImage('required/assets/basics/bunny.png')

// center the sprite's anchor point
bunny.anchor.set(0.5);

// move the sprite to the center of the screen
bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;

app.stage.addChild(bunny);

// Listen for animate update
app.ticker.add(function(delta) {
    // just for fun, let's rotate mr rabbit a little
    // delta is 1 if running at 100% performance
    // creates frame-independent transformation
    bunny.rotation += 0.1 * delta;
});

Staceys-Air:tmp spellegrino$ node basic.js 
pixi-shim: polyfill dom
pixi-shim: load pixijs
pixi-shim: initialized in: 5942.611ms
PixiJS 4.7.1 - Canvas - http://www.pixijs.com/

But when I go to http://localhost:3000 the page doesn't render! Apart from referencing pixi-shim what else is requied to get this example to work at http://localhost:3000?

  1. you're doing it wrong. you're trying to start a frontend app then you need to do it on front

  2. node should be only used here as a server for static files propably

  3. why would it load at localhost:3000 where is the code to serve the files (http server in node)
    read more here https://stackoverflow.com/questions/10434001/static-files-with-express-js

  4. just create index.html and paste the example from pixi.js website and it works
    then you can static serve the file (index.html) and voila

Closing as I think you're covered with help from prozi, but feel free to re-open if you're still having issues :)

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings