lean / phaser-es6-webpack Goto Github PK
View Code? Open in Web Editor NEWA bootstrap project for create games with Phaser + ES6 + Webpack.
License: MIT License
A bootstrap project for create games with Phaser + ES6 + Webpack.
License: MIT License
Yarn lock file should not be ignored from source control.
This could help to find the reason
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
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'
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?
How about to spit phaser and game code?
It could allow to webpack&browserSync update game changes much faster.
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 !
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.
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?
I turned off source maps but then the time saved goes into debugging.
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]/phaser-ce/build/custom/pixi.js 57 bytes {1} [built]
[49] (webpack)/buildin/global.js 509 bytes {1} [built]
[87] ./
[88] .//phaser-ce/build/custom/p2.js 53 bytes {1} [built]/webfontloader/webfontloader.js 12.7 kB {1} [built]
[89] ./
[119] ./src/main.js 793 bytes {0} [built]
[120] .//babel-polyfill/lib/index.js 833 bytes {0} [built]/core-js/shim.js 7.38 kB {0} [built]
[121] ./src/config.js 95 bytes {0} [built]
[307] ./
[308] .//phaser-ce/build/custom/p2.js 412 kB {1} [built]/phaser-ce/build/custom/phaser-split.js 2.71 MB {1} [built]
[309] ./
[310] .//phaser-ce/build/custom/pixi.js 217 kB {1} [built]/regenerator-runtime/runtime.js 23.8 kB {0} [built]
[311] ./
[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
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.
Got the following warning message:
WARNING in ./
/phaser/build/custom/p2.js/phaser/build/custom/p2.js 24:397-404
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.
@ ./
What could be wrong? Thanks
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
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
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?
May involve wrapping ROT in a class or classes.
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:
please take a look at this post.
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.
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
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
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
In branch "Phaser3", when I try to run "npm run dev" it throws this error, listing with npm run, only "deploy" appears.
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)
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?
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.
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 ?
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!
How do I set this to run on port 8080?
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..
I run "npm run deploy". After the build dir created in root dir, the error occured.
The error start from here
### - 13 verbose stack Error: [email protected] deploy: webpack --config webpack.production.config.js
webpack --config webpack.production.config.js
My question is, how? Unfortunately, I cannot find anything to help me so I have resorted to the issues.
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)
}
}
cordova run ios
does not work, instead use:cordova run ios --buildFlag='-UseModernBuildSystem=0'
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.
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
Add template for tests
I personally find webpack-dev-server better for the reasons:
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.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')
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
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?
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 .
This is the main directory path:
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
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.
Most of the time I need a stylesheet in my phaser projects. Would it be cool if I implement sass here ?
I run "npm run deploy". After the build dir created in root dir, the error occured.
The error occur from here
- 13 verbose stack Error: [email protected] deploy: webpack --config webpack.production.config.js
webpack --config webpack.production.config.js
I never edit files about webpack or modules. What I edit just in src.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.