lean/phaser-es6-webpack

A bootstrap project for create games with Phaser + ES6 + Webpack.

Phaser + ES6 + Webpack.

A bootstrap project to create games with Phaser + ES6 + Webpack.

Phaser 3 supported in this branch: https://github.com/lean/phaser-es6-webpack/tree/phaser3

Typescript supported in this branch: https://github.com/lean/phaser-es6-webpack/tree/typescript

Features

• ESLINT with JavaScript Standard Style configuration
• Next generation of Javascript
• Browsers are automatically updated as you change project files
• Webpack ready
• WebFont Loader
• Multilanguage support
• PWA Support

Typescript

If you need typescript support checkout the typescript branch. Thanks to @MatsMaker

Setup

You'll need to install a few things before you have a working copy of the project.

1. Clone this repo:

Navigate into your workspace directory.

Run:

git clone https://github.com/lean/phaser-es6-webpack.git

2. Install node.js and npm:

https://nodejs.org/en/

3. Install dependencies (optionally you can install yarn):

Navigate to the cloned repo's directory.

Run:

npm install

or if you chose yarn, just run yarn

4. Run the development server:

Run:

npm run dev

This will run a server so you can run the game in a browser. It will also start a watch process, so you can change the source and the process will recompile and refresh the browser automatically.

To run the game, open your browser and enter http://localhost:3000 into the address bar.

Build for deployment:

Run:

npm run deploy

This will optimize and minimize the compiled bundle.

Deploy for cordova:

Make sure to uncomment the cordova.js file in the src/index.html and to update config.xml with your informations. (name/description...)

More informations about the cordova configuration: https://cordova.apache.org/docs/en/latest/config_ref/

There is 3 platforms actually tested and supported :

• browser
• ios
• android

First run (ios example):

npm run cordova
cordova platform add ios
cordova run ios

Update (ios example):

npm run cordova
cordova platform update ios
cordova run ios

This will optimize and minimize the compiled bundle.

Config:

before you get to work you will surely want to check the config file. You could setup dimensions, webfonts, etc

Webfonts:

In the config file you can specify which webfonts you want to include. In case you do not want to use webfonts simply leave the array empty

Credits

Big thanks to these great repos:

https://github.com/belohlavek/phaser-es6-boilerplate

https://github.com/cstuncsik/phaser-es6-demo

Contributors

https://github.com/RenaudROHLINGER

phaser-es6-webpack's Issues

Cordova iOS run && iPhone White Bar

1. Building Cordova for xcode 10.

• Since the update to xcode 10 cordova run ios does not work, instead use:
• cordova run ios --buildFlag='-UseModernBuildSystem=0'

2. I believe any iPhone beyond iPhone 8-plus has a white bar on top of the application. This can be fixed by modifying the index.html file to include viewport-fit=cover:

• <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">

I hope this helps anyone having issues getting the project to work with iOS.

I will add cordova to this project and a command prompt to configure this bootstrap

Hey,

I am going to add cordova to my project who is based on this bootstrap so I wanted to add it to this project.
Basically I think I will add a prompt command to configure the bootstrap, update the package.json, the new config.xml (cordova) && index.html (why not).
Then, I'll just update the documentation.

Just one question,
Is that ok if I add a "www" folder next to the dist folder ? (cordova required)

Can't use debug features.

Is there a seperate module I need to install or something to use the game.debug features? I can't print my fps or debug physics bodies or anything.

How to use phaser plugins

Hi, I would like know how to use the phaser-sound-analyser with this boilerplate. I'm getting some error on try.

I'm saw that comment but it's confuse for me.

Can somebody shows a explicit solution with an examples if possible?

Thanks!

Is there a way to make the reload faster?

I turned off source maps but then the time saved goes into debugging.

timer loop events in create function get error

code in Game.js create function()
this.game.time.events.loop(900,console.log('test'), this); this.game.time.events.stop(false); this.game.time.events.start();

error message:
Uncaught TypeError: Cannot read property 'apply' of undefined

Remove loading of bangers font by default in main boot class.

