Posted by: Ocean's Dream | January 22, 2008

First tutorial

Tileset tutorial time! I encourage others to give tips on how they do tilesets too, so feel free to take over the topic with your own tileset tutorials.

First, you’ll want to download the template chipset for the maker you are using. For this section, I will assume RPG Maker 2003, but it can be something else.
The pink parts are the upper tile section, and the browns are the lower tile section. The green/yellow areas are for auto-tiles, and the blues are for water tiles. The pink section in the top right is for animated tiles.

So, let’s start working on something! I like to use Character Maker 1999, but you can use whatever program you want. I recommend one with a grid. Set the grid to 16×16. If you’re working in RPG Maker XP or another maker, you may want to use 32×32 instead.

Determine what area the tileset is going to be for. No need to make one tileset that works for every location, unless you’re doing an NES style game. So, for this tutorial, we’ll do a small town. Starting with the basics, just grass and crates.

Let’s start with grass. You’ll probably think: Put some green on a tile and I’m done! You actually could do that, there are games that do. Depends on what style you want. Grass is green, but you don’t need to use just green to make it. More on colors later.

Do you want tall grass or short grass? There are many ways to draw grass. I’m going to do the blades of grass approach. First, I lay down the mid tone. I’ll add shadows and highlights to it afterwards. Since the grass sticks out, I’ll make the blades lighter. Then, I’ll add a few shadowed areas to it. I think the blades of grass are too bright, so I’ll make the bottoms of them a bit darker. For this, I’ll work in 12x zoom so I can see what I’m doing. A lot of the times, you’ll want to work in 6-12x zoom. I’m using only 4 colors for this. I won’t go into tiling right now, but try putting a bunch of the tiles next to each other. If you see that it looks squarish, modify it (especially the sides) so that it looks more natural.

Zoomed in version:

Let’s go to colors. People will sometimes talk about Color theory. So, let’s bring up the color wheel.

So, it’s a circle with colors, what’s so special about it? It shows the complementary colors for each color, and colors in between the primary colors. Complementary colors is just the color opposite a color. So, the complementary color of green is red. The complementary color of Blue is orange. The complementary color of Violet is yellow. Look on the wheel.

How is that going to help us? Well, a lot of people just use a lighter version and darker version of the same color when shading. It can get pretty boring like that! Determine what color your light source is. If it’s the sun, then it’ll probably be yellow, unless it’s a sunset or something. If it’s at night, perhaps the street lights may give off a red or orange light. Once you know what color your light source is, use that color to help you pick out your highlights. Once you know your highlight color, you can pick your shadow color. The shadow color should be the opposite color of the highlight. Confusing yet? I’ll give an example.

Look at the color wheel again. If your grass is green, and you have a Yellow light, you should make the highlights Yellow green or even Yellow. What’s the opposite color of Yellow? Violet. So you would move the green over to the Violet side for the shadows, and maybe pick blue green, blue, or even Violet.

That’s pretty much what we need for now. Contrast is another big issue. A lot of people tend to pick colors that aren’t contrasted enough. You’ll want your colors to be visible. Try not to take small steps when choosing a shadow color or a highlight (There are times when it’s fine, so don’t take it as a rule). Zoom out of your drawing, every once in a while to see if you can notice your shadows and highlights. On the left is an example of low contrast, which you can barely tell the difference between tones. On the right is an example of high contrast. I prefer to test contrast on a middle grey background (128R, 128G, 128B), rather than a white or black background.

One last thing about grass before we get to crates. Grass, roads, and other floor tiles shouldn’t stand out too much, so try to make them about a medium green, medium grey, or any other colors that aren’t too bright. If they’re dark, you’ll have to make the characters a bit brighter so they could stand out. Characters and objects should stand out, floors shouldn’t.

Now, let’s make an object, a crate. For starters, don’t worry about shading in the beginning. Just draw it out. I’ll start with a brown color, and use black as outlines. I like dark colored lines, but black will work fine for now. Remember to keep in mind the view point. Unless the game is side view, don’t draw crates in flat side view, but rather have some of the top showing. I find commercial game chipsets a good reference, so I recommend you have one open to see while you’re working on your own. Pictures can also be a good reference.

For objects, make the parts that stick out the brightest, and the parts in the back the darkest. For metal, you’ll want bright highlights. For dull objects like wood, you’ll want highlights that aren’t as saturated. You don’t have to use black to outline everything. You can start with it, but then use colors to make divisions. You don’t need a black line to divide a bright color from a dark color, you can already tell the difference.

Walls are next.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: