In this recipe, we will create a minimap. An ordinary minimap features the basic points of navigation, typically in the shape of a circle or a square. In some instances, a minimap features a scaled-down real-time version of a map. In others, it may be a simplified version of the terrain. Whatever the case may be, minimaps prove to be a useful feature when traversing large landscapes, and they are also a way of indicating to the player the locations of various items. In this recipe, you will start learning how to use render textures and raw images. You will also learn how to set the position of the camera according to the player's position.
- First of all, we need to create the scene in which we can test the minimap.
- To quickly generate a 3D environment, we can use the Terrain object, which we can create by right-clicking on the Hierarchy panel and then going to 3D Object | Terrain.
- Now, in the Inspector, we can choose different tools to model it. Feel free to consult the official Unity documentation on how to use them. We can find the link in the See also section of this recipe. However, what we want to achieve is something like this:
- Therefore, we need to create some mountains, and maybe mold a valley. Also, to give the terrain some colors, we can use the Brush tool to paint the world with some nice textures. Even though this part doesn't directly relate to how we create a minimap, it is worthwhile to spend some time on creating a nice 3D environment if we don't have any. In this way, we will have a better scene to test the minimap and ultimately understand how it works. In fact, as we will see in the There's more… section of the next recipe, a lot of improvements make sense in real game environments only. For instance, we cannot improve shadows if our terrain is completely flat, because we don't have any shadows. Furthermore, we should also add a player object to the scene and attach a script to it to make it move. Now that we have an environment, we can implement the minimap system.
- To display the minimap, we will use another camera, which is different from MainCamera. This camera will display the scene from a top-down view and will be the background that our minimap is based on. Right-click on the Hierarchy panel and select Camera. Finally, rename it to MinimapCamera.
- By default, a Camera comes with Audio Listener attached to it. Since we should keep only one Audio Listener in the scene at any single point in time, we have to remove this component from MinimapCamera. To do this, right-click on Audio Listener and select Remove Component.
- Next, we need to create a Render Texture. Keep in mind that this feature is available in Unity Pro only. It is a very powerful component because it updates its texture at runtime. This could be useful to create reflections, monitors, and even mirrors in our games. However, here we will use them to render the minimap. In order to create a Render Texture, right-click on the Project panel and select Create | Render Texture. Let's rename it MinimapRenderTexture.
- Then, we need to link the RenderTexture to MinimapCamera. By doing this, we ensure that everything that is in view of the Camera will be shown on Render Texture. Select the camera and drag the MiniMapRenderTexture into Target Texture. Once we have done this, we should have something that looks like this:
- Now, we are ready to create our UI. We are going to use a UI component that we haven't used previously. This component is called Raw Image. The main reason for using a raw image, and not the ones that we have used in all other chapters of this book, is that this one can handle every kind of texture type in Unity, and not only sprite textures. Since Render Texture isn't a Sprite, we have to use Raw Image. The way of creating it is similar to other UI elements. First, right-click on the Hierarchy panel, and then go to UI | Raw Image.
Finally, rename it Minimap.
- Place it in the Canvas in the top-right corner, or whichever position best suits your game.
- Now, we have linked MinimapRenderTexture to the camera so that we can receive data from it. However, we also have to link Render Texture to the Raw Image that we created in the previous step. In this way, Minimap can show the frame rendered by the camera on-screen. Let's do it by dragging MinimapRenderTexture into the Texture of Minimap. After we have done this, we should see the following:
- The next step is to make MinimapCamera follow the player from a top-down view. This means that MinimapCamera should move only along the x and z axes, because we don't want it to get closer or further away from the map. To do this, let's create a script on the MinimapCamera.
- Select MinimapCamera in the Inspector.
- Navigate to Add Component | New Script and name it MinimapScript.
- Next, click on Create and Add.
- Now, double click on the script in order to edit it. To keep the script as general as possible, let's create a new
publicvariable that stores the player'sTransform, since we will access to the position of this component every frame. In fact, in some games, the player can switch between characters, and this value can change at runtime without us having to modify this script. Keeping this in mind, we will need to add the following to our script:public Transform playerTransform;
- Now, in the
Update()function, we have to assign a new position to our camera. Therefore, we will need to assign a new vector to it, where thexandzcomponents, are the same as those of the player, whileyis constant, for the reason explained in step 9. By doing this, we ensure that it will not only follow the player but also be centered on him:void Update () { transform.position = new Vector3 (playerTransform.position.x, transform.position.y, playerTransform.position.z); } - Save the script and come back to Unity. Finally, we drag the Player into the
publicvariable of our script, and now everything is ready. Let's click on play and test what we have done so far.
In this recipe, we saw how to use render textures and raw images to create a minimap.
In fact, we linked the render texture to the camera by setting its target texture variable. By doing this, the camera has lost its ability to render on-screen. Thus the output of the camera is then stored in Render Texture. When we assign this render texture to Image Raw, it takes the data from the render texture. Finally, it is rendered as a UI element on the screen, which displays what is seen through the camera.
The process is shown in the following diagram:
Now that we have seen how to create a minimap, the following section will teach us how to improve it by setting the camera to work orthographically.
Often, the design of a game requires that the minimap is flat. As far as we have a perspective camera, it will never be as perfectly flat as we would like it to be. Therefore, in this case, we have to change MinimapCamera in such a way that it renders in an orthographic mode rather than a perspective one.
To do this, we need to select MinimapCamera and then change Projection to Orthographic in the Inspector. Now, since Field of View is a parameter that is only for perspective cameras, it disappears. As a result, Size takes its place.
At this moment, the rendering of the camera may appear very close to the terrain. We can try to solve this issue by changing the position value of the y axis. Since it is a top-down view (rotation along the x axis equals 90 degrees, and it is zero otherwise), this doesn't affect the view. This is because all the view rays that are projected are parallel between them. So, we have to change the Size value in order to see more inside our minimap.
Now, we render orthographically and the camera component should look like this:
- We have used some not-so-common features of Unity. As such, it could be helpful to check out the following resources from the official documentation:
- If you want to refresh your understanding of how to use the terrain tool in Unity, you can refer to the official manual by visiting http://docs.unity3d.com/Manual/script-Terrain.html