1. Format

2. Sprite Sheets (Tiles) and Animations

3. Collaboration Tools

4. Priority

1. Format:

All images must be saved as PNGs. All font files must be TTFs or OTFs. To save memory, PNGs can be compressed using the program below (if the image quality is drastically reduced then compression is not necessary):

PNGQuant

Also try to reduce the dimensional size of the PNGs so that they fit around the actual image, getting rid of wasted transparent space.

However, be careful not to cut off any necessary alpha blending such as the blurring in this image of a running stick man. At the same time don’t leave in unnecessary transparent space. Adobe Photoshop does a great job at cropping out transparent pixels with the Image > Trim > Transparent Pixels function. Although, there are some situations where we would like to have a 1 pixel thick border around the images; this is due to some scaling issues (which we won’t go too much into detail) that causes our renderer to use pixels near the actual image but doesn’t belong to this image.

Finally, after you’re done editing (and compressing) the image, save the image as a PNG and use this program:

ImageMagick

This will get rid of some warning messages that show up in our game. Specifically you will use the convert tool provided in this software. Below is a step-by-step process of installing and using the convert tool:

1. Download ImageMagick and install it on your computer.
2. Then go to the location where you installed ImageMagick (e.g. C:/Program Files/ImageMagick-<some version>)
3. There you will find the magick tool
4. After that you will need to edit your system path environment variable (for Mac OS X users follow the instructions here; Windows users follow the instructions below)
   1. Press the Window Key and type in the search box edit the system environment variables
   2. Click on the result that says edit the system environment variables and you should be in the System Properties window, on the Advanced tab
   3. Click on Environment Variables
   4. Look under System variables and find the variable named  PATH (capitalization doesn’t matter)
   5. If you cannot find the variable then create a new variable named PATH
   6. Edit the value of the variable by double clicking the variable or clicking Edit
   7. Then add the location you found earlier to the value (if there are existing paths then add a semicolon before adding the location)
5. Once you’ve edited your system path, you can now open up a command prompt window or terminal and type: magick INPUT.png OUTPUT.png
6. To make things easier you can create a script file. For Windows it’s a batch file; not quite sure for a Mac though.

Windows Batch File

• Open notepad
• Copy paste the following and save as: NAME.bat

@echo off

:loop
if %1x==x goto :EOF
magick %1 %1
shift
goto :LOOP

• Now you can drag and drop all your images onto this file and it will convert those files (this script will replace the input files)

Power of Two Rule:

Since we’re mostly developing computer games this rule won’t be as strict, but it is recommended that you make the size of every end product image a power of 2 (i.e. 2×2, 4×4, 32×32, 128×64, 256×1024, etc.). This is mostly for optimization purposes which won’t be explained here, but textures that aren’t powers of 2 will not break the game in any way. The individual images within a texture (spritesheet) do not have to be a power of 2, however making them a power of 2 will make it easier to pack all the images together to make a power of 2 texture. The important part is to make the final texture a power of 2 whenever possible. For example, let’s say a solid image is 100×100, then rather than keeping it 100×100 it’s more optimal to add extra transparent padding around the image to make it 128×128. Modern computers will have a lot more memory than we could possibly use up so it’s better to waste a bit of memory than to reduce performance.

2. Sprite Sheets (Tiles) and Animations:

Loading multiple images in-game takes time and memory, but we can reduce both by compiling our images into sprite sheets (also called Tiles).

The link below shows 2 short video clips (part 1 and 2) that tells you why we use sprite sheets and how you should make your sprite sheets:

Sprite Sheet Video

If you saw the videos then good, if not then you really should watch them. Next, we’ll show you some examples of sprite sheets with different sized sprites and how you can document them so that our programmers can implement them quickly (the way to document sprite sheets will depend on the programmer implementing them so the documentation style may vary project to project).

Example:

In this example we have a text file that denotes the directory path of the sprite sheet, the number of sprites in the sprite sheet, and the identification and location/size of each sprite within the sprite sheet. Here TREE00 is the tree in the top left corner and TREE01 is the tree right below it; TREE10 is the top center tree and TREE11 is the one right below it; and etc. The numbers to the right of the identification denotes the location/size of the sprites in pixels. The first 2 numbers are the x,y coordinates with 0,0 being the top left corner. The last 2 numbers are the width and height of the sprite.

You should note, however, that depending on the hardware the game is running on the max texture size it can support differs. For our purposes around 8192×8192 should be the absolute max but as a good precaution try to keep the images at or below 4096×4096. Also, organize the way you create your spritesheets so that they are easier to name (e.g. trees, animals, buildings).

Due to some scaling issues it is recommended that all images within a spritesheet have a 1 pixel (transparent) border; this is because on different resolutions the program sometimes uses pixels from the adjacent frames and so this will compensate for that.

Here’s a quick example: each frame is 64×64 (the squares themselves are 62×62 but with the 1 pixel transparent border they’re 64×64), the spritesheet itself is 256×128.

Animated Sprites:

The dimensions of each frame needs to be the same if and only if they are part of the same animation. For example, let’s say  jumping animation frames are 64×32 and running animation frames are 32×32; jumping and running are 2 independent animations so the frame sizes do not have to be the same. The only frames that have to be the same sizes are the individual frames in the jumping animation which must all be 64×32 and  for the running animation all frames must be 32×32.

3. Collaboration Tools

Go to section 3 on the programming page here. Using SourceTree you can easily upload your latest graphics and also see how the game is coming along.

4. Priority

1. Make texture a Power of Two
2. 1 pixel border around each sprite in a spritesheet
3. Get rid of unnecessary empty space
4. Make individual sprites in spritesheet a power of 2 as well (optional)