A Guide To Building Mobile Game Image Assets II: Resource File & Animation

We've talked about how to break down image assets for mobile games on the previous part. In this part, we'll continue on how to create resource files and preparing animation assets.

Creating A Resource File

Loading image files takes process time, plus each image files actually have headers which can actually mean additional file sizes. If you have a lot of small images, it's best to combine the images into one single image file instead. In our previous example we have 3 files; the background, paper and pencil; just combine those files using image manipulation applications like Photoshop or GIMP into a single file called resources.png (file name is not a standard, you can think of any other name).

Try to have as few empty space as you can to reduce the file size to minimum, but don't break apart the resource image – say, the paper image – into smaller parts and then mix 'em up with other resources like the background image for the sake minimizing empty spaces; this will only confuse the programmers. Keep a sense of 'boxed' or image grouping. Lastly write down the position of each image groups (starting x and y, width, height) to help the programmers split the images into different images again later in the codes.

Animation Sprite

Animation is done in 2 ways: programmatically, or by image sequence (actually, 3 if you count a combination of both). For example, if you want to animate a dragonfly flying across the screen, then the animation of it moving across the screen is done programmatically inside the code. But the animation of the dragonfly fluttering its wing while moving is done by scrolling several frames of images in a sequence.

The image are stored as a single image, ordered in series frames from left to right or top to bottom; from the beginning of the animation to the end.

One thing to note is; and the one thing the artist often forget or doesn't know; is that the image arrangement MUST maintain the width and height of animation frame. Notice the difference between these two images:

Incorrent Goalkeeper.png:

The spaces between each frames varies from each other

Corrected Goalkeeper.png

Spaces between each frame is the same

Also when creating moving animation such as jumping, consider communicating with the programmer on making the movement path of the sprite to minimize empty spaces.

Additional Tips:

• Use png files with transparent background.
• Don't use too much colors, if possible use web colors instead. Chances are some of those colors won't show in the phone anyway (although some phones nowadays support more colors, but still it's a good optimization practice).
• Don't use smooth gradients; I can't emphasize this enough.
• If you're animating large sprites, it's a good idea to break down the spite into several smaller parts and animate just the important part rather than animating the whole thing. That way you don't end up with plenty of big image files and bloat the jar file. You can also try breaking it down into several small animations.
• You can use third party png file compressor such as OptiPNG to make the image file size a lot smaller, just don't over compress the files as they may cause the image to not show on the phone itself. Personally, if find using OptiPNG with just the default setting works fine.

Share on Facebook Share on Twitter Share on Google Plus

About BhimZ

Aria Bima Mahesa Putra (aka BhimZ) is an experienced software developer, with a lot of experience in various projects with different background. He is currently focused in mobile apps, and has been invested in game development ever since he was a kid in highschool. He founded BhimZ games, his one-man-army game studio as a mean to make his own brand of games during his spare times working as a software engineer in a multinational company. At leisure times he enjoys the company of his family, playing mobile games and watches Japanese tokusatsu and anime with his son.