Phaser 3 & TypeScript - Basics

A simple game with Phaser 3 & TypeScript.

Resources

• How to build a simple game in the browser with Phaser 3 and TypeScript by Mariya Davydova @mariyadavydova

Project setup

• Init npm and install necessary packages

  git clone https://github.com/Mizar999/phaser-typescript-basics.git
  npm install

• Create Webpack configuration webpack.config.js:

  const path = require('path');
  
  module.exports = {
  entry: './src/app.ts',
  module: {
      rules:[{
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/
      }]
  },
  resolve: {
      extensions: ['.ts', '.tsx', '.js']
  },
  output: {
      filename: 'app.js',
      path: path.resolve(__dirname, 'dist')
  },
  mode: 'development'
  };

• Webpack will get the sources from src/app.ts and collect everything in dist/app.js file

• Create TypeScript configuration tsconfig.json:

  {
      "compilerOptions": {
          "target": "es5"
      },
      "include": [
          "src/*"
      ]
  }

• Download the Phaser 3 definitions into the src subdirectory (src/phaser.d.ts)

• Update the scripts-section of the package.json file:

  "scripts": {
      "build": "webpack",
      "watch": "webpack --watch",
      "serve": "http-server --port=8085 -c-1"
  }

• To build the application run:

  npm run-script build

• To run multiple npm scripts cross platform in parallel run the following command:

  # if globally installed
  concurrently npm:watch npm:serve
  
  # if locally installed
  npx concurrently npm:watch npm:serve