A boilerplate for using Phaser with Typescript and Sass. Powering the task handling is WebPack.
The purpose of this framework is to make the development procces of html5 Phaser games easier and faster. It's setup as a fundement for an GameDevelopment exam project.
After the project is cloned into a local repository you need to install the needed packages defined in the package.json. Those packages are the necessary software programs needed for the deevelopment enviroment.
This is done by running:
npm i
This will go through all the packeges defined in the package.json and install them.
To run the project for testing:
npm run dev
This will start WebPack which in it's turn will fire a series of tasks. A browser-tab will be opened at localhost:3000 where the game will be ran. Testing the game on a phone can be done by searching for your ip:
windows: ipconfig
mac/linux: ifconfig
finding your 'inet' ip, adding :3000 to it and typing this in your browser on your phone. Asuming you are on the same network, your project should now run on your phone.
When the project is ready to release, you can make a "as small as possible" version of the project by running:
npm run dist
The files are located in:
builds/dist
To start coding it is good to know how the project is structured.
All the Typescript code will be located in the 'ts' folder. The initial file that will be run is 'app.ts'.
ts/app.ts
Here the game instance get's created, and the first stage will be start. After this, the game will go trough the boot state. Here all the assets get preloaded. Finally the Gameplay state starts. This is where you can start coding your game.
ts/States/Gameplay.ts
Implementing assets is done by doing the following:
- Add the assets to the source_assets folder.
- Open the file corresponding to the type of assets you are implementing.
ts/Data
- Add your asset like so:
export default class Images
{
public static myAsset: string = 'assetFileName';
public static list: string[] = [
Images.myAsset
];
}- Now you can use the asset by using it's name
import Images from '../Data/Images';
this.game.add.sprite(
300,
300,
Images.myAsset
);A lot of the structure and ideas for this boilerplate are gained from the OrangeGames boilerplate.