Node Pixi Renderer

This is a fork of Pixi.JS mainly for use with browserify, but has also went in a slightly different direction in terms of programming style.

As of the currest version, node-pixi matches the public Pixi.JS API, but now modular with browserify. In later versions, the public API and architecture are subject to change and may no longer match Pixi.JS. If/when such split occurs the project's versioning and branching will be updated occordingly.

Basically, I am open to MAJOR refactors if they are appropriate, and it might even be completely rewritten in TypeScript in the future (not there yet). Also in the future, the goals may differ from Pixi.JS. I may streamline things and standardize only on WebGL, and maybe sooner rather than later (Saying goodbye to context 2d).

Pixi.JS JavaScript 2D Renderer

The aim of this project is to provide a fast lightweight 2D library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also its fast.

• Pixi.JS README
• Pixi.JS Documentation
• Pixi.JS forum
• Pixi.JS Tutorials and other helpful bits

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

Examples

• Basics
• SpriteSheet
• MovieClip
• Balls
• Morph
• Interactivity
• Transparent Background
• Dragging
• Tiling Texture
• Text
• RenderTexture
• Spine
• Graphics
• Masking

Install

node-pixi can be installed with Node and NPM.

npm install pixi

Usage

Basic

Once installed as a node_module, it can now be used in node and with browserify.

Example 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);
}

Alternative

You can completely bypass requiring the main pixi module, and go directly for the submodules. Doing this makes sure you only require what you need when you need it.

Example main.js:

// Require modules
var Sprite = require('pixi/display/Sprite');
var Stage = require('pixi/display/Stage');
var Texture = require('pixi/textures/Texture');
var WebGLRenderer = require('pixi/renderers/webgl/WebGLRenderer');

var renderer = WebGLRenderer(800, 600);
document.body.appendChild(renderer.view);

var stage = new Stage();
// ... etc ...

Build

node-pixi can be compiled with Grunt. If you don't already have this, go install Node and NPM then install the Grunt Command Line.

npm install -g grunt-cli

Get the source:

git clone https://github.com/drkibitz/node-pixi.git

It's important to clone the source, and not assume that the source is the same is what is published to NPM. The package on NPM is and should be considered a distributed release only, and is not compatible with the build process outlined here. To avoid any confusion about this, the published package.json has NO devDependencies, while the devDependencies of the source package.json remain.

The source repository is a valid NPM package with the same name of the distributed NPM package. Meaning it can also be installed with NPM, and directly from Github. There are a few ways to define a URL to do this between NPM and Github, just read npm-faq. I would recommend the following example, which runs very fast. I tend to prefer installing from Github tarballs rather than the Git protocol to avoiding transferring the history. This is a significantly faster installation:

npm install https://github.com/drkibitz/node-pixi/archive/master.tar.gz

Now with your repository cloned, install the previously mentioned devDependencies using NPM:

cd path/to/clone/
npm install

If the install was successful, you should now be able to build node-pixi with Grunt. Within your clone, run the default Grunt task:

grunt

The default task is a slightly extended version of the continious integration task (for Travis CI). In addition to building and testing both debug and release bundles, it creates project analysis reports using plato, and then copies the release bundle to the example directories meant to be committed to the gh-pages branch.

Please see take a look at this project's Gruntfile.js for more information on tasks, and task configuration.

Contribute

Want to contribute to node-pixi? Just make a pull request or a suggestion on Github. Please make sure you write tests, and run them before committing changes.

If you followed the steps in the Build from Source section, then you can now run the tests locally:

grunt test

• The test suite uses the karma-runner
• The test suite expects Firefox to be installed (This can be configured in test/karma.conf.js)
• Tests are run for every Travis CI build

Coming Soon

• node-pixi goals
• node-pixi roadmap
• node-pixi documentation
• either update wiki, or remove it
• complete unit tests, and working functional tests