Jump to content

Performance Question on Mobile


BeachBum
 Share

Recommended Posts

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 phones

The 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

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-debug

Here is another useful thread http://www.html5gamedevs.com/topic/9172-understanding-cpu-usage/

Link to comment
Share on other sites

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

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

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

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

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...