Separated tilemap generation

[j0ffe]

I’m trying to generate a flat tilemap where every tile is separated from all other tiles. however then I generate all the triangles I only see one of them.

This is the code I have that creates the triangles.
triangels = new int[(this.width * this.height) * 2 * 3]; // width * height = number of tiles. * 2 = 2 trianels for each quad(tile). * 3 each triangel has 3 corner

        for (int z = 0; z < this.height; z+=2){
            for(int x = 0; x < this.width; x+=2){
                int triPos = (z * this.width + x) * 6;

                triangels[triPos + 0] = z * this.width * 2 + x; //First tri first vertex.
                triangels[triPos + 1] = (z + 1) * this.width * 2 + x + 1; //First tri second vertex.
                triangels[triPos + 2] = (z + 1) * this.width * 2 + x; //First tri third vertex.

                triangels[triPos + 3] = z * this.width * 2 + x; //Second tri first vertex.
                triangels[triPos + 4] = z * this.width * 2 + x  + 1; //Second tri second vertex.
                triangels[triPos + 5] = (z + 1) * this.width * 2 + x + 1; //Second tri third vertex.
            }
        }

My result:

[j0ffe]

After many hours of drawing and mathematics I come to the best solution to solve my problem.
Instead of number every vertex 0 to height + 1 * width + 1. I created a class for every tile and that gives the vertex corners x + 0, x + 1, x + 2 and x + 3. X is variable that determine the current tile.

The plane class. Note that the z is negative. This is because I wanted to go from top left and then down.
The Plane class contains the class Vertex.

class Plane {
    /// <summary>
    /// Order is: Top left, Top right, Bottom left, Bottom right.
    /// </summary>
    public Vertex[] vertices = new Vertex[4];

    public Plane(Vector3 start) {
        //Note negative z
        vertices[0] = new Vertex((int)start.x, (int)start.z, 0); // Top left.
        vertices[1] = new Vertex((int)start.x + 1, (int)start.z, 0); // Top right.
        vertices[2] = new Vertex((int)start.x, (int)start.z - 1, 0); // Bottom left
        vertices[3] = new Vertex((int)start.x + 1, (int)start.z - 1, 0); // Bottom right
    }

}

The Vertex class is not necessary it’s just their to make it easier to modify a generated terrain later on. The class contains position, UV and normal for each vertex.

As you can simply do it with a simple for loop just as I’m going to do for the triangles, you probably still want class or struct of this kind. The reason you have a seperated tilemap is because you most probably want to modify the UVs kind often and it might be good idea to store the UV so you know what UV position contains to where.

class Vertex {
    public int heightLevel;
    public Vector3 Normal { get; private set; }
    public Vector2 UV;
    public readonly int posX;
    public readonly int posZ;

    public Vertex(int posX, int posZ, int heightLevel = 0) {
        this.heightLevel = heightLevel;
        this.Normal = Vector3.up;
        this.UV = Vector2.zero;
        this.posX = posX;
        this.posZ = posZ;
    }
    public Vertex(int posX, int posZ, int heightLevel, Vector2 UV) {
        this.heightLevel = heightLevel;
        this.Normal = Vector3.up;
        this.UV = UV;
        this.posX = posX;
        this.posZ = posZ;
    }
}

Next up is to create the triangles. This is done with a simple for loop. As you can see, since I put all the vertices in plane class the order of vertices is 0,1 4,5 8,9 and so on. Then the next row is 2,3 6,7 10,11.
This does so I simply know where the vertices are. a increases by 4 since their is 4 vertices for two triangels. NOTE! if you have a positive z then you have to swap the second vertex and the third vertex otherwise your tilemap will be upside down.

triangels = new int[(this.width * this.height) * 2 * 3]; // width * height = number of tiles. * 2 = 2 trianels for each quad(tile). * 3 each triangel has 3 corner

int a = 0;
for (int i = 0; i < this.height * this.width; i++, a+=4){
    int triPos = i * 6;

    triangels[triPos + 0] = a; // First triangle, first vertex.
    triangels[triPos + 1] = a + 3; // First triangle, second vertex.
    triangels[triPos + 2] = a + 2; // First triangle, third vertex.

    triangels[triPos + 3] = a; // Second triangle, first vertex.
    triangels[triPos + 4] = a + 1; // Second triangle, second vertex.
    triangels[triPos + 5] = a + 3; // Second triangle, third vertex.
}

Now all we have to do is apply the triangle and vertices.

Mesh mesh = new Mesh();
mesh.vertices = GetVertices().ToArray();
mesh.triangles = triangels;
mesh.normals = GetNormals().ToArray();
mesh.uv = GetUV().ToArray();

Note that I have methods to get the vertices, normals and UVs. The methods is simply foreach loop and a for loop that gets all the vertices from the class and adds it to an array.

If you have any question just ask away.