Skip to content
Create/control a Pixi.js canvas using React
JavaScript TypeScript HTML Clojure
Branch: master
Clone or download

Latest commit

Latest commit ccfad3d Oct 25, 2018

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Blurring filter has changed, update example and screenshot Sep 26, 2016
examples Merge pull request #97 from michalochman/create-react-class Aug 10, 2017
src Made the "renderStage" on Stage update optional by listening to the p… Oct 16, 2018
test Merge pull request #97 from michalochman/create-react-class Aug 10, 2017
vendor Switched to bower components Sep 9, 2014
.gitignore Ignore vim swap files May 3, 2016
.jshintrc Update examples and tests for React 0.13 Apr 17, 2015
.npmignore Keep npm from publishing unneeded dirs Jan 9, 2015
.travis.yml Switch travis to container-based test Oct 30, 2015
LICENSE Reformatted LICENSE Sep 18, 2014
NOTICE Remove ref to vendor files Sep 18, 2014
README.md Better phrasing to ref a different react-pixi Apr 26, 2018
bower.json Get pixi to build with webpack Oct 8, 2015
generateDeclaration.ts export interface Apr 15, 2017
index.html Merge pull request #96 from michalochman/point-like-props Aug 10, 2017
karma.conf.js unindent line in karma.conf.js' Oct 8, 2015
package.json v0.9.19 Oct 25, 2018
react-pixi.d.ts fix Stage typescript definition Aug 20, 2017
react-pixi.d.ts.template fix Stage typescript definition Aug 20, 2017
webpack-commonjs.config.js Removed react-dom code that was packaged internally Dec 8, 2016
webpack-examples.config.js Update code to work with React 15.0 for #36 Apr 25, 2016
webpack.config.js Add ify loader to apply glslify to pixi 4 Sep 26, 2016

README.md

react-pixi

This library works with React 15. If you are using React 16, look at react-pixi-fiber or a different library also called react-pixi.

Create/control a Pixi.js canvas using React.

To control a 3D scene with React, see react-three

Applying blur with a PIXI filter

Install Via NPM

The current version of react-pixi is 0.9.0 and uses React 15.0.0 and PIXI 4.0.0

If you just want to use react-pixi and not build it, you can install it using npm.

npm install react-pixi --save

At this point you can reference it using the commonjs forms.

var React = require('react');
var ReactPIXI = require('react-pixi');
var PIXI = require('pixi.js');

It turns out that PIXI dumps itself into the global namespace so you don't have to require it if you don't want to.

To use react-pixi with webpack, babel, and hot reloading, you can use this boilerplate.

Building From Source

You will need node and npm.

git clone https://github.com/Izzimach/react-pixi.git
cd react-pixi
npm install
npm run build

will build and package the code into build/react-pixi.js. You can include this in your web page and reference React, ReactPIXI as globals.

<script src="../../build/react-pixi.js"></script>

NOTE that react-pixi includes its own internal copy of React (currently 15) so you should not include the standard React library if you're doing it this way. Doing so might give wierd results!

Running The Examples

The examples are in examples/ and you can view them by running a webpack dev server.

npm run examples

Then browse to http://localhost:8080

Rendering Pixi.js elements

To render Pixi.js elements like a Stage or Sprite you reference them like other components that were created with React.createClass. For React 0.12 and later, this means you have to use React.createElement or create factories from the basic ReactPIXI components. From React 15.5, instead of using React.createClass you should use createReactClass from a separate create-react-class package. For example, to construct a CupcakeComponent that consists of two Sprites:

// set assetspath to point to your image files
var assetpath = function(filename) { return '../assets/' + filename; };

var Sprite = React.createFactory(ReactPIXI.Sprite);
var DisplayObjectContainer = React.createFactory(ReactPIXI.DisplayObjectContainer);

var CupcakeComponent = React.createClass({
  displayName: 'CupcakeComponent',
  // maps from cupcake toppings to the appropriate sprite
  spritemapping : {
    'vanilla' : assetpath('creamVanilla.png'),
    'chocolate' : assetpath('creamChoco.png'),
    'mocha' : assetpath('creamMocha.png'),
    'pink' : assetpath('creamPink.png'),
    },
  render : function () {
    var creamimagename = this.spritemapping[this.props.topping];
    var xposition = this.props.xposition;
    return DisplayObjectContainer(
      {x:xposition, y:100 },
        Sprite({image:creamimagename, y:-35, anchor: new PIXI.Point(0.5,0.5), key:'topping'}, null),
        Sprite({image:assetpath('cupCake.png'), y:35, anchor: new PIXI.Point(0.5,0.5), key:'cake'}, null)
    );
  }
});

(taken from the cupcake example) Sample Cupcake component

Note that at the moment you need to mount onto a DOM component so your top-level component will probably be a ReactPIXI.Stage.

Look in the examples directory for more in-depth examples.

Rendering via JSX

You can produce display elements using JSX as well. Note that you don't need factories in this case.

var assetpath = function(filename) { return '../assets/' + filename; };

var Stage = ReactPIXI.Stage;
var TilingSprite = ReactPIXI.TilingSprite;
var Text = ReactPIXI.Text;

var ExampleStage = React.createClass({
  displayName: 'ExampleStage',
  render: function() {
    var fontstyle = {font:'40px Times'};
    return <Stage width={this.props.width} height={this.props.height}>
      <TilingSprite image={assetpath('bg_castle.png')} width={this.props.width} height={this.props.height} key="1" />
      <Text text="Vector text" x={this.props.xposition} y={10} style={fontstyle} anchor={new PIXI.Point(0.5,0)} key="2" />
    </Stage>;
  }
});

Setting values for Point and ObservablePoint types

For setting properties on Pixi.js types that are either PIXI.Point's or PIXI.ObserveablePoint's you can use either and array of integers or a comma-separated string of integers in the following forms: [x,y], 'x,y', [i], 'i'. In the case where two integers are provided, the first will be applied to the X coordinate and the second will be applied to the Y coordinate. In the case where a single integer if provided, it will be applied to both coordinates.

You can still create your own PIXI Point or ObserveablePoint objects and assign them directly to the property. These won't actually replace the property but they will be applied using the original object's .copy() method.

Testing

Testing is done with karma

npm run test

to (re)generate the pixel reference images you will need to have slimerjs installed, then

npm run pixelrefs

Caveats

  • Callbacks are just callbacks. They don't feed into React's event system.
You can’t perform that action at this time.