tile_textures - ryzom/ryzomcore GitHub Wiki


title: How to create textures for the tile bank description: published: true date: 2023-03-01T05:21:11.804Z tags: editor: markdown dateCreated: 2022-03-13T03:26:35.352Z

Tile format explained

Creating the textures is the trickiest part of creating the tile bank. There are tiling restrictions outlined below that make it more difficult to create the textures. In addition you need to avoid any extremes of light or dark in the tiles so patterns are not obvious when you tile them together.

The tile format MUST be an uncompressed TGA image. Two sizes are 128x128 and 256x256 pixels, you can use either 24 or 32 bit images.

Most importantly the border of an image must be mapped as below, the left and right edges MUST be EXACTLY the same, the top and bottom edges MUST be EXACTLY the same, the entire border ( all four edges ) MUST be the same as EVERY other tile in that tileset.

If you have a tileset for autumn forest grass type b then any grass tile in this set must have EXACTLY the same border.

A Border is a band one pixel wide that follows the edge of the ENTIRE image.

The 256x256 tiles MUST have two of each 128x128 border edge side by side as shown in the images below. This enables 256x256 tiles to link with 128x128 tiles seamlessly.

tile_uv_128.png

tile_uv_256.png

A tile is a landscape texture of 128 or 256 pixels. Diffuse tiles must have identical pixels on the left/right columns and top/bottom row, which will be drawn in game as a single pixel column and row respectively; this is necessary for proper texture interpolation.

Here is an image showing the pixels that will be overlapped, the left side is 256x256, the right is 128x128.

layout.png

In the engine the red lines will overlap on each other, as well as the blue lines and in game it will look like the below example.

steps.png

256x256 diffuse textures are broken down into 128x128 images and overlapped in the same way, as such the internal is also layered on top of each other like so.

256px.png

Tile transition explained

A tile transition [ layer (2) ] is used as an alpha layer between the two tiles [ layers (1) & (3) ] giving a smoothed transition between differnt tile sets.

tile_layers.png

Results in this tile being displayed

merged.png

Naming conventions

TGA tile files should follow this basic naming convention to allow them to work with the batch load functions and possibly help with ASyncTextureLoading? later on.

The name is broken into two parts [NAME][ID].tga :

  • The [NAME] section can be anything you want but if you want to make a set of one texture for batch loading such as transitions the filename would be exaxctly the same except the [ID] part.
  • The [ID] part of the texture name is a two digit number defining the tiles order id which sets the place the tile will occupy in the tile set this also can be reffered to as the tiles priority.

For Example:

  • stone-transition-texture00.tga
  • stone-transition-texture01.tga
  • stone-transition-texture02.tga

Here is an example of the correct order the different tranition tiles should be loaded in.

transition_order.png

The batch load function of tile_edit.exe loads all the alpha transitions in one shot. and .dds the rotation variations automatically. To use the batch load function, the alpha bitmaps must have the naming convention discussed above. The number of a transition tile is given by its position in the previous set. The first is number 00.

Creation in Gimp

Here is one way to create them reasonably quickly using Gimp.

Get an image off the web somewhere or take a photo of what you want to tile yourself.
This needs to have some variation but not have radical differences of dark and light. Ideally this should have a base color that is throughout the image and be 512 X 512 or larger.
Set the selection tool to a fixed size of 128 X 128 and choose part of the image which will become our first 128 tile.
Copy this selection area, create a new 128X128 image and paste the selection to the new image. Take more random 128X128 selections from the original image and create 128X128 images for each. Usually 3 or 4 of these is sufficient.
Now change the selection size to 256 X 256 and create some 256X256 images in the same way. The bigger the original image is the more selections you can probably make. You need 6+ 256X256 images.

At this point you can manually add further variation to each of the images depending on your game requirements.

Once you have all the 128's and 256's in place, you need to fix the borders. Go into your first 128 tile and change the selection tool to be a fixed selection of 128 wide and 1 pixel high. Use this to select the top row of pixels in the image. Copy and paste top row to the bottom row. Do the same with leftmost column of pixels - copy left side to right side. Save the image.
I would test loading the image into the tile editor at this point to make sure the borders are correct. Once you have a good border, wee need to copy this to all the other tiles.
Edit the selection to be 126X126 fixed. Select the middle of the image so that a border of 1 pixel remains around the outside. Invert the selection so that the 1 pixel border is selected. Copy this border and paste it to all the 128 images and resave each (remember no compression on these tga files).
We need to now create a temporary 256 image to get our 256 border. Copy the entire 128 X128 base image into a new 256X256 image. Move it around and recopy so that it is tiled 4 times within the 256 image. Now do the same procedure on the 256 image to get a 1 pixel border around the outside. Copy this border to all the other 256 images and resave them.

Once you have done this, all the border tiling requirements will be met for the tile editor.

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