Tutorial:Content:Tiles

From FIFE development wiki
Jump to: navigation, search

Introduction

Creating basic ground tiles in Blender is generally not difficult (in case it is, please redirect yourself to basic ground making tutorials). However, it gets a bit more complicated when you try to push things a bit further and create those nice gradual transitions between different ground types. The purpose of this tutorial is to show just that - how to make proper transitional tiles, how many of these tiles you actually need, as well as offer some tips and tricks to get the best results. Sounds rather promising :)

The basic concept

Basicly what we do when creating transitional tiles is mixing two ground types with the help of stencil maps. Stencil maps are black&white images that tell Blender how it should mix two ground types. White values show one ground, black values show the other one, while the grey values in between mix the two, depending of course on how light or dark the grey is.

Stencil maps

A really important thing when making different transitional tiles is that they must look good when put together. This means there should be no visible seams nor any other errors. Since the stencil maps have control over this, we have to pay attention when creating them. Luckily for us, the process itself is not that hard or complicated. To get a complete set of transitional tiles between two ground types, we will have to make 31 different stencil maps.

Ground transition template

The image to the right shows all the possible ways two ground tiles can interact with each other. As I mentioned earlier, white represents one ground type and black represents the other. For now, there are no grey values used, those come into play later. You might notice there are 33 "squares" in the image. Two of them are completely solid and the end result would be two tiles that show solely one of the ground types and we don't need anything special to create those.


Creating the stencil maps

Now let's make some of our own stencil maps. I have included examples and each shows 3 separate stencil maps, so you can get a better idea of the whole thing. Start GIMP (or whatever similar program you are using) and create a completely white 3x3 pixel image. Zoom-in to 500%

500% zoom

Next step

Use the pencil tool (pure black colour, 1px large brush) and paint the pixels to get one of the 31 needed combinations. Each pixel you make will be exactly 1/3 the height and width of the image and thus all the different stencil maps will fit together perfectly. You could start with a bigger image if you wanted to, but it's a lot easier to paint one pixel, than to measure exactly one third of the image.

500% zoom

Making better transitions

Resize the image to 150x150 pixels (or bigger if you want, but 150 should do fine) and be sure to have interpolation set to none. Now use the pencil tool to get rid of the straight lines and make nice transitions. It is very important you don't paint anything near the edges of the image, or you'll get bad results later on.

100% zoom

Blurring the transitions

Do not worry about rough borders. When used by Blender, these images will be blurred a bit anyway. However, if you want a more gradual transition between different grounds, apply the gaussian blur filter. If you decide to use the gaussian blur, it is very important you apply it to all of the stencil maps in your set and that you use the same blur values for all of them. One thing to notice is the more you blur the image, the more border you will have to leave untouched, or you'll get unwanted results.

100% zoom

Final step

Once you are happy with your work, save the image as .png and give it a name and a number. All of the 31 stencil maps should be named so they form a sequence (i.e. stencil01.png, stencil02.png, stencil03.png etc.).

This all sounds like a long process but the basic set of stencil maps needs to be created only once. Afterwards you can use it as a base for whenever you want to create a new set of transitions. This way you'll avoid having to create the 3x3 images and resizing and them and so forth and so on. Even better, I included a .zip file with all the basic stencil maps so you can skip the early process and start making those transitions right away :)


http://wiki.fifengine.net/images/a/a8/Valuemap_BaseSet.zip


Mixing grounds

So now we have a set of stencil maps, all properly named and painted as they should be. We will now use these stencil maps in Blender to produce nice results. In addition to the stencil maps, you will also need two square ground textures you want to mix. Here I will presume you already have your camera and lights set up and that you have a plane mesh that renders to a basic tile. Give this plane a new material and go to texture buttons. Add one ground texture to the first channel and the other one to the third channel. For both use the material mapping options as you would when making regular ground tiles.

Mixing grounds1.png


Now assign a stencil map to the second texture channel. Load the first image of the sequence we made earlier (stencil01.png). Make sure you change the setting from "image" to "sequence" for the stencil map we want to use. This will tell blender it should use images from the same folder that are named in a similar way and that's exactly what we have with stencil01, stencil02, stencil03 etc. For every frame in Blender, a corresponding stencil map will be used: frame (1) - stencil01.png, frame (2) - stencil02.png, frame (3) - stencil03.png...


Mixing grounds2.png


Go to material buttons, "map to" panel. Make sure you have the stencil texture selected (you can check this in the texture panel). Turn on the "stencil" and "no RGB" and turn off "col".

Mixing grounds3.png


Now go to render panels and we will render the scene as a sequence of 31 frames. In "anim" panel turn on the sequence button and set the end value to the number of stencil maps we have, that is 31. Define the output folder and how the rendered sequence should be named. I used water_sand##.

Water_sand tells us which two ground types are involved in these transitional tiles and ## tells Blender how it should enumerate individual images. With ## we will get water_sand01, water_sand02, water_sand03... but if we used ###, we'd get water_sand001, water_sand002, water_sand003 etc.

Mixing grounds4.png


Now all you have to do is press the ANIM button and Blender will do the rest. After the rendering is complete, open the folder where you specified to have the sequence saved and you should have a nice set of transitional tiles.

Mixing grounds5.png


Final notes and comments - WIP

(show how differently blurred stencil maps affect the final result) advice, hints tips (if any)

References

This article was used as a source of inspiration for the terrain transition template: http://www.gamedev.net/reference/articles/article934.asp