dr.au

drhayes — turns out those setText calls were extremely expensive! Refactoring them dropped my CPU use 50%! Even this was much more performant and still gives the impression of a constantly increasing score: game.time.events.loop(60, updateScore, this); function updateScore() { game.scoreText.setText(vars.score); } Also looking into cleaning up the kill() function. Thanks for your help!

nicof, amazing this had such an impact! The game runs at 50% CPU when I remove the 4 text calls in the update() loop. I'm working on refactoring that. Thank you so much!!!

Play the game and use Chrome inspector to emulate iPhone 5 View source on GitHub The game feels glitchy, dragging and not smooth on an iPhone 6: Nothing stands out as being the culprit alone when profiling in Chrome. Profiling each game component in isolation runs well: the player, input, platforms, coins, enemies, music, background graphics all run well, but the combination together seems to trigger more Garbage Collection (GC) and long frames. All assets are 2x Retina Platforms, coins and enemies are all object pooled Update() loops have var instances removed as much as possible to reduce GC Player has fixed X position and moving elements have body.velocity.x = -280 to avoid large X values and avoiding the game.camera object How can I optimize for better mobile performance regarding garbage collection and long frame issues?

Nice work writing this from scratch! I assumed it used Phaser or something but looks like you wrote all the input handling, collision detection. I'm curious as I try to learn more JavaScript, are you following a book or course, or just writing the code based on your past JS experience? Keep up the good work. took me a few seconds to realize I needed to click start a new game, maybe add a button graphic for that? kevdude's drag suggestion would be cool, the ship moved pretty fast at max speed and was hard to slow down the UFOs are challenging! i like how you have to be moving around always so you don't get shot

I followed everyone's advice and refactored my game in several very effective ways: Fix players X position Before the player was moving along the X axis forever and a camera followed the player. Level 6 started around X = 60,000. Now the camera has been removed and X values that are much easier to deal with. Now all the objects in the world have object.body.velocity.x = -negative values to move toward the player to simulate the player running. Object Pool the platforms (and everything else) Before I was generating endless platforms and leaking memory all over the place. Now I generate 9 platforms with physics and object pool them, so on update() i check if their x value < -10 and I know it's off the screen and can be moved to a new location for reuse. Endless platforms from only 9 game objects. Reduce var use inside game update() code Before the code had many var statements for more readable chunking. This triggered a lot of garbage collection and memory leaks over time. Now after reducing var statements in update() loop code the GC is triggered much less and I have very little frame lag. ...But I still have a problem of garbage collection and long frames! The game feels like it's dragging, glitchy and not polished on an iPhone 5/6 Doing Profiling in Chrome and even removing all the major parts of the game piece by piece didn't reveal much: player, input, platforms, coins, enemies, music, background graphics all seem reasonable. Nothing stands out as being the culprit alone, but the combination together seems to trigger more GC and long frames. Where would you guys recommend I spend more time trying to optimize? Could the Retina assets and canvas being 2x be causing this? Play the game. (Use Chrome inspector to emulate iPhone 5, best viewed in on a Retina screen) View source on GitHub.

Thanks to pxam I created this jsfiddle if anyone is looking for an easy starter template for Phaser + dat.gui controls over variables.

Lazer focus!

Hi @mattstyles — Webpack + hot module replacement with Phaser would make for super fast development in the browser. I'd love to see a setup for that. Still learning JS structure for projects. I started with basic game states game.state.add('Boot', BasicGame.Boot); game.state.add('Preloader', BasicGame.Preloader); game.state.add('MainMenu', BasicGame.MainMenu); game.state.add('Game', BasicGame.Game); game.state.add('GameOver', BasicGame.GameOver); game.state.start('Boot'); // start it up And I try to break out my files into logical 'components' <script src="lib/phaser2.4.4.js"></script> <script src="js/Boot.js"></script> <script src="js/Game.js"></script> <script src="js/moon.js"></script> And that's fine when i'm in the Game.js file and referencing this. BasicGame.Game.prototype = { create: function () { this.input.maxPointers = 2; // for mobile this.input.addPointer(); drawMoon(); } } But then I run into issues in other files like moon.js referencing the global game. vs this. // # Moon.js function drawMoon() { game.moon = game.add.sprite(500, 200, bmd); game.moon.deathTween = game.add.tween(game.moon).to({ alpha: 0, y: 0 }, 500, Phaser.Easing.Cubic.Out); }

@royibernthal if you notice in the Phaser audio example there's one line of code that allows multiple playback without clipping/restarting. I had the same double jump audio issue and fixed it with this: sfxjump = game.add.audio('jump'); sfxjump.allowMultiple = true;

