phaser-cli / phaser-cli

Create Phaser projects with no build configuration.

Phaser CLI

Create Phaser projects with no build configuration.

Getting Started

Prerequisites

In order to use Phaser CLI you need to have Node.js (>= 6) installed.

Quickstart

Run the following commands to install Phaser CLI and create a new project. This will create a new folder matching the specified project-name and will generate all the required files.

Currently the only boilerplate available to use is TypeScript, but this may change in the future.

npm install -g @phaser-cli/cli
# or
yarn global add @phaser-cli/cli

phaser create <project-name>

Running in Development

Running the following command will serve your project to localhost:8080.

npm start

If you wish to change the host or the port of the dev server you can prepend the command with HOST=127.0.0.1 or PORT=3000, replacing the example values with your own.

Building for Production

The following command will build your game for production, bundling code and assets into the /build directory.

npm run build

Ejecting

You also have the option to eject from phaser-cli allowing you to customise webpack and other config to your heart's content. This is not recommended unless you really need to change something.

Note: You will no longer receive updates through the @phaser-cli/scripts package if you choose to eject.

npm run eject

Acknowledgements

Phaser CLI is based on Create React App by Facebook and vue-cli by Evan You.

Phaser is created by Richard Davey.

phaser-cli's Issues

Unexpected error creating project in a monorepo

Running phaser create <project> within the packages folder of a monorepo (using Yarn workspaces) results in an unexpected error as @phaser-cli/scripts is installed to the node_modules folder in the root of the monorepo, not within the node_modules of the individual package.

Unexpted error. Please report it as a bug:
{ Error: Cannot find module '/Users/brendan/projects/nerdenough/gmcp/packages/map/node_modules/@phaser-cli/scripts/scripts/init.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:609:15)
    at Function.Module._load (internal/modules/cjs/loader.js:535:25)
    at Module.require (internal/modules/cjs/loader.js:663:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at install.then (/Users/brendan/.config/yarn/global/node_modules/@phaser-cli/cli/phaserCli.js:83:24)
    at processTicksAndRejections (internal/process/next_tick.js:81:5) code: 'MODULE_NOT_FOUND' }

Make the game boilerplate more detailed

Currently the boilerplate consists of a couple of scenes and shows the Phaser logo. It would be cool if the boilerplate provided a more complete game example.

Loading and playing audio

Audio extensions missing from file-loader, more detail #16

Deploy to GitHub Pages

GitHub pages is a popular hosting solution for static sites. Currently for me to deploy output from the build folder to GH pages I have to maintain and run this script:

cd build && git init && git add . && \
git commit -m "Deploy game" && \
git remote add origin [email protected]:user/repo.git && \
git push --force origin master:gh-pages

I'm not too familiar with chalk and webpack scripts, could something like the above be included as a script and then in package.json. Maybe the command could be npm run ghpages

Ability to specify custom templates

Instead of being forced the default Babel + Webpack template it would be neat to allow Phaser CLI to bootstrap a project from a range of custom templates.

Creating project throws error when npm is used

I get this error when I try to create a project:

TypeError: env.isYarnOnline(...).then is not a function
at run (/home/markus/.nvm/versions/node/v9.5.0/lib/node_modules/@phaser-cli/cli/phaserCli.js:75:6)
at createProject (/home/markus/.nvm/versions/node/v9.5.0/lib/node_modules/@phaser-cli/cli/phaserCli.js:64:3)
at Command.handleCreate [as handler] (/home/markus/.nvm/versions/node/v9.5.0/lib/node_modules/@phaser-cli/cli/phaserCli.js:25:3)
at Cac.parse (/home/markus/.nvm/versions/node/v9.5.0/lib/node_modules/@phaser-cli/cli/node_modules/cac/dist/cac.js:418:27)
at Object.<anonymous> (/home/markus/.nvm/versions/node/v9.5.0/lib/node_modules/@phaser-cli/cli/phaserCli.js:37:5)
at Module._compile (module.js:660:30)
at Object.Module._extensions..js (module.js:671:10)
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
at Function.Module._load (module.js:505:3)

This disappeared after I installed yarn. The problem is that isYarnOnline returns a boolean instead of a promise when yarn is not installed, which is causing the type error.

TypeScript template

This template should provide its own game boilerplate, TypeScript config and linting choices.

Move tslint to eslint

As you know tslint is no longer the "cool" option, everyone is moving to eslint for TS.

I'll try to do a PR soon

Specify subdirectory of build task

So I've used this tool for a couple of sites, one for a private client and another that uses GitHub Pages. For deploying I do npm run build and then add the subdirectory in the app.js file, f.p="/[subdirectory]"; and the index file, src attributes and favicon href.

I was thinking that could be easily automated with a flag or configuration. For example,

npm run build --subdirectory my_subdirectory

or

config.yml:

subdirectory: my_subdirectory

I beleive create react app uses the homepage property in package.json. What do you think?

Did this reponsitory fork vue-cli?

Thx

This project is pretty dope!

I especially like that it sets you up with TypeScript, gives you an example of using phaser3 scenes, and gives a nice example of loading images with the import syntax.

Awesome! 🔥 ♥️

Module not found: eslint-loader

When creating a new project, if "webpack" template is chosen but the "Use linter" options is set to no, it will break when running npm run dev

Output is here:

$ npm run dev

> [email protected] dev /Users/username/personal-projects/phaser-cli-test
> cross-env NODE_ENV=development webpack-dev-server --open --hot

Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
Hash: 343152a4e21ecaffc87d
Version: webpack 2.6.1
Time: 6702ms
           Asset     Size  Chunks                    Chunk Names
       bundle.js   754 kB       0  [emitted]  [big]  app
vendor.bundle.js  9.61 MB       1  [emitted]  [big]  vendor
chunk    {0} bundle.js (app) 228 kB {1} [initial] [rendered]
  [151] ./~/babel-polyfill/lib/index.js 833 bytes {0} [built]
  [157] ./~/core-js/fn/regexp/escape.js 107 bytes {0} [built]
  [326] ./~/core-js/modules/es7.string.match-all.js 1.04 kB {0} [built]
  [327] ./~/core-js/modules/es7.string.pad-end.js 337 bytes {0} [built]
  [328] ./~/core-js/modules/es7.string.pad-start.js 340 bytes {0} [built]
  [329] ./~/core-js/modules/es7.string.trim-left.js 215 bytes {0} [built]
  [330] ./~/core-js/modules/es7.string.trim-right.js 215 bytes {0} [built]
  [331] ./~/core-js/modules/es7.symbol.async-iterator.js 42 bytes {0} [built]
  [332] ./~/core-js/modules/es7.symbol.observable.js 39 bytes {0} [built]
  [333] ./~/core-js/modules/es7.system.global.js 143 bytes {0} [built]
  [334] ./~/core-js/modules/web.dom.iterable.js 881 bytes {0} [built]
  [335] ./~/core-js/modules/web.immediate.js 164 bytes {0} [built]
  [337] ./~/core-js/shim.js 7.38 kB {0} [built]
  [351] ./~/regenerator-runtime/runtime.js 24.4 kB {0} [built]
  [387] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill ./src/main.js 64 bytes {0} [built]
     + 282 hidden modules
chunk    {1} vendor.bundle.js (vendor) 3.58 MB [entry] [rendered]
    [5] (webpack)/buildin/global.js 509 bytes {1} [built]
   [74] (webpack)-dev-server/client?http://localhost:8080 5.68 kB {1} [built]
   [75] (webpack)/hot/dev-server.js 1.57 kB {1} [built]
  [150] (webpack)/hot/emitter.js 77 bytes {1} [built]
  [152] ./~/phaser-ce/build/custom/pixi.js 57 bytes {1} [built]
  [153] ./~/phaser-ce/build/custom/phaser-split.js 67 bytes {1} [built]
  [154] ./~/phaser-ce/build/custom/p2.js 53 bytes {1} [built]
  [345] ./~/phaser-ce/build/custom/phaser-split.js 2.65 MB {1} [built]
  [346] ./~/phaser-ce/build/custom/pixi.js 218 kB {1} [built]
  [379] ./~/strip-ansi/index.js 161 bytes {1} [built]
  [381] ./~/url/url.js 23.3 kB {1} [built]
  [383] (webpack)-dev-server/client/overlay.js 3.73 kB {1} [built]
  [384] (webpack)-dev-server/client/socket.js 897 bytes {1} [built]
  [386] (webpack)/hot/log-apply-result.js 1.02 kB {1} [built]
  [388] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server pixi p2 phaser 76 bytes {1} [built]
     + 77 hidden modules

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill ./src/main.js
Module not found: Error: Can't resolve 'eslint-loader' in '/Users/seanrobertson/personal-projects/phaser-cli-test'
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill ./src/main.js

Fixed by commenting out "eslint-loader" option in "webpack.config.js", line 34

module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'babel-loader',
          // 'eslint-loader'
        ],
        exclude: /node_modules/
      },
