├── .gitignore ├── README.md ├── assets └── cokecan.png ├── index.html ├── package.json ├── src ├── index.js └── scenes │ └── simple-scene.js └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | build/ 2 | node_modules/ 3 | 4 | yarn.lock 5 | 6 | yarn-error.log 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Development set up for Phaser 3, Webpack, and ES6. 2 | 3 | This is the final version of the project we create in https://snowbillr.github.io/blog/2018-04-09-a-modern-web-development-setup-for-phaser-3/. 4 | 5 | For a guide on the concepts included in this project and how to build it from scratch, take a look at [the blog post](https://snowbillr.github.io/blog/2018-04-09-a-modern-web-development-setup-for-phaser-3/). 6 | 7 | ## Using This Project 8 | 9 | 1. Make a directory somewhere in your file system where you want to keep your project. 10 | 1. `cd` into that directory from the command line. 11 | 1. Clone this project with `git clone https://github.com/snowbillr/phaser3-webpack-es6-dev-starter.git`. 12 | 13 | ## Installing Dependencies 14 | 15 | 1. Follow the blog post for instructions on how to install [Yarn](https://yarnpkg.com/en/) if you don't already have it installed. 16 | 1. From the cloned project's directory, run `yarn install`. 17 | 18 | ## Running The Project 19 | 20 | Once you've installed the project's dependencies, you can run the project using [Webpack Dev Server](https://github.com/webpack/webpack-dev-server). 21 | 22 | 1. From your project's directory, run `yarn webpack-dev-server`. 23 | 1. Open up your browser to `http://localhost:8080`. 24 | 1. You should see a web page with a black box that says "Hello Phaser!" in green text. That's our game! 25 | 1. :tada: 26 | 27 | Because you are running the project through Webpack Dev Server, any time you make a change to your source code, the browser will automatically refresh with your updated code. 28 | -------------------------------------------------------------------------------- /assets/cokecan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snowbillr/phaser3-webpack-es6-dev-starter/afe17536b8f262893ad745ec7841e00cebd720ec/assets/cokecan.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "phaser3-webpack-es6-dev-starter", 3 | "version": "1.0.0", 4 | "description": "A project starter for developing Phaser 3 games using Webpack and ES6.", 5 | "repository": "https://www.github.com/snowbillr/phaser3-webpack-es6-dev-starter", 6 | "author": "Bill Reed", 7 | "license": "MIT", 8 | "private": true, 9 | "devDependencies": { 10 | "babel-core": "6", 11 | "babel-loader": "^7.0.0", 12 | "babel-preset-env": "^1.0.0", 13 | "copy-webpack-plugin": "^4.5.1", 14 | "raw-loader": "^0.5.1", 15 | "webpack": "^3.0.0", 16 | "webpack-dev-server": "^2.0.0" 17 | }, 18 | "dependencies": { 19 | "phaser": "^3.0.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import 'phaser'; 2 | 3 | import { SimpleScene } from './scenes/simple-scene'; 4 | 5 | const gameConfig = { 6 | width: 680, 7 | height: 400, 8 | scene: SimpleScene 9 | }; 10 | 11 | new Phaser.Game(gameConfig); -------------------------------------------------------------------------------- /src/scenes/simple-scene.js: -------------------------------------------------------------------------------- 1 | export class SimpleScene extends Phaser.Scene { 2 | preload() { 3 | this.load.image('cokecan', 'assets/cokecan.png'); 4 | } 5 | 6 | create() { 7 | this.add.text(100, 100, 'Hello Phaser!', { fill: '#0f0' }); 8 | this.add.image(100, 200, 'cokecan'); 9 | } 10 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 3 | const webpack = require('webpack'); 4 | 5 | module.exports = { 6 | entry: { 7 | app: './src/index.js', 8 | 'production-dependencies': ['phaser'] 9 | }, 10 | 11 | output: { 12 | path: path.resolve(__dirname, 'build'), 13 | filename: 'app.bundle.js' 14 | }, 15 | 16 | module: { 17 | rules: [ 18 | { 19 | test: /\.js$/, 20 | include: path.resolve(__dirname, 'src/'), 21 | use: { 22 | loader: 'babel-loader', 23 | options: { 24 | presets: ['env'] 25 | } 26 | } 27 | } 28 | ] 29 | }, 30 | 31 | devServer: { 32 | contentBase: path.resolve(__dirname, 'build'), 33 | }, 34 | 35 | plugins: [ 36 | new CopyWebpackPlugin([ 37 | { 38 | from: path.resolve(__dirname, 'index.html'), 39 | to: path.resolve(__dirname, 'build') 40 | }, 41 | { 42 | from: path.resolve(__dirname, 'assets', '**', '*'), 43 | to: path.resolve(__dirname, 'build') 44 | } 45 | ]), 46 | new webpack.DefinePlugin({ 47 | 'typeof CANVAS_RENDERER': JSON.stringify(true), 48 | 'typeof WEBGL_RENDERER': JSON.stringify(true) 49 | }), 50 | new webpack.optimize.CommonsChunkPlugin({ 51 | name: 'production-dependencies', 52 | filename: 'production-dependencies.bundle.js' 53 | }), 54 | ], 55 | } 56 | --------------------------------------------------------------------------------