Confirmed, this also fixed my phonegap resume issue. Thanks so much @G3n3ralTao!

I also have this problem, will try this excellent fix! Does anyone have audio problems on first load of their app? My MP3 audio playback in phaser sounds modulated until I force refresh the page and all is well.

Hi all, how are you structuring your projects? The require.js templates on github from Rich mention they may not be the best approach so what do you all recommend?

Thanks to you guys I'm refactoring the whole platform/world generation. Already have rolling platforms based on a pool of 8 sprites now, instead of 500! Running at 40fps+ on iPhone5 right now. Will post some other results soon. Have you all run into issues with large world bound numbers? How large do I need to hit before it's a problem, player.x > 1 trillion?

I'm following this great advice and making a much smaller world that will scroll and move platforms around. I kinda wanted people to be able to go back and explore, so perhaps I'll store this in an array and keep it around for later.

Hi guys, I've been running profiles in Chrome dev tools on my game but having trouble making things run faster. I realize this is a hard question to ask, but can anyone point me in a direction of things to try? Play/test here: http://daverau.info/play/leafy-mobile/ - the game world is 50k pixels wide platform type game And uses arcade physics for Gravity - all assets are png retina so I'm scaling for high dpi but that doesn't seem to add my overhead - particle emitter is lightweight and doesn't seem to impact performance - I have about 500 platforms that all run collide checks, is there a way to only collide check what's in the camera view? - how can I better isolate what's causing memory leaks and max CPU performance? thanks for any help you can offer! I know it's hard to debug someone else's game but hoping for pointers.

Thanks MichaelD, Yeah I played with different timers but ultimately I wanted to use the flag to tighten the logic. @chg Yes! Thanks so much for explaining it like this. I had the idea right for the flag but I was attaching it to the global scope instead of per coin, what a great idea! Just implemented that and it's working great now! Thanks guys.

How should my coinPickup() function get called?I've tried this two ways:1. Set the game.pickingupCoin=true flag during tween.onComplete, but it's too slow waiting on each coin tween to end2. Or set it during tween.onStart it's too fast and allows multiple coin values before a single coin is killed What do you guys recommend?var game = {}; // global for easy variable trackingfunction create() { // create coins for (var i = 0; i < vars.coinTotal; i++) { var coin = game.coins.create(x, y, 'coin'); coin.tween = game.add.tween(coin).to({ alpha: 0, y: 80 }, 1000); coin.tween.onComplete.add(function(coin, tween) { coin.kill(); game.pickingupCoin=false; // long coin pickup animations block other coins from being picked up, is there a better way to handle this? }); }}function update() { // add pickup event game.physics.arcade.overlap(player, coin, coinPickup, null, this);}function coinPickup(player,coin) { if (!game.pickingupCoin) { game.pickingupCoin=true; // prevent function from being called more than once per coin pickup game.coinCount += 1; // update count game.coinText.text = game.coinCount; // update UI coin.tween.start(); // animate }} EDIT: Here's what I ended up with after dropping my global game.pickingupCoin flag: function coinPickup(player,coin) { if (!coin.pickedup) { // check for individual coin flag coin.tween.start(); coin.pickedup = true; // set individual coin flag to true, and prevent this coin from being picked up more than once }}

I believe you have to call them separately: game.physics.arcade.collide(player, platforms);game.physics.arcade.collide(player, smallWoodenBox);

I ended up doing something similar with my coinPickup() function: function create() { // create coins for (var i = 0; i < vars.coinTotal; i++) { var coin = game.coins.create(x, 0, 'coin'); coin.tween = game.add.tween(coin).to({ alpha: 0, y: 80, x: coin.x+(game.width/1.8) }, 1000, Phaser.Easing.Cubic.Out); coin.pickedUp = false; // set flag on each coin to prevent multiple update calls coin.tween.onComplete.add(function(coin, tween) { coin.kill(); }); }}function update() { // add collide event for pickup game.physics.arcade.overlap(player, coin, coinPickup, null, this);}function coinPickup(player,coin) { if (!coin.pickedUp) { // check if coin has already been picked up, if not proceed... coin.pickedUp=true; // then immediately set it to true so it is only called once game.coinCount += 1; coin.tween.start(); }}

Would you be interested in sharing any source code for your react/phaser projects? I'd love to see some if this in action, as wiring up state gets complicated quickly!

+1 svg/vector support Awesome work Rich. It's beyond cool how much creativity has been generated from your great work on Phaser. The community is such a huge asset and reason to use Phaser.