...

Cached templates causing issues with template updates

Creates a ghost-effect where files that used to exist but now deleted are still saved in ~/.phaser-templates.

Example: The webpack template used to have boot.js, preload.js, and play.js, all of which have now been replaced with modified files/filenames. When creating a new project on a device that has cached the old version of this template, these files are still put into the newly generated project. This means I now have boot.js, Boot.js, preload.js, Preloader.js, play.js, and Play.js in my source folder.

Customisation for various linting options

Adding in the following choices:

• ESLint
• ESLint + Airbnb
• ESLint + Standard
• ESLint + Prettier
• Standard

Typescript

Any chance to work with this great tool and typescript?

Thanks.

Template 'webpack-simple' needs a revamp

Have just revamped the boilerplate for the main webpack template, but will be good to keep webpack-simple consistent, excluding the more complex Webpack config and linting.

Loading XML Bitmap fonts

Hey,

First of all I super love this repo! I'd like some help, how do you import Bitmap fonts? Maybe I'm missing something but I can't seem to import them, for e.g.:

// Just importing a generic, free pixel font
import llpixel3png from '../assets/font/llpixel3.png'
import llpixel3xml from '../assets/font/llpixel3.xml'

And without even loading them in the preload section I get the following errors:

Uncaught Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <?xml version="1.0"?>
| <font>
| <info face="LLPixel" size="32" bold="0" italic="0" charset="" unicode="0" stretchH="100" smooth="1" aa="1" padding="1,1,1,1" spacing="-2,-2"  />

/src/assets/font/llpixel3.xml
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <?xml version="1.0"?>
| <font>
| <info face="LLPixel" size="32" bold="0" italic="0" charset="" unicode="0" stretchH="100" smooth="1" aa="1" padding="1,1,1,1" spacing="-2,-2"  />

I tried to put the xml extension in the raw and file loaders in the phaser-scripts folder but to no avail. If there's no way to import XML right now, maybe we can include this loader? https://www.npmjs.com/package/xml-loader

CLI throws syntax error on Node v4

The following output appears when trying to use phaser-cli with Node v4:

$ phaser init webpack phaser-cli-test
/Users/username/.nvm/versions/node/v4.8.0/lib/node_modules/phaser-cli/bin/phaser-init:17
const { isLocalPath, getTemplatePath } = require('../lib/local-path')
      ^

SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:441:10)
    at startup (node.js:140:18)
    at node.js:1043:3

Not looking for it to support older versions but maybe update the docs to say Node v6 is required rather than preferred.