Search the Community

Hello! It's been a while since my last topic, I've been feeding my brain a little bit and here is the result: I've created a tiny boilerplate available on Github. The aim of the project is to help other developers to get started a little bit faster without having to spend too much time setting up Build tasks (basically setting up the transpiler). The project comes with: A heavily commented gulpfile that uses Browserify and Babel to transpile your ES6 code into ES5.Two build modes: development and production (neither one is too complex or opinionated).Browsersync for live reload and weinre for your mobile debugging needs.UglifyJS for the production build. No sitelock or heavy obfuscation code included.You can access the repo here: https://github.com/belohlavek/phaser-es6-boilerplate You can see the example included on codepen (no modules): http://codepen.io/belohlavek/full/aORJVL Bonus information: You can get code intellisense for ES6 with VSCode + phaser.d.ts (Typescript definition). Works like a charm on Ubuntu. If you feel I missed out on something, or worst, if you think I screwed up please let me know! I'm sure there are at least a couple of dumb typos out there. Are any of you already using Babel with Phaser? Any Typescript users willing to give ES2015 a try? Thanks for reading

Hi all, I am currently running into Phaser's problems on the preload state with the code snippet as below class Preload extends Phaser.State { constructor(game, progress,cacheKey,progressDisplay) { super(game, progress,cacheKey,progressDisplay); this.progress = progress; this.cacheKey = cacheKey; this.progressDisplay = progressDisplay; } loadStart(){ let box = this.make.graphics(0, 0); box.lineStyle(8, 0xFF0000, 0.8); box.beginFill(0xFF700B, 1); box.drawRect(-50, -50, 100, 100); box.endFill(); this.spinner = this.add.sprite(this.world.centerX, this.world.centerY, box.generateTexture()); this.spinner.anchor.set(0.5); this.add.tween(this.spinner.scale).to( { x: 0, y: 0 }, 1000, "Elastic.easeIn", true, 250); } preload(game,progressDisplay){ let center = { x: this.game.world.centerX, y: this.game.world.centerY }; game.load.image("player", Images.lander); game.load.spritesheet("asteroids", Images.asteroid, 64, 64, 30); game.load.onLoadStart.add(this.loadStart,this); let loadingText = new Text(this.game, center.x, center.y); loadingText.anchor.set(0.5); var timerEvt = this.game.time.events.loop(100, function (){ if(progressDisplay <= 100){ loadingText.text = 'Loading...'+(++progressDisplay)+'%'; } else{ game.time.events.remove(timerEvt); let loadingText = new Text(this.game, center.x, center.y); loadingText.text = 'Completed'; game.add.tween(loadingText).to({alpha: 0}, 500, Phaser.Easing.Linear.None, true); game.load.onLoadComplete.add(this.loadComplete, this); } }, this); } create(){ this.game.state.start('GameState'); } loadComplete(){ this.create(); } } Somehow the this.game.state.start('GameState'); was executed before the Complete text could fade out. Is there anyway to resolve the bug where to get the complete text to fade out first then execute the GameState? Thanks.

Hello everyone, The magority of tutorials you can find on the internet regarding the making of mobile games all cover the actual gameplay. But I can't find a good tutorial on the actual setup of the game like choosing the screen res and how to scale the game so it will work on almost all devices. I do not necessarily mean a step by step rundown, which would actually not be a bad idea. Can you someone give me a guideline on how to understand, use and setup a game for full mobile release? Thank you so much in advance, Very kind regards, Cedric

Dear people of this awesome community, I am strugeling to get the spawning system working. I keep getting the error: src\js\objects\Barrier.js:9 Uncaught TypeError: Cannot read property 'width' of undefined(…); Barrier.js : import GlobalVars from "./GlobalVars"; import playGame from "../States/PlayGame"; class Barrier extends Phaser.Sprite { constructor(game, state, speed, tintColor) { super(game); this.game = game; this.state = state; var positions = [(this.game.width - GlobalVars.tunnelWidth) / 2, (this.game.width + GlobalVars.tunnelWidth)/2]; var position = this.game.rnd.between(0, 1); Phaser.Sprite.call(this, game, positions[position], -100, "barrier"); var cropRect = new Phaser.Rectangle(0, 0, GlobalVars.tunnelWidth /2, 24); this.crop(cropRect); game.physics.enable(this, Phaser.Physics.ARCADE); this.anchor.set(position, 0.5); this.tint = tintColor; this.body.velocity.y = speed; this.placeBarrier = true; console.log("barrier placed"); } update() { if (this.placeBarrier && this.y > GlobalVars.barrierGap) { this.placeBarrier = false; playGame.prototype.addBarrier(this.parent, this.tintColor); } if (this.y > this.game.height) { this.destroy(); } } } export default Barrier; import GlobalVars from "../objects/GlobalVars"; import Barrier from "../objects/Barrier"; class playGame extends Phaser.State { constructor(game) { super(game); } create() { console.log("game starts running"); //setting general color this.tintColor = GlobalVars.currentColor; //tunnel this.createTunnel(); //ship this.createShip(); //smoke particle effect this.createSmoke(); //barriers this.barrierGroup = this.add.group(); this.addBarrier(this.barrierGroup, this.tintColor); } update() { this.updateSmoke(); this.checkForSwipe(); } ..... addBarrier(group, tintColor) { var barrier = new Barrier(this.game, this, GlobalVars.barrierSpeed, tintColor); this.add.existing(barrier); group.add(barrier); } } export default playGame; I am following a book I bought called: create HTML5 vertical endless runner. can anyone hint a tutorial or give a solution? Thanks in advance Very Kind regards, Cedric

Dear awesome community, I have a question about transpiling es6 to native javascript/es5. I am looking for something like atom's typescript plugin, this makes compiling typescript really easy. There is now a babel plugin which is: language-babel. I have no clue on how to set this up and what I have to do. There is no actual tutorial / guide to be found. How do you set up a transpiling system? like the typescript plugin thank you so much in advance Very kind regards, Cedric

I've made an tutorial based on my approach to enemies in my Metroid Remake extending Phaser.Sprite into a generic Enemy class which in turn is extended to create actual enemies. The tutorial uses ES6/ES2015 but the approach could be used with ES5 (which the my code is actually transpiled to). It's my first tutorial ever. Both positive and (constructive) negative feedback is appreciated. Let me know if you find something you disagree with in my approach, or ways to improve it. Also, English isn't my native language so any feedback on how I could improve hard-to-understand parts is equally appreciated. Link: http://metroid.niklasberg.se/2016/02/12/phaser-making-and-using-a-generic-enemy-class-es6es2015/

Hi everyone, I was very interested in developing a phaser game in ES6 and I have found some boilerplate which are very good but I decided to make my own. https://github.com/cstuncsik/phaser-es6-demo Cheers