Skip to content

A project template for Phaser 3.54 + TypeScript 4.2, using WebPack 5.37 as bundler, with hot-reload enabled.

License

Notifications You must be signed in to change notification settings

andres-garcia-alves/template-phaser-typescript-webpack

Repository files navigation

Template Phaser 3 + TypeScript 4 + WebPack 5

A project template for Phaser 3.54 + TypeScript 4.2, using WebPack 5.37 as bundler, with hot-reload enabled.

For loading performance, WebPack is configured to bundle 2 chunks: one for the game itself, and the last one for the Phaser library.

 

Motivation

If you came for the technical part just skip to the next section.

I recently had my Battle City clon project to upgrade its dependencies, originally wroted using Phaser 3.11, TypeScript 2.7 and WebPack 3.11 a few years ago.

Just doing npm install <dependency@latest> didn't work, founding some breaking changes on Phaser 3 source code, and a lot on WebPack, plugins included.

So I decided to take the oportunity and give a chance to the phaser3-typescript-project-template, by Richard Davey AKA 'PhotonStorm', the creator of Phaser library. One thing to consider here: PhotonStorm's template came with Rollup 2.35 as bundler.

After compiling this new template, I realiced of two things: first its lacks of hot-reloading, by itself a deal-breaking for me (the are some plugins out there like rollup-plugin-livereload, so not big deal), but secondly the slow it is to transpile TypeScript -> JavaScript at the current version: Rollup 2.35 + Rollup-Plugin-TypesScript2 0.29, at least on my modest PC.

RollUp WebPack
Initial build ~60 secs ~25 secs
Subsequent builds ~16-20 secs ~3-4 secs

 

No way!

So I returned to the original project, did all the migrations and resolved incompatibilities by hand.
Learned some in the process, and the most important: realiced that could result in a good template for those who are just starting on Phaser, and want to use it conjunction with TypeScript... and here we are.

 

Requirements

If you want to run this project then you need Node.js installed.

Command Description
npm install Install dependencies.
npm run start Launch browser with the game.
Press Ctrl+C to kill http-server process.
npm run deploy To build a minified game version for production.

 

Version History

v1.0 (2021.05.21) - Initial release.

 

This source code is licensed under MIT licence.
Please send me your feedback about this template: andres.garcia.alves@gmail.com

About

A project template for Phaser 3.54 + TypeScript 4.2, using WebPack 5.37 as bundler, with hot-reload enabled.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published