Camkode
Camkode

Basic Setup Your PIXI.js App with Typescript and Webpack

Posted by Kosal

Basic Setup Your PIXI.js App with Typescript and Webpack

Setting up your first PIXI, Typescript and Webpack project can be a little complicated, this tutorial is to remind myself and hopefully help someone else get started.

1. Set up your project environment

First, you'll need to install the required dependencies:

npm install pixi.js typescript webpack webpack-cli webpack-dev-server ts-loader copy-webpack-plugin html-webpack-plugin terser-webpack-plugin

Then, create a tsconfig.json file in the root of your project with the following configuration:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  }
}

Then, create a webpack.config.js file in the root of your project with the following configuration:

const path = require('path')
const CopyPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')

module.exports = (env, argv) => {
  return {
    stats: 'minimal', // Keep console output easy to read.
    entry: './src/index.ts', // Your program entry point

    // Your build destination
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
    },

    // Config for your testing server
    devServer: {
      compress: true,
      allowedHosts: 'all', // If you are using WebpackDevServer as your production server, please fix this line!
      static: false,
      client: {
        logging: 'warn',
        overlay: {
          errors: true,
          warnings: false,
        },
        progress: true,
      },
      port: 1234,
      host: '0.0.0.0',
    },

    // Web games are bigger than pages, disable the warnings that our game is too big.
    performance: { hints: false },

    // Enable sourcemaps while debugging
    devtool: argv.mode === 'development' ? 'eval-source-map' : undefined,

    // Minify the code when making a final build
    optimization: {
      minimize: argv.mode === 'production',
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            ecma: 6,
            compress: { drop_console: true },
            output: { comments: false, beautify: false },
          },
        }),
      ],
    },

    // Explain webpack how to do Typescript
    module: {
      rules: [
        {
          test: /\.ts(x)?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
        },
      ],
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
    },

    plugins: [
      // Copy our static assets to the final build
      new CopyPlugin({
        patterns: [{ from: 'assets/' }],
      }),

      // Make an index.html from the template
      new HtmlWebpackPlugin({
        template: 'index.html',
        hash: true,
        minify: false,
      }),
    ],
  }
}

2. Create the game canvas

In your index.html file, add a canvas element with an ID of game-canvas:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My Game</title>
  </head>
  <body>
    <canvas id="game-canvas"></canvas>
  </body>
</html>

3. Initialize PixiJS

In your src/index.ts file, import PixiJS and create a new application instance:

import * as PIXI from 'pixi.js'

const app = new PIXI.Application({
  width: 800,
  height: 600,
  backgroundColor: 0x1099bb,
  view: document.getElementById('game-canvas') as HTMLCanvasElement,
})

// Add your game logic here

4. Add game assets

Load your game assets (images, sounds, etc.) using PixiJS's Loader class:

PIXI.Assets.load(['flowerTop.png'], () => {
  // Add your game logic here
})

5. Create the game reels

Use PixiJS's Sprite class to create the game:

const myTexture = PIXI.Texture.from('flowerTop.png')

const mySprite = new PIXI.Sprite(myTexture)
mySprite.anchor.set(0.5)
mySprite.x = app.screen.width / 2
mySprite.y = app.screen.height / 2

app.stage.addChild(mySprite)

6. Add game logic

Finally, add your game logic to rotate the sprite and update the game state (e.g. displaying the rotation sprite):

app.ticker.add((delta) => {
  mySprite.rotation += 0.05
})

Full src/index.ts code

import * as PIXI from 'pixi.js'

const app = new PIXI.Application({
  width: 800,
  height: 600,
  backgroundColor: 0x1099bb,
  view: document.getElementById('game-canvas') as HTMLCanvasElement,
})

PIXI.Assets.load(['flowerTop.png'], () => {
  const myTexture = PIXI.Texture.from('flowerTop.png')

  const mySprite = new PIXI.Sprite(myTexture)
  mySprite.anchor.set(0.5)
  mySprite.x = app.screen.width / 2
  mySprite.y = app.screen.height / 2

  app.stage.addChild(mySprite)

  app.ticker.add((_delta) => {
    mySprite.rotation += 0.05
  })
})

This is just a basic example to get you started with creating a game using PixiJS and TypeScript.

#pixi.js #typescript #webpack