Reducing .apk size of my Android game by 88%

As I switched to landscape mode, I started to create mirror-flipped images of unit cards using the -flop option in ImageMagic in one of the card-generating steps. As the script rolled on for some time, it hit me that this would increase the amount of graphics a lot. I got worried about the size of the final .apk file. First time since I started the project I decided to check.

I created a package containing only the lowest (800x480) and highest (2560x1600) resolution images. It's 106MB!

I need to add 4 intermediate resolutions, so I'm looking at 300+ MB for the final .apk. I searched the docs and found that the limit is 50MB and rest has to be provided as a separate package. Or, you can distribute two different .apk files. I didn't like any of those. I hate when you download an Android game, and then you have to wait for it to download hundreds of megabytes more. I needed a new approach.

I searched the Internet. Most advice is about packing your code using compressor/obfuscator programs. But the gains are really negligible. Then one thing caught my eye: using JPEG for textures. I'm using TextureAtlas to pack everything automatically, but I could separate the images with, and those without, transparent areas and pack them separately as PNG or JPG.

The problem is that 90% or the graphics need transparency. In this particular case the main problem are the card images, which have rounded corners. And then I got this great idea: separate the card image into frame and contents. There are only four card types in the game (one for each faction and gold one for the items), and all cards of the same type share the same frame. The inside of the card is different for each one, but it does not require transparency. Instead of packing 126 cards into PNG texture, I would pack 126 cards into JPG texture plus 4 frames into PNG.

As I tried this, I got some weird clipping artifacts in the JPG texture, probably because I turned off the 2-pixel padding. So, instead of pixel precise cropping, I increased part of the graphics that gets copied to JPG so that there is some overlap. When staging the images, make sure the jpg one is drawn first and PNG frame over it. The part that overlays will cover the bad edge pixels.

BTW, by “staging” I mean placing the Images into libGDX Stage. To make the code simpler, I created a nice CardImage class (descended from Group) to handle drawing transparently. This Group contains the center of the card from JPG texture and then positions the frame from PNG texture over that.

This saved A LOT, but I got so concerned about the size that I wanted to do something about flipping as well. I researched if I could only flip a part of the image. It's possible using the AtlasRegion.flip() function. But I also had the problem that I didn't want to flip the whole image. The textual part should remain the same and only the unit graphics should be mirrored. To do this, after calling flip(true,false) I used setRegionY and setRegionHeight to reduce the flipped region size. Using the flipped region I created another Image and added it to the CardImage group. At runtime, I simply show or hide this image when I need the unit to face left or right.

Result

New .apk file with the same content is now only 12MB. A 88% save. Once I add all the other resolutions, I estimate the final .apk to be about 40MB if all goes as planned. Compare this with 300MB+ I expected at the beginning.

TL;DR Summary

Beside all the other advice you might find on the web (compressing the code, etc.), add these three:

use JPG wherever possible
if you use PNG only for semi-transparent border, cut the image into frame + content. Store the frame in PNG and content in JPG Of course, if your frame is not reusable on multiple images and has complex colors this might have the opposite effect. However, there's a solution to that as well: cut the frame into four pieces (left,right,up,down) and assemble it at runtime. No more empty space in the middle of the frame in PNG.
If you have images that are flipped or rotated, store only the original and flip/rotate at runtime.

UPDATE Oct 28: The final .apk with all the graphics, music and sound effects is 42MB:

https://play.google.com/store/apps/details?id=com.bigosaur.gos.android

Mission accomplished :)

read more... Tweet to @bigosaur Bigosaur, 2014-10-14