Merge pull request #2 from oliverbenns/phaser-3

Phaser 3

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 Oliver Benns
+Copyright (c) 2018 Oliver Benns
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -5,9 +5,10 @@
 Simple starter project to get a Phaser game environment up and running with ease. With Webpack, ES6 transpiling, page reloading and Github page publishing.
 
 ## Install
-- Get the files
-  - `git clone https://github.com/oliverbenns/phaser-starter.git`
-  - **or** download a r [zip/tar.gz](https://github.com/oliverbenns/phaser-starter/releases)
+- Get the files by either:
+  - Forking this repository
+  - Downloading a [zip/tar.gz](https://github.com/oliverbenns/phaser-starter/releases)
+  - Cloning this repository with `git clone https://github.com/oliverbenns/phaser-starter.git`
 - `cd phaser-starter`
 - `nvm install`
 - `npm install`
@@ -22,3 +23,7 @@ Simple starter project to get a Phaser game environment up and running with ease
 
 ## Github page deployment
 - `npm run deploy`
+
+## Phaser 2
+
+If you are looking for a Phaser 2 starter environment, you can download the [1.0.1 release](https://github.com/oliverbenns/phaser-starter/releases/1.0.1)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "phaser-starter",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Simple starter project to get a Phaser game environment up and running with ease. With Webpack, ES6 transpiling, page reloading and Github page publishing.",
   "main": "index.js",
   "repository": {
@@ -18,20 +18,20 @@
   },
   "homepage": "https://github.com/oliverbenns/phaser-starter#readme",
   "devDependencies": {
-    "babel-core": "^6.25.0",
-    "babel-loader": "^7.1.0",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
-    "expose-loader": "^0.7.3",
-    "webpack": "^3.4.1",
-    "webpack-dev-server": "^2.5.0"
+    "raw-loader": "^0.5.1",
+    "webpack": "^3.11.0",
+    "webpack-dev-server": "^2.11.1"
   },
   "scripts": {
     "develop": "webpack-dev-server --hot --inline",
     "build": "NODE_ENV=production webpack",
     "deploy": "NODE_ENV=production webpack && chmod +x ./deploy.sh && ./deploy.sh"
   },
   "dependencies": {
-    "phaser": "^2.6.2"
+    "phaser": "^3.1.0"
   }
 }

src/index.js

@@ -1,37 +1,33 @@
-import 'pixi';
-import 'p2';
 import 'phaser';
 
-import pkg from '../package.json';
+import pkg from '../node_modules/phaser/package.json';
 
 // This is the entry point of your game.
 
+const width = 800;
+const height = 600;
+
 const config = {
-  width: 800,
-  height: 600,
-  renderer: Phaser.AUTO,
-  parent: '',
-  state: {
-    preload,
-    create,
-  },
-  transparent: false,
-  antialias: true,
-  physicsConfig: { arcade: true },
+  width,
+  height,
+  type: Phaser.AUTO,
+  scene: { preload, create },
 };
 
 const game = new Phaser.Game(config);
 
 function preload() {
-  this.game.load.image('study', 'assets/img/study.png');
+  this.load.image('study', 'assets/img/study.png');
 }
 
 function create() {
-  const { game } = this;
-  const objects = [
-    game.add.text(game.world.centerX, game.world.centerY * 0.8, `Welcome to Phaser ${pkg.dependencies.phaser.substr(1)}`, { font: "bold 19px Arial", fill: "#fff" }),
-    game.add.sprite(game.world.centerX, game.world.centerY * 1.2, 'study')
-  ];
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const welcomeMessage = `Welcome to Phaser ${pkg.version}`;
+
+  this.add.image(centerX, centerY * 1.2, 'study');
 
-  objects.forEach(obj => obj.anchor.setTo(0.5, 0.5));
+  this.add
+    .text(centerX, centerY * 0.8, welcomeMessage, { font: "bold 19px Arial", fill: "#fff" })
+    .setOrigin(0.5, 0.5);
 }

webpack.config.js

@@ -14,14 +14,11 @@ const config = {
     filename: 'assets/js/bundle.js',
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.json'],
+    extensions: ['.js', '.json'],
     modules: [APP_DIR, 'node_modules'],
     alias: {
       // https://github.com/webpack/webpack/issues/4666
       constants: `${APP_DIR}/constants`,
-      phaser: path.join(PHASER_DIR, 'build/custom/phaser-split.js'),
-      pixi: path.join(PHASER_DIR, 'build/custom/pixi.js'),
-      p2: path.join(PHASER_DIR, 'build/custom/p2.js'),
     },
   },
   devtool: 'source-map',
@@ -33,36 +30,29 @@ const config = {
         use: ['babel-loader'],
         include: APP_DIR,
       },
-      // https://github.com/photonstorm/phaser/issues/2762
       {
-        test: /pixi\.js/,
-        use: [{
-          loader: 'expose-loader',
-          options: 'PIXI',
-        }],
-      },
-      {
-        test: /phaser-split\.js$/,
-        use: [{
-          loader: 'expose-loader',
-          options: 'Phaser',
-        }],
-      },
-      {
-        test: /p2\.js/,
-        use: [{
-          loader: 'expose-loader',
-          options: 'p2',
-        }],
-      },
+        test: [/\.vert$/, /\.frag$/],
+        use: ['raw-loader'],
+      }
     ],
   },
-  plugins: NODE_ENV === 'production' ? [ new webpack.optimize.UglifyJsPlugin() ] : [],
+  plugins: [
+    new webpack.DefinePlugin({
+      CANVAS_RENDERER: true,
+      WEBGL_RENDERER: true,
+    })
+  ],
   devServer: {
     contentBase: BUILD_DIR,
     port: 8080,
     stats: 'minimal',
   },
 };
 
+if (NODE_ENV === 'production') {
+  config.plugins.push(
+    new webpack.optimize.UglifyJsPlugin()
+  );
+}
+
 module.exports = config;