Pixel Art Tutorial #1 – Tilesets

Facebooktwitterredditpinterestlinkedinmail

Welcome to the first tutorial on pixel art! Today we are going to start on something fun and easy, and that’s tilesets! I’m not going to be teaching any drawing today, but I’m going to help you setup a tileset. You can use any graphics editing software to make tilesets. You can use paint that comes with windows, but I recommend you install a different editor so you can draw transparent images. If you need help looking for a graphics editor, check out my earlier post here. When you find and install the software you want to use, we can begin.

 

When you’re making a 2D Game, you will most likely use tilesets. Tilesets are a bunch of tiles or square-shaped images that you use to piece together to make a scene or a level.

 

This is an example of a tileset:

 

tileset example
This is a 192×192 tileset, and each tile is 32×32 in pixel size.

 

Making a tileset is really easy, and it’s the first thing you need to do when making a 2D game. You need platforms in order to to test player controls and gravity. To get started, you need to figure out how large you want the tiles to be. You don’t want tiles to be too large, because you want the game to run faster. I like to make my tiles 32×32 in pixel size, but it’s entirely up to you.

 

Next, you need to figure out how many tiles you want on your tileset. When I don’t have any idea what size I want, I usually start with 64. That would give us an 8 tiles across and 8 tiles down, in other words an 8×8 tile table.

 

Next, you need to figure out the size to make your tileset. To figure that out, you simply just multiply the width of the tile size with the number of tiles across, and the height of the tile size with the number of tiles down. So If I wanted an 8×8 tile table with 32×32 tile sizes I would multiply 8*32 and 8*32. That gives us 256 and 256, meaning our tileset would be 256×256 in pixel size.

 

After you figure out the tileset size, it’s best to draw a grid, so you know where each tile begins and ends. Draw a square with a one pixel border inside the first tile. You can use copy and paste to place a square on each tile. If your graphics editor has an option to place a grid, you can skip this step.

 

This is what a blank tileset should look like:

 

blank tileset

 

The next step is easy, just draw tiles where the squares are. When you’re finished, save your tileset. I recommend you save it in png format so your tiles can be transparent.

 

tileset sample

 

Now you’re ready to test your first tileset! If you haven’t programmed anything yet to render tile maps, you can download and install a free tile map editor. Here’s a list of some free tile map editors:

 

You can try any map editor you want, but I’m going to be using Tiled. Download, install, and run the program. It should look something like this:

 

tiled map editor

 

Navigate to File -> New. Change the map size to 25 tiles for width and height, and make sure to set the tile size to 32px for width and height, then click OK.

 

new map tiled

Next, you want to go to the Tilesets panel and load your tileset. Click on the paper icon on the bottom-left corner of the Tilesets panel.

 

new tileset

 

Give your tileset a name, and load the tileset image that you made. Make sure tile width and height are correct, then click OK.

 

load tileset image

 

Now you are ready to use your tileset! Click on the stamp icon stamp-icon, select some tiles, and make a map. You want to make sure the tiles you made can be pieced together and appear seamless.

 

tile map test

 

There’s one last thing I want to show you about this program before we end the tutorial here. Save the map, and give it a name. Navigate to the directory you saved it on, and open it with a text editor. I’m using Notepad++.

 

tile map opened with Notepad++

 

As you can see there are a bunch of numbers. Each number represents a specific tile, and zero is blank. To many of you programmers, you can code your game engine to read these numbers to load the map on your game engine. Those of you who are beginning programming, I’ll tell you a little bit how it works so you have an idea. When you’re programming a game engine, you can have the program open a text file. Then you can use loops separate fragments of the text into string. Then you can use loops to convert the strings into numbers, and write the program to use those numbers to draw the tile maps on the screen. So practice on your loops, and you’ll be able to program your game engine to read tile maps, or program your own map editor.

 

I’ll end this tutorial here. I know this wasn’t really a pixel art tutorial, but we are going to be learning pixel art using tilesets. After we get through the basics, you’ll be able to move on and draw animated characters, cool backgrounds, effects etc. So make sure to check my site every now and again.

Facebooktwitterredditpinterestlinkedinmail

About Justin

Computer programmer and owner of kauergames.com.
Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.