phaser-node-kit/docs/mkdocs/search_index.json

Rapid Game Development with PhaserJS and Node for Modern Browsers

{
    "docs": [
        {
            "location": "/",
            "text": "Phaser Node Kit\n\n\n\n\nRapid Game Development with Phaser and Node\n\n\nWhat Is It?\n\n\nPhaser Node Kit\n is a build tool and project template for creating \nPhaserJS\n games using \nNodeJS\n.\n\n\nYou may be asking yourself, why? And that I can't answer clearly. I just spend most of my time in the \nNode\n environment.\n\n\nThe build tool is basically a collection of some popular libraries to get your game built for distribution using \nNode\n. The project template is a minimal running \nPhaser.js\n game, with included states.\n\n\nThe major components consist of:\n\n\nNode\n\n\nBrowserify\n\n\nand of course...\n\n\nPhaserJS\n\n\nHow It Works\n\n\nPhaser Node Kit\n only cares about two types of files, javascript and everything else.\n\n\nWith the javascript, the kit will bundle up your game code with \nBrowserify\n on changes. For everything else, the kit \"hot\" copies the files in and out of the \nbuild\n directory. The \nPhaser CE\n library is added as a vendor file when you initialize a new game project. It all allows you to make games quicker using \nNode\n.\n\n\nSome Context\n\n\nI've been playing with games for nearly two and a half decades. I was an ActionScript developer from version 1 through 3, and spent the last five working with the Lua game development community. Now I'm focusing my efforts on Phaser.js.\n\n\nBeing able to hit the ground running when inspiration calls is crucial. I prototype constantly (or just noodle around) and don't like to spend time on tooling.\n\n\nThe goal for \nPhaser Node Kit\n was to be able to get to the \ncreative\n phase as quick as possible. \n\n\nSo with a \npnkit init\n and a \npnkit watch\n, I'm looking at a \"live\" build in my browser ready to hack on, with a \nbuild\n folder ready to serve or bundle with something like \nCordova\n.\n\n\nI hope it helps you to be more creative in your game development adventures as well.\n\n\n^_^ Happy game making!",
            "title": "Overview"
        },
        {
            "location": "/#phaser-node-kit",
            "text": "Rapid Game Development with Phaser and Node",
            "title": "Phaser Node Kit"
        },
        {
            "location": "/#what-is-it",
            "text": "Phaser Node Kit  is a build tool and project template for creating  PhaserJS  games using  NodeJS .  You may be asking yourself, why? And that I can't answer clearly. I just spend most of my time in the  Node  environment.  The build tool is basically a collection of some popular libraries to get your game built for distribution using  Node . The project template is a minimal running  Phaser.js  game, with included states.  The major components consist of:  Node  Browserify  and of course...  PhaserJS",
            "title": "What Is It?"
        },
        {
            "location": "/#how-it-works",
            "text": "Phaser Node Kit  only cares about two types of files, javascript and everything else.  With the javascript, the kit will bundle up your game code with  Browserify  on changes. For everything else, the kit \"hot\" copies the files in and out of the  build  directory. The  Phaser CE  library is added as a vendor file when you initialize a new game project. It all allows you to make games quicker using  Node .",
            "title": "How It Works"
        },
        {
            "location": "/#some-context",
            "text": "I've been playing with games for nearly two and a half decades. I was an ActionScript developer from version 1 through 3, and spent the last five working with the Lua game development community. Now I'm focusing my efforts on Phaser.js.  Being able to hit the ground running when inspiration calls is crucial. I prototype constantly (or just noodle around) and don't like to spend time on tooling.  The goal for  Phaser Node Kit  was to be able to get to the  creative  phase as quick as possible.   So with a  pnkit init  and a  pnkit watch , I'm looking at a \"live\" build in my browser ready to hack on, with a  build  folder ready to serve or bundle with something like  Cordova .  I hope it helps you to be more creative in your game development adventures as well.  ^_^ Happy game making!",
            "title": "Some Context"
        },
        {
            "location": "/install/",
            "text": "Installation\n\n\nPhaser Node Kit\n is a \nNode\n application that is installed globally, making the tool at the ready for when creative game sparks fly.\n\n\nYou can have a running \"live\" game development framework up in a handful of seconds.\n\n\nRequirements\n\n\nTo run \nPhaser Node Kit\n you will need \nNodeJS\n version 6 or higher.\n\n\nnpm\n\n\nUsing \nnpm\n, run the following on the command line:\n\n\nsudo npm i -g phaser-node-kit\n\n\nThis will install the tool, and make it available anywhere on your system as \npnkit\n.\n\n\nYou can get the latest version information to be certain it's installed:\n\n\npnkit -v",
            "title": "Installation"
        },
        {
            "location": "/install/#installation",
            "text": "Phaser Node Kit  is a  Node  application that is installed globally, making the tool at the ready for when creative game sparks fly.  You can have a running \"live\" game development framework up in a handful of seconds.",
            "title": "Installation"
        },
        {
            "location": "/install/#requirements",
            "text": "To run  Phaser Node Kit  you will need  NodeJS  version 6 or higher.",
            "title": "Requirements"
        },
        {
            "location": "/install/#npm",
            "text": "Using  npm , run the following on the command line:  sudo npm i -g phaser-node-kit  This will install the tool, and make it available anywhere on your system as  pnkit .  You can get the latest version information to be certain it's installed:  pnkit -v",
            "title": "npm"
        },
        {
            "location": "/cli/",
            "text": "Commands\n\n\nPhaser Node Kit\n only has a couple commands to get you up and running.\n\n\nInit\n\n\npnkit init\n\n\nTo create a new Phaser Node Kit project do the following:\n\n\n\n\n\n\nCreate a new empty directory.\n\n\n\n\n\n\nCreate a \npackage.json\n file (optional).\n\n\n\n\n\n\nRun \npnkit init\n on the command line in the directory you created.\n\n\n\n\n\n\n\n\nYou can create your own \npackage.json\n before running \npnkit init\n or a bare one will be created for you.\n\n\n\n\nWatch\n\n\nWatch the game development files, and trigger a build on changes:\n\n\npnkit watch\n\n\nPhaser Node Kit\n will now run a build when any of the files are updated. \n\n\nView the current game state in your browser at \nhttp://127.0.0.1:5550\n.\n\n\nYou can leave the browser window running, and it will refresh with each build.\n\n\nSync\n\n\nThere may be times when you want to clean the \nbuild\n directory between builds. Or perhaps you've added some files while the \nwatcher\n wasn't running to catch them. You can run \npnkit sync\n to get your \nbuild\n folder to be in sync again with the \ngame\n folder.\n\n\npnkit sync\n\n\nThis will flush the \nbuild\n folder and rebuild the project in its current state.\n\n\nUpdate\n\n\nUpdates the \nPhaserJS\n library to its latest version.\n\n\nsudo pnkit update\n\n\n\n\nMake sure to use the \nsudo\n command.",
            "title": "Commands"
        },
        {
            "location": "/cli/#commands",
            "text": "Phaser Node Kit  only has a couple commands to get you up and running.",
            "title": "Commands"
        },
        {
            "location": "/cli/#init",
            "text": "pnkit init  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 directory you created.     You can create your own  package.json  before running  pnkit init  or a bare one will be created for you.",
            "title": "Init"
        },
        {
            "location": "/cli/#watch",
            "text": "Watch the game development files, and trigger a build on changes:  pnkit watch  Phaser Node Kit  will now run a build when any of the files are updated.   View the current game state in your browser at  http://127.0.0.1:5550 .  You can leave the browser window running, and it will refresh with each build.",
            "title": "Watch"
        },
        {
            "location": "/cli/#sync",
            "text": "There may be times when you want to clean the  build  directory between builds. Or perhaps you've added some files while the  watcher  wasn't running to catch them. You can run  pnkit sync  to get your  build  folder to be in sync again with the  game  folder.  pnkit sync  This will flush the  build  folder and rebuild the project in its current state.",
            "title": "Sync"
        },
        {
            "location": "/cli/#update",
            "text": "Updates the  PhaserJS  library to its latest version.  sudo pnkit update   Make sure to use the  sudo  command.",
            "title": "Update"
        },
        {
            "location": "/config/",
            "text": "Configuration\n\n\nPhaser Node Kit\n configuration options are minimal. You can however ignore files, directories, and extensions, as well as adjust some of the \nwatcher\n settings.\n\n\npnkit.json\n\n\nThe \nPhaser Node Kit\n configuration can be found in the \npnkit.json\n file at the root your project directory. This file is fairly critical to the kit's operation. You should keep it with the project.\n\n\nThe default configuration file looks like so:\n\n\n{\n  \"ignore\": [ \".DS_Store\" ],\n  \"watch\": {\n    \"port\": 5550,\n    \"host\": \"127.0.0.1\",\n    \"refresh\": true\n  },\n  \"debug\": true\n}\n\n\n\n\nConfiguration Keys\n\n\nignore\n\n\nYou can fill this array with folders, files, and extension types that you would like the \nwatcher\n to ignore.\n\n\nFor example:\n\n\n{\n  \"ignore\": [\".tps\", \"stuff\", \"secret.json\"] \n}\n\n\n\n\n\nwatch\n\n\nThis \nwatch\n section contains settings for the \nwatcher\n.\n\n\nport\n\n\nThe port to serve the \"live\" game build on. The default is \n5550\n.\n\n\nhost\n\n\nThe host to serve the \"live\" game build on. Change this to test the build over your local network. The default is \n127.0.0.1\n. \n\n\nrefresh\n\n\nWhether to refresh the browser automatically on updates to the project. If you set this to false, you will need to remember to refresh your browser to see the current build. The default is \ntrue\n.\n\n\ndebug\n\n\nThe \ndebug\n key is a boolean value. If set to \ntrue\n, then the bundle will also contain inline source maps, making it easier to debug your code. If \nfalse\n no source maps are generated.\n\n\nMake sure to set debug to \nfalse\n when making your final build. This makes the bundle leaner.\n\n\n\n\n\n\nIf you change the configuration while the \nwatcher\n is running, be sure to stop and restart it to make the configuration active.",
            "title": "Configuration"
        },
        {
            "location": "/config/#configuration",
            "text": "Phaser Node Kit  configuration options are minimal. You can however ignore files, directories, and extensions, as well as adjust some of the  watcher  settings.",
            "title": "Configuration"
        },
        {
            "location": "/config/#pnkitjson",
            "text": "The  Phaser Node Kit  configuration can be found in the  pnkit.json  file at the root your project directory. This file is fairly critical to the kit's operation. You should keep it with the project.  The default configuration file looks like so:  {\n  \"ignore\": [ \".DS_Store\" ],\n  \"watch\": {\n    \"port\": 5550,\n    \"host\": \"127.0.0.1\",\n    \"refresh\": true\n  },\n  \"debug\": true\n}",
            "title": "pnkit.json"
        },
        {
            "location": "/config/#configuration-keys",
            "text": "",
            "title": "Configuration Keys"
        },
        {
            "location": "/config/#ignore",
            "text": "You can fill this array with folders, files, and extension types that you would like the  watcher  to ignore.  For example:  {\n  \"ignore\": [\".tps\", \"stuff\", \"secret.json\"] \n}",
            "title": "ignore"
        },
        {
            "location": "/config/#watch",
            "text": "This  watch  section contains settings for the  watcher .",
            "title": "watch"
        },
        {
            "location": "/config/#port",
            "text": "The port to serve the \"live\" game build on. The default is  5550 .",
            "title": "port"
        },
        {
            "location": "/config/#host",
            "text": "The host to serve the \"live\" game build on. Change this to test the build over your local network. The default is  127.0.0.1 .",
            "title": "host"
        },
        {
            "location": "/config/#refresh",
            "text": "Whether to refresh the browser automatically on updates to the project. If you set this to false, you will need to remember to refresh your browser to see the current build. The default is  true .",
            "title": "refresh"
        },
        {
            "location": "/config/#debug",
            "text": "The  debug  key is a boolean value. If set to  true , then the bundle will also contain inline source maps, making it easier to debug your code. If  false  no source maps are generated.  Make sure to set debug to  false  when making your final build. This makes the bundle leaner.    If you change the configuration while the  watcher  is running, be sure to stop and restart it to make the configuration active.",
            "title": "debug"
        },
        {
            "location": "/project/",
            "text": "Project Template\n\n\nPhaser Node Kit\n 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.\n\n\nNew Projects\n\n\nTo create a new Phaser Node Kit project do the following:\n\n\n\n\nCreate a new empty directory.\n\n\nCreate a package.json file (optional).\n\n\nRun \npnkit init\n on the command line in the empty directory.\n\n\n\n\nLet's take look at the innards, and how to use it effectively.\n\n\nThe Project Tree\n\n\nHere you can see an overview of the default project. Everything is contained in the \ngame\n directory:\n\n\ngame\n\u251c\u2500\u2500 css\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 index.css\n\u251c\u2500\u2500 favicon.ico\n\u251c\u2500\u2500 img\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 logo.png\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 pnlogo.png\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 preload.png\n\u251c\u2500\u2500 index.html\n\u251c\u2500\u2500 js\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 BootState.js\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 GameState.js\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 MenuState.js\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 PreloadState.js\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 index.js\n\u2514\u2500\u2500 vendor\n    \u2514\u2500\u2500 phaser.min.js\n\n\n\n\n\n\nThere is of course the \nbuild\n directory at the project root, but we pretend that doesn't exist except for viewing and distributing. Never manually place files in the \nbuild\n directory, they risk being overwritten at any time.\n\n\n\n\nDirectories and Files\n\n\nWhile the watcher is running (pnkit watch)\n simply place or create a new directory or file in the \ngame\n folder to add it to the project. Remove a directory to remove it from the project.\n\n\nSome additional folders you may want could be: \nfonts\n, \ndata\n, \nsnds\n, etc.\n\n\nAny items (besides javascript files) that are added will be \"hot\" copied to the \nbuild\n directory. The reverse holds true when removing items.\n\n\n\n\nIf you add items to the \ngame\n directory while the watcher is not active, you will need to \"sync\" the project (pnkit sync).\n\n\n\n\nSee \nCommands\n.\n\n\nJavascript\n\n\nThe \njs\n directory is a special folder. It must reside in the \ngame\n folder, and be named exactly \njs\n.\n\n\nAll of your \n.js\n files and classes will live in this directory. When javascript files in this directory are updated, the \nbundler\n will run a pass on the files, creating a \nBrowserify\n bundle.\n\n\n\n\nJavascript files are only compiled if they live in the \ngame/js\n directory. Any other file type is added (or removed) from the \nbuild\n folder as-is.\n\n\n\n\nIndexes\n\n\nThe \nindex.html\n, \nindex.js\n, and \nindex.css\n all contain basic boilerplate for their particular domain.\n\n\nindex.html\n\n\n<!DOCTYPE html>\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"user-scalable=no, initial-scale=1\">\n\n    <title>Phaser Node Kit</title>\n\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"css/index.css\">\n\n    <script src=\"./vendor/phaser.min.js\"></script>\n    <script src=\"./bundle.js\"></script>\n\n  </head>\n  <body><div div=\"game\"></div></body>\n</html>\n\n\n\n\nHere \nphaser.js\n is loaded separately to keep compile times quick. It needs no additional compilation as it is. The \nbundle.js\n is your game code bundled up with \nBrowserify\n.\n\n\nindex.js\n\n\nPhaser.Device.whenReady(() => {\n  const bootState     = require('./BootState')\n  const preloadState  = require('./PreloadState')\n  const menuState     = require('./MenuState')\n  const gameState     = require('./GameState')\n\n  const game = new Phaser.Game(800, 600, Phaser.AUTO, 'game')\n\n  game.stage.backgroundColor = 0x000000\n\n  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL\n  game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL\n\n  game.scale.setMinMax(800, 600)\n\n  game.scale.pageAlignVertically = true\n  game.scale.pageAlignHorizontally = true\n\n  game.state.add('Boot',      bootState)\n  game.state.add('Preload',   preloadState)\n  game.state.add('MainMenu',  menuState)\n  game.state.add('Game',      gameState)\n\n  game.state.start('Boot')\n})\n\n\n\n\nThe \njs/index.js\n file contains state assignments, the initial \ngame\n object creation, and configuration code. It then launches into the \nBoot\n state. If you have needs for additional states, this is where they are assigned.\n\n\nHere is where you also make adjustments to the initial \ngame\n object configuration as well.\n\n\nIn particular, the \nindex.js\n contains:\n\n\n\n\nBackground color\n\n\nScale mode\n\n\nFullscreen mode\n\n\nScale min/max\n\n\nContainer alignment\n\n\n\n\nIf you like your backgrounds black, and develop in an 800x600 display size, you generally don't need to touch this file.\n\n\nindex.css\n\n\nThe \nindex.css\n simply contains an implementation of \"clean.css\" for better visual compatibilty across devices. It also contains a global background color.\n\n\nStates\n\n\nBootState\n\n\njs/BootState.js\n\n\nThe \nBootState\n is the first state that is run once \nPhaser\n is ready for it. Here we preload the \"loading\" bar into the image cache, and also set the \nmaxPointers\n property.\n\n\nclass BootState {\n\n  preload() {\n    this.load.image('preload', 'img/preload.png')\n  }\n\n  create() {\n    this.input.maxPointers = 1\n    this.state.start('Preload')\n  }\n\n  update() { }\n  render() { }\n}\n\nmodule.exports = BootState\n\n\n\n\nOnce the \nBootState\n is done, it will automatically launch into the next state, which is the... \n\n\nPreloadState\n\n\njs/PreloadState.js\n\n\nIn the \nPreloadState\n 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).\n\n\nclass PreloadState {\n\n  preload() {\n    this.preloadBar = this.game.add.sprite(\n      this.world.centerX, \n      this.world.centerY, \n      'preload')\n\n    this.preloadBar.anchor.set(.5)\n\n    this.load.setPreloadSprite(this.preloadBar)\n\n    this.load.image('logo', 'img/logo.png')\n    this.load.image('pnlogo', 'img/pnlogo.png')\n  }\n\n  create() {\n    this.state.start('MainMenu')\n  }\n\n  update() { }\n  render() { }\n}\n\nmodule.exports = PreloadState\n\n\n\n\nAs far as states are concerned, you may visit this one most often to add additional assets to your game.\n\n\nOnce the \nPreloadState\n has run its course, it will load the \nMenuState\n.\n\n\nMenuState\n\n\njs/MenuState.js\n\n\nMain menus are generally not very complex. A background and a couple buttons is usually the bulk of it. The \nMenuState\n here is very minimal. We are simply displaying the \nPhaser\n logo, and waiting for the \nonTap\n signal from the input manager.\n\n\nclass MenuState {\n\n  preload() { }\n\n  create() {\n    let logo = this.add.image(\n      this.world.centerX, \n      this.world.centerY, \n      'logo')\n\n    logo.anchor.set(.5)\n\n    this.input.onTap.addOnce((pointer) => {\n      this.state.start('Game')\n    })\n  }\n\n  update() { }\n  render() { }\n}\n\nmodule.exports = MenuState\n\n\n\n\nDo what you will to it, but make sure to point to the \nGameState\n as your final destination.\n\n\nGameState\n\n\njs/GameState.js\n\n\nAhh, finally. Now we play. The \nGameState\n is just what it sounds like. Here is where your game takes flight. \n\n\nclass GameState {\n\n  preload() { }\n\n  create() {\n    let pnlogo = this.add.image(\n      this.world.centerX, \n      this.world.centerY, \n      'pnlogo')\n\n    pnlogo.anchor.set(.5)\n  }\n\n  update() { }\n  render() { }\n}\n\nmodule.exports = GameState\n\n\n\n\nThe game at this point is just an image (because purple whales are cute).\n\n\nCreating Your Game\n\n\nReady to get your game on? Check out \nPhaser.io\n for all the goodies.\n\n\nHere are a couple of other handy links as well:\n\n\nPhaser CE Documentation (code)\n\n\nPhaser Examples (visual)",
            "title": "Project Template"
        },
        {
            "location": "/project/#project-template",
            "text": "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.",
            "title": "Project Template"
        },
        {
            "location": "/project/#new-projects",
            "text": "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.",
            "title": "New Projects"
        },
        {
            "location": "/project/#the-project-tree",
            "text": "Here you can see an overview of the default project. Everything is contained in the  game  directory:  game\n\u251c\u2500\u2500 css\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 index.css\n\u251c\u2500\u2500 favicon.ico\n\u251c\u2500\u2500 img\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 logo.png\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 pnlogo.png\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 preload.png\n\u251c\u2500\u2500 index.html\n\u251c\u2500\u2500 js\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 BootState.js\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 GameState.js\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 MenuState.js\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 PreloadState.js\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 index.js\n\u2514\u2500\u2500 vendor\n    \u2514\u2500\u2500 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.",
            "title": "The Project Tree"
        },
        {
            "location": "/project/#directories-and-files",
            "text": "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 .",
            "title": "Directories and Files"
        },
        {
            "location": "/project/#javascript",
            "text": "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.",
            "title": "Javascript"
        },
        {
            "location": "/project/#indexes",
            "text": "The  index.html ,  index.js , and  index.css  all contain basic boilerplate for their particular domain.",
            "title": "Indexes"
        },
        {
            "location": "/project/#indexhtml",
            "text": "<!DOCTYPE html>\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"user-scalable=no, initial-scale=1\">\n\n    <title>Phaser Node Kit</title>\n\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"css/index.css\">\n\n    <script src=\"./vendor/phaser.min.js\"></script>\n    <script src=\"./bundle.js\"></script>\n\n  </head>\n  <body><div div=\"game\"></div></body>\n</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 .",
            "title": "index.html"
        },
        {
            "location": "/project/#indexjs",
            "text": "Phaser.Device.whenReady(() => {\n  const bootState     = require('./BootState')\n  const preloadState  = require('./PreloadState')\n  const menuState     = require('./MenuState')\n  const gameState     = require('./GameState')\n\n  const game = new Phaser.Game(800, 600, Phaser.AUTO, 'game')\n\n  game.stage.backgroundColor = 0x000000\n\n  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL\n  game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL\n\n  game.scale.setMinMax(800, 600)\n\n  game.scale.pageAlignVertically = true\n  game.scale.pageAlignHorizontally = true\n\n  game.state.add('Boot',      bootState)\n  game.state.add('Preload',   preloadState)\n  game.state.add('MainMenu',  menuState)\n  game.state.add('Game',      gameState)\n\n  game.state.start('Boot')\n})  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.",
            "title": "index.js"
        },
        {
            "location": "/project/#indexcss",
            "text": "The  index.css  simply contains an implementation of \"clean.css\" for better visual compatibilty across devices. It also contains a global background color.",
            "title": "index.css"
        },
        {
            "location": "/project/#states",
            "text": "",
            "title": "States"
        },
        {
            "location": "/project/#bootstate",
            "text": "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 {\n\n  preload() {\n    this.load.image('preload', 'img/preload.png')\n  }\n\n  create() {\n    this.input.maxPointers = 1\n    this.state.start('Preload')\n  }\n\n  update() { }\n  render() { }\n}\n\nmodule.exports = BootState  Once the  BootState  is done, it will automatically launch into the next state, which is the...",
            "title": "BootState"
        },
        {
            "location": "/project/#preloadstate",
            "text": "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 {\n\n  preload() {\n    this.preloadBar = this.game.add.sprite(\n      this.world.centerX, \n      this.world.centerY, \n      'preload')\n\n    this.preloadBar.anchor.set(.5)\n\n    this.load.setPreloadSprite(this.preloadBar)\n\n    this.load.image('logo', 'img/logo.png')\n    this.load.image('pnlogo', 'img/pnlogo.png')\n  }\n\n  create() {\n    this.state.start('MainMenu')\n  }\n\n  update() { }\n  render() { }\n}\n\nmodule.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 .",
            "title": "PreloadState"
        },
        {
            "location": "/project/#menustate",
            "text": "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 {\n\n  preload() { }\n\n  create() {\n    let logo = this.add.image(\n      this.world.centerX, \n      this.world.centerY, \n      'logo')\n\n    logo.anchor.set(.5)\n\n    this.input.onTap.addOnce((pointer) => {\n      this.state.start('Game')\n    })\n  }\n\n  update() { }\n  render() { }\n}\n\nmodule.exports = MenuState  Do what you will to it, but make sure to point to the  GameState  as your final destination.",
            "title": "MenuState"
        },
        {
            "location": "/project/#gamestate",
            "text": "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 {\n\n  preload() { }\n\n  create() {\n    let pnlogo = this.add.image(\n      this.world.centerX, \n      this.world.centerY, \n      'pnlogo')\n\n    pnlogo.anchor.set(.5)\n  }\n\n  update() { }\n  render() { }\n}\n\nmodule.exports = GameState  The game at this point is just an image (because purple whales are cute).",
            "title": "GameState"
        },
        {
            "location": "/project/#creating-your-game",
            "text": "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)",
            "title": "Creating Your Game"
        },
        {
            "location": "/notes/",
            "text": "Notes\n\n\nPhaser.js Versions\n\n\nWhen you first install \nPhaser Node Kit\n the current release of \nPhaser CE\n is downloaded for use in any new projects. This version will remain until the kit is updated.\n\n\nIf you would like to use a different version of \nPhaser.js\n simply place a \nphaser.min.js\n file of your choosing in the \ngame/vendor\n directory. Files in the \ngame\n directory are never overwritten by the \nwatcher\n.\n\n\nMisc\n\n\nPurple whales are cute.",
            "title": "Notes"
        },
        {
            "location": "/notes/#notes",
            "text": "",
            "title": "Notes"
        },
        {
            "location": "/notes/#phaserjs-versions",
            "text": "When you first install  Phaser Node Kit  the current release of  Phaser CE  is downloaded for use in any new projects. This version will remain until the kit is updated.  If you would like to use a different version of  Phaser.js  simply place a  phaser.min.js  file of your choosing in the  game/vendor  directory. Files in the  game  directory are never overwritten by the  watcher .",
            "title": "Phaser.js Versions"
        },
        {
            "location": "/notes/#misc",
            "text": "Purple whales are cute.",
            "title": "Misc"
        }
    ]
}