phaser-node-kit

<!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="shortcut icon" href="../assets/images/favicon.png"> <meta name="generator" content="mkdocs-0.16.1, mkdocs-material-1.5.4"> <title>Project Template - Phaser Node Kit</title> <script src="../assets/javascripts/modernizr-56ade86843.js"></script> <link rel="stylesheet" href="../assets/stylesheets/application-b1a1975878.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Roboto+Mono"> <style>body,input{font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono","Courier New",Courier,monospace}</style> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <svg class="md-svg"> <defs> <svg xmlns="http://www.w3.org/2000/svg" width="416" height="448" viewBox="0 0 416 448" id="github"><path fill="currentColor" d="M160 304q0 10-3.125 20.5t-10.75 19T128 352t-18.125-8.5-10.75-19T96 304t3.125-20.5 10.75-19T128 256t18.125 8.5 10.75 19T160 304zm160 0q0 10-3.125 20.5t-10.75 19T288 352t-18.125-8.5-10.75-19T256 304t3.125-20.5 10.75-19T288 256t18.125 8.5 10.75 19T320 304zm40 0q0-30-17.25-51T296 232q-10.25 0-48.75 5.25Q229.5 240 208 240t-39.25-2.75Q130.75 232 120 232q-29.5 0-46.75 21T56 304q0 22 8 38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0 37.25-1.75t35-7.375 30.5-15 20.25-25.75T360 304zm56-44q0 51.75-15.25 82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5T212 416q-19.5 0-35.5-.75t-36.875-3.125-38.125-7.5-34.25-12.875T37 371.5t-21.5-28.75Q0 312 0 260q0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25 30.875Q171.5 96 212 96q37 0 70 8 26.25-20.5 46.75-30.25T376 64q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34 99.5z"/></svg> </defs> </svg> <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="drawer"> <input class="md-toggle" data-md-toggle="search" type="checkbox" id="search"> <label class="md-overlay" data-md-component="overlay" for="drawer"></label> <header class="md-header" data-md-component="header"> <nav class="md-header-nav md-grid"> <div class="md-flex"> <div class="md-flex__cell md-flex__cell--shrink"> <a href=".." title="Phaser Node Kit" class="md-icon md-icon--home md-header-nav__button"> </a> </div> <div class="md-flex__cell md-flex__cell--shrink"> <label class="md-icon md-icon--menu md-header-nav__button" for="drawer"></label> </div> <div class="md-flex__cell md-flex__cell--stretch"> <span class="md-flex__ellipsis md-header-nav__title"> Project Template </span> </div> <div class="md-flex__cell md-flex__cell--shrink"> <label class="md-icon md-icon--search md-header-nav__button" for="search"></label> <div class="md-search" data-md-component="search"> <div class="md-search__overlay"></div> <div class="md-search__inner"> <form class="md-search__form" name="search"> <input type="text" class="md-search__input" name="query" required placeholder="Search" accesskey="s" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query"> <label class="md-icon md-search__icon" for="search"></label> <button type="reset" class="md-icon md-search__icon" data-md-component="reset">close</button> </form> <div class="md-search__output"> <div class="md-search__scrollwrap" data-md-scrollfix> <div class="md-search-result" data-md-component="result"> <div class="md-search-result__meta" data-md-lang-result-none="No matching documents" data-md-lang-result-one="1 matching document" data-md-lang-result-other="# matching documents"> Type to start searching </div> <ol class="md-search-result__list"></ol> </div> </div> </div> </div> </div> </div> <div class="md-flex__cell md-flex__cell--shrink"> <div class="md-header-nav__source"> <a href="https://github.com/develephant/phaser-node-kit" title="Go to repository" class="md-source" data-md-source="github"> <div class="md-source__icon"> <svg viewBox="0 0 24 24" width="24" height="24"> <use xlink:href="#github" width="24" height="24"></use> </svg> </div> <div class="md-source__repository"> GitHub </div> </a> </div> </div> </div> </nav> </header> <div class="md-container"> <main class="md-main"> <div class="md-main__inner md-grid" data-md-component="container"> <div class="md-sidebar md-sidebar--primary" data-md-component="navigation"> <div class="md-sidebar__scrollwrap"> <div class="md-sidebar__inner"> <nav class="md-nav md-nav--primary" data-md-level="0"> <label class="md-nav__title md-nav__title--site" for="drawer"> <i class="md-icon md-icon--home md-nav__button"></i> Phaser Node Kit </label> <div class="md-nav__source"> <a href="https://github.com/develephant/phaser-node-kit" title="Go to repository" class="md-source" data-md-source="github"> <div class="md-source__icon"> <svg viewBox="0 0 24 24" width="24" height="24"> <use xlink:href="#github" width="24" height="24"></use> </svg> </div> <div class="md-source__repository"> GitHub </div> </a> </div> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href=".." title="Overview" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../install/" title="Installation" class="md-nav__link"> Installation </a> </li> <li class="md-nav__item"> <a href="../cli/" title="Commands" class="md-nav__link"> Commands </a> </li> <li class="md-nav__item"> <a href="../config/" title="Configuration" class="md-nav__link"> Configuration </a> </li> <li class="md-nav__item md-nav__item--active"> <input class="md-toggle md-nav__toggle" data-md-toggle="toc" type="checkbox" id="toc"> <label class="md-nav__link md-nav__link--active" for="toc"> Project Template </label> <a href="./" title="Project Template" class="md-nav__link md-nav__link--active"> Project Template </a> <nav class="md-nav md-nav--secondary"> <label class="md-nav__title" for="toc">Table of contents</label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="#new-projects" title="New Projects" class="md-nav__link"> New Projects </a> </li> <li class="md-nav__item"> <a href="#the-project-tree" title="The Project Tree" class="md-nav__link"> The Project Tree </a> </li> <li class="md-nav__item"> <a href="#directories-and-files" title="Directories and Files" class="md-nav__link"> Directories and Files </a> </li> <li class="md-nav__item"> <a href="#javascript" title="Javascript" class="md-nav__link"> Javascript </a> </li> <li class="md-nav__item"> <a href="#indexes" title="Indexes" class="md-nav__link"> Indexes </a> <nav class="md-nav"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#indexhtml" title="index.html" class="md-nav__link"> index.html </a> </li> <li class="md-nav__item"> <a href="#indexjs" title="index.js" class="md-nav__link"> index.js </a> </li> <li class="md-nav__item"> <a href="#indexcss" title="index.css" class="md-nav__link"> index.css </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="#states" title="States" class="md-nav__link"> States </a> <nav class="md-nav"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#bootstate" title="BootState" class="md-nav__link"> BootState </a> </li> <li class="md-nav__item"> <a href="#preloadstate" title="PreloadState" class="md-nav__link"> PreloadState </a> </li> <li class="md-nav__item"> <a href="#menustate" title="MenuState" class="md-nav__link"> MenuState </a> </li> <li class="md-nav__item"> <a href="#gamestate" title="GameState" class="md-nav__link"> GameState </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="#creating-your-game" title="Creating Your Game" class="md-nav__link"> Creating Your Game </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../notes/" title="Notes" class="md-nav__link"> Notes </a> </li> </ul> </nav> </div> </div> </div> <div class="md-sidebar md-sidebar--secondary" data-md-component="toc"> <div class="md-sidebar__scrollwrap"> <div class="md-sidebar__inner"> <nav class="md-nav md-nav--secondary"> <label class="md-nav__title" for="toc">Table of contents</label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="#new-projects" title="New Projects" class="md-nav__link"> New Projects </a> </li> <li class="md-nav__item"> <a href="#the-project-tree" title="The Project Tree" class="md-nav__link"> The Project Tree </a> </li> <li class="md-nav__item"> <a href="#directories-and-files" title="Directories and Files" class="md-nav__link"> Directories and Files </a> </li> <li class="md-nav__item"> <a href="#javascript" title="Javascript" class="md-nav__link"> Javascript </a> </li> <li class="md-nav__item"> <a href="#indexes" title="Indexes" class="md-nav__link"> Indexes </a> <nav class="md-nav"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#indexhtml" title="index.html" class="md-nav__link"> index.html </a> </li> <li class="md-nav__item"> <a href="#indexjs" title="index.js" class="md-nav__link"> index.js </a> </li> <li class="md-nav__item"> <a href="#indexcss" title="index.css" class="md-nav__link"> index.css </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="#states" title="States" class="md-nav__link"> States </a> <nav class="md-nav"> <ul class="md-nav__list"> <li class="md-nav__item"> <a href="#bootstate" title="BootState" class="md-nav__link"> BootState </a> </li> <li class="md-nav__item"> <a href="#preloadstate" title="PreloadState" class="md-nav__link"> PreloadState </a> </li> <li class="md-nav__item"> <a href="#menustate" title="MenuState" class="md-nav__link"> MenuState </a> </li> <li class="md-nav__item"> <a href="#gamestate" title="GameState" class="md-nav__link"> GameState </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="#creating-your-game" title="Creating Your Game" class="md-nav__link"> Creating Your Game </a> </li> </ul> </nav> </div> </div> </div> <div class="md-content"> <article class="md-content__inner md-typeset"> <a href="https://github.com/develephant/phaser-node-kit/edit/master/docs/project.md" title="Edit this page" class="md-icon md-content__icon">edit</a> <h1 id="project-template">Project Template</h1> <p><strong>Phaser Node Kit</strong> 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.</p> <h2 id="new-projects">New Projects</h2> <p><strong><em>To create a new Phaser Node Kit project do the following:</em></strong></p> <ul> <li>Create a new empty directory.</li> <li>Create a package.json file (optional).</li> <li>Run <code>pnkit init</code> on the command line in the empty directory.</li> </ul> <p>Let's take look at the innards, and how to use it effectively.</p> <h2 id="the-project-tree">The Project Tree</h2> <p>Here you can see an overview of the default project. Everything is contained in the <em>game</em> directory:</p> <pre><code>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 </code></pre> <blockquote> <p>There is of course the <em>build</em> directory at the project root, but we pretend that doesn't exist except for viewing and distributing. Never manually place files in the <em>build</em> directory, they risk being overwritten at any time.</p> </blockquote> <h2 id="directories-and-files">Directories and Files</h2> <p><strong><em>While the watcher is running (pnkit watch)</em></strong> simply place or create a new directory or file in the <em>game</em> folder to add it to the project. Remove a directory to remove it from the project.</p> <p>Some additional folders you may want could be: <code>fonts</code>, <code>data</code>, <code>snds</code>, etc.</p> <p>Any items (besides javascript files) that are added will be "hot" copied to the <em>build</em> directory. The reverse holds true when removing items.</p> <blockquote> <p>If you add items to the <em>game</em> directory while the watcher is not active, you will need to "sync" the project (pnkit sync).</p> </blockquote> <p>See <a href="../cli/">Commands</a>.</p> <h2 id="javascript">Javascript</h2> <p>The <strong><em>js</em></strong> directory is a special folder. It must reside in the <em>game</em> folder, and be named exactly <strong><em>js</em></strong>.</p> <p>All of your <strong><em>.js</em></strong> files and classes will live in this directory. When javascript files in this directory are updated, the <em>bundler</em> will run a pass on the files, creating a <em>Browserify</em> bundle.</p> <blockquote> <p>Javascript files are only compiled if they live in the <strong><em>game/js</em></strong> directory. Any other file type is added (or removed) from the <em>build</em> folder as-is.</p> </blockquote> <h2 id="indexes">Indexes</h2> <p>The <em>index.html</em>, <em>index.js</em>, and <em>index.css</em> all contain basic boilerplate for their particular domain.</p> <h3 id="indexhtml">index.html</h3> <pre><code class="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> </code></pre> <p>Here <em>phaser.js</em> is loaded separately to keep compile times quick. It needs no additional compilation as it is. The <em>bundle.js</em> is your game code bundled up with <em>Browserify</em>.</p> <h3 id="indexjs">index.js</h3> <pre><code class="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') }) </code></pre> <p>The <em>js/index.js</em> file contains state assignments, the initial <strong>game</strong> object creation, and configuration code. It then launches into the <em>Boot</em> state. If you have needs for additional states, this is where they are assigned.</p> <p>Here is where you also make adjustments to the initial <strong>game</strong> object configuration as well.</p> <p>In particular, the <em>index.js</em> contains:</p> <ul> <li>Background color</li> <li>Scale mode</li> <li>Fullscreen mode</li> <li>Scale min/max</li> <li>Container alignment</li> </ul> <p>If you like your backgrounds black, and develop in an 800x600 display size, you generally don't need to touch this file.</p> <h3 id="indexcss">index.css</h3> <p>The <em>index.css</em> simply contains an implementation of "clean.css" for better visual compatibilty across devices. It also contains a global background color.</p> <h2 id="states">States</h2> <h3 id="bootstate">BootState</h3> <p><strong><em>js/BootState.js</em></strong></p> <p>The <em>BootState</em> is the first state that is run once <em>Phaser</em> is ready for it. Here we preload the "loading" bar into the image cache, and also set the <code>maxPointers</code> property.</p> <pre><code class="js">class BootState { preload() { this.load.image('preload', 'img/preload.png') } create() { this.input.maxPointers = 1 this.state.start('Preload') } update() { } render() { } } module.exports = BootState </code></pre> <p>Once the <em>BootState</em> is done, it will automatically launch into the next state, which is the... </p> <h3 id="preloadstate">PreloadState</h3> <p><strong><em>js/PreloadState.js</em></strong></p> <p>In the <em>PreloadState</em> 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).</p> <pre><code class="js">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 </code></pre> <p>As far as states are concerned, you may visit this one most often to add additional assets to your game.</p> <p>Once the <em>PreloadState</em> has run its course, it will load the <em>MenuState</em>.</p> <h3 id="menustate">MenuState</h3> <p><strong><em>js/MenuState.js</em></strong></p> <p>Main menus are generally not very complex. A background and a couple buttons is usually the bulk of it. The <em>MenuState</em> here is very minimal. We are simply displaying the <em>Phaser</em> logo, and waiting for the <code>onTap</code> signal from the input manager.</p> <pre><code class="js">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 </code></pre> <p>Do what you will to it, but make sure to point to the <em>GameState</em> as your final destination.</p> <h3 id="gamestate">GameState</h3> <p><strong><em>js/GameState.js</em></strong></p> <p>Ahh, finally. Now we play. The <em>GameState</em> is just what it sounds like. Here is where your game takes flight. </p> <pre><code class="js">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 </code></pre> <p>The game at this point is just an image (because purple whales are cute).</p> <h2 id="creating-your-game">Creating Your Game</h2> <p>Ready to get your game on? Check out <strong><a href="http://phaser.io">Phaser.io</a></strong> for all the goodies.</p> <p>Here are a couple of other handy links as well:</p> <p><strong><a href="https://photonstorm.github.io/phaser-ce">Phaser CE Documentation (code)</a></strong></p> <p><strong><a href="https://phaser.io/examples">Phaser Examples (visual)</a></strong></p> </article> </div> </div> </main> <footer class="md-footer"> <div class="md-footer-nav"> <nav class="md-footer-nav__inner md-grid"> <a href="../config/" title="Configuration" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev"> <div class="md-flex__cell md-flex__cell--shrink"> <i class="md-icon md-icon--arrow-back md-footer-nav__button"></i> </div> <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title"> <span class="md-flex__ellipsis"> <span class="md-footer-nav__direction"> Previous </span> Configuration </span> </div> </a> <a href="../notes/" title="Notes" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next"> <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title"> <span class="md-flex__ellipsis"> <span class="md-footer-nav__direction"> Next </span> Notes </span> </div> <div class="md-flex__cell md-flex__cell--shrink"> <i class="md-icon md-icon--arrow-forward md-footer-nav__button"></i> </div> </a> </nav> </div> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class="md-footer-copyright"> powered by <a href="http://www.mkdocs.org" title="MkDocs">MkDocs</a> and <a href="http://squidfunk.github.io/mkdocs-material/" title="Material for MkDocs"> Material for MkDocs</a> </div> </div> </div> </footer> </div> <script src="../assets/javascripts/application-0b7df094bf.js"></script> <script>app.initialize({url:{base:".."}})</script> </body> </html>