Tutorial How Tile Textures Work

Discussion in 'Starbound Modding' started by Intrebute, Dec 9, 2013.

  1. Intrebute

    Intrebute Pangalactic Porcupine

    EDIT: This explanation is not up to date. It does not take into account the 'connected textures' of the pipe-like tile materials

    I've noticed that although there are various tutorials for adding custom objects, recipes and whatnot, I have yet to see one that touches on tiles themselves. Although this won't be a tutorial on how to add a new material, it will be more like a guide, to get a better understanding on how exactly the strange structure of texture files work.

    Simple Textures

    In this part of the guide, we will initially work with the simplest case of a tile texture: a single texture with no variations and non-paintable.

    The texture file for this case is a 16x24 image file. I don't know what file format requirements are in place, but all default images are PNG files, so those are the ones I use.
    The texture file is divided in two sections, one is a tiny 8x8 square at the top-left, the other is a 16x16 square at the bottom. The remaining 8x8 square on the top-right seems to remain unused.


    First, let's look at the bottom section.

    Despite appearances, all tiles in Starbound are 8x8 pixels in size. The extra parts of the images are rendered under certain conditions, depending on the surrounding tiles. Keeping this in mind, there is one part of the texture that is ALWAYS rendered, regardless of the surrounding configuration. This part, illustrated here as the part in blue, is the 8x8 sized image that is rendered in the tiles' position.


    For example, if we use the following image for a tile:


    And we place it in different positions, we could get, for example, this:


    That's fine and dandy. But what about all those other parts of the image?
    Well that's where the fun part is. The 4 pixel wide band around the central 8x8 area is what is rendered "outside" the tile. This is the area illustrated here as the part in bright green:


    This area is rendered differently depending on what tiles are immediately around it. That is, only the 8 directly adjacent tiles.
    This band can be divided in 8 sections, illustrated here by alternating shades of gray:


    These sections can be divided in two groups. I'm going to call them the out-corners and the sides. (Why I call them "out"-corners will become clear later on)

    Each of the sides, under some circumstances are rendered only in part. For now, we will avoid these cases.

    A side is rendered only when certain conditions are met.
    First, the tile the side 'enroaches' on must be an empty tile.


    Second, the corners beside the 'enroached' tile must also be empty.


    Only then will that side render completely. The other cases are covered with the in-corners discussed later.

    For example, using the following source image:


    By placing random tiles, the effect would be as follows:


    The same thing goes for the out-corners. The out-corners are rendered only if the tile they 'enroach' is empty. The sides adjacent to the out-corner must also be empty, simply because if they weren't, the space where the out-corner would render would already be taken up by a 'side' of an adjacent tile. Notice how two tiles with a space in between render BOTH sides of each tile beside it, and neither takes up space from the other.

    That's basically how the big area of the texture works. Now for the little 8x8 square.

    This area are the in-corners of the tile. This area is used to resolve the problem of two tiles adjacent to each other diagonally. In that case, which 'side' will be rendered in the 4x4 area that overlaps?


    Instead of having to choose between the two 'sides', the game simply renders something completely different in that 'conflicting zone'. The in-corners. Let's use an example. For this, we will use the following source image:


    By placing random tiles (again), we could get something similar to the following:


    And that's basically it. The 16x16 area at the bottom is what the tile looks like, and what's around it, the top 8x8 area says what it looks like when tiles of the same material get together.

    16x16: The tile and the edges outside
    8x8: The spaces in between tiles

    Here's an in-game screenshot of a tile I added to test how the textures work, and the texture file I used. I used different colors to more easily study what effect was being produced. Note that regardless of what you see, wherever there is a purple square, there is a tile there.



    I also include a small mini-template with the different functional sections painted with different shades of gray.



    I figured out how the variations work.
    The actual texture file can contain multiple images, as can be seen in the default items. To make a variation of the same material, make the image file wider, and tile the images horizontally. As far as I'm aware, variations are tiled HORIZONTALLY. Vertical are reserved for coloring, but I have yet to get a hold of how that works exactly. Remember, tile them HORIZONTALLY. Just copy-paste a single-variation image side by side many times.

    To know how they behave in the game-world, consider this, for the tiles occupied by, and those adjacent to, the material with these variations:


    For every instance (in this case three), assign a number.
    Here it would be 1,2,3
    Now, in the game-world, for every tile, generate a number between 1-3. If it is 1, then whatever would be rendered in that tile will be from variation 1. If it's 2, then render variation 2. And so on. This applies only to whatever would be rendered IN THAT TILE.
    If a tile has a number of 2, and the one below has a number of 1, and you place a tile in the one with the 2, the bottom 'side' that is rendered is not variation 2, but 1.

    Let me illustrate. For this, let's use the following source image:


    If we fill a space with this material, we would get something like this:


    Note how it picks randomly between the two variants. Now pay careful attention to the following. We are going to remove the whole third column. Now, in those spaces, what will be rendered will be the 'sides' of both the right and left tiles. But some of those sides are white, and some are black! What's going to happen? What happens is this: Wherever there was a white tile, there will be a white 'side' regardless of what tile that side belongs TO.


    Compare with the previous image to see that the only 'side's that are white are in the tile that was previously white.

    This is important to note. If you make the variations only make sense if you put the edges of variation 1, with the tiles of variation 1, and the same thing with variation 2, the game will mix and match them. So, basically, make all edges, all in-corners, and all out-corners fit smoothly with all tiles and all variations of the same material. Otherwise, you're going to get an ugly jumbled mess.

    Another thing to note. Regardless of how many times you leave the area, how many times you restart the game, and pretty much anything else you can change, if a spot would have had variation #3, it will ALWAYS have variation #3, at least for the same material.

    Hope this helps somebody if the textures looked a bit strange at first glance.
    Last edited: Apr 28, 2015
    olsonpm, vuurrobin, Phaetum and 20 others like this.
  2. Ixath

    Ixath Starship Captain

    Awesome. This cleared up a lot for me.

    Thank you!
  3. Goldragon227

    Goldragon227 Big Damn Hero

    Thank you this really helps!
  4. Pinchy

    Pinchy Subatomic Cosmonaut

    I was looking to see if you can make 16 x 16 tiles, but this helped me understand variations and how the edges work.
  5. Med

    Med Phantasmal Quasar

    Super incredible, thanks a million!! :laugh:
  6. Annuschka

    Annuschka Big Damn Hero

    This has to be included into the Modding Guides overview. Well done, clear and comprehensive.​
  7. pickandaxe

    pickandaxe Intergalactic Tourist

    add this guide to starbound wiki , tutorials , how to "tile textures"
  8. stufufuku

    stufufuku Guest

    thank you :O
  9. qq799854666

    qq799854666 Space Hobo

    very nice!!

Share This Page