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

Cliffs part I

First off, I think it’s important that cliffs tile, moreso than any other factor. Cliffs need to be of mapped in various heights, so you need to take that into account.

Cliffs tend to have horizontal lines. Strata. So, you can decide how you will have your cliffs. Boulders stacked on top of each other, sharp pointy rocks, cylinder rocks, or just layers of rocks (Strata, again). You could even have it be natural looking and resemble intertwining tree trunks.

Obviously we’ll take the easier ones for this tutorial. We could go Zelda style and have just stripes around, but that’s a bit too easy. Let’s try boulders stacked on top of each other. I was going to go with a Cylinder rocks like Secret of Mana, but you need a 32×32 tile for it to go well, and I want just a 16×16 tile.

Actually, I’ll go ahead and say it, very frequently you may need more than 1 tile for cliffs. Adding some hanging vegetation, rocks sticking out or even just to tile better for bigger rocks.

What color shall we use? Brown tends to be common, so I’ll use that. You don’t have to stick with that! Color the whole tile in with a fairly dark brown. I set 4 colors aside this time, it’s what I’ll use for the cliffs. The dark brown, 2 medium-ish browns, and a light color. Look at the Contrast thing in the first post to get an example of what type of contrast to use.

Now, I’ve been kinda avoiding tiling, but it’s really going to be necessary here. Here’s what I think you should worry about first with tiling: The edges. Take a look at this example tile (And the 32×32 version). The light blue lines would connect with each other (Top and bottom), and the light green lines would connect with each other (Left and right). Test it by placing that same tile to the left, right, above, and below the tile.

Keeping that in mind, time to start working on the boulders. They should be fairly big, not like little bricks (Which is why 4 16×16 tiles for it might work better). But 16×16 will be fine for now. Use the 2nd darkest tone to draw the outlines for the rocks. As we did for the previous one above, let’s focus on the edges first. You can make half boulders so that it tiles more naturally. Here’s an example (Normal tile, double sized, and showing it tiled):

Focus on first having it tile before you go making it looked cracked and like real boulders. Make them of varying sizes to make it interesting. It’s actually a similar approach to how I did the water.

Trying to make it more irregular looking rather than nice round smooth rocks. Also, try not to have the line width be too wide. Keep it at a pixel width. I thought the rocks were too small. I looked at the tile I had before, and tried to find some interesting looking rocks there, and just make them bigger. Had some tile issues dealing with too many straight lines, so I worked on that too. It could take some erasing and redrawing so don’t get worried if it doesn’t look right on the first try.

I think I’ll use this. Shading time! Base of the rocks should be darker, and consider both light sources, cracks, and overlapping rocks. Rocks in the back will be darker. I’ll use a lighter brown this time, not the lightest yet. This can be a bit tough as you have to remember about the half rocks around the edges and the corner ones in particular. Just tile them, check it out and experiment with that. You don’t have to do smooth shading, you can experiment with patterns, dithering, and cracks.

I’ll add the highlights now. If I don’t like the colors, I could always modify them later.

I didn’t like how flat it looked, so I brightened up the highlight and the 2nd tone.

Okay, so I’ll place it on the tileset. There’s lots more to be done, so I’ll cut it here and continue another time! I need to make the sides, the part on top, and work on the horizontal banding I see.



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: