https://github.com/numbofathma/phaser-typescript-webpack
Another Phaser CE boilerplate using TypeScript and Webpack.
https://github.com/numbofathma/phaser-typescript-webpack
boilerplate boilerplate-application game game-development games howler howlerjs minify phaser phaser-boilerplate phaser-ce phaser-game phaser-typescript typescript uglify webpack webpack4
Last synced: 10 months ago
JSON representation
Another Phaser CE boilerplate using TypeScript and Webpack.
- Host: GitHub
- URL: https://github.com/numbofathma/phaser-typescript-webpack
- Owner: numbofathma
- Created: 2017-12-24T09:16:43.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-06-18T23:54:54.000Z (almost 2 years ago)
- Last Synced: 2025-08-09T07:52:38.189Z (10 months ago)
- Topics: boilerplate, boilerplate-application, game, game-development, games, howler, howlerjs, minify, phaser, phaser-boilerplate, phaser-ce, phaser-game, phaser-typescript, typescript, uglify, webpack, webpack4
- Language: TypeScript
- Homepage:
- Size: 1.25 MB
- Stars: 19
- Watchers: 2
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Phaser.io CE 2.20.0, Howler.js 2.2.4, TypeScript 5.4.2 and Webpack 5.90, play nice together.
#### A boilerplate project to create games with Phaser.io, Howler.js, TypeScript and Webpack.
## Features
- Uses the latest Phaser CE
- Uses Howler (an awesome audio library) - can be easily removed if one does not use it
- TypeScript linter that checks TypeScript code for readability, maintainability, and functionality errors
- Webpack 5 ready
- Built-in commands to easily deploy code your code (minify, uglify, comments removal, etc)
- Other awesome stuff!
# Setup
To use this boilerplate you’ll need to install a few things before you have a working copy of the project.
## 1. Clone this repo:
Navigate into your workspace directory.
Run:
```git clone https://github.com/numbofathma/phaser-typescript-webpack.git```
## 2. Install node.js and npm:
https://nodejs.org/en/
## 3. Install dependencies:
Navigate to the cloned repo’s directory.
Run:
```npm install```
## 4. Run the development server:
Run:
```npm run start```
This will run a server so you can run the game in a browser.
Open your browser and enter localhost:8000 into the address bar.
As you change your code, Webpack will watch for changes and the browser will refresh.
## 5. Build for deployment:
Run:
```npm run build```
This will optimize and minimize the compiled bundle. Your code will be minified and uglyfied for reverse engineering protection.
The vendor library will only be minified because uglify will add extra MBs to your game.
## 6. Extra features
I've also added a command that auto-fixes your code according to the rules in the .eslintrc.json file.
Run:
``` npm run lint:fix```
...and also a commad to check your TypeScript types.
Run:
``` npm run check```
## Credits
Big thanks to this great repos:
https://github.com/lean/phaser-es6-webpack/tree/typescript
https://github.com/eduardonunesp/phaser-typescript-webpack-boilerplate
https://github.com/heathkit/phaser-typescript-webpack-starter/tree/master/src/sprites
Special thanks to:
dimorphic
Made with <3 in Romania