Here’s another article for the uninitiated. I found that creating artwork which was ready for use in a game was very difficult. I easily spent hours on this or that tileset only to find that I had messed up somewhere along the way or didn’t know what to do with the end result. Now after spending the summer screwing up I feel like I’ve got the hang of it so I’m going to write it all down in case someone finds themselves in my position.
Step 1: Know your constraints
The first thing to decide is what size you want the artwork to be. This means answering the question, what dimension does a tile have? For instance, in my game Forte I made each tile 50×50 pixels. This is important because it will impact how easy it is to prepare and use artwork down the road.
After deciding how large a tile is it makes sense to think about how large the tilemap should be. Fortunately, this won’t greatly impact your search for artwork, but it is important that you pick a size which gives you enough freedom to do what you want. If you end up with only nine tiles in your tilemap you probably won’t be making an interesting game. On the other hand if you choose to make your tilemap too large you’ll have trouble finding the assets to fill it up.
Step 2: Finding artwork
It’s time for some hard truth, virtually everything that is out there is either stolen or stinks. It is very unlikely that you will find, for instance, good character animations which are original and free to use. Now that you’ve accepted that fact you’re ready to search for some artwork. I suggest looking in the following places:
- Lost Garden has a good deal of high quality free game art.
- Free Pixel Project great stuff for a rogue-like but the license is restrictive.
- The Spriters Resource lots of ripped sprites.
- Molotov’s is simply a list to lots of game art, free and ripped.
Of course, you can also use artwork I’ve created which is in the public domain. Before you start your search let me say one last thing; it is almost certainly much easier to create your own artwork for a game. The truth is whatever artwork you find will very likely not be in a format ready for use and therefore require hours of preparation. Furthermore, it’s likely the artwork won’t fit your style, won’t work with the other assets, and will be copyrighted meaning that your game will either look terrible or be impossible to distribute. This is all to say the time is now to open up Photoshop or Pixen and start making bit art!
Step 3: Preparing artwork
Still want to find the artwork? Alright, well then let me at least show you how to prepare it. There are three steps.
- Erase the background
- Touch up if necessary
- Separate individual sprites
- Center sprites in their tile
- Place tiles into spritesheet
Let’s use the this image, it’s the enemy in our game. First, you need to erase the background color (assuming it is not transparent). This should be easy if you have Photoshop. Simply select the background eraser (toggle through the eraser tool) and erase the background. Using this asset we need to be careful because the background eraser is going to erase the hydrant if we’re not! (Typical!) If that happens, and it will, then you need to go back and retouch the sprites. You do this by switching to the pencil tool, selecting the pixel’s color (by alt-clicking on the pixel), and then paint the pixel. You will need to do this with all of the pixels you accidently start to erase.
TIP Make the size of your eraser smaller to reduce the amount of pixels you accidently fade out.
Hopefully, you’ve managed to erase the background from the fire hydrants, but now you’ll notice that they are not evenly spaced apart. For instance, if you decided above that you wanted to have 50×50 tiles then you’re out of luck. This time the trick is to take out the rectangular marquee tool and select the first fire hydrant. Once selected right click and choose “Copy to New Layer”. Next create a new document which has your tile’s dimensions. Drag the layer you just created onto the new layer. Finally, center the fire hydrant in the new document. Now repeat this for the rest of the sprites. :-)
TIP To make your life more difficult not every sprite should be centered in its tile. In some cases the sprites will need to be positioned just off center. For instance, when the sprites are in the middle of moving or attacking.
Alright, after you’ve placed each sprite on its own tile you’re ready for the last step. Create a new document which can contain all the new tiles you’ve created. For instance, if you have four 50×50 tiles then create a 100×100 document. Once created place each tile into the new document and space them such that none of the tiles overlap. You’ve just created your tileset!
Conclusion
So now you’ve got a completed tileset which can be used in your next game. Of course, you’ve only created one such tileset and most likely you will need several for the different characters and enemies. When it comes time to using the tileset I suggest using Tiled to create your tilemaps, but I’ll leave that for another post. Happy hunting!
Related Posts
Hello, my name is Alex Schearer. I grew up in New York and currently live in Seattle.
How to Find and Use Artwork for Tile Based Games
Here’s another article for the uninitiated. I found that creating artwork which was ready for use in a game was very difficult. I easily spent hours on this or that tileset only to find that I had messed up somewhere along the way or didn’t know what to do with the end result. Now after spending the summer screwing up I feel like I’ve got the hang of it so I’m going to write it all down in case someone finds themselves in my position.
Step 1: Know your constraints
The first thing to decide is what size you want the artwork to be. This means answering the question, what dimension does a tile have? For instance, in my game Forte I made each tile 50×50 pixels. This is important because it will impact how easy it is to prepare and use artwork down the road.
After deciding how large a tile is it makes sense to think about how large the tilemap should be. Fortunately, this won’t greatly impact your search for artwork, but it is important that you pick a size which gives you enough freedom to do what you want. If you end up with only nine tiles in your tilemap you probably won’t be making an interesting game. On the other hand if you choose to make your tilemap too large you’ll have trouble finding the assets to fill it up.
Step 2: Finding artwork
It’s time for some hard truth, virtually everything that is out there is either stolen or stinks. It is very unlikely that you will find, for instance, good character animations which are original and free to use. Now that you’ve accepted that fact you’re ready to search for some artwork. I suggest looking in the following places:
Of course, you can also use artwork I’ve created which is in the public domain. Before you start your search let me say one last thing; it is almost certainly much easier to create your own artwork for a game. The truth is whatever artwork you find will very likely not be in a format ready for use and therefore require hours of preparation. Furthermore, it’s likely the artwork won’t fit your style, won’t work with the other assets, and will be copyrighted meaning that your game will either look terrible or be impossible to distribute. This is all to say the time is now to open up Photoshop or Pixen and start making bit art!
Step 3: Preparing artwork
Still want to find the artwork? Alright, well then let me at least show you how to prepare it. There are three steps.
TIP Make the size of your eraser smaller to reduce the amount of pixels you accidently fade out.
Hopefully, you’ve managed to erase the background from the fire hydrants, but now you’ll notice that they are not evenly spaced apart. For instance, if you decided above that you wanted to have 50×50 tiles then you’re out of luck. This time the trick is to take out the rectangular marquee tool and select the first fire hydrant. Once selected right click and choose “Copy to New Layer”. Next create a new document which has your tile’s dimensions. Drag the layer you just created onto the new layer. Finally, center the fire hydrant in the new document. Now repeat this for the rest of the sprites. :-)
TIP To make your life more difficult not every sprite should be centered in its tile. In some cases the sprites will need to be positioned just off center. For instance, when the sprites are in the middle of moving or attacking.
Alright, after you’ve placed each sprite on its own tile you’re ready for the last step. Create a new document which can contain all the new tiles you’ve created. For instance, if you have four 50×50 tiles then create a 100×100 document. Once created place each tile into the new document and space them such that none of the tiles overlap. You’ve just created your tileset!
Conclusion
So now you’ve got a completed tileset which can be used in your next game. Of course, you’ve only created one such tileset and most likely you will need several for the different characters and enemies. When it comes time to using the tileset I suggest using Tiled to create your tilemaps, but I’ll leave that for another post. Happy hunting!
Related Posts