Lessons learned: Art

This is another post in the Lessons Learned series. Today’s lesson: art

Chickens n Kittens has to run on a lot of different platforms on a wide range of screen sizes. Everything from an iPhone 4 with 640 lines of resolution to a retina display iPad with 1536 lines of resolution, and even higher for some PC displays. That’s quite a wide range! So in order to make sure the game looks just as good on a 640 display as a 1536 display, it contains multiple copies of each art asset in multiple sizes.

Here is the original process we used for getting art into the game (warning: it’s painful).

  1. Create the art in Inkscape
  2. Manually create a batch script that will export each layer of the image and combine them the way we need for each resolution that we need
  3. If the art is part of a sprite sheet, update each sprite sheet definition file (basically, a text file listing each art asset that belongs in that sprite sheet) for each resolution
  4. Rebuild the content (this compiles the sprite sheets and converts the image files into an easier to read format, so we can read the raw bitmaps instead of PNG or JPEG images, for example)

That whole process took an hour or two, particularly because of step 2. Obviously that just wouldn’t do.

The first step was to get rid of step 2. We wrote a tool that would take a much simpler XML file, then generate a batch script from that. Creating the XML file took about 15 minutes, rather than an hour. A pretty big improvement! Here’s an example of what the XML file looks like (this is for the Happy Flower):

Trust me, creating this is way easier than creating a complicated batch file.

So now the steps looked like this:

  1. Create the art in Inkscape
  2. Manually create an XML file defining how the art should be exported
  3. Run our magic tool to generate a batch script from the XML file, then run the batch script to export all the art
  4. If the art is part of a sprite sheet, update each sprite sheet definition file (basically, a text file listing each art asset that belongs in that sprite sheet) for each resolution
  5. Rebuild the content (this compiles the sprite sheets and converts the image files into an easier to read format, so we can read the raw bitmaps instead of PNG or JPEG images, for example)

Better. And we lived with this for a while. But Step 4 is such a pain. And Step 5 takes time too. What if we could combine steps 3 – 5?

That’s what we did. Now the magical tool loads our XML file and spits out compiled art ready to be loaded by the game.

This is what an updated XML file looks like (this is for the Turkey King):

Here are the steps for getting the Turkey King art into the game:

  1. Create the art in Inkscape
  2. Create the XML file
  3. Run our magic tool

Done! So much faster and easier. In this case, automation beats a tedious and drawn-out manual process.