Dino-Phaser
Chromium Dino Game - Phaser 3 + TypeScript + Parcel
Chromium Dino Game Clone using Phaser 3 + TypeScript + Parcel
Play
You can play online here Dino Phaser
Features
- Apply state design pattern to create a simple state machine for player
- Implement new compound body based on Arcade Physics Plugin of Phaser 3 because Arcade does not support multiple colliders in one game object.
Prerequisites
You’ll need Node.js, npm, and Parcel installed.
It is highly recommended to use Node Version Manager (nvm) to install Node.js and npm.
For Windows users there is Node Version Manager for Windows.
Install Node.js and npm with nvm:
nvm install node
nvm use node
Replace ‘node’ with ‘latest’ for nvm-windows.
Then install Parcel:
npm install -g parcel-bundler
Getting Started
Clone this repository to your local machine:
git clone https://github.com/jesuisjohan/Dino-Phaser
This will create a folder named Dino-Phaser. You can specify a different folder name like this:
git clone https://github.com/jesuisjohan/Dino-Phaser my-folder-name
Go into your new project folder and install dependencies:
cd Dino-Phaser # or 'my-folder-name'
npm install
Start development server:
npm run start
To create a production build:
npm run build
Production files will be placed in the dist folder. Then upload those files to a web server. 🎉
Project Structure
.
├── dist
├── node_modules
├── public
├── src
│ ├── scenes
│ │ ├── DinoGame.ts
│ │ ├── DinoPreloader.ts
│ │ ├── ...
│ ├── index.html
│ ├── main.ts
├── package.json
The contents of this game is the basic Phaser 3 getting started example.
This game assumes you will want to organize your code into multiple files and use TypeScript.
TypeScript files are intended for the src folder. main.ts is the entry point referenced by index.html.
Other than that there is no opinion on how you should structure your project. There is a scenes folder in src where the HelloWorldScene.ts lives but you can do whatever you want.
Static Assets
Any static assets like images or audio files should be placed in the public folder. It’ll then be served at http://localhost:8000/images/my-image.png
Example public structure:
public
├── images
│ ├── my-image.png
├── music
│ ├── ...
├── sfx
│ ├── ...
They can then be loaded by Phaser with this.image.load('my-image', 'images/my-image.png').
TypeScript ESLint
This game uses a basic typescript-eslint set up for code linting.
It does not aim to be opinionated.
Dev Server Port
You can change the dev server’s port number by modifying the start script in package.json. We use Parcel’s -p option to specify the port number.
The script looks like this:
parcel src/index.html -p 8000
Change 8000 to whatever you want.
Other Notes
parcel-plugin-clean-easy is used to ensure only the latest files are in the dist folder. You can modify this behavior by changing parcelCleanPaths in package.json.
parcel-plugin-static-files is used to copy static files from public into the output directory and serve it. You can add additional paths by modifying staticFiles in package.json.