Now that we can call the methods we need to build the map we will want to visualize all of the tiles. We’ll be leveraging our testing class to do this since in a real game the render logic may be tied to other logic not easily fleshed out in a stand alone project.
- [Voiceover] And now it's time for us to actually visualize the map that we created. In order to do this, we're gonna need to create a new sprite prefab. In the hierarchy menu, let's right click, go to 2D object, and create a sprite. Here we'll call this Tile Prefab. Next, let's drag the new prefab into our prefabs folder. It'll be a lot easier to simply use a prefab in order to represent each of the tiles in our scene. We're gonna take advantage of the prefab sprite renderer to simply add the correct sprite tile that we want for each tile in our map.
Now that we have this created in the prefab folder, let's go ahead and delete it from the hierarchy. Now let's go ahead and open up our random map tester class. We're gonna add some new fields. Right below where we have our map width and height, let's add a new attribute called space. This will give us a little bit of padding between each block of information inside of our inspector. Next, we're gonna create a new header. And in this header, we're gonna call it Visualize Map.
Next, we'll need to add three new fields. We'll start with public field typed to game object, and we're gonna call this Map Container. Now let's add another public field typed to game object, and we're gonna call it Tile Prefab. And finally, we're gonna need to know the size of each of the tiles. So let's create a new public field, typed to vector two, and we'll call it Tile Size. We'll set its value to a new vector two that's 16 by 16.
Next, let's add a new private method called Create Grid towards the bottom of our class. Now, we store all the tile information in a 1D array. We're gonna need to convert that 1D array into a 2D grid. To do this, we're gonna start by getting the total number of tiles we need to iterate over. We'll create a variable called total. And we'll make this equal the map's tiles array length. Next, we'll need to keep track of the actual number of columns in our grid.
Let's create a new variable called max columns. Here we'll set the value to the map's columns. And finally, we're gonna need two new variables that'll store the position of the column and row we are in as we iterate through the grid. Let's create our column variable and set it to zero. And our row and set that to zero as well. Now, we need to iterate through each of the tiles in our map array and create a game object and position it at the correct X and Y position.
In our for loop, we'll set I to equal zero. We'll make sure that I is less than the total number of tiles, and then we'll increment I by one over each iteration. Now let's set up the column value. Here we'll make column equal I modulus maximum columns. Modulus returns the remainder of a division. As we go through and iterate over I, we're gonna use this value in order to detect which column we're actually on as we're rendering out the map.
Next, we're gonna want to create a new X and Y position so that we know where to place our game object. Let's create a variable called new X and set it equal to the column value we just calculated multiplied by the tile size X. As we go through and iterate over each column by multiplying it by the tile's width, we'll lay it out horizontally across our grid. Next, let's create our new Y value by taking the negative value of row and multiplying it by the tile size Y.
The reason we're getting a negative value of row is that we want to lay our tiles down vertically below each row as we create a new one. Since moving down in Unity's coordinate space is incremented by negative values, we'll simply use this in order to calculate where the next row is as we go through the loop. Now let's create an instance of our tile prefab for us to work with. We'll create a variable, we'll call it Go, and let's call the instantiate method and we'll pass in the tile prefab.
Next, let's give our game object a name. We'll simply concatenate the string tile with I from our loop. Now we'll need to nest this game object inside of the map container. We'll talk to the game object's transform and call set parent. And we'll pass in the map container's transform. Next, we'll want to reposition the game object inside of its parent by setting the game object's transform position to equal a new vector three and we'll pass in the new X, new Y, and zero for the Z value.
Finally, when we get to the end of a column, we want to go to the next row. So in order to do that, we'll test if the current column is equal to the maximum columns minus one. If it is, we'll increment row by one. The last thing we want to do is call the create grid method inside of the make map method. At the end of the method, let's simply call create grid. Now let's save this and go back into Unity.
Let's select the random map tester from the hierarchy. Here we can drag an instance from the hierarchy over to the inspector and set the map container to the actual game object of the random map tester. Next, we'll go to the prefab folder and let's drag the tile prefab over to the tile prefab field. Now, if we run our game and click generate island, we'll have a new island. The only issue is that we won't be able to see it.
If you look in the hierarchy, as we go through each of the tiles and click on them, you'll see that they're set up at their corresponding positions. Now we have the basic foundation for visualizing our map, we just need the sprites.
- Setting up the project
- Creating the tile, map, and map tester classes
- Visualizing the map
- Creating a moving camera
- Autotiling and bit shifting
- Decorating the map