The Secret to Managing Images, Sounds and other Resources for Mobile Apps

our simple rules

1. Automate, Automate, Automate
2. Keep all the source artefacts and scripts needed to produce the final resources under source control e.g git or mercurial (don't bother with the derived images)
3. Give everything long descriptive names and a systematic logical folder hierarchy.
4. Use texture atlases rather than individual images ( originally I used Zwoptex to generate texture atlases for me, but now days Xcode does it automatically for me ).

When you first start adding images and sounds to your app it doesn't seem like a big deal to do things manually. Any half baked semi-functional  process or algorithm works as long as 'n' is small. But as the number of images and sound clips grow you will pay a higher and higher price for poor decisions you made at the start. It does not take long before you have hundreds of images and sounds. Any technique that allows you to cut down the number of images is a technique you should use. A favourite trick of of mine is to split an image into several layers and to tint one or more layers programatically to get several different colour themed images.

One of the reasons images breed like rabbits is the different resolutions and aspect ratios of different devices. Making different images for each device manually is the road to insanity. There are two different approaches to get around this problem and I use them both.

Solution 1

Make your images at the highest resolution and then down sample to get your lower resolution. One of my favourite tools to do this is ImageMagick as it has a command line interface and therefore can be called from a script. You can use it to resize, crop and rotate images plus much, much more. If I am using a Mac prefer to use the MacPorts package manager to install apps like this, if I am using Windows I use the Chocolatey package manager.

Once you have a package manager  you type in the following into the terminal for the mac

sudo port install ImageMagick

or the following into the command window for Windows

choco install imagemagick.app

Nicholas Waynik has a tutorial on how to use the resulting images on the iPhone and iPad.

Solution 2

Use a vector format like SVG and then you can rasterise it to any resolution you want. I tend to use this solution as I have the habit of going back and spitting my old images into parts in order to animate or reuse the image in someway. It is easier to modify a vector image later if you have to. Inkscape is a good drawing app to use for creating the images.

It does have a command line interface but you have make it jumps though hoops if you want to make it rasterize an entire folder of vector images. Which is exactly what I am always going to ask it to do. You do not want to create the final rasterized (e.g. *.png) images this manually though the GUI. Remember rule number 1. I use the following snippet in the bash scripts I use to generate the final images.

for i in /full-directory-path/*.svg; do /Applications/Inkscape.app/Contents/Resources/bin/inkscape $i -w 100 -h  200 --export-png=`echo $i | sed -e 's/svg$/png/'`; done

and for the 2x images

for i in /full-directory-path/*.svg; do /Applications/Inkscape.app/Contents/Resources/bin/inkscape $i -w 200 -h  400 --export-png=`echo $i | sed -e 's/.svg$/@2x.png/'`; done

You can either copy and paste these command into a mac terminal window or place them in a text file with a *.command extension to create a clickable command.

I modified the this script based on a piece of bash script voodoo I got from gastarbeiten who in turn got it from someone called forger. The original script no longer works because the upgrade to inkscape 0.91 broke it, thankfully it only took a minor tweak to get it working again. Fair warning these scripts sometimes need little care and feeding every now and again. I seem to need to fix them about once every 6 months. Despite the very occasional annoyance these scripts are a life saver.

Originally I used batik to do the rasterization as it supports processing multiple files out of the box without any fancy script voodoo. However a Java update broke the software and there was much pointing of fingers and little solving the problem. They have probably fixed the problem by now but I have moved on.