tile_transitions - ryzom/ryzomcore GitHub Wiki


title: Notes on transition tiles description: published: true date: 2023-03-01T05:21:19.188Z tags: editor: markdown dateCreated: 2022-03-13T05:18:48.485Z

For every type of terrain (like grass, stones, concrete) there are a number of different textures in different resolutions. The small tiles are for refinement of the TILING. The large tiles are for covering larger areas of terrain (and not for partial high res areas!), and of course for more diverse ground features like holes or puddles or the like.

The diffuse textures ALWAYS are 128x128 and 256x256. The borders must be identical, which means: Top/bottom edges must be identical and left/right edges too. (See figures on nevrax.org for details).

Every bank MUST have both 128x128 and 256x256 textures.

The tile size's sole purpose is the covering of smaller or larger terrain areas, not for creating higher resolution parts on the same amount of terrain space (i.e. a large tile covers more space on the terrain than a small one).

Hence you should use at least 3-4 differently structured textures per type of terrain to avoid visual repetitiveness.

What is essential tho are the...

Transitions

They are being used when one ground type "morphs" into another one, like grass->gravel or similar.

For every terrain type (called 'land' in the editor) there's a complete set of transitions, that can reflect the type of terrain displayed. The basic shapes of the transitions look like this:

http://project-x.holodeck.info/pmwiki/uploads/Main/transition_map.jpg {.is-danger}

The dark areas mark the transparent areas, the light areas mark the visible. The shape of the dark/light can be whatever you like, but one thing must be made sure: The edges MUST fit. And this is where the whole thing gets a bit hairy. I've created a reference PSD file i use for creating transitions.

But there's one good thing about it: You dont need all the 47 tiles. In fact you only need 12. The rest of the 47 tiles are the same 11 ones over and over again, just with different orientation.

I've extracted a mapping, that shows which original image is used multiple times, and in what orientation:

  • 00 = original
  • 01 = original
  • 02 = original
  • 03 = 00, 90
  • 04 = 01, 90
  • 05 = 02, 90
  • 06 = original
  • 07 = original
  • 08 = original
  • 09 = 06, 90
  • 10 = 07, 90
  • 11 = 08, 90
  • 12 = original, Diagonal Upper Left -> Lower Right
  • 13 = original, Diagonal Lower Left -> Upper Right
  • 14 = original
  • 15 = 12, 90
  • 16 = 13, 90
  • 17 = 14, 270
  • 18 = original
  • 19 = original
  • 20 = original
  • 21 = 18, 90
  • 22 = 19, 90
  • 23 = 20, 90
  • 24 = 00, 180
  • 25 = 01, 180
  • 26 = 02, 180
  • 27 = 00, 270
  • 28 = 01, 270
  • 29 = 02, 270
  • 30 = 06, 180
  • 31 = 07, 180
  • 32 = 08, 180
  • 33 = 06, 270
  • 34 = 07, 270
  • 35 = 08, 270
  • 36 = 12, 180
  • 37 = 13, 180
  • 38 = 14, 90
  • 39 = 12, 270
  • 40 = 13, 270
  • 41 = 14, 180
  • 42 = 18, 180
  • 43 = 19, 180
  • 44 = 20, 180
  • 45 = 18, 270
  • 46 = 19, 270
  • 47 = 20, 270

That's about all there is. As i said, it takes a bit to get used to, but it's really powerful when it comes to the actual landscape design later on. So create those with care.

Creation of the textures

As stated earlier, the problem will be identical borders of the textures, so some precautions will help ease the process.

Here's a little how-to (the way i do it):

  • take the texture you want to use (like a grass tile or something like that)
  • Put that tile into a 128x128 image as a layer
  • Scale that layer to 64x64 size and move it to the top left corner
  • Copy and mirror that layer horizontally and move it to top right
  • Copy this layer vertically and move it to lower right
  • Copy this layer horizontally and move it to lower left

The result should be a quite crappy looking image that shows the mirroring quite clearly. Of course this isnt what we want as texture, but now we can be sure that we have a perfectly fitting edge for all directions.

  • Combine the four layers
  • Cut anything away except for the 1px border
  • move the layer to the top of everything else and lock it in place.

Now you have a nicely set up workspace for your 128x128 textures, because you can basically put in anything as texture now, and still retain a working texture edge.

For your 256x256 texture, just save into a different .psd file, then do the following:

  • Resize the canvas to 256x256 (make sure everything stays in the upper left corner)
  • Unlock the border layer
  • Copy the border layer 3 times and move it to the respective corners, so that the result looks like a window (basically)
  • Combine those layers and remove anything within the outer border, just make sure to keep the border, of course.
  • Again, you have a perfectly matching border, and can again put basically anything into the space within.

That's about all you need. You can put as many different textures for one type into a bank, the more you have, the more variation there is later on.

Related

There's one texture type especially of interest when it comes to detailed terrain:

The Displacement textures

These textures are used in conjunction with their colored counterpart to accentuate the displayed texture by actually doing a real displacement of the ground geometry.

So for example lets say you have a gravel road texture. Now when you put in a proper displacement texture for a few tiles, you can for instance simulate puddle holes or more rough parts of the whole thing, because the landscape itself will be deformed according to the displacement. They basically work like heightmaps.

Source

⚠️ **GitHub.com Fallback** ⚠️