Getting Started with Pixi.js and webpack

Using webpack and Pixi.js together is very simple. This post should help someone who is new to both but experienced in javascript get off the ground quickly.

Steps

Setup basic file structure

mkdir pixijs-demo && cd pixijs-demo
npm init -y

Install webpack

npm install webpack webpack-cli webpack-dev-server --save-dev

Add a build and start script to your package.json

{
  "name": "pixijs-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
  }
}

Create webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  plugins: [
  ],
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Configure webpack plugins

  • clean-webpack-plugin to clean the dist folder between builds
  • html-webpack-plugin to generate an index.html in the dist folder
  • copy-webpack-plugin to copy assets from src to dist
npm install clean-webpack-plugin html-webpack-plugin copy-webpack-plugin --save-dev

Configure the plugins in webpack.config.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Pixi.js Demo'
    }),
    new CopyPlugin([
      { from: 'src/assets', to: 'assets' },
    ])
  ],
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Install Pixi.js

npm install pixi.js --save

Now all we need to do is import and we’re good to go.

import * as PIXI from 'pixi.js';

Pixi.js Basic Usage Example

Save bunny.png to src/assets/bunny.png.

Create src/index.js:

import * as PIXI from 'pixi.js';

// The application will create a renderer using WebGL, if possible,
// with a fallback to a canvas render. It will also setup the ticker
// and the root stage PIXI.Container
const app = new PIXI.Application();

// The application will create a canvas element for you that you
// can then insert into the DOM
document.body.appendChild(app.view);

// load the texture we need
app.loader.add('bunny', 'assets/bunny.png').load((loader, resources) => {
    // This creates a texture from a 'bunny.png' image
    const bunny = new PIXI.Sprite(resources.bunny.texture);

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

Comments (5)

jim
Wednesday, Jun 5, 2019

This doesn’t seem to work

James Kiefer
In reply to jim
Friday, Jun 7, 2019

Thanks for this report.

I think the main culprit was a typo in the name of the webpack config file. Make sure your file is named webpack.config.js.

I’ve also updated the Pixi code for version 5 which slightly altered the loader syntax.

David H
Sunday, Jun 9, 2019

Ty for this useful post. With this setup can I use new ES6 features?

Ezra B
Thursday, Jul 4, 2019

Heads up: it looks like they changed the syntax for the CleanWebpackPlugin. I was getting “TypeError: CleanWebpackPlugin is not a constructor” on build, resolved by changing a couple lines, as noted in this SO thread: https://stackoverflow.com/questions/56567930/typeerror-cleanwebpackplugin-is-not-a-constructor

Thanks for this quick setup guide. It can be hard to find good, minimal boilerplate when starting new projects too try out technologies.

James Kiefer
In reply to Ezra B
Friday, Jul 5, 2019

Thanks for the report, I’ve updated the example.

I’m glad this was useful for you!

Thank you

Your comment has been submitted and will be published once it has been approved.

OOPS!

Your comment has not been submitted. Please go back and try again. Thank You!

If this error persists, please open an issue by clicking here.

Say something