A Guide To Building Mobile Game Image Assets I : Image Breakdown

In creating mobile games, I seldom have problem communicating with the graphic artist on how the art assets should be. I found out that most of the time we are going back and forth on not how the game should be displayed, but on how the artist should prepare the image asset itself. Make sense, since most of the artist I work with never really had experiences with mobile games (while the ones that does are really hard to find).

Learning from that experience, I decided to compile a small guide on how to prepare image assets for a mobile game. This guide is dedicated for graphic artists, though I'm not exactly one (I only do some digital art once a while) I hope that it's quite useful. We'll start on how to break down a screen into image assets for the coder to use.

Note:
The image assets used in this article is created by me, taken from one of my games. Feel free to use them if you like, but don't forget to give me some credits.

Breaking Down A Screen

To enable the screen to be animated (and for optimizing purposes), a screen needs to be broken into several bits of images. Take this screen below as an example:

The first step is to split the dynamic elements with the static ones. We wanted to apply animation to the paper and pencil; let's say, adding a sliding into the screen effect at the beginning of the screen.

Therefor, the paper and pencil are dynamic elements and should be separated. The turn indicator and the writings on the paper are also dynamic elements, but we'll disregard them for now. Thus now we have three images: The background, the paper and the pencil.

The next step is to identify which element we need to optimize. In mobile games, it's generally not a very good idea to have large or full screen images; as we always need to remember that mobile phone has a limited memory heap size and/or processor. That's why the background image should be optimized. The trick is to find a repeatable pattern of the image, so rather than using a full image, we could instead use bits of the image and tile them using codes inside the game. Looking at our background image, we can see that it's actually just a single pattern repeating itself over and over, so let's just remove the rest. Now we have a smaller image for the background, shown below:

Taking the step further, we can also break down the paper image. By looking at the pattern, we could break the image into the following part, while the straight line on the paper can probably done by code so we can just remove that.

Tips:

Not every image can be broken down like this, for example, the pencil images. That's why you should always try to keep the images simple, and as much as possible avoid using gradient fill so it can later be broken down if necessary. Gradient fill especially smooth ones also use a lot colors, which means bigger file size, and it probably won't show much on the phone since the screen size is usually small.

Removing the duplicates, this is what's left from the paper image:

Last step is write down the size of each image parts, so the programmer can know how to replicate the image from the code (this is something the artist sometimes forget to do, and takes a lot of time for the programmer to figure out):

background = 176 pixel * 220 pixel

tile_background = 40 pixel * 40 pixel

paper=147 pixel * 176 pixel

tile_paper_left_border = 33 pixel * 11 pixel

tile_paper_hole_border = 33 pixel * 33 pixel

tile_paper_top_border = 11 pixel * 33 pixel

tile_paper_right_border = 11 pixel * 33 pixel

tile_paper_body = 33 pixel * 33 pixel

Note: the sample above is not a coding standard, just something I came up. If you're an artist and working together with a programmer to make the game, try talking with him to see what standards you should use.

Of course, it's much easier if you can break down the images into equal sized parts and then just tell the programmer the size of each tile parts.

Now that we're done with this part, on the next part we will continue on building resource file and preparing animation sprites.

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.