I was looking through the code of the Boot state, and saw that it was trying to load the bangers font family. (https://github.com/lean/phaser-es6-webpack/blob/master/src/states/Boot.js#L14). Lately, the font has been taking a while to download, causing this game to to freeze on the loading fonts page.

Since this is the starting template for a game to build using webpack and phaser, perhaps it could be ideal if we remove the default behavior of loading a font library?

Add ROT-JS

May involve wrapping ROT in a class or classes.

Add LICENSE file

Please add a LICENSE file to this project; I've found that the license is mentioned in package.json as "ISC" but this helps make it clearer. Thanks

Phaser 3

I have create the branch 'phaser3' to start with the implementation of the new release of the library.
Does anyone have any ideas or suggestions to implement?
Any functionality to add or remove?

There are some ideas:

• implement an scaffolding tool like Yeoman
• more documentation
• create some common components or utilities

Approach for including filters?

This is more a question on approach

Filters aren't bundled with Phaser normally, but they are available in the NPM distribution

What would be the best way to include them via Webpack (I'm new to it)? I can include them the old fashioned way with game.load.script, but it would be nice to simply do something like 'import Filtername from Filters'

Error while running setup

I'm going through the Setup in the project README and when I get to step 4 npm run dev I get this error:

Uncaught Error: The value passed as the `game` argument ([object Object]) is not an instance of Phaser.Game.
    at _class.308.Phaser.Component.Core.init (vendor.bundle.js:37578)
    at _class.308.Phaser.Sprite [as constructor] (vendor.bundle.js:41005)
    at new _class (bundle.js:3958)
    at _class.create (bundle.js:4123)
    at 308.Phaser.StateManager.loadComplete (vendor.bundle.js:21334)
    at 308.Phaser.StateManager.preUpdate (vendor.bundle.js:21100)
    at Game.updateLogic (vendor.bundle.js:27898)
    at Game.update (vendor.bundle.js:27791)
    at 308.Phaser.RequestAnimationFrame.updateRAF (vendor.bundle.js:55666)
    at _onLoop (vendor.bundle.js:55649)

I have not modified to project after cloning it. I just did git clone, npm install and then npm run dev.

I'm running Node v7 on macOS Sierra

Mouse over a button error

I get this error when move mouse over a button (using atlasJSONHash to load a spritesheet);

Uncaught TypeError: Cannot read property 'style' of undefined
at Phaser.InputHandler._pointerOutHandler (phaser-split.js:19444)
at Phaser.Pointer.swapTarget (phaser-split.js:17616)
at Phaser.Pointer.processInteractiveObjects (phaser-split.js:17588)
at Phaser.Pointer.move (phaser-split.js:17507)
at Phaser.MSPointer.onPointerMove (phaser-split.js:16194)
at HTMLCanvasElement._onMSPointerMove (phaser-split.js:16080)

Note, it's not happen if I created a button using game.add.button

let button = this.game.add.button(50, 50, 'buttons', actionOnClick, this, 'button-01', 'button-02.png', 'button-03.png');

But if I create a class inherit from Phaser.Button, that bug happens

export default class extends Phaser.Button {

  constructor ({ game, x, y, asset, callback, callbackContext, overFrame, outFrame, downFrame, upFrame}) {
    super(game, x, y, asset, callback, callbackContext, overFrame, outFrame, downFrame, upFrame)
    
    this.game = game
    this.anchor.setTo(0.5)
  }
}

Phaser plugins integration

Hello,

I try to use some Phaser plugins but nothing works for me.

My first attempt was with Slick-UI.

As suggested here I just added the plugin inside my vendors bundle and added it in my game using the preload function (src/states/Boot.js) but I get an unexpected result :

webpack.config.js :

var slickui = path.join(__dirname, '/node_modules/slick-ui/dist/slick-ui.min.js')
[...]
  entry: {
    app: [...],
    vendor: [..., 'slickui']
  },
module: {
    rules: [...
      { test: /slick-ui\.min\.js/, use: ['expose-loader?SlickUi'] } // SlickUi = {<empty object>} in browser
    ]
  },
  resolve: {
    alias: { ...
      'slickui': slickui
    }
  }

src/index.html :

    <script>
      var SlickUI;
    </script>

src/states/Boot.js :

preload() {
 SlickUI = this.game.plugins.add(Phaser.Plugin.SlickUI);
}

src/states/Boot.js :

create() {
 var panel;
 SlickUI.add(panel = new SlickUI.Element.Panel(8, 8, 150, this.game.height - 16)); // Throw an Error : "Uncaught TypeError: Cannot read property 'Panel' of undefined"
}

In the plugin demo (here) the plugin object looks like this (Plugin added to the game):

> SlickUI
{
  Container: Object
  Element: Object // < The property I want to use
  Keyboard: Object
  namespace: Function
}

But in my case I get a different object (Plugin added to the game):

> SlickUI
{
  active: true,
  defaultRenderer: Object,
  game: Game,
  hasPostRender: true,
  hasPostUpdate: false,
  hasPreUpdate: true,
  hasRender: true,
  hasUpdate: true,
  parent: Phaser.PluginManager,
  renderer: Object,
  visible: true,
  __proto__: Phaser.Plugin
}

Slick-Ui add itselft to Phaser's plugins global object :
Phaser.Plugin.SlickUI // I can reach this one
It need Phaser.Plugin.prototype to properly initiate the plugin (before using it in game)

Any help welcome, Im stuck with this issue since a few days..

Do you guys use stylesheet like sass?

Most of the time I need a stylesheet in my phaser projects. Would it be cool if I implement sass here ?

WebGL: INVALID_VALUE: vertexAttribPointer: index out of range

When I run npm, I see these warnings on browser's console (sorry for awful format):

pixi.js:5102WebGL: INVALID_VALUE: vertexAttribPointer: index out of rangePIXI.WebGLSpriteBatch.flush @ pixi.js:5102PIXI.WebGLSpriteBatch.render @ pixi.js:4768PIXI.Sprite._renderWebGL @ pixi.js:1900PIXI.DisplayObjectContainer._renderWebGL @ pixi.js:1394PIXI.WebGLRenderer.renderDisplayObject @ pixi.js:3688PIXI.WebGLRenderer.render @ pixi.js:3654updateRender @ phaser-split.js:13829update @ phaser-split.js:13671updateRAF @ phaser-split.js:41333_onLoop @ phaser-split.js:41316
5pixi.js:5102WebGL: INVALID_VALUE: vertexAttribPointer: index out of rangePIXI.WebGLSpriteBatch.flush @ pixi.js:5102PIXI.WebGLSpriteBatch.render @ pixi.js:4768PIXI.Sprite._renderWebGL @ pixi.js:1900PIXI.DisplayObjectContainer._renderWebGL @ pixi.js:1394PIXI.WebGLRenderer.renderDisplayObject @ pixi.js:3688PIXI.WebGLRenderer.render @ pixi.js:3654updateRender @ phaser-split.js:13829update @ phaser-split.js:13750updateRAF @ phaser-split.js:41333_onLoop @ phaser-split.js:41316

I assume these happen on a render() there are loads of them.
(WebGL: too many errors, no more errors will be reported to the console for this context.)

My browser is Chrome, Version 54.0.2840.59 (64-bit), on Ubuntu 16.10.

Split phaser and game code

How about to spit phaser and game code?
It could allow to webpack&browserSync update game changes much faster.

Explicit `chunks` line may break webpack by omitting other dependencies

My webpack.prod.conf.js is from a newer template than yours; in my version, webpack attempts to split the webpack runtime into a manifest.js file. When I blindly copied your explicit chunks statement into my template, it caused the generated index.html to exclude this manifest, which resulted in webpack not getting loaded (you get a runtime JS error like "webpackjsonp is not defined"

The solution is to explicitly mention manifest in the chunks block.

Here's the code from my vue-cli template:

    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),

I'd recommend changing the line

chunks: ['vendor', 'app']

to

chunks: ['manifest', 'vendor', 'app']

in this file

phaser-es6-webpack/webpack.config.js

Line 38 in 28b3021

chunks: ['vendor', 'app'],

Error: [email protected] deploy: `webpack --config webpack.production.config.js`

I run "npm run deploy". After the build dir created in root dir, the error occured.

• 0 info it worked if it ends with ok
• 1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
• 1 verbose cli 'C:\Users\admin\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js',
• 1 verbose cli 'run',
• 1 verbose cli 'deploy' ]
• 2 info using [email protected]
• 3 info using [email protected]
• 4 verbose run-script [ 'predeploy', 'deploy', 'postdeploy' ]
• 5 info lifecycle [email protected]~predeploy: [email protected]
• 6 info lifecycle [email protected]~deploy: [email protected]
• 7 verbose lifecycle [email protected]~deploy: unsafe-perm in lifecycle true
• 8 verbose lifecycle [email protected]~deploy: PATH: C:\Users\admin\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\jonanwu\yuanbao-game\three-cards-phaser\node_modules.bin;C:\jdk-8u171\bin;C:\jdk-8u171\bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files\nodejs;C:\Program Files\Git\cmd;C:\apache-maven-3.5.3\bin;;C:\WINDOWS\System32\OpenSSH;C:\Program Files\Microsoft VS Code\bin;C:\Go\bin;C:\Program Files\dotnet;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\Users\admin\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Microsoft VS Code\bin;C:\Users\admin\AppData\Roaming\npm;C:\Users\admin\AppData\Local\GitHubDesktop\bin;C:\Users\admin\AppData\Local\Microsoft\WindowsApps;C:\Users\admin\AppData\Local\Google\Cloud SDK\google-cloud-sdk\bin;C:\Users\admin\go\bin
• 9 verbose lifecycle [email protected]~deploy: CWD: C:\jonanwu\yuanbao-game\three-cards-phaser
• 10 silly lifecycle [email protected]~deploy: Args: [ '/d /s /c', 'webpack --config webpack.production.config.js' ]
• 11 silly lifecycle [email protected]~deploy: Returned: code: 2 signal: null
• 12 info lifecycle [email protected]~deploy: Failed to exec deploy script

The error start from here

### - 13 verbose stack Error: [email protected] deploy: webpack --config webpack.production.config.js

• 13 verbose stack Exit status 2
• 13 verbose stack at EventEmitter. (C:\Users\admin\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:304:16)
• 13 verbose stack at emitTwo (events.js:126:13)
• 13 verbose stack at EventEmitter.emit (events.js:214:7)
• 13 verbose stack at ChildProcess. (C:\Users\admin\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
• 13 verbose stack at emitTwo (events.js:126:13)
• 13 verbose stack at ChildProcess.emit (events.js:214:7)
• 13 verbose stack at maybeClose (internal/child_process.js:925:16)
• 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
• 14 verbose pkgid [email protected]
• 15 verbose cwd C:\jonanwu\yuanbao-game\three-cards-phaser
• 16 verbose Windows_NT 10.0.17134
• 17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Users\admin\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "deploy"
• 18 verbose node v8.11.1
• 19 verbose npm v6.4.0
• 20 error code ELIFECYCLE
• 21 error errno 2
• 22 error [email protected] deploy: webpack --config webpack.production.config.js
• 22 error Exit status 2
• 23 error Failed at the [email protected] deploy script.
• 23 error This is probably not a problem with npm. There is likely additional logging output above.
• 24 verbose exit [ 2, true ]

VS Code is not using IntelliSense

Hi, I can't get VS Code IntelliSense (autocompletion) to work properly with your setup.
I thought this should be enable automatically, out of the box? How can I make it work? 🙂

Games don't play audio in production

I have an "audio" folder in "assets" folder. My audio files reside in that folder and my game references audio files in the folder. When I run "dev" my game plays background music but when I run "deploy" and click the index.html file my game has no sound. How should I configure webpack to play the background music in production? Or do I need to change any directory structure?

How fast is this compared to phaser alone?

The phaser-es6-webpack file I have from cloning this repo is ~100MB and I am assuming that's the base project. Compared to a hello world of phaser, which just includes the phaser.js file and an index.html file.

If this is put on some aws instance, or some remote server, would that mean that players would have to download all these files before being able to play (thus taking longer)?

Edit: How would one also deploy the build? I tried running 'npm run deploy' but nothing happens

game is not an instance of Phaser.Game

When trying the typescript branch, I got the following error:

phaser-split.js:24791 Uncaught Error: The value passed as the `game` argument ([object Object]) is not an instance of Phaser.Game.

The error happens at the Mushroom class:

export default class extends Phaser.Sprite {
  constructor ({ game, x, y, asset }) {
    super(game, x, y, asset) 
    this.anchor.setTo(0.5)
  }

When inspecting game, it looks like game is an instance of Phaser.Game, which was very weird.
Also, comparing game.__proto__ to Phaser.Game.prototype looked the same.
However, game.__proto__ == Phaser.Game.prototype yields false, which is why the check fails.

It seems that the import Phaser from 'phaser' import causes the problem.
When using import Phaser from 'phaser-ce' it works, at least for me, since its picking up the correct class then.

Filters Not Working

I used the example for using a blur filter in Phaser here: https://phaser.io/examples/v2/filters/blur. I changed the code to fit the boilerplate, of course, and I can get the sprite to display with no problem, but no matter what I do I can't get the filter to work. I've tried applying it to various sprites with no luck on the filters.

My code:

[Game::create()]

let logo = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'phaser')
logo.anchor.setTo(0.5, 0.5)
let blurX = this.game.add.filter('BlurX')
let blurY = this.game.add.filter('BlurY')

blurX.blur = 100
blurY.blur = 1
logo.filters = [blurX, blurY]

[Splash::preload()]

this.game.load.image('phaser', 'assets/images/phaser2.png')
this.game.load.script('BlurX', 'https://cdn.rawgit.com/photonstorm/phaser/master/v2/filters/BlurX.js')
this.game.load.script('BlurY', 'https://cdn.rawgit.com/photonstorm/phaser/master/v2/filters/BlurY.js')

Uncaught Error: Cannot find module

phaser-es6-webpack-1.0\src\main.js"
at webpackMissingModule (_math-scale.js:18)
at Object. (_math-scale.js:18)
at webpack_require (bootstrap 8158fcd1685397aac32a:54)
at webpackJsonpCallback (bootstrap 8158fcd1685397aac32a:25)
at bundle.js:1

hi there i've get that error when try to run development server using npm run dev , am i missing any file?. thanks

npm ERR! Missing script: "dev"

In branch "Phaser3", when I try to run "npm run dev" it throws this error, listing with npm run, only "deploy" appears.

Load Custom Fonts?

I produced some fonts at font-squirrel based on a font I had. eg:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 12, 2016 */
@font-face {
    font-family: 'lintelregular';
    src: url('lintel-regular-webfont.eot');
    src: url('lintel-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('lintel-regular-webfont.woff2') format('woff2'),
         url('lintel-regular-webfont.woff') format('woff'),
         url('lintel-regular-webfont.ttf') format('truetype'),
         url('lintel-regular-webfont.svg#lintelregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

The folder also has the font file types.

How do I load that in with webpack? There' font loading and css? I can't seem to parse any of them. Would it be better to create a url and load it in as a webfont?

Thanks,
Joe

Text seems to be missing from the add object

Right after instalation, i did run npm run dev and this is the error that it shows
Uncaught TypeError: Cannot read property 'toLowerCase' of undefined at 308.Phaser.Text.setStyle (phaser-split.js:34657) at new 308.Phaser.Text (phaser-split.js:34535) at 308.Phaser.GameObjectFactory.text (phaser-split.js:26186) at _class.preload (Boot.js:51) at 308.Phaser.StateManager.preUpdate (phaser-split.js:7208) at Game.updateLogic (phaser-split.js:13880) at Game.update (phaser-split.js:13773) at 308.Phaser.RequestAnimationFrame.updateRAF (phaser-split.js:41604) at _onLoop (phaser-split.js:41587)

I did a bit of debugging, it seems that the Phaser Text is the issue, after I remove all the this.add.text from the project, everything works.

Any ideas why this is happening?

ERROR in bundle.js from UglifyJS

I get with the following when I run the deploy script:

ERROR in bundle.js from UglifyJs
SyntaxError: Unexpected token: string (pixi) [./src/main.js:1,7]

I'm running the project straight "out of the box".

Node: v6.6.0
npm: 3.10.3

stack Error: [email protected] deploy: `webpack --config webpack.production.config.js`

I run "npm run deploy". After the build dir created in root dir, the error occured.

• 0 info it worked if it ends with ok
• 1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
• 1 verbose cli 'C:\Users\admin\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js',
• 1 verbose cli 'run',
• 1 verbose cli 'deploy' ]
• 2 info using [email protected]
• 3 info using [email protected]
• 4 verbose run-script [ 'predeploy', 'deploy', 'postdeploy' ]
• 5 info lifecycle [email protected]~predeploy: [email protected]
• 6 info lifecycle [email protected]~deploy: [email protected]
• 7 verbose lifecycle [email protected]~deploy: unsafe-perm in lifecycle true
• 8 verbose lifecycle [email protected]~deploy: PATH: C:\Users\admin\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\jonanwu\yuanbao-game\three-cards-phaser\node_modules.bin;C:\jdk-8u171\bin;C:\jdk-8u171\bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files\nodejs;C:\Program Files\Git\cmd;C:\apache-maven-3.5.3\bin;;C:\WINDOWS\System32\OpenSSH;C:\Program Files\Microsoft VS Code\bin;C:\Go\bin;C:\Program Files\dotnet;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\Users\admin\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Microsoft VS Code\bin;C:\Users\admin\AppData\Roaming\npm;C:\Users\admin\AppData\Local\GitHubDesktop\bin;C:\Users\admin\AppData\Local\Microsoft\WindowsApps;C:\Users\admin\AppData\Local\Google\Cloud SDK\google-cloud-sdk\bin;C:\Users\admin\go\bin
• 9 verbose lifecycle [email protected]~deploy: CWD: C:\jonanwu\yuanbao-game\three-cards-phaser
• 10 silly lifecycle [email protected]~deploy: Args: [ '/d /s /c', 'webpack --config webpack.production.config.js' ]
• 11 silly lifecycle [email protected]~deploy: Returned: code: 2 signal: null
• 12 info lifecycle [email protected]~deploy: Failed to exec deploy script

The error occur from here

- 13 verbose stack Error: [email protected] deploy: webpack --config webpack.production.config.js

• 13 verbose stack Exit status 2
• 13 verbose stack at EventEmitter. (C:\Users\admin\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:304:16)
• 13 verbose stack at emitTwo (events.js:126:13)
• 13 verbose stack at EventEmitter.emit (events.js:214:7)
• 13 verbose stack at ChildProcess. (C:\Users\admin\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
• 13 verbose stack at emitTwo (events.js:126:13)
• 13 verbose stack at ChildProcess.emit (events.js:214:7)
• 13 verbose stack at maybeClose (internal/child_process.js:925:16)
• 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
• 14 verbose pkgid [email protected]
• 15 verbose cwd C:\jonanwu\yuanbao-game\three-cards-phaser
• 16 verbose Windows_NT 10.0.17134
• 17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Users\admin\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "deploy"
• 18 verbose node v8.11.1
• 19 verbose npm v6.4.0
• 20 error code ELIFECYCLE
• 21 error errno 2
• 22 error [email protected] deploy: webpack --config webpack.production.config.js
• 22 error Exit status 2
• 23 error Failed at the [email protected] deploy script.
• 23 error This is probably not a problem with npm. There is likely additional logging output above.
• 24 verbose exit [ 2, true ]

I never edit files about webpack or modules. What I edit just in src.

Why has been ignored yarn.lock?

Yarn lock file should not be ignored from source control.
This could help to find the reason

deploy file with author comment

Hi there,
use your setting to deploy dist file ,
it makes a alot of comment with author (look at http://imgur.com/a/WamqO mini map yellow comment),
it will make deploy file size bigger ,
can you resolve this problem ?

Ninja Physics

Could be cool to have Ninja physics available out of the box :)

Juste a idea, because i want to use it, and it's painful to get started with :/

Thanks !

deploy creates wrong file paths

When I'm running the game in dev mode everything works fine
But after deployment, I enter build directory and run the index file.
And getting errors of files not found .
It seems that the 'deploy' doesn't arrange the paths right .

Wrong path

Right path!

This is the main directory path:

C:\Users\admin\Desktop\zelda diamond collector\phaser-es6-webpack

Here is the hierarchy:

Warning message

Got the following warning message:

WARNING in .//phaser/build/custom/p2.js
Critical dependencies:
24:397-404 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ .//phaser/build/custom/p2.js 24:397-404

What could be wrong? Thanks

Importing Box2D?

I want to figure out how to import the Box2D plug-in into my Phaser project with this template. I threw box2d.js into /node_modules/phaser-ce/build/custom and adjusted the Webpack configuration.

My current set up is as follows:

main.js:

import 'pixi'
import 'p2'
import 'box2d'
import Phaser from 'phaser'

webpack.config.js:

    var path = require('path')
    var webpack = require('webpack')
    var HtmlWebpackPlugin = require('html-webpack-plugin')
    var BrowserSyncPlugin = require('browser-sync-webpack-plugin')
    
    // Phaser webpack config
    var phaserModule = path.join(__dirname, '/node_modules/phaser-ce/')
    var phaser = path.join(phaserModule, 'build/custom/phaser-split.js')
    var pixi = path.join(phaserModule, 'build/custom/pixi.js')
    var p2 = path.join(phaserModule, 'build/custom/p2.js')
    var box2d = path.join(phaserModule, 'build/custom/box2D.js')
    
    var definePlugin = new webpack.DefinePlugin({
      __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true'))
    })
    
    module.exports = {
      entry: {
        app: [
          'babel-polyfill',
          path.resolve(__dirname, 'src/main.js')
        ],
        vendor: ['pixi', 'p2', 'phaser', 'box2d', 'webfontloader']
      },
      devtool: 'cheap-source-map',
      output: {
        pathinfo: true,
        path: path.resolve(__dirname, 'dist'),
        publicPath: './dist/',
        filename: 'bundle.js'
      },
      watch: true,
      plugins: [
        definePlugin,
        new webpack.optimize.CommonsChunkPlugin({ name: 'vendor'/* chunkName= */, filename: 'vendor.bundle.js'/* filename= */}),
        new HtmlWebpackPlugin({
          filename: '../index.html',
          template: './src/index.html',
          chunks: ['vendor', 'app'],
          chunksSortMode: 'manual',
          minify: {
            removeAttributeQuotes: false,
            collapseWhitespace: false,
            html5: false,
            minifyCSS: false,
            minifyJS: false,
            minifyURLs: false,
            removeComments: false,
            removeEmptyAttributes: false
          },
          hash: false
        }),
        new BrowserSyncPlugin({
          host: process.env.IP || 'localhost',
          port: process.env.PORT || 3000,
          server: {
            baseDir: ['./', './build']
          }
        })
      ],
      module: {
        rules: [
          { test: /\.js$/, use: ['babel-loader'], include: path.join(__dirname, 'src') },
          { test: /pixi\.js/, use: ['expose-loader?PIXI'] },
          { test: /phaser-split\.js$/, use: ['expose-loader?Phaser'] },
          { test: /p2\.js/, use: ['expose-loader?p2'] },
          { test: /box2D\.js/, use: ['expose-loader?box2d'] }
        ]
      },
      node: {
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
      },
      resolve: {
        alias: {
          'phaser': phaser,
          'pixi': pixi,
          'p2': p2,
          'box2d': box2d
        }
      }
    }

When I run the app, I get a 'Uncaught ReferenceError: box2d is not defined' in my console. The line in reference is the second line of box2D.js.

Simply throwing the file in a <script> tag in index.html works, but it is sloppy and not preferred.

Any suggestions to using a modular Box2D with this template?

changing port

How do I set this to run on port 8080?

Info.plist file not found.

Hi,

first: super nice boilerplate, I use it and it works in the browser, but when want to run it on xcode simulator, like so:

yarn
yarn cordova
cordova platform add ios
cordova run ios

I get:
/Users/adrianalbu/git/kickballs/platforms/ios/build/emulator/KickBalls.app/Info.plist file not found.

PS: here is my repo I did used and mentioned your awesome one ;) :
https://github.com/whiteadi/kickballs

EXACT_FIT scaling issue

please take a look at this post.

phaserjs/phaser#2537

Same issue happens in this boiler-plate.

In this case, modify "main.js" like

-from-
super(width, height, Phaser.AUTO, 'content', null)

-to-
super(width, height, Phaser.AUTO, '', null)

erasing 4th parameter will work.

sorry for bad english and thank you for good boiler plate like this.

Uglifyjs doesn't support ES6

Attempting to run
webpack --config webpack.production.config.js

Results in an error something like this:

Hash: 64fa88c201d5909f37e8
Version: webpack 2.2.1
Time: 11370ms
Asset Size Chunks Chunk Names
bundle.js 255 kB 0 [emitted] [big] app
vendor.bundle.js 822 kB 1 [emitted] [big] vendor
[40] .//phaser-ce/build/custom/phaser-split.js 67 bytes {1} [built]
[49] (webpack)/buildin/global.js 509 bytes {1} [built]
[87] .//phaser-ce/build/custom/pixi.js 57 bytes {1} [built]
[88] .//phaser-ce/build/custom/p2.js 53 bytes {1} [built]
[89] .//webfontloader/webfontloader.js 12.7 kB {1} [built]
[119] ./src/main.js 793 bytes {0} [built]
[120] .//babel-polyfill/lib/index.js 833 bytes {0} [built]
[121] ./src/config.js 95 bytes {0} [built]
[307] .//core-js/shim.js 7.38 kB {0} [built]
[308] .//phaser-ce/build/custom/p2.js 412 kB {1} [built]
[309] .//phaser-ce/build/custom/phaser-split.js 2.71 MB {1} [built]
[310] .//phaser-ce/build/custom/pixi.js 217 kB {1} [built]
[311] .//regenerator-runtime/runtime.js 23.8 kB {0} [built]
[312] multi babel-polyfill ./src/main.js 40 bytes {0} [built]
[313] multi pixi p2 phaser webfontloader 64 bytes {1} [built]
+ 299 hidden modules

ERROR in bundle.js from UglifyJs
Unexpected token: name (Game) [bundle.js:3249,6]

You need to also include the babel-preset-latest module for dev to transpile down to ES5.
This fix works for me: https://swizec.com/blog/fun-surprise-uglifyjs-cant-es6/swizec/7272

Template for tests

Add template for tests

proposal: use webpack-dev-server to replace browser-sync

I personally find webpack-dev-server better for the reasons:

1. simpler
2. when run npm run dev, it doesn't generate files into dist, which makes better sense to me because IMO dist should only contain files for distribution.

Loading Assets on Build

My question is, how? Unfortunately, I cannot find anything to help me so I have resorted to the issues.

Using plugins

Hi,

Thanks for a great boilerplate!

I wondered how one would go around using plugins when using this boilerplate?

I'm trying with the "phaser-plugin-isometric" plugin but it could be any plugin.

Thanks in advance

Add Helper classes for implementing standard roguelike top-down maps

Would be cool to be able to use a tool like Tiled and have it automagically work. Perhaps there is an existing library for that.

Can't clone git

It's weird. I tried to clone the .git to my directory and got an error on cmd prompt:

fatal: unable to access 'http:s//github.com/lean/phaser-es6-webpack.git': error:1407742E:SSL routines:SSL23_GET_SERVER_HELLO:t1sv1 alert protocol version

It prevents me to download the depo for some reason.

Any idea why?