Warnings in games can be provided in many ways, for doing both the right and wrong things. However, having the option of 3D capabilities allows us to create more interesting and dynamic warning messages.
- To begin, let's create our warning in the UI. We can start by adding a panel. Right-click on the Hierarchy panel, then go to UI | Panel and rename it as 3DWarning. We can continue to add other UI elements, so we want a title inside another panel to evidence it and maybe add some text. As best practice, every time you add a component, tweak its anchor points as well so that everything can scale properly. At the end, we should have something that looks like this:
- Now, we should take advantage of the third dimension and adjust the value of the z axis for the components in the foreground. We can adjust it incrementally, similar to what we did in the first recipe of this chapter - Creating a 3D menu. At the end, we should see something like what is shown here:
- The next step is to animate it. We can animate it as we have previously done in the Creating a pop-up menu recipe in Chapter 6, Animating the UI. However, instead of having buttons, we have a title along with the warning text. This text needs to be reduced first and then the panel (or vice versa if it has to pop up), keeping in mind how they will be animated. After we have followed these steps, we should attach our Animator component to 3DWarning.
- If we have set all the anchor points properly, we shouldn't have any problems in scaling the UI. Therefore, we are ready to change the Render Mode of Canvas to World Space. Then, we can just follow the previous recipe in order to place it in the space.
- Now, we have to create a script that triggers the 3DWarning and when it disappears. Furthermore, the 3DWarning could be nicer if it always faces the player when it comes up. Therefore, select 3DWarning. In the Inspector, go to Add Component | New Script and name it WarningScript. Finally, click on Create and Add.
- Double-click on the script in order to edit it. Since we want to control the animation, we need to create a
privatevariable that will store the Animator component. To do this, let's write the following line:private Animator animator;
- Now, in order to get the player's position, we need a variable to store it in. Also, we need another variable to indicate the distance at which the warning should be triggered. These are both
publicvariables, since they are supposed to be set in the Inspector:public Transform player; public float activationDistance;
- Furthermore, we need two more
publicvariables to set the name of the animation that we created before:public string appearingAnimation; public string disappearingAnimation;
- Finally, we also need a
boolvariable; it is used to trigger the animation. However, this is done only once and is used to distinguish between whether the warning is enabled or not:private bool isEnable;
- In the
Start()function, we need to assign the value to theanimatorvariable. We can do this by getting the component:void Start () { animator = GetComponent<Animator> (); } - Next, in the
Update()function, we have to check whether the distance between the warning and the player is less thanactivationDistance. If so, it means that the player is close enough to trigger the warning. Then, we need to see the value of theisEnablevariable to check whether the warning is already activated. In fact, if it is not, then we set theisEnablevariable totrueand triggerappearingAnimation. Otherwise, we do the opposite of this process. Thus, if the player is far enough, the warning is deactivated. In fact, we can set theisEnablevariable tofalseand triggerdisappearingAnimation. Therefore, we can write this code:void Update () { if (Vector3.Distance (player.position, transform.position) < activationDistance) { if(!isEnable){ isEnable = true; animator.Play(appearingAnimation); } } else { if(isEnable){ isEnable = false; animator.Play(disappearingAnimation); } } } - Now the script is ready and we can save it.
- We create a test scene, as we have done in the previous chapter. Alternatively, we can directly use our game. Assign all the public variables and check whether everything works as it should.
After we have created our 3D warning along with its two animations and placed it in the environment, we have to create a script that makes it pop up when the player gets close to it. We need to trigger the animation once, using the bool variable isEnable.
The focus of the next sections is to show us how it is possible to improve our 3D warning message.
If we want to improve computational performance, we can consider transforming the Update() function into a coroutine. We have discussed coroutines in greater detail in the previous chapter, so you can revisit it again, especially in the There's more... section of the first recipe.
Imagine that we are using the 3D warning to trigger a pop-up message for a pickup item on the floor. Since the player can reach it from different directions, it's not nice that when it comes up, it has a different orientation. So, until the warning for instance on the wall, the player can see it from only one direction and it doesn't need to face the player. But in other cases, this is necessary. In order to do so, we have to change our script a little.
Let's add the following line at the end of the Update() function of our script:
transform.LookAt (player.position);
In this way, we force the warning to always face the player.
This UI element is supposed to be in the environment. An example of its use may be to indicate to a player an item to pick up. In this example, it is possible to have the UI element floating rather than static in the air. So, we can follow the steps in the Making a floating UI element recipe in Chapter 5, Decorating the UI. Contrary to what we did in the Adding a smooth tilt effect section, where the floating logic could still be set in just two dimensions, here we might want to extend the floating effect to the third dimension. This should be used with the Rotating along its axis section rather than the Always orienting the warning towards the player section.
Therefore, if we decide to implement this extension, we have to change FloatingUIScript a bit by adding two variables:
public float zspeed, zAmplitude;
Also, change the Update() function like this:
void Update () {
rectTransform.localPosition = new Vector3(xAmplitude*Mathf.Sin(Time.time*xspeed), yAmplitude*Mathf.Sin(Time.time*yspeed), zAmplitude*Mathf.Sin(Time.time*zspeed));
}In this way, we can change the position and value of the z axis as well. As a result, we are utilizing the third dimension.
- Throughout this chapter, we discussed how to animate UIs and how various elements such as the warning message can be helpful to a player during the game. In particular, we can see that an ideal way to animate a 3D warning message is as a popup during gameplay. In fact, this kind of animation is very similar to the one that is described in the Creating a pop-up menu recipe in Chapter 6, Animating the UI.
- Additionally, we deal with not only the animation of various UI elements, but also how to trigger them. This was covered in the Creating a menu with an entrance transition recipe, also in Chapter 6, Animating the UI. That recipe demonstrated how we can use the
OnClick()event to trigger the animation. This is done by calling thePlay()function on the Animator component. In contrast, we called the function directly inside our script, but the way it works is the same. So, refer to these two recipes to handle the animation of the 3D warning. - As we saw in the There's more... section, we are able to implement the 3D warning message with a coroutine. This example refers to the Optimizing the code using a delayed update through coroutines section contained in the Creating a distance displayer recipe in Chapter 8, Implementing Advanced HUDs.
- Finally, the last subsection in There's more… explained how we can extend
FloatingUIScript. A good place to refresh our memories about how to do this is the Making a floating UI element recipe in Chapter 5, Decorating the UI.