Optimizing for mobile

[moe091]

I have a few questions about optimizing mobile html5 games that I haven't come across an answer to yet in my searches. I'm mostly asking in regards to canvas performance because I assume the webgl enabled browsers aren't the ones that are going to have the biggest performance problem(and I'm using phaser with it set to swap between webgl/canvas depending on whether or not the device can use webgl).

 

First Question, is it faster to draw images that have less colors? I know using less colors in a sprite or background will obviously reduce the file size leading to less RAM usage but I feel like my game is bottlenecked by CPU usage rather than ram, so I'm wondering if the actual process of rendering an image is faster for images with less different colors. And if not will lowering the ram usage make a difference on performance in anyway even if my game is mostly just limited by CPU?

 

Second, For my background I have a black image with a bunch of white stars on it that scroll downward to give the illusion that my ship is flying forward. Would it be more efficient if I just set the games background color to black and then made png with just the stars and a transparent background, so it'd essentially look the same but my background would be mostly transparent. Or would it still take just as long to draw the image?

 

3rd, One optimization I just implemented is breaking up my main loop into different parts based on how often they need to be executed. For example the part that scans through all the sprites and checks if they're off screen and recycles the objects if they are used to be called every frame but now I'm just calling it once a second. And the update method of my enemies that basically just changes their velocities based on an algorithm to move them in a pattern and checks when they should perform actions such as shooting is only called once every 100ms now, the only things called every frame are the Phaser physics.overlap calls and the line that scrolls my background image.  Is this safe to do? I haven't had any problems on my test devices but it just feels like a really dirty fix. And if this is safe, can anyone think of any ideas on how to improve it? I'm thinking of increasing the interval to check if enemies have traveled off screen from 1 second to around 3. I pretty much halved the amount of total time spent in my main game loop by implementing these changes already.

 

 

And can anyone tell me other ways to optimize my game so I can squeeze the most performance I can out of it? I'm using Phaser so if anyone knows any phaser tricks that'd be great. If you know of any good resources about optimizing javascript code I'd b interested in that too, I've been reading about that on my own a bit already. I feel like my game should be running faster than it is, On really old phones(~512 ram and ~1gig processor phones that i've tested on like the samsung epic) I can't reach more than 30fps even when theres only 5 or 6 sprites plus the background on the screen. Is this normal or am I doing something wrong?

 

 

 

 

Lastly, this is kind of unrelated but I am really curious about it, if my game won't run on phones older than say a galaxy S2 is that going to be a problem in terms of getting it sponsored? I just don't think I'm going to be able to improve the performance enough to make that work and it's a pretty big game that I've spent a lot of time on. Is it normal for games to not run well on older phones like that? Does anybody know what kind of things tend to slow Phaser/html5 games down so I can make sure I'm not doing any of them?


Thanks for reading my long post, I hope someone can help me or ease my mind about performance on older phones.

[BadBearGames]

1. I'm not sure about this, but I don't think it'd make much of a difference. When making games, I just make sure my textures aren't too big for my objects.

2. I just made a game that had this in it. I went with a transparent image with stars over another background image. Having just the background image in vs having the background and the stars in made no difference in performance for my game, they were pretty much the same. You might want to look at the render starfield phaser example here, that might be faster: http://examples.phaser.io/_site/view_full.html?d=display&f=render+texture+starfield.js&t=render%20texture%20starfield

3. As far as I know, this is a safe thing to do. I'd increase the interval.

 

It's good to have your game running on as many devices as possible, but if you really can't get it to run on very old devices, I wouldn't worry too much about it. Always have it tested on as many devices as possible though. As for performance, just keep experimenting and testing until you find what works best for your game, you'll have to get creative. Don't be afraid to make changes to your game to fight performance issues. Also, keep in mind that a new release of Phaser is coming up, which might make your performance better. Here are some tips:

• Set .autoCull to true on sprites that move off camera
• Reuse sprites and resources as much as possible (re-position an enemy when dead instead of destroying them)
• Make sure your texture sizes aren't too big
• set .body = null on any sprite that does not use physics
• destroy and cleanup any resources you stop using
• And once again, just keep testing until you find what's right for your game

I hope I offered up a little knowledge, I'm very new to Phaser myself. I went from having 50 asteroids to avoid in my last game, to having 4 that re-position and change their appearance when far enough away from the player

[moe091]

Wow thanks a lot, didn't expect to get such a good answer . I've already done some of these things but there's a few tips here that should help me out a lot