Creating the User Interface and HUD

RTS games are mostly played using actions and commands from the game interface, so it is very important to have a clean and scalable UI to help the player master the game. In this chapter, we are going to draw inspiration from common UI elements in classic RTS games and create our own for the Dragoncraft game.

We are going to build the foundation for the menu options, resource counters, player actions, unity and enemy details, and the minimap, one of the core mechanics of RTS games. A flexible and adaptable UI component will be created and configured to have a great performance with low draw calls and will be responsive to different screen ratios. This chapter will also introduce you to Render Textures, multiple camera usages, and our first level manager.

By the end of this chapter, you will have learned how to create UI elements and position them considering different screen sizes, as well as having learned how to interact with the UI elements...

Technical requirements

The project setup in this chapter with the imported assets can be found on GitHub at https://github.com/PacktPublishing/Creating-an-RTS-game-in-Unity-2023 in the Chapter04 folder inside the project.

The assets from the Unity Asset Store used in this project can be found at this link: https://assetstore.unity.com/lists/creating-a-rts-game-5773122416647.

Using Canvas for a responsive UI

Creating a UI on Unity involves more than just adding components to the screen and positioning them where you like; with so many screen aspect ratios and sizes available on TVs, monitors, tablets, and smartphones, we need to make sure our UI will look great on all screen sizes. To this end, we employ a concept called responsiveness, which is very common in web design and enables the design or UI to adapt itself to the screen size, while always ensuring a base position and dimension that is in proper proportion relative to the screen aspect ratio.

This may sound confusing and feel like a lot of work, but Unity has great tools to help us design and configure the best-looking UI for our game. Before diving into these tools, let us first review the UI of one of the games that we are using as inspiration for our own project, Dragoncraft, which is Warcraft III by Blizzard. Here is a basic recreation of what its interface looks like:

...

Setting up the UI and HUD using Prefabs

With the Canvas set up for our UI, we can start adding the UI components. However, we still need one last thing that is quite easy to include in the project, which is the TextMeshPro (TMP). The TMP is the Unity replacement for the UI Text and Text Mesh features and provides more control over text formatting as well as great performance. If you are already familiar with the old Unity UI, the TMP has almost the same names and features, but in a more robust package.

The TMP package comes by default on the latest versions of Unity, which includes the Unity 2023 version that we are using to develop our RTS game. Any new project will have this package installed, but if you want to double-check, go to Window | Package Manager and select the Packages : In Project option to see all packages that are currently included in our project. TextMeshPro should be on the list as an installed package. If you cannot see it, select the Packages : Unity Registry...

Rendering the minimap

The minimap is one of the most important resources for the player to master an RTS game. It shows a top view of the level and the discovered areas and it can track the enemy movements and highlight where the player is now. In this chapter, we are going to set up the minimap UI and the new camera to display the current level in the minimap. In later chapters, with more data available and game mechanics implemented, we will add more features to the minimap, so we need a solid foundation now.

So, we just learned how to use the Render Texture to display the camera render in a texture, and then add that texture to the UI. Now we are going to do the same process again but with a new Render Texture, Material, and Camera.

As we did previously, we can start creating the Render Texture and the Material that will be used by the minimap in the UI:

1. Right-click on the Textures folder and select Create | Render Texture. You can name it MiniMapRenderTexture.
...

Loading the UI scene additively

To see all the work we have done in this chapter, we will need to load the UI scene on top of the level scene, which we call loading additively, which is the opposite of the standard single scene load that replaces the current loaded scene with a new one. We want to use both scenes together, adding the UI to our level.

Before we start, we need to tell Unity what are the scenes we want to consider as part of the game. By default, no scene is added to the game build, and that is also a problem in the Editor because when we want to manually load a scene, Unity will need to know what that scene is.

To add scenes, click File | Build Settings…. At the top of the Build Settings window, in the Scenes in Build section, we will need to add our scenes. Drag and drop both the Level01 and GameUI scenes from the Scenes folder in the Project view into the area below the Scenes in Build section. Make sure to have the Level01 scene as the first on the list...

Summary

Congratulations on reaching the end of this chapter. We now have our level and our UI with the basic structure and foundation we need to build our gameplay and core mechanics.

In this chapter, we learned how to create UI elements such as buttons and sprites, how to use a few available methods on button click without writing any lines of code, how to set up and position the UI elements using both horizontal and vertical layout groups, and about the anchor presets and pivot values.

We also learned how to use layers, Render Textures, Materials, and multiple cameras at the same time to render different parts of the world into UI elements, such as the portrait for the selected unit and the minimap.

Finally, we have our first version of the level manager class, which is currently loading our UI scene additively and instantiating the minimap on the level scene.

In Chapter 5, Spawning an Army of Units, we are going to start adding some units to the level, configure their...

Further reading

We only scratched the surface of the camera and layouts. Here are some links to the official Unity documentation to learn more about the main APIs and components used in this chapter:

• Cameras: https://docs.unity3d.com/2023.1/Documentation/Manual/CamerasOverview.html
• Horizontal Layout Group: https://docs.unity3d.com/2023.1/Documentation/Manual/script-HorizontalLayoutGroup.html
• Vertical Layout Group: https://docs.unity3d.com/2023.1/Documentation/Manual/script-VerticalLayoutGroup.html
• Render Texture: https://docs.unity3d.com/2023.1/Documentation/Manual/class-RenderTexture.html
• Tags and Layers: https://docs.unity3d.com/2023.1/Documentation/Manual/class-TagManager.html
• Mask: https://docs.unity3d.com/2023.1/Documentation/Manual/script-Mask.html
• Canvas Scaler: https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/script-CanvasScaler.html
• Graphic Raycaster: https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/script-GraphicRaycaster...