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>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"> Overview </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 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"> Overview </label> <a href="." title="Overview" class="md-nav__link md-nav__link--active"> Overview </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="#what-is-it" title="What Is It?" class="md-nav__link"> What Is It? </a> </li> <li class="md-nav__item"> <a href="#how-it-works" title="How It Works" class="md-nav__link"> How It Works </a> </li> <li class="md-nav__item"> <a href="#some-context" title="Some Context" class="md-nav__link"> Some Context </a> </li> </ul> </nav> </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"> <a href="project/" title="Project Template" class="md-nav__link"> Project Template </a> </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="#what-is-it" title="What Is It?" class="md-nav__link"> What Is It? </a> </li> <li class="md-nav__item"> <a href="#how-it-works" title="How It Works" class="md-nav__link"> How It Works </a> </li> <li class="md-nav__item"> <a href="#some-context" title="Some Context" class="md-nav__link"> Some Context </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/index.md" title="Edit this page" class="md-icon md-content__icon">edit</a> <h1 id="phaser-node-kit">Phaser Node Kit</h1> <p><img alt="pnkit" src="./img/pnlogo.png" /></p> <p><strong><em>Rapid Game Development with Phaser and Node</em></strong></p> <h2 id="what-is-it">What Is It?</h2> <p><strong>Phaser Node Kit</strong> is a build tool and project template for creating <strong><a href="http://phaser.io">PhaserJS</a></strong> games using <strong><a href="http://nodejs.org">NodeJS</a></strong>.</p> <p>You may be asking yourself, why? And that I can't answer clearly. I just spend most of my time in the <em>Node</em> environment.</p> <p>The build tool is basically a collection of some popular libraries to get your game built for distribution using <em>Node</em>. The project template is a minimal running <em>Phaser.js</em> game, with included states.</p> <p>The major components consist of:</p> <p><strong><a href="http://nodejs.org">Node</a></strong></p> <p><strong><a href="http://browserify.org/">Browserify</a></strong></p> <p><em>and of course...</em></p> <p><strong><a href="https://phaser.io">PhaserJS</a></strong></p> <h2 id="how-it-works">How It Works</h2> <p><em>Phaser Node Kit</em> only cares about two types of files, javascript and everything else.</p> <p>With the javascript, the kit will bundle up your game code with <em>Browserify</em> on changes. For everything else, the kit "hot" copies the files in and out of the <em>build</em> directory. The <em>Phaser CE</em> library is added as a vendor file when you initialize a new game project. It all allows you to make games quicker using <em>Node</em>.</p> <h2 id="some-context">Some Context</h2> <p>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.</p> <p>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.</p> <p>The goal for <em>Phaser Node Kit</em> was to be able to get to the <strong><em>creative</em></strong> phase as quick as possible. </p> <p>So with a <code>pnkit init</code> and a <code>pnkit watch</code>, I'm looking at a "live" build in my browser ready to hack on, with a <em>build</em> folder ready to serve or bundle with something like <a href="https://cordova.apache.org/">Cordova</a>.</p> <p>I hope it helps you to be more creative in your game development adventures as well.</p> <p>^_^ Happy game making!</p> </article> </div> </div> </main> <footer class="md-footer"> <div class="md-footer-nav"> <nav class="md-footer-nav__inner md-grid"> <a href="install/" title="Installation" 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> Installation </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>