How do you render sprites faster on old mobile devices

[ritherz]

Hi guys!

 

I'm testing my game on an iphone 4, and a low-end android I bought a year ago.  So the FPS mentioned below is refering to these devices.

 

I have a spritesheet (2 spritesheets, about 1500px X 1500px ) for 2 different characters, each frame is around 100x150px.  When I don't animate the characters, I get decent FPS (30-40fps).  When I animate them, it drops to 10 on iphone 4, and around 20-30 on the android.

 

They are both loaded via json texture atlas, which, by experimentation, yielded slightly higher fps than XML texture atlas or putting them both in the same spritesheet:

game.load.atlas('viking', 'viking.png', null, vikingdata, Phaser.Loader.TEXTURE_ATLAS_JSON_HASH);game.load.atlas('mage', 'mage.png', null, magedata, Phaser.Loader.TEXTURE_ATLAS_JSON_HASH);

I'm adding the sprite/animations as follows within a prototype of a group :

FighterObj.prototype = Object.create(Phaser.Group.prototype);FighterObj.prototype.constructor = FighterObj;var FighterObj = function(game, x, y, fighter) {  Phaser.Group.call(this, game);  this.fighter = fighter;...    this.icon = game.add.sprite(x,y, 'viking');    this.icon.anchor.setTo(.5,.5);    this.icon.animations.add('death', Phaser.Animation.generateFrameNames('Viking-Dead__',0,31,'.png',3), 60, true);    this.icon.animations.add('idle', Phaser.Animation.generateFrameNames('Viking-Idle__',0,23,'.png',3), 60, true);...

I've looked at some of the tips in various places (like http://www.html5gamedevs.com/topic/9931-mobile-performance-tips-tricks/page-2 ), I tried precaching functions, but they don't seem to help, so I've gone back to prototypes.

 

I don't think I have any special stuff in an update function (certainly not the main loop), but I'm not too familiar with sprites, so maybe it's each frame it's doing more than I think it is?

 

Is there any way to speed the FPS up in my case, or am I just testing on too-low-end of devices?  On all desktop/laptop devices I have a fairly consistent 60fps.

[RaphaelStary]

(my post is not phaser specific, I never used it.)

I think your sprite sheets are too big for low memory devices.

a single sprite sheet of yours is not too large according to https://discussions.apple.com/thread/4975106
... and apple removed the image size information from its official docs here https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html
so I would guess there is no hard image size limit in the newest version of mobile safari anymore.

BUT nevertheless I think 2 fairly large images are too much for low memory devices using cavas 2d rendering. You could try it with only one, and see if it solves your performance problem.

I experienced with canvas 2d rendering that you get very bad performance with more than one big atlas/sprite-sheet. When I'm using large atlases/sprite sheets I try to put really everything into one file to get the best performance possible, while keeping the one image below the ios mobile safari size limits (but I don't know if they still exist in iOS 9 as stated above).