Our alpha testers helped us discover that some of our maps performed worse than others in terms of frame rate. In BioBeasts it's essential that we maintain a high frame rate since the game requires rapid input from the user. Any delay in responsiveness and the controls start to feel floaty.
Let's compare. This map performed well:
But this map performed horribly:
SO what's the difference? Basically it came down to these performance killing factors:
- Texture size
- Number of animations
- Number draw calls
Here's how we improved mobile device performance by tweaking our 2D maps:
First we reduced the size of textures. We could have taken the lame approach and simply scaled down our assets, but this would have reduced the resolution and looked bad. Instead, we used symmetry to our advantage. By dividing the map into quadrants, we flipped and repeated one section of the map 4 times. This way a single 1024x1024 texture is used to create a full 2048x2048 map! Instantly we saved 75% reduction in texture size! To make sure the maps didn't look too symmetrical and boring, we overlayed a few asymmetric objects on top like debris, flashing alarm lights.
Next, we optimized our animations and reduced overdraw. The map below was heavily animated as you can see.
Using Unity's overdraw view, we were able to see how all the additional layers in this map created extra work for the gpu.
By flattening some of the layers together and being selective with which portions of the screen are animated, overall frame rate improved.
Here's the bottom line to improve performance for mobile devices:
Bake (flatten) as many assets as possible. This will minimize unnecessary alpha overdraw and reduce overall draw calls.
Reduce the size of your textures via symmetry or repeatable portions where possible! This will lower the memory footprint and overall size of your app.
We have more optimization to do, but so far we're seeing significant improvements as we get closer to the BioBeasts Beta launch!