edit

Project Template

Phaser Node Kit comes with a very basic game project template to get you started. It contains some basic states, and other boilerplate. Consider it your "blank" canvas.

New Projects

To create a new Phaser Node Kit project do the following:

  • Create a new empty directory.
  • Create a package.json file (optional).
  • Run pnkit init on the command line in the empty directory.

Let's take look at the innards, and how to use it effectively.

The Project Tree

Here you can see an overview of the default project. Everything is contained in the game directory:

game
├── css
│   └── index.css
├── favicon.ico
├── img
│   ├── logo.png
│   ├── pnlogo.png
│   └── preload.png
├── index.html
├── js
│   ├── BootState.js
│   ├── GameState.js
│   ├── MenuState.js
│   ├── PreloadState.js
│   └── index.js
└── vendor
    └── phaser.min.js

There is of course the build directory at the project root, but we pretend that doesn't exist except for viewing and distributing. Never manually place files in the build directory, they risk being overwritten at any time.

Directories and Files

While the watcher is running (pnkit watch) simply place or create a new directory or file in the game folder to add it to the project. Remove a directory to remove it from the project.

Some additional folders you may want could be: fonts, data, snds, etc.

Any items (besides javascript files) that are added will be "hot" copied to the build directory. The reverse holds true when removing items.

If you add items to the game directory while the watcher is not active, you will need to "sync" the project (pnkit sync).

See Commands.

Javascript

The js directory is a special folder. It must reside in the game folder, and be named exactly js.

All of your .js files and classes will live in this directory. When javascript files in this directory are updated, the bundler will run a pass on the files, creating a Browserify bundle.

Javascript files are only compiled if they live in the game/js directory. Any other file type is added (or removed) from the build folder as-is.

Indexes

The index.html, index.js, and index.css all contain basic boilerplate for their particular domain.

index.html

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1">

    <title>Phaser Node Kit</title>

    <link rel="stylesheet" type="text/css" href="css/index.css">

    <script src="./vendor/phaser.min.js"></script>
    <script src="./bundle.js"></script>

  </head>
  <body><div div="game"></div></body>
</html>

Here phaser.js is loaded separately to keep compile times quick. It needs no additional compilation as it is. The bundle.js is your game code bundled up with Browserify.

index.js

Phaser.Device.whenReady(() => {
  const bootState     = require('./BootState')
  const preloadState  = require('./PreloadState')
  const menuState     = require('./MenuState')
  const gameState     = require('./GameState')

  const game = new Phaser.Game(800, 600, Phaser.AUTO, 'game')

  game.stage.backgroundColor = 0x000000

  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL
  game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL

  game.scale.setMinMax(800, 600)

  game.scale.pageAlignVertically = true
  game.scale.pageAlignHorizontally = true

  game.state.add('Boot',      bootState)
  game.state.add('Preload',   preloadState)
  game.state.add('MainMenu',  menuState)
  game.state.add('Game',      gameState)

  game.state.start('Boot')
})

The js/index.js file contains state assignments, the initial game object creation, and configuration code. It then launches into the Boot state. If you have needs for additional states, this is where they are assigned.

Here is where you also make adjustments to the initial game object configuration as well.

In particular, the index.js contains:

  • Background color
  • Scale mode
  • Fullscreen mode
  • Scale min/max
  • Container alignment

If you like your backgrounds black, and develop in an 800x600 display size, you generally don't need to touch this file.

index.css

The index.css simply contains an implementation of "clean.css" for better visual compatibilty across devices. It also contains a global background color.

States

BootState

js/BootState.js

The BootState is the first state that is run once Phaser is ready for it. Here we preload the "loading" bar into the image cache, and also set the maxPointers property.

class BootState {

  preload() {
    this.load.image('preload', 'img/preload.png')
  }

  create() {
    this.input.maxPointers = 1
    this.state.start('Preload')
  }

  update() { }
  render() { }
}

module.exports = BootState

Once the BootState is done, it will automatically launch into the next state, which is the...

PreloadState

js/PreloadState.js

In the PreloadState we load all of the assets needed for the game. While this is happening the "loading" bar will display the progress (I love free progress bars).

class PreloadState {

  preload() {
    this.preloadBar = this.game.add.sprite(
      this.world.centerX, 
      this.world.centerY, 
      'preload')

    this.preloadBar.anchor.set(.5)

    this.load.setPreloadSprite(this.preloadBar)

    this.load.image('logo', 'img/logo.png')
    this.load.image('pnlogo', 'img/pnlogo.png')
  }

  create() {
    this.state.start('MainMenu')
  }

  update() { }
  render() { }
}

module.exports = PreloadState

As far as states are concerned, you may visit this one most often to add additional assets to your game.

Once the PreloadState has run its course, it will load the MenuState.

js/MenuState.js

Main menus are generally not very complex. A background and a couple buttons is usually the bulk of it. The MenuState here is very minimal. We are simply displaying the Phaser logo, and waiting for the onTap signal from the input manager.

class MenuState {

  preload() { }

  create() {
    let logo = this.add.image(
      this.world.centerX, 
      this.world.centerY, 
      'logo')

    logo.anchor.set(.5)

    this.input.onTap.addOnce((pointer) => {
      this.state.start('Game')
    })
  }

  update() { }
  render() { }
}

module.exports = MenuState

Do what you will to it, but make sure to point to the GameState as your final destination.

GameState

js/GameState.js

Ahh, finally. Now we play. The GameState is just what it sounds like. Here is where your game takes flight. 

class GameState {

  preload() { }

  create() {
    let pnlogo = this.add.image(
      this.world.centerX, 
      this.world.centerY, 
      'pnlogo')

    pnlogo.anchor.set(.5)
  }

  update() { }
  render() { }
}

module.exports = GameState

The game at this point is just an image (because purple whales are cute).

Creating Your Game

Ready to get your game on? Check out Phaser.io for all the goodies.

Here are a couple of other handy links as well:

Phaser CE Documentation (code)

Phaser Examples (visual)