Art production for games: Best practices and optimization
Working with efficient and optimized creative assets will help you improve your game’s performance, reduce loading time, and increase the device’s memory locality. Here are 10 tips on how you should do it right.
During my time as a senior game designer at an edtech company that creates pedagogical digital games for elementary school, I had to pay attention to the conservative nature of school systems — not just in storytelling and UX, but also in technical aspects. The same was true when I joined SciPlay, a gaming company with more than 3 million daily average users globally.
You see, in many countries players still have poor internet connections and old devices, so heavy content adds a technical barrier for a business that creates mobile games (long loading time, poor performance, etc.) and can be a deal-breaker for entering the market. To maximize the games’ performance in such conditions, we must export art very efficiently, and you should do so as well.
Draw as you need, export as you should
Illustrating and designing graphics for games requires technical understanding when it comes to planning and exporting resources. The outcome of the artists’ work is going to be animated, interactive, and will run on devices and consume memory, as opposed to art for printed media. The person responsible for ensuring that the art is optimized and is production-ready is called a tech artist (or technical artist, digital producer, or digital production artist). In many companies or with indie game developers, however, this function is still done by the illustrators themselves who should take into account the technical consequences of their work.
In this article, I’ll aim to provide you enriching knowledge about game art production — backed by proven optimization methods. So, if you are thinking of entering the gaming industry as a technical artist, game illustrator, or indie game developer, this post is for you. Let’s begin!
💡 Tip 1: Export even-numbered dimensions
In several development platforms, the default anchor point of an image is its center (as opposed to the top left corner). In this case, when the exported dimensions of an image are using odd numbers, and the position of the image is set to a whole number, there will be “half pixels” on its sides (i.e., an image with a width of 97 pixels at position X=300 has 48.5 pixels on its left and right sides).
This might cause blurry or distorted images. Therefore, the best practice is to export images in even numbers, even if this will result in an empty transparent pixel line being added to the image’s canvas.
💡 Tip 2: Compress exported images
The exported file size (in bytes) of the images you use affects the loading time of your online game on the web or the size of your app on mobile devices. Also, it might affect the prefetch time of the resources in case your app downloads some of them after installation. A smaller image file size means a faster downloading time and a reduced build size.
To optimize the file size, you can use compression software for the exported images. In general, compressing software will decrease the number of colors in the image, so fewer bytes are required to store the data (which reduces the size of the image file). Of course, this affects the visual of the image as well, but it’s nearly unnoticeable.
💡 Tip 3: Slice & patch
If you have resources that have a seamless pattern or color by design, they can be sliced into smaller patches and rebuilt by code. This way, you can reuse an image at various sizes without needing to prepare multiple assets. This allows for:
- Consuming optimal area on the sprite sheet
- Adjustable size (to fit different game languages or content, for example)
- Reducing build size
💡 Tip 4: Rotate by export, then rotate by code
The transparent area of an image affects its canvas size (width and height) and takes precious capacity from your sprite sheet — eventually causing the unnecessary creation of additional sprite sheets from the given resources.
When exporting, you should rotate images to the state where there is a minimum empty area on the canvas, and then you can re-rotate them by code once they are inside your game.
💡 Tip 5: Split resources
You should split resources with plenty of empty space between their contained graphics into smaller parts to try to minimize the transparent part as much as possible. Splitting a big resource into smaller ones will save you precious areas on the sprite sheet.
It is also a best practice because it will allow you more freedom in changing positions of individual objects without dependencies on all of the other ones. Otherwise, it’s not ideal in terms of maintenance, responsive layout, and adjustments in the future.
💡 Tip 6: Scale down, then scale up
Resources that are blurred by design, seen briefly or with a solid color, and so on can be exported in smaller dimensions (scaled down) to reduce their canvas size and maximize free space on the sprite sheet. (They will also weigh less in KB.) Then you should enlarge (scale up) the scaled-down resources back to their original designed dimensions by code.
💡 Tip 7: One resource to rule them all
In many cases, symmetric objects will be illustrated with duplicated sides. When you export the images, there’s no need to export both sides; it’s enough to export only one side and then duplicate the resource and flip it by code to achieve the original design. This will save you precious space on the sprite sheet and will reduce the size of your build.
💡 Tip 8: Tile textures
Assets with a seamless pattern by design should be sliced into tiles and rebuilt by code. Tiling textures that seamlessly repeat allows you to:
- Use better resolution repeating over space
- Consume optimal area on the sprite sheet
- Adjustable size (to fit different screen resolutions, for example)
💡 Tip 9: Tint assets
When you have the same design for a resource but just with different colors, there’s no need to export any color on its own. The best practice is to export a base layer and build the final shape on it or tint the object itself. For example, you can manipulate the color by code over a base solid layer (a silhouette of the object) and then place the highlights and shadows on top of it. This will save you redundant exported resources and precious space on the sprite sheet.
💡 Tip 10: The power of two
Last, but not least, when you’re exporting images for your mobile game, it’s a good idea to stick to dimensions that are powers of 2 (16, 32, 64, 128, 256, 512, 1024, and 2048). Devices find it easier to handle these sizes, and it’s particularly handy when you’re dealing with creating spritesheets.
Image dimensions like 8x12 for example, might be treated as a 16x16 image (as if it was the next “power of 2” size), leading to unnecessary memory usage and impacting game processing.
📝 Wrap-up
So, as always, it’s important to understand that these are common best practices for optimizing your game performance and not rules. The variety of development software, engines, operating systems, browsers, and devices lead to different experiences for each case.
Also, for every tip above, there might be a side effect. That’s why the nature of the technical artist is to find the right balance between weight, quality, and performance — considering the pros and cons of each optimization method. (A little bit of creativity helps here, too.)
Following these best practices will maximize performance, considering the lowest common denominator of all cases, and will provide you with a better starting point in terms of stability and optimization.
I’d like to thank my colleagues, Adar Nisinboim and Gavriel Broiman, who helped me to refine these tips. You are more than welcome to add your comments, add more examples, and share your thoughts! 👇
