How to create transition tiles

From Post-Apocalyptic RPG wiki

Jump to: navigation, search

Deprecated workflow.png This article covers an deprecated workflow.

Deprecated workflows are no longer utilized by the specific development department(s) at this point. This does not necessarily mean that they have been completely rejected, but it does mean that for now the workflows have been set aside.

This is an article on how to create transitional tiles to put in PARPG.

Until it's not done, it's not usable! This is an old tutorial being converted to a new approach, don't learn from it until it's done.

  • Copy from the old article, remake a part of it,
  • make new blender ui images and new other images
  • provide a set or 2 of alpha maps
  • make it coherent with the previous single tile article
  • find out the best way to get rid of antialiasing at the borders of the tiles. Provide necessary files etc.

blah blah.



Creating basic ground tiles in Blender is generally not difficult (in case it is, please redirect yourself to the simple tile tutorial). 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 - WIP

Basicly what we do when creating transitional tiles is making a part of the ground transparent by using alpha maps. Alpha maps are greyscale images that tell Blender where a tile should be transparent and where it should be solid. White values means the part of the tile is solid, black values mean the part of the tile is transparent, while the grey values in between mix the two, depending of course on how light or dark the grey is.

These half-solid half-transparent tiles can then be put on top of other ground types in PARPG and create a nice transition.

Stencil maps - WIP

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.

File:Valuemap baseset.png
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 - WIP

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%

Next step - WIP

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.

Making better transitions - WIP

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.

Blurring the transitions - WIP

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.

Final step - WIP

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 :)

Mixing grounds - WIP

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.

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...

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".

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.

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.

Final notes and comments - WIP

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

References - WIP

This article was used as a source of inspiration for the terrain transition template:

Personal tools