BeachBum Posted September 19, 2014 Share Posted September 19, 2014 Is anyone making HTML5 games for Mobile? I've used Intel XDK for a while for mobile development and it has always worked well. This is the first time I've tried making a game work on mobile with HTML5 and it's doing really badly. I'm not sure if it's something I'm doing wrong or if the power is just really that limited on a mobile device. I have 2 devices I've tested with and both of them should be pretty quick processors.I have the Note 2, it's a couple years old but still a 1.6Ghz quad core so it's probably faster than the majority of phonesThe other device is a Note pro 12.2 tablet with a 2.3Ghz quad core cpu. Both of these drop to about 10FPS when I have a 10 vs 10 NPC battle on screen (there is currently no player interaction). The graphics are tiny, there is no fancy stuff going on just collision detection mainly and it's already too slow. It's running 60fps in a browser on my PC but not on mobile. My questions are: Is this to be expected or have I got something horribly wrong?What methods are you guys using to get HTML5 games on to mobile devices? Thanks for your time! Link to comment Share on other sites More sharing options...
San4er Posted September 19, 2014 Share Posted September 19, 2014 It seems like you're doing something wrong.I'm testing my game on the 5-years old HTC HD2 with 1Ghz single-core old proc. and 512RAM and it has 26-46 FPS depending on the gamestate.Can you show the code?Also you can use firebug profile to see what functions loads it.Also here is a useful library https://github.com/englercj/phaser-debugHere is another useful thread http://www.html5gamedevs.com/topic/9172-understanding-cpu-usage/ Link to comment Share on other sites More sharing options...
BeachBum Posted September 20, 2014 Author Share Posted September 20, 2014 I would actually love someone to take a look at how I have this setup. I was following some tutorial or other but honestly it has me so confused with what "this" is in any given place I'm about to throw it all out. I added the collide and retarget delay steps to try to speed it up a little but it didn't help much.Are you using Intel XDK or some other method for getting it converted to a mobile app?I'm not sure if the assets matter that much but I've attached a zip with the whole deal if you want to take a look.Thanks for any input:Strategy.Game = function(game) { this.redTotal; this.redGroup; this.blueTotal; this.blueGroup; this.redSpawn; this.blueSpawn; this.greenSpawn; this.collideDelay = 5; this.retargetDelay = 2; this.retargetStep = 0; this.collideStep = 0; this.maxXSpeed = 30; this.maxYSpeed = 30;}; var GreenParticle = function(game) { Phaser.Particle.call(this, game); this.size = null;};GreenParticle.prototype = Object.create(Phaser.Particle.prototype);GreenParticle.prototype.constructor = GreenParticle;GreenParticle.prototype.onEmit = function() { this.size = this.scale.x; this.loadTexture('greenParticle');}GreenParticle.prototype.update = function(){ this.size = this.scale.x; Phaser.Particle.prototype.update();} var RedParticle = function(game) { Phaser.Particle.call(this, game); this.size = null;};RedParticle.prototype = Object.create(Phaser.Particle.prototype);RedParticle.prototype.constructor = RedParticle;RedParticle.prototype.onEmit = function() { this.size = this.scale.x; this.loadTexture('redParticle');}GreenParticle.prototype.update = function(){ this.size = this.scale.x; Phaser.Particle.prototype.update();} Strategy.Game.prototype = { create: function() { this.redTotal = 10; this.blueTotal = 10; this.greenTotal = 10; this.buildWorld(); this.time.advancedTiming = true; this.buildWorld(); this.fireRed(); this.fireGreen(); }, buildWorld: function() { this.buildEmitters(); }, buildEmitters: function() { this.redSpawn = this.add.emitter(5,5, this.redTotal); this.redSpawn.particleClass = RedParticle; this.redSpawn.minParticleScale = 0.75; this.redSpawn.maxParticleScale = 2; this.redSpawn.minParticleSpeed.setTo(30, -15); this.redSpawn.maxParticleSpeed.setTo(50, 10); this.redSpawn.gravity = 0.0; this.redSpawn.makeParticles('redParticle',0,this.redTotal,true,true); this.greenSpawn = this.add.emitter(5,5, this.greenTotal); this.greenSpawn.particleClass = GreenParticle; this.greenSpawn.minParticleScale = 0.75; this.greenSpawn.maxParticleScale = 2; this.greenSpawn.minParticleSpeed.setTo(-30, -15); this.greenSpawn.maxParticleSpeed.setTo(-50, 10); this.greenSpawn.gravity = 0.0; this.greenSpawn.makeParticles('greenParticle',0,this.greenTotal, true,true); }, fireRed: function() { this.redSpawn.emitX = 5; this.redSpawn.emitY = gameHeight / 2; this.redSpawn.start(false, 60000, 1, this.redTotal, true); }, fireGreen: function() { this.greenSpawn.emitX = gameWidth-5; this.greenSpawn.emitY = gameHeight / 2; this.greenSpawn.start(false, 60000, 1, this.greenTotal, true); }, fight: function(a, { if (a.size > b.size) { a.scale.x -= b.scale.x; a.scale.y -= b.scale.y; b.kill(); } else if (b.size > a.size) { b.scale.x -= a.scale.x; b.scale.y -= a.scale.y; a.kill(); } else { // they're == a.kill(); b.kill(); } }, getStrongest: function(Spawn) { return Spawn.getFirstAlive(); }, update: function() { if (this.collideStep === this.collideDelay) { this.collideStep = 0; this.physics.arcade.collide(this.redSpawn, this.greenSpawn, this.fight, null, this); } if (this.retargetStep === this.retargetDelay) { this.retargetStep = 0; var greenParticle = this.getStrongest(this.greenSpawn); if (!isEmpty(greenParticle)) { for (var c=0;c<this.redSpawn.children.length;c++) { if ((!isEmpty(this.redSpawn.children[c])) && (this.redSpawn.children[c].visible === true)) { var distance = this.physics.arcade.distanceBetween(this.redSpawn.children[c], greenParticle); var spd = distance / 5; if (spd > 30) { spd = 30; } if (spd < 15) { spd = 15; } this.physics.arcade.accelerateToXY(this.redSpawn.children[c], greenParticle.x, greenParticle.y, spd, spd, spd); } } } var redParticle = this.getStrongest(this.redSpawn); if (!isEmpty(redParticle)) { for (var c=0;c<this.greenSpawn.children.length;c++) { if (this.greenSpawn.children[c].visible === true) { var distance = this.physics.arcade.distanceBetween(this.redSpawn.children[c], greenParticle); var spd = distance / 5; if (spd > 30) { spd = 30; } if (spd < 15) { spd = 15; } this.physics.arcade.accelerateToXY(this.greenSpawn.children[c], redParticle.x, redParticle.y, spd, spd, spd); } } } } this.retargetStep ++; this.collideStep ++; }, render: function() { this.game.debug.text(this.time.fps || '--', 2, 14, "#00ff00"); }}; function isEmpty(object) { for (var key in object) { if (object.hasOwnProperty(key)) { return false; } } return true;}phaserStrategy.zip Link to comment Share on other sites More sharing options...
chg Posted September 20, 2014 Share Posted September 20, 2014 You should use the XDK profiler to see where you are spending all that CPU time on mobile. I'm to lazy to do that for you, but I did use the profiler on my desktop browser and it looks like that funky isEmpty() function is actually where alot your CPU use is going... unless I'm misreading something it accounts for a third of the time your entire update loop costs. Link to comment Share on other sites More sharing options...
BeachBum Posted September 21, 2014 Author Share Posted September 21, 2014 Oh fun, something tells me I should have learned how to use that profiler by now. Thanks for the hint and I'll see what the XDK profiler comes up with as well. Link to comment Share on other sites More sharing options...
BeachBum Posted September 21, 2014 Author Share Posted September 21, 2014 ok, one more question on this subject. I did the profiler and smoothed out some slow bits including the ugly IsEmpty function which I completely did away with.In the profiler I got the fps up to 60 and was really happy, then I do a rebuild and install it as an app again and it's down to 15fps. The profiler points out that the slowest thing in the loop is updating the fps. Why would it run at 60fps in the profiler through the App Preview app but only 15fps when installed by itself? It seems like it would be faster without the overhead of the profiler and app preview. Any ideas? Link to comment Share on other sites More sharing options...
San4er Posted September 23, 2014 Share Posted September 23, 2014 Here I had the same problem with phaser-debuggerhttp://www.html5gamedevs.com/topic/9172-understanding-cpu-usage/#entry54628So I'm using firebug profiler + game.timer.fps to see what loads the CPU, and CocoonJS + my Android device for testing IRL. Link to comment Share on other sites More sharing options...
valueerror Posted September 23, 2014 Share Posted September 23, 2014 @beachbum...Isn't the APP preview useing crosswalk to run the game and you are probably exporting to apk with apache cordova? Link to comment Share on other sites More sharing options...
valueerror Posted September 24, 2014 Share Posted September 24, 2014 you marked something as solution that has no solution in it - just a way to search for it.. what was the problem ? Link to comment Share on other sites More sharing options...
BeachBum Posted September 25, 2014 Author Share Posted September 25, 2014 There were really several posts that led up to the solution so I just picked on that definitely helped toward it. If I could have marked 2 of them as the solution then it probably would have been more helpful. The bottom line was that I should not have been getting that slow performance so I marked that one post as the solution. The other part of the solution was that I was using Cordova instead of Crosswalk. When I switched to crosswalk I got much better performance. Link to comment Share on other sites More sharing options...
valueerror Posted September 28, 2014 Share Posted September 28, 2014 well.. and as far as i know we will see even better performance with crosswalk on android L ... can't wait Link to comment Share on other sites More sharing options...
Recommended Posts