Need help creating 2d tiles.

Started by
3 comments, last by TechnoGoth 20 years, 9 months ago
Hey, I''m working on a stragey game right now, with three basic kinds of tiles water,grass,forest. Now I''ve drawn these tiles but they look bad... real bad. So I was wondering if anyone could offer advice or suggestions on how to make realistic terrain tiles.
Advertisement
sure:
for grass tiles,

open up adobe photoshop, get yourself the green color, then
go to the noise plugin, make it mono noise, play with the slider, and BOOM, you have good looking grass

sand/dirt/gravel tiles - just modify the color on this


for water tiles,

water depends on the look you are going for, make a few circles, then the respectable shadow, or copy the affect from final fantasy or zelda

for forest tiles,

your going to have to draw these seperatly, i usualy use mask tiles for this, but i like corel painter for this, put on an accrylic brush or that special artists brush, i believe picaso, and just dab on the brown and green, it works really well.

for mountains:

i just dab in painter for this aswell, i usualy use oranges and greens, but stay away from brown it looks better.

WHATEVER YOU DO STAY AWAY FROM GRADIANTS

Use PaulCesar's method and you'll be fine, also you have to be careful the tile "blends" with itself when you put it together. If you don't do this the tile may look pretty ugly, there are some good tutorials on how to draw tiles, I had a link but I lost it sorry... try making a search something will probably come up.


[edited by - FtMonkey on July 9, 2003 1:52:37 AM]

[edited by - FtMonkey on July 9, 2003 1:53:37 AM]
The monkeys are listening...
Try going to www.spritedomain.net They have some GREAt tutorials.
The way I make my tiles is this:

I take my digital camera out into the field, find a nice grassy meadow, and shoot a bunch of different pictures of it in varying light. I take these pictures home, upload, them, then open up The Gimp.

Basically, this gives you about as realistic a texture for grass as you can get--considering the fact that it IS grass. Of course, you''ll need to fudge around with it a bit.
I usually start by cropping out a nice big section that looks fairly evenly grassed. I scale and resize this until I have an image I can work with.

Since my game, Golem, is an isometric, I scale the grass to a bitmap 128x64 pixels, then load in a pre-saved diamond selection mask to snip out the diamond shape.

Now, I need to make copies of this diamond mask, and tile them in another 128x64 tile, merge them into a single layer, duplicate that layer, and apply an offset of 32x16 pixels right/down. This places the edge of the tiles in the center of the bottom layer; I use the eraser tool on an Airbrush setting to erase this border, revealing the layer beneath (which has not been offset). By doing this for all 4 of the diamond tile edges, I get a tile that is seamless. Usually, I''ll have to go through several iterations of this process to get a tile I like, which doesn''t have too many obvious tiling artifacts.

I do the same with various other kinds of dirt, rocky ground, etc... to give myself a wide variety of terrain types to work with. I will usually create a rather large set of each type, trying to work from the same photograph if possible so that colors match correctly. The terrains of a given type I will further process by ensuring that their borders are identical, so that any tile of a given terrain can tile next to a different one in the same set, with no visible border.

Transitions are made by layering one terrain type over another and using the erase tool to erase parts of the top layer, revealing the bottom. Using the airbrush options, I can get smooth blends.

Now, creating tiles like this results in a large number of bland, roughly-the-same tiles with small variation. With these, I proceed to create additional textures which have greater detail. One trick I like to do is to take a high-res photograph of a flowery field, crop and scale until I have isolated a clump of particularly interesting flowers, then layer this beneath a grass tile. With the erase tool and some precision erasing and patience, I can erase away grass to reveal the flowers beneath. With some care, you can achieve a pretty nice effect.

This also works with rocks. Take a photo of a rocky field, then crop and scale until you have an interesting rock feature, layer it beneath a dirt tile, and carefully erase away so that the rock appears to be sitting on the dirt.

Some tiles will need a great deal of processing before the are usable. Play around with selecting Paintbrush, setting it to Hard Light or Soft Light, and overlaying it with different colors to subtly change the hue of the terrain. Typical brown dirt, Soft Lighted with a red color, can result in a reddish Martian-type of dirt. Multiple passes of the paintbrush deepen the effect.

All of these tricks would work for a rectangular game as well--easier, in fact, since the offset filter can be applied without consideration for the diamond shape of an iso tile. Take any given image and offset it in X and Y by some amount; you will see the rough border where you need to go to work with the erase tool to eliminate it.

Another trick I have tried (with mixed results) for creating tileable isometric diamonds is to perform the above techniques on a rectangular bitmap, then use Blender to map it to a plane and render it as an iso-tile.

I hope you find some of this useful. Check out some of these concepts in action at www.angelfire.com/rpg2/vertexnormal

Josh
vertexnormal AT email DOT com

This topic is closed to new replies.

Advertisement