├── .gitignore ├── LICENSE.md ├── README.md ├── cli.js ├── docs ├── 404.html ├── assets │ ├── images │ │ ├── favicon.ico │ │ └── icons │ │ │ ├── bitbucket-670608a71a.svg │ │ │ ├── github-1da075986e.svg │ │ │ └── gitlab-5ad3f9f9e5.svg │ ├── javascripts │ │ ├── application-0b7df094bf.js │ │ └── modernizr-56ade86843.js │ └── stylesheets │ │ ├── application-b1a1975878.css │ │ └── application-f78e5cb881.palette.css ├── cli │ └── index.html ├── config │ └── index.html ├── img │ ├── favicon.ico │ ├── favicon.png │ └── pnlogo.png ├── index.html ├── install │ └── index.html ├── mkdocs │ ├── js │ │ ├── lunr.min.js │ │ ├── mustache.min.js │ │ ├── require.js │ │ ├── search-results-template.mustache │ │ ├── search.js │ │ └── text.js │ └── search_index.json ├── notes │ └── index.html ├── project │ └── index.html └── sitemap.xml ├── lib ├── build.js ├── bundle.js ├── paths.js ├── update.js ├── utils.js └── watch.js ├── package.json ├── pnconfig.json └── tpl ├── 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 └── pnkit.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | __phaser-node-kit__ 2 | 3 | _Phaser Node Kit (PhaserJS + NodeJS)_ 4 | 5 | © 2017 develephant 6 | 7 | The MIT License (MIT) 8 | --------------------- 9 | 10 | Copyright © 2017 develephant 11 | 12 | Permission is hereby granted, free of charge, to any person obtaining a copy of 13 | this software and associated documentation files (the "Software"), to deal in 14 | the Software without restriction, including without limitation the rights to 15 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 16 | the Software, and to permit persons to whom the Software is furnished to do so, 17 | subject to the following conditions: 18 | 19 | The above copyright notice and this permission notice shall be included in all 20 | copies or substantial portions of the Software. 21 | 22 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 23 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 24 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 25 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 26 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 27 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `phaser-node-kit` 2 | 3 |  4 | 5 | ### Rapid Game Development with PhaserJS and Node for Modern Browsers 6 | 7 | ## Install 8 | 9 | ``` 10 | npm i -g phaser-node-kit 11 | ``` 12 | 13 | ## Insert Coin 14 | 15 | It takes only two steps to start making games with _Phaser Node Kit_: 16 | 17 | 1. Run the initialization in a folder of your choosing: `pnkit init` 18 | 19 | 2. Start the watch server and build on file updates: `pnkit watch` 20 | 21 | The "live" build of your game can be found at: http://localhost:5550. 22 | 23 | ## Docs 24 | 25 | ### [Click here to read the fine print.](https://develephant.github.io/phaser-node-kit/) 26 | 27 | #### `phaser-node-kit` ⋆ © 2017 develephant ⋆ MIT license 28 | -------------------------------------------------------------------------------- /cli.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | /** 4 | * phaser-node-kit 5 | * @author C. Byerley 6 | * @copyright (c)2017 develephant.com 7 | * @license MIT 8 | * https://github.com/develephant/phaser-node-kit 9 | */ 10 | const pkg = require('./package') 11 | const ArgParser = require('argparse').ArgumentParser 12 | 13 | const Build = require('./lib/build') 14 | const Watch = require('./lib/watch') 15 | const Update = require('./lib/update') 16 | 17 | const builder = new Build() 18 | const watcher = new Watch() 19 | const updater = new Update() 20 | 21 | const parser = new ArgParser({ 22 | description: 'Phaser Node Kit', 23 | version: pkg.version, 24 | allowAbbrev: false, 25 | epilog: '(c)2017 develephant.com' 26 | }) 27 | 28 | parser.addArgument('action', { 29 | help: 'Phaser Node Kit Actions', 30 | choices: [ 31 | 'init', 32 | 'watch', 33 | 'sync', 34 | 'update' 35 | ] 36 | }) 37 | 38 | const args = parser.parseArgs() 39 | 40 | if (args.action === 'sync') { 41 | builder.runInitBuild(true) 42 | } else if (args.action === 'watch') { 43 | watcher.run() 44 | } else if (args.action === 'init') { 45 | builder.runInitBuild() 46 | } else if (args.action === 'update') { 47 | updater.run() 48 | } 49 | -------------------------------------------------------------------------------- /docs/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |Phaser Node Kit only has a couple commands to get you up and running.
374 |pnkit init
To create a new Phaser Node Kit project do the following:
377 |Create a new empty directory.
380 |Create a package.json file (optional).
383 |Run pnkit init
on the command line in the directory you created.
389 |391 |You can create your own package.json before running
390 |pnkit init
or a bare one will be created for you.
Watch the game development files, and trigger a build on changes:
393 |pnkit watch
Phaser Node Kit will now run a build when any of the files are updated.
395 |View the current game state in your browser at http://127.0.0.1:5550.
396 |You can leave the browser window running, and it will refresh with each build.
397 |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.
401 |Updates the PhaserJS library to its latest version.
403 |sudo pnkit update
405 |407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 |Make sure to use the
406 |sudo
command.
Phaser Node Kit configuration options are minimal. You can however ignore files, directories, and extensions, as well as adjust some of the watcher settings.
454 |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.
456 |The default configuration file looks like so:
457 |{
458 | "ignore": [ ".DS_Store" ],
459 | "watch": {
460 | "port": 5550,
461 | "host": "127.0.0.1",
462 | "refresh": true,
463 | "startBrowser" : true
464 | },
465 | "debug": true
466 | }
467 |
468 |
469 | You can fill this array with folders, files, and extension types that you would like the watcher to ignore.
472 |For example:
473 |{
474 | "ignore": [".tps", "stuff", "secret.json"]
475 | }
476 |
477 |
478 |
479 | This watch
section contains settings for the watcher.
The port to serve the "live" game build on. The default is 5550
.
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
.
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
.
Whether to start the browser automatically when running watch
. The default is true
.
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.
494 |496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 |If you change the configuration while the watcher is running, be sure to stop and restart it to make the configuration active.
495 |
Rapid Game Development with PhaserJS and Node for Modern Browsers.
361 |Phaser Node Kit is a build tool and project template for creating PhaserJS games using NodeJS.
363 |You may be asking yourself, why? And that I can't answer clearly. I just spend most of my time in the Node environment.
364 |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.
365 |The major components consist of:
366 | 367 | 368 |and of course...
369 | 370 |Phaser Node Kit only cares about two types of files, javascript and everything else.
372 |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.
373 |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.
375 |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.
376 |The goal for Phaser Node Kit was to be able to get to the creative phase as quick as possible.
377 |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.
379 |^_^ Happy game making!
380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 |Phaser Node Kit is a Node application that is installed globally, making the tool at the ready for when creative game sparks fly.
346 |You can have a running "live" game development framework up in a handful of seconds.
347 |To run Phaser Node Kit you will need NodeJS version 6 or higher.
349 |Using npm, run the following on the command line:
351 |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:
354 |pnkit -v
{{summary}}
4 |No results found
"); 64 | } 65 | 66 | if(jQuery){ 67 | /* 68 | * We currently only automatically hide bootstrap models. This 69 | * requires jQuery to work. 70 | */ 71 | jQuery('#mkdocs_search_modal a').click(function(){ 72 | jQuery('#mkdocs_search_modal').modal('hide'); 73 | }); 74 | } 75 | 76 | }; 77 | 78 | var search_input = document.getElementById('mkdocs-search-query'); 79 | 80 | var term = getSearchTerm(); 81 | if (term){ 82 | search_input.value = term; 83 | search(); 84 | } 85 | 86 | search_input.addEventListener("keyup", search); 87 | 88 | }); 89 | -------------------------------------------------------------------------------- /docs/mkdocs/js/text.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license RequireJS text 2.0.12 Copyright (c) 2010-2014, The Dojo Foundation All Rights Reserved. 3 | * Available via the MIT or new BSD license. 4 | * see: http://github.com/requirejs/text for details 5 | */ 6 | /*jslint regexp: true */ 7 | /*global require, XMLHttpRequest, ActiveXObject, 8 | define, window, process, Packages, 9 | java, location, Components, FileUtils */ 10 | 11 | define(['module'], function (module) { 12 | 'use strict'; 13 | 14 | var text, fs, Cc, Ci, xpcIsWindows, 15 | progIds = ['Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0'], 16 | xmlRegExp = /^\s*<\?xml(\s)+version=[\'\"](\d)*.(\d)*[\'\"](\s)*\?>/im, 17 | bodyRegExp = /]*>\s*([\s\S]+)\s*<\/body>/im, 18 | hasLocation = typeof location !== 'undefined' && location.href, 19 | defaultProtocol = hasLocation && location.protocol && location.protocol.replace(/\:/, ''), 20 | defaultHostName = hasLocation && location.hostname, 21 | defaultPort = hasLocation && (location.port || undefined), 22 | buildMap = {}, 23 | masterConfig = (module.config && module.config()) || {}; 24 | 25 | text = { 26 | version: '2.0.12', 27 | 28 | strip: function (content) { 29 | //Strips declarations so that external SVG and XML 30 | //documents can be added to a document without worry. Also, if the string 31 | //is an HTML document, only the part inside the body tag is returned. 32 | if (content) { 33 | content = content.replace(xmlRegExp, ""); 34 | var matches = content.match(bodyRegExp); 35 | if (matches) { 36 | content = matches[1]; 37 | } 38 | } else { 39 | content = ""; 40 | } 41 | return content; 42 | }, 43 | 44 | jsEscape: function (content) { 45 | return content.replace(/(['\\])/g, '\\$1') 46 | .replace(/[\f]/g, "\\f") 47 | .replace(/[\b]/g, "\\b") 48 | .replace(/[\n]/g, "\\n") 49 | .replace(/[\t]/g, "\\t") 50 | .replace(/[\r]/g, "\\r") 51 | .replace(/[\u2028]/g, "\\u2028") 52 | .replace(/[\u2029]/g, "\\u2029"); 53 | }, 54 | 55 | createXhr: masterConfig.createXhr || function () { 56 | //Would love to dump the ActiveX crap in here. Need IE 6 to die first. 57 | var xhr, i, progId; 58 | if (typeof XMLHttpRequest !== "undefined") { 59 | return new XMLHttpRequest(); 60 | } else if (typeof ActiveXObject !== "undefined") { 61 | for (i = 0; i < 3; i += 1) { 62 | progId = progIds[i]; 63 | try { 64 | xhr = new ActiveXObject(progId); 65 | } catch (e) {} 66 | 67 | if (xhr) { 68 | progIds = [progId]; // so faster next time 69 | break; 70 | } 71 | } 72 | } 73 | 74 | return xhr; 75 | }, 76 | 77 | /** 78 | * Parses a resource name into its component parts. Resource names 79 | * look like: module/name.ext!strip, where the !strip part is 80 | * optional. 81 | * @param {String} name the resource name 82 | * @returns {Object} with properties "moduleName", "ext" and "strip" 83 | * where strip is a boolean. 84 | */ 85 | parseName: function (name) { 86 | var modName, ext, temp, 87 | strip = false, 88 | index = name.indexOf("."), 89 | isRelative = name.indexOf('./') === 0 || 90 | name.indexOf('../') === 0; 91 | 92 | if (index !== -1 && (!isRelative || index > 1)) { 93 | modName = name.substring(0, index); 94 | ext = name.substring(index + 1, name.length); 95 | } else { 96 | modName = name; 97 | } 98 | 99 | temp = ext || modName; 100 | index = temp.indexOf("!"); 101 | if (index !== -1) { 102 | //Pull off the strip arg. 103 | strip = temp.substring(index + 1) === "strip"; 104 | temp = temp.substring(0, index); 105 | if (ext) { 106 | ext = temp; 107 | } else { 108 | modName = temp; 109 | } 110 | } 111 | 112 | return { 113 | moduleName: modName, 114 | ext: ext, 115 | strip: strip 116 | }; 117 | }, 118 | 119 | xdRegExp: /^((\w+)\:)?\/\/([^\/\\]+)/, 120 | 121 | /** 122 | * Is an URL on another domain. Only works for browser use, returns 123 | * false in non-browser environments. Only used to know if an 124 | * optimized .js version of a text resource should be loaded 125 | * instead. 126 | * @param {String} url 127 | * @returns Boolean 128 | */ 129 | useXhr: function (url, protocol, hostname, port) { 130 | var uProtocol, uHostName, uPort, 131 | match = text.xdRegExp.exec(url); 132 | if (!match) { 133 | return true; 134 | } 135 | uProtocol = match[2]; 136 | uHostName = match[3]; 137 | 138 | uHostName = uHostName.split(':'); 139 | uPort = uHostName[1]; 140 | uHostName = uHostName[0]; 141 | 142 | return (!uProtocol || uProtocol === protocol) && 143 | (!uHostName || uHostName.toLowerCase() === hostname.toLowerCase()) && 144 | ((!uPort && !uHostName) || uPort === port); 145 | }, 146 | 147 | finishLoad: function (name, strip, content, onLoad) { 148 | content = strip ? text.strip(content) : content; 149 | if (masterConfig.isBuild) { 150 | buildMap[name] = content; 151 | } 152 | onLoad(content); 153 | }, 154 | 155 | load: function (name, req, onLoad, config) { 156 | //Name has format: some.module.filext!strip 157 | //The strip part is optional. 158 | //if strip is present, then that means only get the string contents 159 | //inside a body tag in an HTML string. For XML/SVG content it means 160 | //removing the declarations so the content can be inserted 161 | //into the current doc without problems. 162 | 163 | // Do not bother with the work if a build and text will 164 | // not be inlined. 165 | if (config && config.isBuild && !config.inlineText) { 166 | onLoad(); 167 | return; 168 | } 169 | 170 | masterConfig.isBuild = config && config.isBuild; 171 | 172 | var parsed = text.parseName(name), 173 | nonStripName = parsed.moduleName + 174 | (parsed.ext ? '.' + parsed.ext : ''), 175 | url = req.toUrl(nonStripName), 176 | useXhr = (masterConfig.useXhr) || 177 | text.useXhr; 178 | 179 | // Do not load if it is an empty: url 180 | if (url.indexOf('empty:') === 0) { 181 | onLoad(); 182 | return; 183 | } 184 | 185 | //Load the text. Use XHR if possible and in a browser. 186 | if (!hasLocation || useXhr(url, defaultProtocol, defaultHostName, defaultPort)) { 187 | text.get(url, function (content) { 188 | text.finishLoad(name, parsed.strip, content, onLoad); 189 | }, function (err) { 190 | if (onLoad.error) { 191 | onLoad.error(err); 192 | } 193 | }); 194 | } else { 195 | //Need to fetch the resource across domains. Assume 196 | //the resource has been optimized into a JS module. Fetch 197 | //by the module name + extension, but do not include the 198 | //!strip part to avoid file system issues. 199 | req([nonStripName], function (content) { 200 | text.finishLoad(parsed.moduleName + '.' + parsed.ext, 201 | parsed.strip, content, onLoad); 202 | }); 203 | } 204 | }, 205 | 206 | write: function (pluginName, moduleName, write, config) { 207 | if (buildMap.hasOwnProperty(moduleName)) { 208 | var content = text.jsEscape(buildMap[moduleName]); 209 | write.asModule(pluginName + "!" + moduleName, 210 | "define(function () { return '" + 211 | content + 212 | "';});\n"); 213 | } 214 | }, 215 | 216 | writeFile: function (pluginName, moduleName, req, write, config) { 217 | var parsed = text.parseName(moduleName), 218 | extPart = parsed.ext ? '.' + parsed.ext : '', 219 | nonStripName = parsed.moduleName + extPart, 220 | //Use a '.js' file name so that it indicates it is a 221 | //script that can be loaded across domains. 222 | fileName = req.toUrl(parsed.moduleName + extPart) + '.js'; 223 | 224 | //Leverage own load() method to load plugin value, but only 225 | //write out values that do not have the strip argument, 226 | //to avoid any potential issues with ! in file names. 227 | text.load(nonStripName, req, function (value) { 228 | //Use own write() method to construct full module value. 229 | //But need to create shell that translates writeFile's 230 | //write() to the right interface. 231 | var textWrite = function (contents) { 232 | return write(fileName, contents); 233 | }; 234 | textWrite.asModule = function (moduleName, contents) { 235 | return write.asModule(moduleName, fileName, contents); 236 | }; 237 | 238 | text.write(pluginName, nonStripName, textWrite, config); 239 | }, config); 240 | } 241 | }; 242 | 243 | if (masterConfig.env === 'node' || (!masterConfig.env && 244 | typeof process !== "undefined" && 245 | process.versions && 246 | !!process.versions.node && 247 | !process.versions['node-webkit'])) { 248 | //Using special require.nodeRequire, something added by r.js. 249 | fs = require.nodeRequire('fs'); 250 | 251 | text.get = function (url, callback, errback) { 252 | try { 253 | var file = fs.readFileSync(url, 'utf8'); 254 | //Remove BOM (Byte Mark Order) from utf8 files if it is there. 255 | if (file.indexOf('\uFEFF') === 0) { 256 | file = file.substring(1); 257 | } 258 | callback(file); 259 | } catch (e) { 260 | if (errback) { 261 | errback(e); 262 | } 263 | } 264 | }; 265 | } else if (masterConfig.env === 'xhr' || (!masterConfig.env && 266 | text.createXhr())) { 267 | text.get = function (url, callback, errback, headers) { 268 | var xhr = text.createXhr(), header; 269 | xhr.open('GET', url, true); 270 | 271 | //Allow plugins direct access to xhr headers 272 | if (headers) { 273 | for (header in headers) { 274 | if (headers.hasOwnProperty(header)) { 275 | xhr.setRequestHeader(header.toLowerCase(), headers[header]); 276 | } 277 | } 278 | } 279 | 280 | //Allow overrides specified in config 281 | if (masterConfig.onXhr) { 282 | masterConfig.onXhr(xhr, url); 283 | } 284 | 285 | xhr.onreadystatechange = function (evt) { 286 | var status, err; 287 | //Do not explicitly handle errors, those should be 288 | //visible via console output in the browser. 289 | if (xhr.readyState === 4) { 290 | status = xhr.status || 0; 291 | if (status > 399 && status < 600) { 292 | //An http 4xx or 5xx error. Signal an error. 293 | err = new Error(url + ' HTTP status: ' + status); 294 | err.xhr = xhr; 295 | if (errback) { 296 | errback(err); 297 | } 298 | } else { 299 | callback(xhr.responseText); 300 | } 301 | 302 | if (masterConfig.onXhrComplete) { 303 | masterConfig.onXhrComplete(xhr, url); 304 | } 305 | } 306 | }; 307 | xhr.send(null); 308 | }; 309 | } else if (masterConfig.env === 'rhino' || (!masterConfig.env && 310 | typeof Packages !== 'undefined' && typeof java !== 'undefined')) { 311 | //Why Java, why is this so awkward? 312 | text.get = function (url, callback) { 313 | var stringBuffer, line, 314 | encoding = "utf-8", 315 | file = new java.io.File(url), 316 | lineSeparator = java.lang.System.getProperty("line.separator"), 317 | input = new java.io.BufferedReader(new java.io.InputStreamReader(new java.io.FileInputStream(file), encoding)), 318 | content = ''; 319 | try { 320 | stringBuffer = new java.lang.StringBuffer(); 321 | line = input.readLine(); 322 | 323 | // Byte Order Mark (BOM) - The Unicode Standard, version 3.0, page 324 324 | // http://www.unicode.org/faq/utf_bom.html 325 | 326 | // Note that when we use utf-8, the BOM should appear as "EF BB BF", but it doesn't due to this bug in the JDK: 327 | // http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=4508058 328 | if (line && line.length() && line.charAt(0) === 0xfeff) { 329 | // Eat the BOM, since we've already found the encoding on this file, 330 | // and we plan to concatenating this buffer with others; the BOM should 331 | // only appear at the top of a file. 332 | line = line.substring(1); 333 | } 334 | 335 | if (line !== null) { 336 | stringBuffer.append(line); 337 | } 338 | 339 | while ((line = input.readLine()) !== null) { 340 | stringBuffer.append(lineSeparator); 341 | stringBuffer.append(line); 342 | } 343 | //Make sure we return a JavaScript string and not a Java string. 344 | content = String(stringBuffer.toString()); //String 345 | } finally { 346 | input.close(); 347 | } 348 | callback(content); 349 | }; 350 | } else if (masterConfig.env === 'xpconnect' || (!masterConfig.env && 351 | typeof Components !== 'undefined' && Components.classes && 352 | Components.interfaces)) { 353 | //Avert your gaze! 354 | Cc = Components.classes; 355 | Ci = Components.interfaces; 356 | Components.utils['import']('resource://gre/modules/FileUtils.jsm'); 357 | xpcIsWindows = ('@mozilla.org/windows-registry-key;1' in Cc); 358 | 359 | text.get = function (url, callback) { 360 | var inStream, convertStream, fileObj, 361 | readData = {}; 362 | 363 | if (xpcIsWindows) { 364 | url = url.replace(/\//g, '\\'); 365 | } 366 | 367 | fileObj = new FileUtils.File(url); 368 | 369 | //XPCOM, you so crazy 370 | try { 371 | inStream = Cc['@mozilla.org/network/file-input-stream;1'] 372 | .createInstance(Ci.nsIFileInputStream); 373 | inStream.init(fileObj, 1, 0, false); 374 | 375 | convertStream = Cc['@mozilla.org/intl/converter-input-stream;1'] 376 | .createInstance(Ci.nsIConverterInputStream); 377 | convertStream.init(inStream, "utf-8", inStream.available(), 378 | Ci.nsIConverterInputStream.DEFAULT_REPLACEMENT_CHARACTER); 379 | 380 | convertStream.readString(inStream.available(), readData); 381 | convertStream.close(); 382 | inStream.close(); 383 | callback(readData.value); 384 | } catch (e) { 385 | throw new Error((fileObj && fileObj.path || '') + ': ' + e); 386 | } 387 | }; 388 | } 389 | return text; 390 | }); 391 | -------------------------------------------------------------------------------- /docs/notes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |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.
347 |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.
See the update command as well.
349 |Purple whales are cute.
351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 |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.
538 |To create a new Phaser Node Kit project do the following:
540 |pnkit init
on the command line in the empty directory.Let's take look at the innards, and how to use it effectively.
546 |Here you can see an overview of the default project. Everything is contained in the game directory:
548 |game
549 | ├── css
550 | │ └── index.css
551 | ├── favicon.ico
552 | ├── img
553 | │ ├── logo.png
554 | │ ├── pnlogo.png
555 | │ └── preload.png
556 | ├── index.html
557 | ├── js
558 | │ ├── BootState.js
559 | │ ├── GameState.js
560 | │ ├── MenuState.js
561 | │ ├── PreloadState.js
562 | │ └── index.js
563 | └── vendor
564 | └── phaser.min.js
565 |
566 |
567 | 568 |570 |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.
569 |
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.
572 |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.
574 |575 |577 |If you add items to the game directory while the watcher is not active, you will need to "sync" the project (pnkit sync).
576 |
See Commands.
578 |The js directory is a special folder. It must reside in the game folder, and be named exactly js.
580 |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.
581 |582 |584 |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.
583 |
The index.html, index.js, and index.css all contain basic boilerplate for their particular domain.
586 |<!DOCTYPE html>
588 | <head>
589 | <meta charset="utf-8">
590 | <meta name="viewport" content="user-scalable=no, initial-scale=1">
591 |
592 | <title>Phaser Node Kit</title>
593 |
594 | <link rel="stylesheet" type="text/css" href="css/index.css">
595 |
596 | <script src="./vendor/phaser.min.js"></script>
597 | <script src="./bundle.js"></script>
598 |
599 | </head>
600 | <body><div div="game"></div></body>
601 | </html>
602 |
603 |
604 | 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.
605 |Phaser.Device.whenReady(() => {
607 | const bootState = require('./BootState')
608 | const preloadState = require('./PreloadState')
609 | const menuState = require('./MenuState')
610 | const gameState = require('./GameState')
611 |
612 | const game = new Phaser.Game(800, 600, Phaser.AUTO, 'game')
613 |
614 | game.stage.backgroundColor = 0x000000
615 |
616 | game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL
617 | game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL
618 |
619 | game.scale.setMinMax(800, 600)
620 |
621 | game.scale.pageAlignVertically = true
622 | game.scale.pageAlignHorizontally = true
623 |
624 | game.state.add('Boot', bootState)
625 | game.state.add('Preload', preloadState)
626 | game.state.add('MainMenu', menuState)
627 | game.state.add('Game', gameState)
628 |
629 | game.state.start('Boot')
630 | })
631 |
632 |
633 | 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.
634 |Here is where you also make adjustments to the initial game object configuration as well.
635 |In particular, the index.js contains:
636 |If you like your backgrounds black, and develop in an 800x600 display size, you generally don't need to touch this file.
644 |The index.css simply contains an implementation of "clean.css" for better visual compatibilty across devices. It also contains a global background color.
646 |js/BootState.js
649 |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 {
651 |
652 | preload() {
653 | this.load.image('preload', 'img/preload.png')
654 | }
655 |
656 | create() {
657 | this.input.maxPointers = 1
658 | this.state.start('Preload')
659 | }
660 |
661 | update() { }
662 | render() { }
663 | }
664 |
665 | module.exports = BootState
666 |
667 |
668 | Once the BootState is done, it will automatically launch into the next state, which is the...
669 |js/PreloadState.js
671 |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).
672 |class PreloadState {
673 |
674 | preload() {
675 | this.preloadBar = this.game.add.sprite(
676 | this.world.centerX,
677 | this.world.centerY,
678 | 'preload')
679 |
680 | this.preloadBar.anchor.set(.5)
681 |
682 | this.load.setPreloadSprite(this.preloadBar)
683 |
684 | this.load.image('logo', 'img/logo.png')
685 | this.load.image('pnlogo', 'img/pnlogo.png')
686 | }
687 |
688 | create() {
689 | this.state.start('MainMenu')
690 | }
691 |
692 | update() { }
693 | render() { }
694 | }
695 |
696 | module.exports = PreloadState
697 |
698 |
699 | As far as states are concerned, you may visit this one most often to add additional assets to your game.
700 |Once the PreloadState has run its course, it will load the MenuState.
701 |js/MenuState.js
703 |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 {
705 |
706 | preload() { }
707 |
708 | create() {
709 | let logo = this.add.image(
710 | this.world.centerX,
711 | this.world.centerY,
712 | 'logo')
713 |
714 | logo.anchor.set(.5)
715 |
716 | this.input.onTap.addOnce((pointer) => {
717 | this.state.start('Game')
718 | })
719 | }
720 |
721 | update() { }
722 | render() { }
723 | }
724 |
725 | module.exports = MenuState
726 |
727 |
728 | Do what you will to it, but make sure to point to the GameState as your final destination.
729 |js/GameState.js
731 |Ahh, finally. Now we play. The GameState is just what it sounds like. Here is where your game takes flight.
732 |class GameState {
733 |
734 | preload() { }
735 |
736 | create() {
737 | let pnlogo = this.add.image(
738 | this.world.centerX,
739 | this.world.centerY,
740 | 'pnlogo')
741 |
742 | pnlogo.anchor.set(.5)
743 | }
744 |
745 | update() { }
746 | render() { }
747 | }
748 |
749 | module.exports = GameState
750 |
751 |
752 | The game at this point is just an image (because purple whales are cute).
753 |Ready to get your game on? Check out Phaser.io for all the goodies.
755 |Here are a couple of other handy links as well:
756 | 757 | 758 | 759 | 760 | 761 | 762 | 763 | 764 | 765 | (http://www.develephant.com)",
27 | "license": "MIT",
28 | "bugs": {
29 | "url": "https://github.com/develephant/phaser-node-kit/issues"
30 | },
31 | "homepage": "https://github.com/develephant/phaser-node-kit#readme",
32 | "devDependencies": {},
33 | "dependencies": {
34 | "argparse": "^1.0.9",
35 | "browserify": "^14.1.0",
36 | "colors": "^1.1.2",
37 | "fs-extra": "^2.1.2",
38 | "light-server": "^2.0.1",
39 | "node-watch": "^0.5.2",
40 | "opn": "^5.1.0",
41 | "phaser-ce": "^2.7.7",
42 | "simple-get": "^2.4.0"
43 | },
44 | "engines": {
45 | "node": ">=6.0.0"
46 | },
47 | "directories": {
48 | "doc": "docs"
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/pnconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "ignore": [ "js" ],
3 | "watch": {
4 | "port": 5550,
5 | "host": "127.0.0.1",
6 | "refreshDelay": 500,
7 | "startBrowser": true
8 | }
9 | }
--------------------------------------------------------------------------------
/tpl/game/css/index.css:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | /* Reset */
7 | html, body, div, span, applet, object, iframe,
8 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
9 | a, abbr, acronym, address, big, cite, code,
10 | del, dfn, em, img, ins, kbd, q, s, samp,
11 | small, strike, strong, sub, sup, tt, var,
12 | b, u, i, center,
13 | dl, dt, dd, ol, ul, li,
14 | fieldset, form, label, legend,
15 | table, caption, tbody, tfoot, thead, tr, th, td,
16 | article, aside, canvas, details, embed,
17 | figure, figcaption, footer, header, hgroup,
18 | menu, nav, output, ruby, section, summary,
19 | time, mark, audio, video {
20 | margin: 0;
21 | padding: 0;
22 | border: 0;
23 | font-size: 100%;
24 | font: inherit;
25 | vertical-align: baseline;
26 | }
27 |
28 | body {
29 | background-color: #000000;
30 | }
31 |
--------------------------------------------------------------------------------
/tpl/game/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/develephant/phaser-node-kit/59450a06b14d037c2cc7382fa65a5a58e12ecb62/tpl/game/favicon.ico
--------------------------------------------------------------------------------
/tpl/game/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/develephant/phaser-node-kit/59450a06b14d037c2cc7382fa65a5a58e12ecb62/tpl/game/img/logo.png
--------------------------------------------------------------------------------
/tpl/game/img/pnlogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/develephant/phaser-node-kit/59450a06b14d037c2cc7382fa65a5a58e12ecb62/tpl/game/img/pnlogo.png
--------------------------------------------------------------------------------
/tpl/game/img/preload.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/develephant/phaser-node-kit/59450a06b14d037c2cc7382fa65a5a58e12ecb62/tpl/game/img/preload.png
--------------------------------------------------------------------------------
/tpl/game/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Phaser Node Kit
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/tpl/game/js/BootState.js:
--------------------------------------------------------------------------------
1 |
2 | class BootState {
3 |
4 | preload() {
5 | this.load.image('preload', 'img/preload.png')
6 | }
7 |
8 | create() {
9 | this.input.maxPointers = 1
10 | this.state.start('Preload')
11 | }
12 |
13 | update() { }
14 | render() { }
15 | }
16 |
17 | module.exports = BootState
18 |
--------------------------------------------------------------------------------
/tpl/game/js/GameState.js:
--------------------------------------------------------------------------------
1 |
2 | class GameState {
3 |
4 | preload() { }
5 |
6 | create() {
7 | let pnlogo = this.add.image(
8 | this.world.centerX,
9 | this.world.centerY,
10 | 'pnlogo')
11 |
12 | pnlogo.anchor.set(.5)
13 | }
14 |
15 | update() { }
16 | render() { }
17 | }
18 |
19 | module.exports = GameState
20 |
--------------------------------------------------------------------------------
/tpl/game/js/MenuState.js:
--------------------------------------------------------------------------------
1 |
2 | class MenuState {
3 |
4 | preload() { }
5 |
6 | create() {
7 | let logo = this.add.image(
8 | this.world.centerX,
9 | this.world.centerY,
10 | 'logo')
11 |
12 | logo.anchor.set(.5)
13 |
14 | this.input.onTap.addOnce((pointer) => {
15 | this.state.start('Game')
16 | })
17 | }
18 |
19 | update() { }
20 | render() { }
21 | }
22 |
23 | module.exports = MenuState
24 |
--------------------------------------------------------------------------------
/tpl/game/js/PreloadState.js:
--------------------------------------------------------------------------------
1 |
2 | class PreloadState {
3 |
4 | preload() {
5 | this.preloadBar = this.game.add.sprite(
6 | this.world.centerX,
7 | this.world.centerY,
8 | 'preload')
9 |
10 | this.preloadBar.anchor.set(.5)
11 |
12 | this.load.setPreloadSprite(this.preloadBar)
13 |
14 | this.load.image('logo', 'img/logo.png')
15 | this.load.image('pnlogo', 'img/pnlogo.png')
16 | }
17 |
18 | create() {
19 | this.state.start('MainMenu')
20 | }
21 |
22 | update() { }
23 | render() { }
24 | }
25 |
26 | module.exports = PreloadState
27 |
--------------------------------------------------------------------------------
/tpl/game/js/index.js:
--------------------------------------------------------------------------------
1 | // PHASER IS IMPORTED AS AN EXTERNAL BUNDLE IN INDEX.HTML
2 |
3 | Phaser.Device.whenReady(() => {
4 | const bootState = require('./BootState')
5 | const preloadState = require('./PreloadState')
6 | const menuState = require('./MenuState')
7 | const gameState = require('./GameState')
8 |
9 | const game = new Phaser.Game(800, 600, Phaser.AUTO, 'game')
10 |
11 | game.stage.backgroundColor = 0x000000
12 |
13 | game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL
14 | game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL
15 |
16 | game.scale.setMinMax(800, 600)
17 |
18 | game.scale.pageAlignVertically = true
19 | game.scale.pageAlignHorizontally = true
20 |
21 | game.state.add('Boot', bootState)
22 | game.state.add('Preload', preloadState)
23 | game.state.add('MainMenu', menuState)
24 | game.state.add('Game', gameState)
25 |
26 | game.state.start('Boot')
27 | })
28 |
--------------------------------------------------------------------------------
/tpl/pnkit.json:
--------------------------------------------------------------------------------
1 | {
2 | "ignore": [ ".DS_Store" ],
3 | "watch": {
4 | "port": 5550,
5 | "host": "127.0.0.1",
6 | "refresh": true,
7 | "startBrowser": true
8 | },
9 | "debug": true
10 | }
--------------------------------------------------------------------------------