Generating 3d layouts Tutorial

This tutorial continues from the Big Tiles tutorial. It is recommended you complete that one before starting this.

Earth and air

So far we've only generated a single layer of tiles. But Tessera can work with 3d grids too. The principle is exactly the same - paint tiles to indicate how they connect and let Tessera do the rest.

Let's turn our previous example into a 3d example. First, go to the generator, and find the size setting and increase the Y size to 10. Now if we hit generate, we get something like the following:

There's two things to note:

• Each layer is separated from the one above by 1 unit, even though our tiles aren't nearly that high.
• Just like in the first tutorial, Tessera doesn't know how things connect. We need to paint the tiles to indicate what can be put on top of what.

Let's fix those issues.

First, change the Tile Size property in the generator to (1, 0.2, 1). This is the size of the meshes we are using. Now do the same thing for the tiles. They should also have their center Y set to 0.1. All new tiles will want to share these same settings.

Second, let's paint tops and bottoms of the tiles. Paint the top faces of each tile as white, and the bottom ones as black. This will indicate above ground / below ground respectively.

NB: You can use "Show Backfaces" to easily see the far sides of cubes so you don't need rotate all the time to paint everything.

If we run the generation now, it will fail.

This is because we've colored the tiles so that they no longer stack, but we haven't provided anything to stack above or below them. Tessera tries to fill the entire generator bounds with tiles, and fails if it cannot do so. So we need some more tiles.

Create an empty called tile_air and from the assets load tile_dirtHigh. Give both of these the TesseraTile component, add them to the Generator's tile list, and set their Tile Size and Center as with the other tiles. Now paint them. tile_air should have all 6 faces painted white, and tile_dirtHigh should have all 6 faces painted black.

Now generation should be working again, and you'll get a 3d, if flat, landscape.

NB: You may notice that instantiating this many tiles takes quite a bit of time. This can be undesirable for a game. If you select the air and dirt tile, and enable "Instantiate Children Only" then they will no longer be instantiated (as they have no children), speeding things up considerably.

Adding slopes

We need to add even more tiles before the surface can crinkle. Let's take 3 more from the tower defense assets: tile_slope, tile_cornerOuter and tile_straightHill. Again, TesseraTile component, Tile Size (1, 0.2, 1), Center (0, 0.1, 0).

You'll notice that the tile meshes poke out the top of the paint cube. Use Add Cube to stack a second cube on top of the first so that the meshes are completely contained within. See the big tiles tutorial for details.

Now, we need to paint the cubes. We need to careful when painting them. We want to ensure that all our existing tiles connect to these new tiles at the correct places. And we need to make sure that the sloped sides can connect only to each other.

Rather than give the sloped sides an extra color, we will paint them with a recognizable pattern. That will serve as a reminder. Sometimes we'll paint the pattern, and sometimes the reflection, indicating which direction the slope is running. Tessera will recognize this, and connect them appropriately. You can use the "Pencil" tool to paint patterns.

Paint the tiles. Before:

After painting:

After painting, showing backfaces:

Add the new tiles to the generator, and you should be rewarded with a undulating landscape:

Adding a sky box

You may have noticed that sometimes the generator fills the entire volume with nothing but dirt, or nothing but air. There's nothing in what we've generated so far that prevents that. The generation algorithm will often suprise you out like that - anything that is a legal arrangement will occasionally be generated, and legal arrangements aren't always what you intended. One easy fix for this is adding a skybox to the generator. A skybox constrains what tiles can be placed on the boundary of the generated volume.

In this case, we want to force the top of the area to be air, and the bottom to be dirt, and we don't care about the sides. That will force there to be a surface somewhere between the top and bottom. Create an empty with the TesseraTile component, and paint the top face white and the bottom face black. Then assign it to the Skybox property of the generator. This will fix things as desired.