Ease of Building UI Elements in Unity

Sean Kaleomaikalani Ferreira
3 min readNov 20, 2023

--

You may be comfortable with your coding when it comes to movement and physics, but have you dabbled with UI Elements yet? If not, this article can introduce you!

We’ll go over two different elements in this article; Text and Images, but first we got to make sure you have a UI System in place! Right click your scene and look for UI > Canvas. If it didn’t automatically add it, also add an Event System the same way as you added a Canvas.

Next thing’s next; Scripts. You can choose to either make a UI Manager Script and add it to the Canvas, or make an Empty Object and add the UI Manager Script there. I chose the latter option so I could easily see where my UI Manager was.

Alright, now we can start adding text and images to your work. In the most updated version of Unity as of writing this, Unity uses TextMeshPro for their main text object.

Simply create a Text Object (in the same way you made a Canvas object). and slap whatever text you want in there! There are settings to change how the text looks, but I want to briefly touch on the Rect Transform element.

This is applicable to all UI Objects, but anchoring text allows you to move objects in relation to a specific point. In this example, I have made the Anchor Point the top right of the screen. Positions X, Y, and Z are in relation to that point, AKA my Text Object is -86 Units down and -63 Units to the left of the Top Right Corner.

Images are much the same vein as Text Objects, just create it and place your Sprite of choice into it and you’re done!

Now you can use the UI Manager Script to manipulate these Text and Image Objects! I allowed for a Score to constantly update when the Player kills and Enemy or picks up a Powerup! I also made an Array to update my Lives Image Object to display the correct amount of lives remaining!

A final note: If you want your UI to scale with screen size (something I recommend), make sure to go to your Canvas Object and change “UI Scale Mode” to “Scale With Screen Size”!

--

--