Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

How do you render sprites faster on old mobile devices


Recommended Posts

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.

Link to comment
Share on other sites

(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).

Link to comment
Share on other sites


  • Recently Browsing   0 members

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