In editing some sprite sheets myself, I've had to figure out a lot of things about how the game uses the sprite sheets so that I could edit them correctly. Otherwise, even if in the sprite sheet it looks nice, it will not look nice in the game. So I've decided to document what I know in some tutorials to hopefully help others so they can more easily make new and exciting sprites for the game!
First, download the sprites.zip file from the TankPit website here . You need to make sure you have an editing software that can handle transparencies. If you don't already have one, and would like a free one, GIMP works well (I do all my editing in GIMP; I also give a bit of advice for GIMP users at the end of this tutorial).
Think of something you'd like the tiles, dust, splash, explosion, radar, and/or tanks to look like (I suggest you start with tanks and tiles sprite sheets as they are the simplest---but not the mountains/rocks at first), and just start messing around in the editor you've got. Then export (save) them in the correct formats (.gif or .png) and try them in the game. Repeat until you have something you think looks nice.
The 5 Sprite Categories
The game graphics are divided into 5 categories:
[NOTE: the splash sprite sheets are in the dust folder when you download the sprites.zip from the TankPit website. They are named w0.gif, w1.gif, and w2.gif.]
Many of the sprites overlap, or cover, other sprites (of course). Here is the general hierarchy (top covers bottom):
- Radar, dust, and explosion (includes all sprites in the explosion sprite sheet)
- Enlarged fuel & equipment (when using radar)
- Tanks (and ferry when tank is on it)
- Splash (ferry splash, that is).
- Obstacle out of water
- Obstacle in water
- Ferry (with no tank on it)
- Fuel & equipment (normal size)
- Land, water, rocks & borders
[NOTE: water tiles can overlap each other, and rock tiles can overlap each other. See their sections in this tutorial for more information.]
The tiles sprite sheet hosts the majority of the sprites in the game. There are 8 columns and 12 rows in the tiles sprite sheet, making 88 tiles. Each tile is 24x16 pixels. Starting at the top row of tiles, here is a list of what is in the sprite sheet:
- Land in row 1
- Ferry and equipment in row 2
- Map borders in row 3
- Mines, fuel, obstacles (out of water and in water) in row 4
- Water in rows 5 & 6
- Water corners and lifted obstacles in row 7
- Rock in rows 8, 9, 10, 11, and 12
[NOTE: Some tiles in this sprite sheet overlap other tiles (you'll see more about this later). This is the #1 most confusing thing for people editing the tiles sprite sheet (especially for water and rock tiles). Just keep in there, read about it, and test it out. You'll eventually understand it well enough to do what you're wanting.]
Row 1: Land
There are 8 land tiles. I don't 100% understand how the game places the tiles (seems pretty random for the most part), but the little I do know from research was helpful to me and might be helpful to you as well.
To the right is an image of a section of only land, no water around [click to enlarge].
And here is another with rocks and water tiles in the area (see image to the right).
Row 2: Ferry and Equipment This row is fairly simple: column 1 holds the ferry sprite, and columns 7 & 8 hold the equipment sprites, while the rest of the tiles in this row are not used/empty. Only other thing to explain here is that the equipment sprite in row 7 is what is shown when someone uses radar, and in 8 is the normal sprite for equipment.
Row 3: Borders
The tiles in columns 1 - 4 are the corners in this order (from left to right): NW (top-left), NE (top-right), SW (bottom-left), and SE (bottom-right).
Columns 5 - 8 hold the side borders (you should be able to tell which run which way :P ). It is a bit important to note, however, that 5 and 7 are used twice for every time 6 and 8 are used; also, the border starts from the North and the East with the even tiles. For an example, see table below:
The NW corner always has two even borders next to it; the NE corner always has 1 even border below it; the SE corner always has two odd borders next to it; and the SW corner always has 1 even border to the right of it.
Row 4: Mines, Fuel, and Obstacles
Mines are fairly simple: 1 for each color. Starting from the first column: red, purple, blue, orange (but you should be able to see that yourself already if you're not colorblind :P ).
[NOTE: Although you could make the mines take up the entire tile, you should keep in mind that mines DO overlap fuel and equipment, so if you make them too big then they will totally cover the fuel and equipment, making it impossible for players to see it unless they scan (enlarged fuel and equipment overlap mines, but only for a split second).]
Same as the equipment sprites: 6 is the normal fuel sprite, and 5 is the enlarged (when scanning) sprite.
7 is an obstacle in water, and 8 is an obstacle out of water (on land or on another obstacle). You should keep in mind that obstacles can stack, so when you edit the sprite sheet then make sure that whatever you do looks well when it's stacked.
Rows 5, 6, and (half of) 7: Water
For the most part, water is not too complex. You have the edges in all of row 5 and in most of row 6 (columns 1-7). In column 8 of row 6 you have the all water tile (if it's surrounded by water, this tile is used). And in row 7 you have the four inner corner tiles.
Here's a bit more of a breakdown of the water tiles (if you don't need it, then skip down to the bold text below about the slight complexity of water tiles):
- The single water tile (surrounded by land/rock) is the first tile in row 5 (#1 in image to the right).
- 2, 5, and 6 are for vertical lines of water (land/rock to left AND right of the tile).
- 3, 9, and 11 are for horizontal lines of water (land/rock below and above them).
- 4, 7, 10, and 13 are the outer corners of larger bodies of water (land/rock on 2 sides, and water on 2 sides).
- 8, 12, 14, and 15 are strait edges of larger bodies of water (land/rock on 1 side, water on 3).
- 16 is the ALL water tile surrounded by water.
- And 17 - 20 are inner corner tiles, which overlap the other tiles (see below).
The slight complexity in water tiles comes when you consider the overlapping. Here is the hierarchy (top covers bottom):
- All the water tiles in row 7.
- All the tiles in rows 5 & 6.
Using the water test template above, here are two images from the game in the same area to show the overlapping of the water tiles. The first is using all the tiles, and, as you can see, there are a good number of places where the inner corners (#'s 17, 18, 19, and 20) are used; their colors cover the entire tile (because I have the whole tile filled in, in the sprite sheet and they have priority over the other water tiles). In the next image I've taken out the inner corners (17, 18, 19, and 20) so that you can see the tiles underneath.
[NOTE: To see more in-depth research on water, and how they're placed, please see Skarlett's research at the end of this tutorial!]
Row 7 (the other half): Lifted Obstacles
The tiles in columns 5 - 8 in row 7 are simply obstacles that have been lifted (picked up) by a red, purple, blue, or orange tank (respectively).
Rows 8, 9, 10, 11, and 12: Rocks
These are by far the most complicated sprites in the game because of how many of them there are and how similar they look, and (most importantly) because of how they overlap---they are like water tiles x2.Here's a detailed breakdown of the rock tiles:
- We'll discuss 1 - 8 last since they're the most complex (and usually what confuse people trying to make new graphics the most).
- 9 & 25 (in the image to the right), the single rock tiles (surrounded by land/water), are the first tiles in row 9 & 11.
- 10, 13, 14, 26, 29, 30 are for vertical lines of rock (land/water to left AND right).
- 10 & 26 are for the Southernmost tile (land/water below, right, and left, with rock above).
- 13 & 29 are for the Northernmost tile (land/water above, right, and left, with rock below).
- 14 & 30 are middle rock tiles (land/water to right and left, with rock above and below).
- [NOTE: I don't know how the game picks one of them for a line---seems random to me for the most part.]
- 11, 17, 19, 27, 33, 35 are for horizontal lines of rock (land/water below and above them).
- 11 & 27 are for the Westernmost tile (land/water to left, above and below, with rock on right).
- 17 & 33 are for the Easternmost tile (land/water to right, above, and below, with rock on left).
- 19 & 35 are middle rock tiles (land/water above and below, with rock on left and right).
- [NOTE: I don't know how the game picks one of them for a line---seems random to me for the most part.]
- 12, 15, 18, 21, 28, 31, 34, 37 are the outer corners of larger rock formations (land/water on 2 sides, with rock on 2 sides).
- 12 & 28 are SW corners.
- 15 & 31 are NW corners.
- 18 & 34 are SE corners.
- 21 & 37 are NE corners.
- 16, 20, 22, 23, 32, 36, 38, 39 are strait edges of larger rock formations (land/water on 1 side, with rock on 3).
- 16 & 32 are Western edges (land/water on left, with rock on other sides).
- 20 & 36 are Southern edges (land/water below, with rock on other sides).
- 22 & 38 are Eastern edges (land/water on right, with rock on other sides).
- 23 & 39 are Northern edges (land/water above, with rock on other sides).
- 40 & 24 are the ALL rock tiles surrounded by rock.
- And 1 - 8 (all of row 8) are inner corner tiles, which overlap the other tiles (see images below).
- 5 is NE; 6 is SE; 7 is SW; 8 is NW.
Using the rock test template above, here are two images from the game in the same area to show the overlapping of the rock tiles. The first is using all the tiles, and as you can see there are a good number of places where the inner corners (#'s 1 - 8) are used, and their colors cover the entire tile (because I have the whole tile filled in, in the sprite sheet and they have priority over the other rock tiles). In the next image I've taken out the inner corners (1 - 8) so that you can see the tiles underneath.
[NOTE: To see more in-depth research on rocks, and how they're placed, please see Skarlett's research at the end of this tutorial!]
DustDust can be a VERY difficult thing to edit if you don't understand how it works. The sprites borders are not all the same size like they are for the "tiles" and "tanks" sprite sheets.
Each box in the image to the right is one dust sprite. 6 sprites in order for each direction the tank can drive.
The first 6 sprites are for driving North (up). The next 6 for driving East (right). Then 6 for South (down). Last 6 for West (left).
The dust sprites cover all other sprites (including the tank), so it's very important to know exactly where they are in aspect to the tank, and how big they are. Which is what that image to the right is for.
The colors are there simply to help differentiate the sprites from each other, they don't mean anything significant. Except these two things:
- The rainbow colors are the size of the sprites, and anything inside that colored box (including the frame) is the sprite---fill it in and it will just be a box on the screen.
- The grey you see is there to show the size of the canvas of the image. Anything you put in the grey areas are not shown in the game.
Dust Sprite Sheet Tank PositionIn the image to the right you can see the tank position for each sprite.
First we have the sprite sheet on the very left, then the tank under the dust sprite in the middle, and on the right the tank above the dust sprite.
It's very important to remember that in the game the dust sprite will always be above the tank (see the video below).
Use the template above, and the tank position image to the right to edit the sprites to whatever you imagine. Then test it out in game to see what it looks like.
Dust Sprite Sequence Video(Best to watch in 720HD and full screen to really see well.)
Each black and white dot in the video represents 2 pixels in an image editor to help you better when you're editing the dust sprite template.
Splash (ferry splash)
Splash is very similar to dust. 6 sprites in order for each direction the tank can drive. The first 6 sprites are for driving North (up). The next 6 for driving East (right). Then 6 for South (down). Last 6 for West (left).
One way the splash sprites differ from the dust sprites is that they do not overlap the tank.
On the left you have the splash sprite template, and on the right you have it with the tank positions. Enjoy!
Can't say the explosion sprite sheet was easy to figure out, but it isn't as complicated as I first thought. It's divided into 4 parts: bullets, bullet splash, explosions, and obstacle dust & splash. There are two templates below (one with with the explosion sprites over it to show position); grey areas are not used.
- The very top sprite is the fire coming from the barrel of the tank when you first shoot.
- 2nd is the sprite used for both the normal (single) bullet and the dual shot bullet.
- 3rd is the homing shot bullet.
- 5th is the missile shot bullet.
- It appears that the 4th, 6th, 7th, 8th, and 9th sprites in this sheet are not used. (If anyone knows a time and situation that they ARE used, please let me know.)
Simple: starts with first splash sprite and ends with last one. :P
There are three sets of explosions.
- Explosion set 1 is for dual shot explosions when shooting other tanks, and also for the explosion when a tank drives onto a mine.
- Explosion set 2 is for normal, single bullet explosions, which includes shooting everything (mines as well).
- Explosions set 3 is for missile and homing shot explosions when shooting other tanks.
Obstacle Dust & Splash
Just about as simple as the bullet splash. First three grey looking sprites are the dust for when dropping an obstacle on another obstacle or on land. And after that you have the 3 splash sprites used when dropping an obstacle into the water.
RadarRadar is a bit simpler than dust, but still has the same problem of not all the sprite borders having the same size. Below are a template and a tank position sheet.
In these two images below, red is used for representing the "unused" areas of the sprite sheet (instead of grey, because it's easier to see). No matter what you put in those red parts of the sprite sheet, it will not be seen in the game.
TanksThe tanks sprite sheet is the simplest of them all. You have 4 columns of tanks for red, purple, blue, and orange (respectively). There are 34 rows: 16 for the different turret directions with the torso vertical, 16 for the different turret directions with the torso horizontal, and 2 for tank deactivations (vertical & horizontal). Each sprites border is 28x20 pixels.
Maps are the simplest things to create and edit for TankPit. Here's a quote directly from the TankPit website:
"Maps are 256 x 256 pixel GIF images composed of 3 colors, one for each of the terrain type (water, land, and rocks). You can use any colors you want but let us know what terrain each color represents if it isn't obvious. You should also specify a name for your map and whether it uses grass, desert, or ice tiles."
Each pixel in the map image represents 1 tile in the game. At the moment you can only determine where the land, water, and rocks formations are. (Hopefully in the future you'll be able to control more than that.)
Although they allow you to use any 3 colors you want, I suggest picking a set of colors from one of the five following maps: Rocks and Swamp, Castles , Iceland , Deep Six , Metropolis (I'd say Dessert, except that Dessert has more than 3 colors in it).
Make sure to think about how the map would play, not how the picture of the map looks. And don't make areas of the map that are inaccessible (which will trap fuel and equipment), unless that is part of your idea for some reason.
If you use GIMP (and maybe for Photoshop and other editors as well):
1. Saving ("File" -> "Save" and "Save As...") what you're working saves the PROJECT (including the layers) so that you can return to it and edit where you left off. Exporting ("File" -> "Export..." and "Export to") is what allows you to save the file in .gif or .png format to be used in the game (make sure you choose the extension you want to use when exporting the file).
2. RBG color mode (Image -> Mode -> RBG). Once you've opened a sprite sheet, you should set it to RBG color mode while you edit (don't need to worry about switching it back, as it automatically makes it indexed when you expert to .gif or .png). If you paste or open other images into the one you're working on without FIRST setting to RBG color mode, then the colors of the second image might be messed up.
3. Use layers to make your edits. Most important thing in image editing (from what I've learned) is using layers. After you've installed GIMP and opened it, there should be 3 windows that open: 1 holds the image you're editing, one holds brushes and other tools, and the other should be titled "Layers". After you open a sprite sheet, there will be one layer in that window. Right click the layer and select "Duplicate" and then edit the duplicate instead of the original so you can toggle visibility of the duplicate (the "eye" icon in the layers window) to see your changes better.
You can use layers for many things. Another example is if you have 3 ideas for a certain sprite (fuel, for instance) but you're not sure which one will look best, so you make 3 different layers, and edit those three layers with the three ideas you have, then compare them by toggling their visibility.
4. Use grids. Especially when editing the tiles sprite sheet it is very helpful to show the grid ("View" -> "Show Grid"). Now to make it the right size: "Image" -> "Configure Grid..." For the tiles sprite sheet, set it for 24x16. For the tanks sprite sheet, set it for 28x20.
5. Add Alpha Channel. If you open another image that doesn't have transparency, but you transparency, then right click on the layer (in the layer window) and click "Add Alpha Channel". If you don't have that option (it's grayed out), then it means the layer already has an alpha channel (can already handle transparency).
6. Pay attention to tool settings when you use them. GIMP is much different than MS Paint. There are some tools that GIMP has that will not work the same as in MS Paint if you don't know how to set the settings for them.
Here are a few settings that might help you:
- Click on the pencil in the toolbox window, then make the size 1 pixel so you don't edit too much at one time.
- When you use the eraser, be sure to check the box next to "hard edge".
7. Learn hotkeys of tools you use often. The hotkeys can end up saving you a lot of time. For most hotkeys all you have to do is hover over the icon for the action (like the pencil) and it will show the hotkey associated with it in bold (N for the pencil).
8. Google it, or message me. If you are having problems with something, usually there is documentation, tutorials, guides, and all kinds of stuff by many people that are easily found online by using Google Search to find them. If you can't find something after Googling a bit, then feel free to message me and I'll do my best to help you (I'm not a graphics expert though, and still fairly new to this stuff myself, so don't expect me to be able to teach you how to make tanks fly or something :P ).
Skarlett's Water & Rock Tiles Research
Skarlett has done great, in-depth research on water & rock tiles and how they're placed. Thank you, Skarlett, for allowing your research to be added here! Below is what Skarlett wrote:
First, remember that maps are created using only three colors (land, water, rock). This means the only information the game receives from the map creator must be:
- This is rock - needs a rock tile
- Land/Water/Rock is to the Left/Right/Top/Bottom/Diagonal
Based on this, I created this tileset by realizing which rock tile it was calling in each situation (using only the adjacent tiles there are 2^4 possibilities for surrounding terrain - therefore 16 water tiles and 2 sets of 16 rock tiles). The blue piping on the water tells which directions there is more water located in. Similarly, the red/light blue piping tell you in which directions there is more rock.
Let's start with some screenshots of water, since it is simpler and easier to understand (not by much).
As you can see, the blue piping connects all of the water. It shows which water pieces are corners, dead ends, -| shapes, or little puddles of water. In addition, you can see that the little "quarter tiles" (1/4 tiles - in default tilesets these tiles only use 1/4th of the tile area) overlap water tiles in certain places.
If you look closely, you'll notice that they're only placed in places where the piping is at a right angle. If you look even more closely, you'll realize that in the diagonal direction of that right angle is land. The 1/4 tile is placed at any right angle where there is not water diagonally.
Furthermore, the orange 1/4 tile is for the top right, yellow for bottom right, light green bottom left, and dark green bottom right. The purpose of the 1/4 tiles will be a bit easier to explain with the rock tiles, so let's move on.
Here are some screenshots of different rock formations.
The first thing to understand is that rock tiles behave just like water tiles. However, there are just two sets. Look at the tileset posted at the beginning of this post. Compare the two rows of water to the first two rows of rocks; the piping matches perfectly. Now, compare the first two rows of rocks to the second two rows of rocks; again, the piping matches perfectly. My only guess as to why there is a second set of rock tiles is to be able to have more variety with rock.
Let's talk about rock 1/4 tiles. Again, there are twice as many tiles as with water. However, they behave exactly the same. The left four 1/4 tiles correspond to the rock tiles with red piping. The right four 1/4 tiles correspond to the rock tiles with light blue piping. Again, a 1/4 tile is used at any right angle in the piping where diagonal is non-rock.
What is the purpose of the overlapping 1/4 tile? Let's look at this tiny portion of a rock screenshot
Look at the two light blue + tiles. The light blue + tile is only one tile in the tileset file. That tile looks like the light blue + on the right. Notice the rock goes all the way to the top left corner of the tile. Now look at the light blue + tile on the left with the overlapping purple 1/4 tile. Here, the rock does not extend to the corner. Instead, there is some land texture. The 1/4 tiles are there to prevent awkward right angles in the rock faces. The overlapping 1/4 tile is intended to give a rounded corner or edge to the the rock when it connects to land.
For example, here's two identical pictures with default desert tiles. The one on the left is with overlapping 1/4 tiles. The one on the right is without overlapping 1/4 tiles.
Open these two images in separate tabs and then switch between them. Look at the areas I highlighted with black boxes. See how the 1/4 tiles smooth out these sharp angles?
Lastly, in my experience, it is often useful to just delete all the quarter tiles so you don't have to worry about overlap. However, if you look at my plastic tileset you'll notice that for the water 1/4 tiles I used tiny portions of quarter tiles to make the colors of the gridlines just right.
<ref>tags exist, but no
<references/>tag was found