Would you like to reduce your image file sizes by 50+%?
If you have ever created a game for a mobile device with a good amount of animations and effects most likely the issue of maximum download size or available virtual memory for your game has become top of mind. It is very important to keep your game asset file sizes as small as possible without loosing quality. What if I could show you how to cut all your game image file sizes by 50+%? Well lets take a look at a couple techniques.
GPU Image Compression Using ATFs
On the Adobe AIR platform images are automatically compressed a bit by the compiler when packing images into the final swf which can really increase compile times but results in a smaller swf file, regardless, it would be nice to compress the original image assets ahead of compile time.
My initial thought was to try some sort of image compression using zlib or 7zip on a PNG image but the resulting file would be a compressed file that has to be decompressed at runtime. That's not ideal because it only saves memory when downloading external assets that are loaded at runtime and it would have to be decompressed into virtual memory to get the actual image data.
With the new Stage3D apis in the latest version of the flash player Adobe introduced the ATF file format that is a compressed, cross-device, GPU ready image container. It can hold all the different compressed GPU image formats required by each target platform. Utilizing ATFs requires you to render your images on the GPU.
Also it is important to note that PNG / JPG images are stored twice first in virtual memory then uploaded to the GPU so not using the ATF file format results in duplicate memory requirements when rendering on the GPU. The use of ATF compressed images is a very good idea all around for faster rendering times and a reduction of virtual memory requirements (which is important for older devices with less RAM). It also allows for asynchronous upload to the GPU so that your ui doesn't freeze.
ATF Compressed Image Example
It may be hard to tell the artifacts in the image so view the large Image
A painful part of cross platform development is dealing with all the different platform requirements with different compression formats. An ATF file encapsulates all the different formats into one container but you still have to generate each target platform's required image file format. Each compression format had a different reduction in file size but on average using the ATF file format with LZMA compression turned on resulted in about a 50% reduction from 152 kilobytes to anywhere from 61 to 86 kilobytes. By far the best compression algorithm in this case was the ETC compression algorithm.
The PNG2ATF utility provided by Adobe that comes in the gaming SDKs was used to create the ATFs for this example and the command used to produce these image is:
png2atf -c p -r -n 0,0 -i PawnBot_orig.png -o PawnBot_orig_pvr.atf
I changed the texture type by changing the letter after the "-c" command, either d (DTX), e (ETC), or p (PVRTC). The "-r" turns on LXMA compression and "-n 0,0" turns off the additional embedded mipmap images.
***Note: It is not required to use a compressed ATF image but it saves memory and download size so weigh the pros and cons based on the resulting image quality.
Image Compression Using PNGQuant
If you are not rendering using the GPU there is another compression technique derived from web development that can really save on file size. Lets look at a web development compression lib called PNGQuant. PNGQuant was initially developed by Kornel Lesinski for compressing web image file sizes to boost download speeds in browsers. It boast reduced image file sizes of up to 70% of the original file size which is exceptional. It uses a modified version of the Median Cut quantization algorithm and additional techniques to mitigate deficiencies of Median Cut.
PNGQuant Compressed Image Example
The image on the left is uncompressed at 152 kilobytes and the one on the right is compressed using the PNGQuant lib with a reduction in size of about 83% to 25 kilobytes. You can't tell any loss in quality. Larger images will see an even greater reduction in size. I've seen images at 2 Megabytes reduced to a couple hundred Kilobytes.
Utilizing this compression technique results in a final PNG image file with transparency in tacked and a really nice file size reduction. The great thing is that it can be used from the command line for automation and there are gui tools for visually tweaking your images to decide on the level of compression wanted. So right away using the PNGQuant image compressor you get a drastic savings. Your next question might be, "I wonder if combining both PNGQuant and ATF compression might yield even better results?".
Combining PNGQuant Compression W/ ATF Image Compression
Well, unfortunately, it turns out that you will not benefit from using the PNGQuant compressor in combination with ATF texture compression. So if you are rendering using the traditional flash display list I would recommend utilizing the PNGQuant compression lib but if you are rendering via the GPU utilizing the new Stage3D apis it is recommended to use the adobe ATF file format.
Keep in mind, the ATF file format can be used as a container for holding uncompressed images as well that live on the GPU instead of in virtual memory. So even if you don't want image quality loss still use an ATF file.
For a more in-depth look at the ATF image format check out the following articles:
All of these image compression techniques will be incorporated into GameBuilder Studio for you so no worries if this topic doesn't make much sense. If this is not something you want to deal with when building your game download GameBuilder Studio and benefit from a visual interface that handles all of these techniques for you behind the scenes and focus on developing your games across multiple platforms.