phaser-template

phaser-template is a template for creating Phaser 3 games.

The template was bootstrapped with web-app-template.

The game is inspired by the tutorial 'Making your first Phaser 3 game'. The template can also be found on Repl.it.

Prerequisites

Node.js
npm or Yarn

Installation

Clone repository:

$ git clone https://github.com/remarkablegames/phaser-template.git

Rename project:

$ mv phaser-template my-game
$ cd my-game
$ git grep -l phaser-template | xargs sed -i '' -e 's/phaser-template/my-game/g'
$ git grep -l 'Phaser Template' | xargs sed -i '' -e 's/Phaser Template/My Game/g'

Update additional files:

Install dependencies:

$ npm install

Initialize new repository:

$ rm -rf .git
$ git init

Make first commit:

$ git add .
$ git commit -m "feat: initialize project from phaser-template"

Commit messages follow the Conventional Commits format, which is used when releasing a new version.

Don't forget to push the local repository to GitHub or to another remote repository:

$ git remote add origin <remote-repository-url>
$ git push origin -u origin master

Available Scripts

In the project directory, you can run:

`npm start`

Runs the app in the development mode.

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.

You will also see any lint errors in the console.

`npm run build`

Builds the app for production to the build folder.

It correctly bundles in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed!

See the section about deployment for more information.

`npm run release`

Bumps the package.json using standard-version.

`npm run deploy`

Deploys the app to GitHub Pages by force pushing the build folder to the remote repository's gh-pages branch.

Environment Variables

Environment variables work the same as create-react-app except the custom environment variables begin with APP_ instead of REACT_APP_.

Test

There are no tests, just linting:

$ npm run lint
$ npm run lint:fix

Feel free to add a testing framework of your choice.

You can build the production game (to test locally before deploying):

# git stash
$ sed -i '' '/homepage/d' package.json
$ npm run build
# git checkout -- package.json
# git stash pop

Start a server:

$ cd build
$ python -m SimpleHTTPServer
# press `Ctrl + C` to stop the server

Play the game:

$ open http://localhost:8000

Layout

Directory structure (dotfiles are omitted):

$ tree -I 'build|node_modules'
.
├── LICENSE
├── README.md
├── config
│   ├── env.js
│   ├── modules.js
│   ├── paths.js
│   ├── pnpTs.js
│   ├── webpack.config.js
│   └── webpackDevServer.config.js
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
├── scripts
│   ├── build.js
│   ├── deploy.sh
│   └── start.js
└── src
    ├── assets
    │   ├── dude.png
    │   ├── platform.png
    │   ├── sky.png
    │   └── star.png
    ├── constants
    │   └── index.js
    ├── index.css
    ├── index.js
    ├── scenes
    │   ├── Boot.js
    │   ├── Main.js
    │   └── index.js
    ├── serviceWorker.js
    ├── sprites
    │   ├── Player.js
    │   ├── Star.js
    │   └── index.js
    └── texts
        ├── Score.js
        └── index.js

9 directories, 32 files

Diff

Compared to web-app-template, the additional dependencies saved to package.json are:

@babel/plugin-proposal-class-properties

License

MIT

Omhet/phaser-template