├── .babelrc ├── .gitignore ├── README.md ├── assets └── phaser3-logo.png ├── package-lock.json ├── package.json ├── src ├── config.js ├── index.html ├── index.js └── scenes │ └── Game.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env" 4 | ] 5 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules/ 3 | 4 | # build 5 | dist/ 6 | 7 | # misc 8 | .DS_Store 9 | .env/ 10 | .cache/ 11 | .vscode/ 12 | .idea 13 | 14 | # Logs 15 | *.log 16 | npm-debug.log* -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Phaser 3 + ES6 + Webpack Boilerplate 2 | A boilerplate project for creating games with Phaser3, ES6 and Webpack. 3 | 4 | ## Setup 5 | 6 | ### Environment 7 | Requires node.js and npm to be installed: https://nodejs.org/en/ 8 | 9 | ### Download repo 10 | From your workspace directory run: 11 | 12 | `git clone https://github.com/jedhastwell/phaser3-es6-webpack-boilerplate.git` 13 | 14 | ### Install Dependencies 15 | From the project directory run: 16 | 17 | `npm install` 18 | 19 | ## Usage 20 | 21 | ### Development Server 22 | Starts a development server that will automatically refresh the page as you make changes. Once started, navigate to http://localhost:8080 in your browser. 23 | 24 | To start the server run: 25 | 26 | `npm run start` 27 | 28 | ### Distribution 29 | Bundles and minimises scripts and outputs them along with a copy of the assets/ folder to output directory dist/. 30 | 31 | To build for distribution run: 32 | 33 | `npm run build` -------------------------------------------------------------------------------- /assets/phaser3-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jedhastwell/phaser3-es6-webpack-boilerplate/0779d42bbb0a2fe3da73f9fade30c1bab097d5fd/assets/phaser3-logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "phaser3-es6-webpack-boilerplate", 3 | "version": "1.0.0", 4 | "description": "A boilerplate project for creating games with Phaser3, ES6 and Webpack", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack-dev-server --mode development", 8 | "build": "webpack --mode production", 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "author": "Jed Hastwell", 12 | "repository": "https://github.com/jedhastwell/phaser3-es6-webpack-boilerplate", 13 | "license": "MIT", 14 | "devDependencies": { 15 | "@babel/core": "^7.11.6", 16 | "@babel/preset-env": "^7.11.5", 17 | "babel-loader": "^8.1.0", 18 | "clean-webpack-plugin": "^2.0.2", 19 | "copy-webpack-plugin": "^5.1.2", 20 | "html-loader": "^0.5.5", 21 | "html-webpack-plugin": "^3.2.0", 22 | "raw-loader": "^2.0.0", 23 | "webpack": "^4.44.2", 24 | "webpack-cli": "^3.3.12", 25 | "webpack-dev-server": "^3.11.0" 26 | }, 27 | "dependencies": { 28 | "phaser": "^3.24.1" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/config.js: -------------------------------------------------------------------------------- 1 | import Phaser from 'phaser'; 2 | 3 | export default { 4 | type: Phaser.AUTO, 5 | parent: 'game', 6 | backgroundColor: '#33A5E7', 7 | scale: { 8 | width: 800, 9 | height: 600, 10 | mode: Phaser.Scale.FIT, 11 | autoCenter: Phaser.Scale.CENTER_BOTH, 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Phaser Game 7 | 8 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Phaser from 'phaser'; 2 | import config from './config'; 3 | import GameScene from './scenes/Game'; 4 | 5 | new Phaser.Game(Object.assign(config, { 6 | scene: [GameScene], 7 | })); 8 | -------------------------------------------------------------------------------- /src/scenes/Game.js: -------------------------------------------------------------------------------- 1 | import Phaser from 'phaser'; 2 | 3 | class Game extends Phaser.Scene { 4 | constructor() { 5 | super({ key: 'GameScene' }); 6 | } 7 | 8 | init(data) {} 9 | 10 | preload() { 11 | this.load.image('logo', 'assets/phaser3-logo.png'); 12 | } 13 | 14 | create(data) { 15 | this.add.image(400, 300, 'logo'); 16 | } 17 | 18 | update(time, delta) {} 19 | } 20 | 21 | export default Game; -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const HtmlWebPackPlugin = require('html-webpack-plugin'); 4 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 5 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 6 | 7 | module.exports = (env, argv) => ({ 8 | entry: { 9 | app: path.resolve(__dirname, './src/index.js'), 10 | vendor: ['phaser'], 11 | }, 12 | devtool: argv.mode === 'development' ? 'cheap-module-eval-source-map' : 'none', 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.js$/, 17 | exclude: /node_modules/, 18 | use: 'babel-loader', 19 | }, 20 | { 21 | test: /\.html$/, 22 | use: { 23 | loader: 'html-loader', 24 | options: { 25 | minimize: argv.mode === 'production', 26 | }, 27 | }, 28 | }, 29 | { 30 | test: [/\.vert$/, /\.frag$/], 31 | use: 'raw-loader', 32 | }, 33 | ], 34 | }, 35 | plugins: [ 36 | new webpack.DefinePlugin({ 37 | DEV: argv.mode === 'development', 38 | WEBGL_RENDERER: true, 39 | CANVAS_RENDERER: true, 40 | }), 41 | new CleanWebpackPlugin(), 42 | new CopyWebpackPlugin([ 43 | { from: 'assets', to: 'assets' }, 44 | ]), 45 | new HtmlWebPackPlugin({ 46 | template: './src/index.html', 47 | filename: './index.html', 48 | chunks: ['vendor', 'app'], 49 | chunksSortMode: 'manual', 50 | }), 51 | ], 52 | optimization: { 53 | splitChunks: { 54 | name: 'vendor', 55 | chunks: 'all', 56 | }, 57 | }, 58 | }); 59 | --------------------------------------------------------------------------------