Working with Sprites – Part 2
In my previous blog, I talked about where you can find classic video game sprites and some of the things you can do with them. What I didn’t go into is my favorite part about working with sprites: making maps. It is great to download pre-existing assets and even play with painting over them in Photoshop or another editing software, but using tilesets let’s you exercise your creativity even more and feel like you are making something original.
On The Spriters Resource, you can find tilesets from tons of classic video games. These tilesets are made up of just that: square tiles of artwork that are combined to create maps and environments the player interacts with. With a little bit of modification and the right software, you can use these tilesets to create any type of environment you can imagine! To make maps for use on a website like Roll20.net, follow the steps below.
1. Download the tileset you’d like to use. For example this cities and town set from Final Fantasy VI.
2. Edit the tileset in an image editor like Photoshop. For my use on Roll20, I cropped the image down to just the section I needed and resized so that each tile was 70px by 70px.
For the most part, the tiles are organized pretty well so that you can see how multiple tiles fit together to create elements that take up more than one tile, such as a roof or staircase. However, it isn’t always the case. If you really want to get fancy, you can use the selection tool set at fixed size to grab individual tiles and reorganize them in your image. The software we will use next breaks up the tileset intelligently, so you don’t need to worry about anything but creating an image with the right dimensions, but getting it to a readable state now will save you some headache later.
3. Once you have your tileset cropped, sized, and customized to your liking, it is time for the real work to start. I used a software called Tiled. This is available for free, but if you love it you can toss them some money to help improve the product! It is a great tool that makes creating maps easy and fun.
4. Once installed, open up Tiled and take a look around. There is a lot of functionality, but you can start pretty fast with some basics. You’ll need to create a map, either using the toolbar on the top of the screen or navigating to File > New. You have a lot of choices here, but the most important thing is to set your tile size to whatever you size you chose when working with your tile set. For example, I created a 25 tile by 25 tile map, with each tile at 70px by 70px.
5. Next, you can import your tileset. There is a column of windows on the right side of the program. In the middle you will see a section titled “Tilesets” that has a series of small buttons along the bottom. Click the document with a star to import a tileset. Give your set a name or just navigate to the file you created in step 2. Make sure your tile width and height are set correctly, press OK, and BAM. Tileset. You can now see all of your tiles broken up and ready to use.
You can now see all of your tiles broken up and ready to use.
6. That’s it! Click a tile and when you come back into the map section you can paint with it to start making your dreams come true! From here, all the feature you might need are available. You can create multiple layers if you are working with transparent tiles, like furniture. You can select multiple tiles at once to stamp onto your map if you put some work in ahead of time to clean up your tileset. You can erase and marquee select. Just about everything you can need is around, so get going!
And there you have it! This is a really quick starter tutorial on using tilesets from The Spriters Resource to make custom maps in Tiled. Have fun working with sprites and let us know what you come up with!
