our Simple Rules for Managing Assets
- Automate, Automate, Automate
- 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)
- Give everything long descriptive names and a systematic logical folder hierarchy.
- 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 ).
Why It Matters
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.
The Resolution Problem
Images tend to “breed like rabbits” because of the many device resolutions and aspect ratios we must support. Manually creating separate images for each device is a fast track to burnout.
Here are two strategies I use to stay sane:
Solution 1: Downsample High-Resolution Images
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
Once you have a package manager you type in the following into the terminal for the mac
or the following into the command window for Windowssudo port install ImageMagick
Nicholas Waynik has a tutorial on how to use the resulting images on the iPhone and iPad.choco install imagemagick.app
Solution 2: Use Vector Formats (e.g., SVG)
SVGs let you rasterize to any resolution as needed. I prefer this approach—especially when I revisit and modify assets for animation or reuse.
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.
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.
What About Batik?
I used to rely on Batik for SVG rasterization. It supported batch processing out of the box, no scripting required. But a Java update broke it, and the blame game started. Maybe it’s been fixed by now—but I’ve moved on.Final Thoughts
As your app grows, automation and forethought are the only scalable options. Don’t wait until you’re drowning in assets. Build a pipeline early. Script everything. Version everything. And treat asset generation as code.
Your future self will thank you.
No comments:
Post a Comment