├── .eslintrc.json ├── .gitignore ├── README.md ├── build └── webpack.config.js ├── package.json ├── postcss.config.js ├── server.js └── src ├── AssetManifest.js ├── assets ├── css │ ├── general.css │ └── index.css ├── images │ ├── bg.png │ ├── bg@2x.png │ └── bg@3x.png └── sprites │ ├── textures.json │ ├── textures.png │ ├── textures.pvrtc.json │ ├── textures.pvrtc.pvr │ ├── textures.s3tc.json │ ├── textures.s3tc.pvr │ ├── textures@2x.json │ ├── textures@2x.png │ ├── textures@2x.pvrtc.json │ ├── textures@2x.pvrtc.pvr │ ├── textures@3x.json │ └── textures@3x.png ├── index.js ├── index.template.html ├── objects └── Player.js ├── server └── index.js └── states ├── Boot.js ├── Main.js └── Preload.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["html", "jsdoc"], 3 | "env": { 4 | "browser": true, 5 | "node": true 6 | }, 7 | "globals": { 8 | "Phaser": true 9 | }, 10 | "extends": "airbnb-base", 11 | "rules": { 12 | "import/no-extraneous-dependencies": ["warn", { 13 | "devDependencies": true 14 | }], 15 | "complexity": ["warn", 20], 16 | "curly": ["warn", "all"], 17 | "dot-location": ["warn", "property"], 18 | "dot-notation": "warn", 19 | "eqeqeq": ["warn", "always"], 20 | "no-multi-spaces": "warn", 21 | "array-bracket-spacing": ["error", "never"], 22 | "block-spacing": ["error", "always"], 23 | "brace-style": ["error", "1tbs"], 24 | "camelcase": ["warn", {"properties": "always"}], 25 | "comma-spacing": ["warn", {"after": true}], 26 | "comma-style": ["warn", "last"], 27 | "computed-property-spacing": ["warn", "never"], 28 | "consistent-this": ["error", "self"], 29 | "func-call-spacing": ["error", "never"], 30 | "keyword-spacing": ["warn", {"after": true}], 31 | "max-depth": ["warn", {"max": 4}], 32 | "max-len": ["warn", { 33 | "code": 100, 34 | "ignoreTrailingComments": true, 35 | "ignoreUrls": true 36 | }], 37 | "max-nested-callbacks": ["warn", {"max": 5}], 38 | "no-multiple-empty-lines": ["warn", {"max": 2}], 39 | "no-trailing-spaces": ["error", {"skipBlankLines": false}], 40 | "no-unneeded-ternary": ["warn", {"defaultAssignment": true}], 41 | "no-whitespace-before-property": "error", 42 | "object-curly-spacing": ["warn", "never"], 43 | "require-jsdoc": ["error", { 44 | "require": { 45 | "FunctionDeclaration": true, 46 | "MethodDefinition": true, 47 | "ClassDeclaration": true 48 | } 49 | }], 50 | "spaced-comment": ["error", "always", { 51 | "line": { 52 | "markers": ["/"], 53 | "exceptions": ["-", "+"] 54 | }, 55 | "block": { 56 | "markers": ["!"], 57 | "exceptions": ["*"], 58 | "balanced": true 59 | } 60 | }], 61 | "semi-spacing": ["error", {"before": false, "after": true}], 62 | "space-before-function-paren": ["error", "never"], 63 | "space-in-parens": ["error", "never"], 64 | "no-param-reassign": 0, 65 | "jsdoc/check-param-names": 1, 66 | "jsdoc/check-tag-names": 1, 67 | "jsdoc/newline-after-description": ["warn", "never"], 68 | "jsdoc/require-description-complete-sentence": 1, 69 | "jsdoc/require-param": 1, 70 | "jsdoc/require-param-type": 1, 71 | "jsdoc/require-returns-type": 1, 72 | "no-underscore-dangle": 0, 73 | "arrow-body-style": 0 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Phaser ES6 Boilerplate 2 | 3 | This is an ES6-based boilerplate for creating a multiplayer game using Phaser and Webpack. It is very opinionated as it strips out various unneeded components from Phaser and uses howler.js rather than Phaser Audio. 4 | 5 | The purpose of this repo is to be a starting point for creating a game. The idea is to copy the contents and then modify from there. Look at the usage below for instructions on how it all works. 6 | 7 | ## Features 8 | * [Phaser-CE](https://github.com/photonstorm/phaser-ce) through npm (automatic custom build). 9 | * Boilerplate written in ES6 class structure. 10 | * Heavily commented and stripped down for most minimal build. 11 | * [Webpack](https://webpack.js.org/) + [Bublé](https://buble.surge.sh/guide/) + [PostCSS](http://postcss.org/). 12 | * [BrowserSync](https://browsersync.io/) for livereload during development. 13 | * [Stats.js](https://github.com/mrdoob/stats.js/) for displaying FPS/MS. 14 | * [phaser-manifest-loader](https://github.com/mattcolman/phaser-manifest-loader) for easy asset loading. 15 | * Separate builds for production and development. 16 | 17 | ## Usage 18 | 19 | Clone the git repo. 20 | 21 | `git@github.com:goldfire/phaser-boilerplate.git` 22 | 23 | Install the dependencies. 24 | 25 | `npm i` 26 | 27 | Start the development web server. 28 | 29 | `npm run dev` 30 | 31 | Access your project in the browser. 32 | 33 | `locahost:7777` 34 | 35 | Then start building your game! -------------------------------------------------------------------------------- /build/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const HTMLPlugin = require('html-webpack-plugin'); 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 5 | const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); 6 | 7 | // Add support for Phaser webpack build. 8 | const phaserModule = path.join(__dirname, '../node_modules/phaser-ce/dist/'); 9 | const phaser = path.join(phaserModule, 'phaser.js'); 10 | const pixi = path.join(phaserModule, 'pixi.js'); 11 | 12 | // Determine if this is a production build or not. 13 | const isProd = process.env.NODE_ENV === 'production'; 14 | 15 | // Define the Webpack config. 16 | const config = { 17 | devtool: isProd ? false : '#source-map', 18 | watch: !isProd, 19 | performance: { 20 | hints: false, 21 | }, 22 | entry: { 23 | app: [ 24 | './src/index.js', 25 | ], 26 | vendor: [ 27 | 'pixi', 28 | 'phaser', 29 | 'howler', 30 | 'webfontloader', 31 | ], 32 | }, 33 | output: { 34 | path: path.resolve(__dirname, '../dist'), 35 | publicPath: '/dist/', 36 | filename: '[name].js?[chunkhash]', 37 | }, 38 | resolve: { 39 | alias: { 40 | phaser, 41 | pixi, 42 | assets: path.join(__dirname, '../src/assets'), 43 | }, 44 | }, 45 | node: { 46 | fs: 'empty', 47 | net: 'empty', 48 | tls: 'empty', 49 | }, 50 | module: { 51 | rules: [ 52 | { 53 | test: /\.js$/, 54 | loader: 'buble-loader', 55 | exclude: /node_modules\/(?!phaser-webpack-loader)/, 56 | options: { 57 | objectAssign: 'Object.assign', 58 | }, 59 | }, 60 | { 61 | test: /pixi\.js/, 62 | use: ['expose-loader?PIXI'], 63 | }, 64 | { 65 | test: /phaser\.js$/, 66 | use: ['expose-loader?Phaser'], 67 | }, 68 | { 69 | test: /\.(png|jpg|gif|svg|pvr|pkm)$/, 70 | use: ['file-loader?name=assets/[name].[ext]?[hash]'], 71 | }, 72 | { 73 | test: /\.css$/, 74 | use: ExtractTextPlugin.extract({ 75 | use: 'css-loader!postcss-loader', 76 | }), 77 | }, 78 | ], 79 | }, 80 | plugins: [ 81 | // Use hoisting. 82 | new webpack.optimize.ModuleConcatenationPlugin(), 83 | // Pass environment variables to bundle. 84 | new webpack.DefinePlugin({ 85 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'), 86 | }), 87 | // Extract vendor chunks for better caching. 88 | new webpack.optimize.CommonsChunkPlugin({ 89 | name: 'vendor', 90 | }), 91 | // Extract the CSS file. 92 | new ExtractTextPlugin('styles.css?[contenthash]'), 93 | // Generate output HTML. 94 | new HTMLPlugin({ 95 | template: './src/index.template.html', 96 | }), 97 | ], 98 | }; 99 | 100 | // Define production-only plugins. 101 | if (isProd) { 102 | // Run the bundle through Uglify. 103 | config.plugins.push(new webpack.LoaderOptionsPlugin({ 104 | minimize: true, 105 | })); 106 | config.plugins.push(new webpack.optimize.UglifyJsPlugin({ 107 | compress: { 108 | screw_ie8: true, 109 | warnings: false, 110 | }, 111 | })); 112 | } 113 | 114 | // Define development-only plugins. 115 | if (!isProd) { 116 | // Setup live-reloading in the browser with BrowserSync. 117 | config.plugins.push(new BrowserSyncPlugin({ 118 | host: 'localhost', 119 | port: 7777, 120 | server: { 121 | baseDir: ['./', './dist'], 122 | }, 123 | })); 124 | } 125 | 126 | module.exports = config; 127 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "phaser-boilerplate", 3 | "version": "0.0.1", 4 | "author": "GoldFire Studios, Inc. (http://goldfirestudios.com)", 5 | "description": "Phaser.js Game Boilerplate", 6 | "contributors": [ 7 | { 8 | "name": "James Simpson", 9 | "email": "james@goldfirestudios.com" 10 | } 11 | ], 12 | "private": true, 13 | "scripts": { 14 | "dev": "rimraf dist && run-s dev:**", 15 | "dev:server": "cross-env NODE_ENV=development PORT=7788 node server", 16 | "dev:phaser": "cd node_modules/phaser-ce && npm i && grunt custom --exclude=bitmaptext,retrofont,net,sound,ninja,p2,creature,video --split true", 17 | "dev:serve": "webpack --config build/webpack.config.js --progress --hide-modules", 18 | "build": "run-s build:**", 19 | "build:phaser": "cd node_modules/phaser-ce && npm i && grunt custom --exclude=bitmaptext,retrofont,net,sound,ninja,p2,creature,video --split true", 20 | "build:webpack": "rimraf dist && cross-env NODE_ENV=production webpack --config build/webpack.config.js --progress --hide-modules" 21 | }, 22 | "dependencies": { 23 | "phaser-ce": "2.9.3", 24 | "phaser-webpack-loader": "1.0.2", 25 | "winston": "2.4.0", 26 | "howler": "2.0.7", 27 | "stats.js": "0.17.0", 28 | "lodash.throttle": "^4.1.1", 29 | "core-js": "2.5.3" 30 | }, 31 | "devDependencies": { 32 | "eslint": "4.8.0", 33 | "eslint-config-airbnb-base": "12.0.1", 34 | "eslint-plugin-import": "2.8.0", 35 | "eslint-plugin-html": "3.2.2", 36 | "eslint-plugin-jsdoc": "3.1.3", 37 | "webpack": "3.6.0", 38 | "html-webpack-plugin": "2.30.1", 39 | "browser-sync": "2.19.0", 40 | "browser-sync-webpack-plugin": "1.2.0", 41 | "buble": "0.16.0", 42 | "buble-loader": "0.4.1", 43 | "file-loader": "1.1.6", 44 | "url-loader": "0.6.2", 45 | "expose-loader": "0.7.4", 46 | "extract-text-webpack-plugin": "3.0.1", 47 | "css-loader": "0.28.7", 48 | "postcss-loader": "2.0.9", 49 | "postcss-css-variables": "0.8.0", 50 | "postcss-import": "11.0.0", 51 | "autoprefixer": "7.1.4", 52 | "cross-env": "5.1.1", 53 | "rimraf": "2.6.2", 54 | "npm-run-all": "4.1.2" 55 | }, 56 | "engines": { 57 | "node": ">=6.0.0" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'postcss-import': {}, 4 | 'postcss-css-variables': {}, 5 | autoprefixer: {}, 6 | cssnano: { 7 | zindex: false, 8 | }, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | const os = require('os'); 2 | const log = require('winston'); // error, warn, info, verbose, debug, silly 3 | 4 | // Setup the environment. 5 | const env = process.env.NODE_ENV; 6 | const port = process.env.PORT; 7 | const host = `${os.hostname()}:${port}`; 8 | log.remove(log.transports.Console); 9 | log.add(log.transports.Console, {colorize: true, timestamp: true}); 10 | 11 | // Game server code goes here.... 12 | 13 | // Log that the game server has started. 14 | log.info(`Game server started at ${host} [${env}].`); 15 | -------------------------------------------------------------------------------- /src/AssetManifest.js: -------------------------------------------------------------------------------- 1 | const AssetManifest = { 2 | sprites: [ 3 | 'textures.png', 4 | ], 5 | images: [ 6 | 'bg.png', 7 | ], 8 | fonts: { 9 | google: { 10 | families: [ 11 | 'Open Sans:300,700', 12 | ], 13 | }, 14 | }, 15 | }; 16 | 17 | export default AssetManifest; 18 | -------------------------------------------------------------------------------- /src/assets/css/general.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | width: 100%; 3 | height: 100%; 4 | margin: 0; 5 | padding: 0; 6 | } -------------------------------------------------------------------------------- /src/assets/css/index.css: -------------------------------------------------------------------------------- 1 | @import 'general.css'; -------------------------------------------------------------------------------- /src/assets/images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goldfire/phaser-boilerplate/ee9f8dc547ce133e613d392c998ae5fd0b0aa9e1/src/assets/images/bg.png -------------------------------------------------------------------------------- /src/assets/images/bg@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goldfire/phaser-boilerplate/ee9f8dc547ce133e613d392c998ae5fd0b0aa9e1/src/assets/images/bg@2x.png -------------------------------------------------------------------------------- /src/assets/images/bg@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goldfire/phaser-boilerplate/ee9f8dc547ce133e613d392c998ae5fd0b0aa9e1/src/assets/images/bg@3x.png -------------------------------------------------------------------------------- /src/assets/sprites/textures.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "rock": 4 | { 5 | "frame": {"x":0,"y":0,"w":72,"h":62}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":62}, 9 | "sourceSize": {"w":72,"h":62}, 10 | "pivot": {"x":0.5,"y":0.5} 11 | }, 12 | "ship": 13 | { 14 | "frame": {"x":74,"y":0,"w":102,"h":60}, 15 | "rotated": false, 16 | "trimmed": false, 17 | "spriteSourceSize": {"x":0,"y":0,"w":102,"h":60}, 18 | "sourceSize": {"w":102,"h":60}, 19 | "pivot": {"x":0.5,"y":0.5} 20 | }}, 21 | "meta": { 22 | "app": "http://www.codeandweb.com/texturepacker", 23 | "version": "1.0", 24 | "image": "textures.png", 25 | "format": "RGBA8888", 26 | "size": {"w":176,"h":62}, 27 | "scale": "1", 28 | "smartupdate": "$TexturePacker:SmartUpdate:421bec2cb6c9cc2fdff4eee79425407e:1b631fa02e3b694c2cbea1b23cecb252:cf827d152df04949dfee256cd0c8efd8$" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/assets/sprites/textures.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goldfire/phaser-boilerplate/ee9f8dc547ce133e613d392c998ae5fd0b0aa9e1/src/assets/sprites/textures.png -------------------------------------------------------------------------------- /src/assets/sprites/textures.pvrtc.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "rock": 4 | { 5 | "frame": {"x":0,"y":62,"w":72,"h":62}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":62}, 9 | "sourceSize": {"w":72,"h":62}, 10 | "pivot": {"x":0.5,"y":0.5} 11 | }, 12 | "ship": 13 | { 14 | "frame": {"x":0,"y":0,"w":102,"h":60}, 15 | "rotated": false, 16 | "trimmed": false, 17 | "spriteSourceSize": {"x":0,"y":0,"w":102,"h":60}, 18 | "sourceSize": {"w":102,"h":60}, 19 | "pivot": {"x":0.5,"y":0.5} 20 | }}, 21 | "meta": { 22 | "app": "http://www.codeandweb.com/texturepacker", 23 | "version": "1.0", 24 | "image": "textures.pvr.pvr", 25 | "format": "PVRTCI_2BPP_RGBA", 26 | "size": {"w":128,"h":128}, 27 | "scale": "1", 28 | "smartupdate": "$TexturePacker:SmartUpdate:b9f260de0154a2c08e1872576cdffd92:1b631fa02e3b694c2cbea1b23cecb252:890b12fdaf39594956f44dd320e02c5e$" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/assets/sprites/textures.pvrtc.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goldfire/phaser-boilerplate/ee9f8dc547ce133e613d392c998ae5fd0b0aa9e1/src/assets/sprites/textures.pvrtc.pvr -------------------------------------------------------------------------------- /src/assets/sprites/textures.s3tc.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "rock": 4 | { 5 | "frame": {"x":0,"y":62,"w":72,"h":62}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":62}, 9 | "sourceSize": {"w":72,"h":62}, 10 | "pivot": {"x":0.5,"y":0.5} 11 | }, 12 | "ship": 13 | { 14 | "frame": {"x":0,"y":0,"w":102,"h":60}, 15 | "rotated": false, 16 | "trimmed": false, 17 | "spriteSourceSize": {"x":0,"y":0,"w":102,"h":60}, 18 | "sourceSize": {"w":102,"h":60}, 19 | "pivot": {"x":0.5,"y":0.5} 20 | }}, 21 | "meta": { 22 | "app": "http://www.codeandweb.com/texturepacker", 23 | "version": "1.0", 24 | "image": "textures.pvr", 25 | "format": "DXT5", 26 | "size": {"w":128,"h":128}, 27 | "scale": "1", 28 | "smartupdate": "$TexturePacker:SmartUpdate:c40db90a118031d60f821c5b3dfa5630:1b631fa02e3b694c2cbea1b23cecb252:d404d9e6bf699b4665d9922e58d6f18c$" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/assets/sprites/textures.s3tc.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goldfire/phaser-boilerplate/ee9f8dc547ce133e613d392c998ae5fd0b0aa9e1/src/assets/sprites/textures.s3tc.pvr -------------------------------------------------------------------------------- /src/assets/sprites/textures@2x.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "rock": 4 | { 5 | "frame": {"x":0,"y":0,"w":144,"h":124}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":144,"h":124}, 9 | "sourceSize": {"w":144,"h":124}, 10 | "pivot": {"x":0.5,"y":0.5} 11 | }, 12 | "ship": 13 | { 14 | "frame": {"x":146,"y":0,"w":204,"h":120}, 15 | "rotated": false, 16 | "trimmed": false, 17 | "spriteSourceSize": {"x":0,"y":0,"w":204,"h":120}, 18 | "sourceSize": {"w":204,"h":120}, 19 | "pivot": {"x":0.5,"y":0.5} 20 | }}, 21 | "meta": { 22 | "app": "http://www.codeandweb.com/texturepacker", 23 | "version": "1.0", 24 | "image": "textures@2x.png", 25 | "format": "RGBA8888", 26 | "size": {"w":350,"h":124}, 27 | "scale": "1", 28 | "smartupdate": "$TexturePacker:SmartUpdate:9b5362c20110444a020f281ebd8ad020:e907e53a120ba93696b48b2fe39ef256:fee305e5cd3e8f1ae5bc1f7704e25222$" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/assets/sprites/textures@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goldfire/phaser-boilerplate/ee9f8dc547ce133e613d392c998ae5fd0b0aa9e1/src/assets/sprites/textures@2x.png -------------------------------------------------------------------------------- /src/assets/sprites/textures@2x.pvrtc.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "rock": 4 | { 5 | "frame": {"x":0,"y":122,"w":144,"h":124}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":144,"h":124}, 9 | "sourceSize": {"w":144,"h":124}, 10 | "pivot": {"x":0.5,"y":0.5} 11 | }, 12 | "ship": 13 | { 14 | "frame": {"x":0,"y":0,"w":204,"h":120}, 15 | "rotated": false, 16 | "trimmed": false, 17 | "spriteSourceSize": {"x":0,"y":0,"w":204,"h":120}, 18 | "sourceSize": {"w":204,"h":120}, 19 | "pivot": {"x":0.5,"y":0.5} 20 | }}, 21 | "meta": { 22 | "app": "http://www.codeandweb.com/texturepacker", 23 | "version": "1.0", 24 | "image": "textures@2x.pvrtc.pvr", 25 | "format": "PVRTCI_2BPP_RGBA", 26 | "size": {"w":256,"h":256}, 27 | "scale": "1", 28 | "smartupdate": "$TexturePacker:SmartUpdate:9cac78d8137708c21fad68976640cb29:e907e53a120ba93696b48b2fe39ef256:10d4073d44655bd39e693734088446f4$" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/assets/sprites/textures@2x.pvrtc.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goldfire/phaser-boilerplate/ee9f8dc547ce133e613d392c998ae5fd0b0aa9e1/src/assets/sprites/textures@2x.pvrtc.pvr -------------------------------------------------------------------------------- /src/assets/sprites/textures@3x.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "rock": 4 | { 5 | "frame": {"x":0,"y":0,"w":216,"h":186}, 6 | "rotated": true, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":216,"h":186}, 9 | "sourceSize": {"w":216,"h":186}, 10 | "pivot": {"x":0.5,"y":0.5} 11 | }, 12 | "ship": 13 | { 14 | "frame": {"x":188,"y":0,"w":306,"h":180}, 15 | "rotated": false, 16 | "trimmed": false, 17 | "spriteSourceSize": {"x":0,"y":0,"w":306,"h":180}, 18 | "sourceSize": {"w":306,"h":180}, 19 | "pivot": {"x":0.5,"y":0.5} 20 | }}, 21 | "meta": { 22 | "app": "http://www.codeandweb.com/texturepacker", 23 | "version": "1.0", 24 | "image": "textures@3x.png", 25 | "format": "RGBA8888", 26 | "size": {"w":494,"h":216}, 27 | "scale": "1", 28 | "smartupdate": "$TexturePacker:SmartUpdate:dffaf34c299b4543b3be0f30af8984bb:5d119235e6b211736d6994fda80e497b:3643cd71dc549a51bf7e221ad2e3de50$" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/assets/sprites/textures@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goldfire/phaser-boilerplate/ee9f8dc547ce133e613d392c998ae5fd0b0aa9e1/src/assets/sprites/textures@3x.png -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import 'core-js/shim'; 2 | import {Howl, Howler} from 'howler'; 3 | import Stats from 'stats.js'; 4 | import Boot from './states/Boot'; 5 | import Preload from './states/Preload'; 6 | import Main from './states/Main'; 7 | import './assets/css/index.css'; 8 | 9 | /** 10 | * Setup the root class for the whole game. 11 | */ 12 | class Game extends Phaser.Game { 13 | /** 14 | * Initialize the game before preloading assets. 15 | */ 16 | constructor() { 17 | // Round the pixel ratio to the nearest whole number so everything scales correctly. 18 | const dpr = Math.round(window.devicePixelRatio); 19 | 20 | // Setup the game's stage. 21 | super({ 22 | width: window.innerWidth * dpr, 23 | height: window.innerHeight * dpr, 24 | renderer: Phaser.WEBGL_MULTI, 25 | antialias: true, 26 | multiTexture: true, 27 | enableDebug: process.env.NODE_ENV === 'development', 28 | }); 29 | 30 | // Setup the different game states. 31 | this.state.add('Boot', Boot, false); 32 | this.state.add('Preload', Preload, false); 33 | this.state.add('Main', Main, false); 34 | 35 | // Kick things off with the boot state. 36 | this.state.start('Boot'); 37 | 38 | // Handle debug mode. 39 | if (process.env.NODE_ENV === 'development') { 40 | this.setupStats(); 41 | } 42 | 43 | // Expose the game on the window if in dev/test. 44 | if (process.env.NODE_ENV !== 'production') { 45 | window.game = this; 46 | } 47 | } 48 | 49 | /** 50 | * Display the FPS and MS using Stats.js. 51 | */ 52 | setupStats() { 53 | // Setup the new stats panel. 54 | const stats = new Stats(); 55 | document.body.appendChild(stats.dom); 56 | 57 | // Monkey-patch the update loop so we can track the timing. 58 | const updateLoop = this.update; 59 | this.update = (...args) => { 60 | stats.begin(); 61 | updateLoop.apply(this, args); 62 | stats.end(); 63 | }; 64 | } 65 | } 66 | 67 | new Game(); 68 | -------------------------------------------------------------------------------- /src/index.template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Phaser.js Game Boilerplate 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/objects/Player.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Setup and control base player. 3 | */ 4 | export default class Player extends Phaser.Sprite { 5 | constructor({game, x, y, key, frame}) { 6 | super(game, x, y, key, frame); 7 | 8 | // Add the sprite to the game. 9 | this.game.add.existing(this); 10 | this.anchor.setTo(0.5); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/server/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goldfire/phaser-boilerplate/ee9f8dc547ce133e613d392c998ae5fd0b0aa9e1/src/server/index.js -------------------------------------------------------------------------------- /src/states/Boot.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Setup the pre-game boot sequence. 3 | */ 4 | export default class Boot extends Phaser.State { 5 | /** 6 | * Preload any assets needed for the preload state. 7 | */ 8 | preload() { 9 | 10 | } 11 | 12 | /** 13 | * Setup anything that is needed before the preload state begins. 14 | */ 15 | create() { 16 | // Scale the game to fill the entire page. 17 | this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; 18 | 19 | // Don't pause the game on blur. 20 | this.game.stage.disableVisibilityChange = true; 21 | 22 | // Disable clearing the canvas on each tick (usually not needed). 23 | this.game.clearBeforeRender = false; 24 | 25 | // Disable right click. 26 | this.game.canvas.oncontextmenu = e => e.preventDefault(); 27 | 28 | // Move on to the preload state. 29 | this.game.state.start('Preload'); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/states/Main.js: -------------------------------------------------------------------------------- 1 | import throttle from 'lodash.throttle'; 2 | import Player from '../objects/Player'; 3 | 4 | /** 5 | * Setup and display the main game state. 6 | */ 7 | export default class Main extends Phaser.State { 8 | /** 9 | * Setup all objects, etc needed for the main game state. 10 | */ 11 | create() { 12 | // Enable arcade physics. 13 | this.game.physics.startSystem(Phaser.Physics.ARCADE); 14 | 15 | // Add background tile. 16 | this.game.add.tileSprite(-5000, -5000, 10000, 10000, 'bg'); 17 | 18 | // Add a player to the game. 19 | this.player = new Player({ 20 | game: this.game, 21 | x: this.game.world.centerX, 22 | y: this.game.world.centerY, 23 | key: 'textures', 24 | frame: 'ship', 25 | }); 26 | 27 | // ... 28 | 29 | // Setup listener for window resize. 30 | window.addEventListener('resize', throttle(this.resize.bind(this), 50), false); 31 | } 32 | 33 | /** 34 | * Resize the game to fit the window. 35 | */ 36 | resize() { 37 | const width = window.innerWidth * window.devicePixelRatio; 38 | const height = window.innerHeight * window.devicePixelRatio; 39 | 40 | this.scale.setGameSize(width, height); 41 | } 42 | 43 | /** 44 | * Handle actions in the main game loop. 45 | */ 46 | update() { 47 | 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/states/Preload.js: -------------------------------------------------------------------------------- 1 | import WebpackLoader from 'phaser-webpack-loader'; 2 | import AssetManifest from '../AssetManifest'; 3 | 4 | /** 5 | * Preload the game and display the loading screen. 6 | */ 7 | export default class Preload extends Phaser.State { 8 | /** 9 | * Once loading is complete, switch to the main state. 10 | */ 11 | create() { 12 | // Determine which postfix to use on the assets based on the DPI. 13 | let postfix = ''; 14 | if (window.devicePixelRatio >= 3) { 15 | postfix = '@3x'; 16 | } else if (window.devicePixelRatio > 1) { 17 | postfix = '@2x'; 18 | } 19 | 20 | // Fix CORS issues with the loader and allow for unlimited parallel downloads. 21 | this.game.load.crossOrigin = 'anonymous'; 22 | this.game.load.maxParallelDownloads = Infinity; 23 | 24 | // Begin loading all of the assets. 25 | this.game.plugins.add(WebpackLoader, AssetManifest, postfix) 26 | .load() 27 | .then(() => { 28 | this.game.state.start('Main'); 29 | }); 30 | } 31 | 32 | /** 33 | * Update the loading display with the progress. 34 | */ 35 | update() { 36 | 37 | } 38 | } 39 | --------------------------------------------------------------------------------