Create in world UIs that act like in-game objects. Worldspace UIs can be used for in game displays or control panels, all utilizing the power of the Unity UI. This video will show you how to configure worldspace UIs, create an in-game object that’s actually a UI element and provides a script to properly scale world UI elements.
- [Narrator] In this video, I'm going to show you how you can create UIs in the game world. These UIs use all the same components as regular UIs, but are not overlaid on the screen, they appear In Game as objects. These UIs can be simple things like a button for a door, or more complex things like an interactive computer display in your game. Let's start by adding a Canvas. And we're going to add a button to the Canvas. Let's set our Canvas to World Space, and set it's position to the origin.
First thing you might notice is that the button is massive. You're also going to notice that sometimes the button disappears from the game window. This is a rendering bug in Unity. We can still see the button in our Scene window. The button is massive because the Canvas is in World Space now. So the Elements and the Canvas are both using World Units, instead of Pixel Units. Ideally, we want to lay out the UI using pixels. This is because all the UI elements are in pixel scales. We can still lay out the UI using pixels, if we scale the canvas.
Let's create a Script that will automatically scale our Canvas. We'll start by adding a new component, of a Script called In World Canvas Scaler. Let's edit that script in Visual Studio. The most important aspect of this Script is deciding how many pixels per In World unit we're going to have. We'll set that as a public float, so it can be modified later.
Initially we'll set this to something like 25. That means that 25 pixels will span one unit in the Game World. We're not going to use the Start or Update methods in this Script. We're going to use a special method called On Validate. This method is run whenever the Script is loaded, or a value changes in the Inspector. In this method, we're going to set the Transform Local Scale equal to a new vector of one divided by the pixels per unit for both the X and the Y.
And I'll set Z to one. This will scale the Canvas so that for every one unit In World, there are this many pixels. Let's go back to Unity and see how that affects our Canvas. We can see in our Scene window that the button has been scaled down to a more appropriate size. And we can adjust this by changing our pixels per unit. A larger number means that there will be more pixels per unit, so the UI will get smaller.
Let's set it to something like 50 pixels per unit. Now we're going to change this button to be this torch, and when we click the torch, the door is gonna open. We can remove the text element. We can re-size our UI and move it into position, and change the source image of the image component on the button. And then we can see that our torch is 16 by 55 pixels.
So let's go ahead and set our button to 16 by 55. This is one reason why pixels are much easier to deal with than World units. Let's change a couple other things about this button. We're going to change the transition to a Sprite swap. The highlighted Sprite is going to be our second level torch. And the Press Sprite is going to be our third level torch. Finally, we're going to adjust the On Click to modify the gate object. And we're going to change the Animator to play Gate Open, which is this animation here.
Let's see what that looks like In Game. Moving the mouse over the element reacts as expected, and clicking opens the door. At the moment, this doesn't look much different than an overlay UI. However, we can use the WASD keys to move the camera around, and see that the button stays exactly where it is In World and still reacts the same. The camera is controlled using the simple movement Script I wrote earlier.
In this video, I've shown how you can create a UI that resides in the game world. These UIs are pretty useful in both 2D and 3D games. The UI tools that come with Unity are very powerful, and being able to utilize them wherever you like is a huge benefit.
- Creating text and button elements manually
- Creating UI elements from reusable prefabs
- Scripting complex events
- Modifying events at runtime
- Creating UI elements from scripts
- Creating in-game or worldspace elements such as displays and control panels
- Creating tooltips, nested menus, and tables