This is a template for developing videogames with the Phaser 3 library and TypeScript.

You can use this as a template.

Node https://nodejs.org

Install ESLINT and Prettier plugins in your IDE. https://eslint.org/ https://prettier.io/

git clone https://github.com/VikingCodeBlog/Phaser3-TypeScript
cd Phaser3-TypeScript
npm i

npm start

Now, you can see your game at http://localhost:9000/

This is an empty game 😥 time to work 💪

npm run pro

npm run lint

index.html
└── src
   ├── assets
   ├── models
   ├── scenes
   ├── scripts
   └── main.ts

It is the entry point of the application, it will create a container "game" and it will import the library "dist / main.js" generated with your game.

The start of your game in typescript

All files inside the "src" folder will be compiled into a folder called "dist"

Images, videos, sprites, sounds, json data ...

Models of your application

Example, file character.ts

export interface character {
  name: string;
  speed: number;
}

Your scenes.

Scripts that you can use in multiple scenes.

Phaser provides us with some types inside the Phaser.Types object, you can use it as a TypeScript Objects.

It seems like a hard work, but calm, your IDE will help you.

Add properties to enviroment in src/enviroments/enviroment{your enviroment}.ts

export const environment = {
  env: 'dev',
  title: 'Wellcome to Phaser',
  newProperty: 'im a property :)'
};

You always have to import the same environment file, environment/enviroment.ts, webpack will change this file to the environment you are in.

import { environment } from '../enviroments/enviroment';

// ...

create(): void {
    // TODO
    this.add.text(260, 280, `${environment.title} - ${environment.env}`);
}

There are different scripts in package.json, these make use of ENV_TARGET to indicate the environment they are going to use.

  "scripts": {
    "build": "webpack --env ENV_TARGET=pro",
    "start": "webpack serve --mode development --env ENV_TARGET=dev",
    "pro": "webpack serve --env ENV_TARGET=pro",
    "lint": "eslint . --ext .ts"
  },