Sign in to follow this  

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) {, 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 ), 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.

Share this post

Link to post
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
... and apple removed the image size information from its official docs here
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).

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.