iq-scm / pixi-seed

Pixi.js project seed with ES6 and webpack

Pixi Seed

Demo

This project is designed to bootstrap your Pixi.js development with modern tooling, technology and project organisation. Use as boilerplate for your next project.

Webpack with ES6 provides a more class based approach to Pixi.js development and allows you to include assets within your JS. Reactman enables you to quickly add code to your project and the using Redux Stores helps keep your data in one place.

The project comes with Render and Animation stores and a ScaledContainer to help work across multiple devices with a ‘best-fit’ rendering methodology. The code contains demos for TweenJS and renderer update loops.

V3 Updates

• Change stores to REDUX /w ducks
• Update to Webpack V2
• Update to Pixi V4.6
• Added a loader screen
• Added a custom glsl filter example
• PopMotion with minor examples
• Animation loop examples
• HTML forms to Redux/Pixi.js examples

TODO

• Move loader to REDUX
• Script to redo package.json on new project
• Add a screen manager

Getting started

Clone the project, remove the git repository and install to get going:

git clone --depth=1 https://github.com/edwinwebb/pixi-seed.git my-project
cd my-project
rm -rf .git
npm install
npm start

Then visit http://localhost:8080

Strapped Files

You can configure your canvas size in the AppConstants.js file.

export const canvasWidth = 1920;
export const canvasHeight = 1080;

The ScaledObjectContainer will try a best fit approach. Used in Logo and Background to auto scale.

RedLine.js gives a Popmotion example

Thingie.js gives an animation loop update example.

npm scripts

• npm start - Build and start the app in development mode at http://localhost:8080
• npm run build - Run a production build, outputs to ./build/
• npm run lint - Lint your code
• npm run reactman - Generate code for a DisplayObject or Store from command prompt. See here.

Static assets

import asset files from within your JavaScript component files. To add more filetypes, look at the webpack.config.js and add a file loader.

// Filename: app.js
import assetURL from './logo.png';

License

Copyright (c) 2017 Edwin Webb

MIT (http://opensource.org/licenses/MIT)