[Unity3D Hex Map Game Dev] 21: UI Anchors, Irregular Buttons, Tool tips
Hello Unity fans, and welcome back to my hex map game development series. In the previous two videos we created our basic user interface and then expanded it by adding a farm and automated harvesting to our selection of buildings. Today we will refine our UI by considering the effect of anchors, allowing UI buttons to be any shape, not only rectangular, and adding an easy-to-use basic tool tip for displaying information based on the location of the mouse cursor.
Part0 (Introduction): • [Unity3D Hex Map Game Dev] 0: Introdu...
Part1 (Hexes to Water): • [Unity3D Hex Map Game Dev] 1: Hexes t...
Part2 (Features and Textures): • [Unity3D Hex Map Game Dev] 2: Feature...
Part3 (Units, Visibility): • [Unity3D Hex Map Game Dev] 3: Units, ...
Part4 (Random Maps): • [Unity3D Hex Map Game Dev] 4: Creatin...
Part5 (Post Processing): • [Unity3D Hex Map Game Dev] 5: Post Pr...
Part6 (Resource Gathering): • [Unity3D Hex Map Game Dev] 6: Automat...
Part7 (Spinning Selector): • [Unity3D Hex Map Game Dev] 7: Spinnin...
Part8 (Preparing for Resources): • [Unity3D Hex Map Game Dev] 8: Prepari...
Part9(How Much Wood?): • [Unity3D Hex Map Game Dev] 9: How Muc...
Part10(Dynamic Trees): • [Unity3D Hex Map Game Dev] 10: Dynami...
Part11(Meet The Meeples): • [Unity3D Hex Map Game Dev] 11: Meet T...
Part12(Harvesting Wood): • [Unity3D Hex Map Game Dev] 12: Harves...
Part13(Harvesting Stone): • [Unity3D Hex Map Game Dev] 13: Harves...
Part14(Walking Around Wallls): • [Unity3D Hex Map Game Dev] 14: Stop W...
Part15(Multiple Unit Types): • [Unity3D Hex Map Game Dev] 15: Prepar...
Part16(Manipulate Terrain): • [Unity3D Hex Map Game Dev] 16: Manipu...
Part17(ResourceBuilding Upgrades): • [Unity3D Hex Map Game Dev] 17: Resour...
Part18(Camera Fly-through): • [Unity3D Hex Map Game Dev] 18: Camera...
Part19(Animated UI): • [Unity3D Hex Map Game Dev] 19: Animat...
Part20(Automated Farming): • [Unity3D Hex Map Game Dev] 20: Automa...
I would firstly like to consider the anchors of the buttons in relation to the screen space. Depending on where each UI element is situated, there is a specific anchor point that makes most sense for it. This becomes important if you want to maybe resize your UI elements easily, or your screen resolution and aspect ratio changes. Anchoring your UI elements correctly from the start can save you a lot of headaches later on.
You will notice that these backgrounds are rectangular, which is how Unity’s buttons work. They are specified by a specific corner or centre point and a width and a height, forming a rectangle. This is important, since the round buttons at the bottom are actually also seen by Unity as rectangles. You could click in the corner of the transparent part of the rectangle, and it will be recorded as a click on the button, even though the cursor is not over the actual image. This is problematic for non-rectangular buttons. Luckily there’s an easy way to fix it.
The last item I want to consider today is the addition of a tool tip – a short string of text that appears over certain parts of the UI when the mouse is hovering over it, providing some useful information to the player. My tool tip is based on a tutorial by Code Monkey, which I’ll link to in the description. The idea is that you create a single tool tip, consisting of a background with some text over it. You then add a tool tip script to each UI element for which you want to display some tip, and specify the string for each element. Then, when the mouse hovers over the element, the tool tip text is set, and the width and height of the background is calculated based on the displayed text. When the mouse leaves the element, the tool tip is disabled. Go check out his series if you want to get into more detail.
I’ve modified Code Monkey’s tool tip slightly to give me a bit more freedom with the visualization parameters, and to remove a dependence on one of his custom button elements, which I’m not using here. Now, we can give the tool tip object a fitting background rather than just a grey area, and add an almost-white text over it. Then we add the “Add Tooltip” script to each appropriate element of the UI, set each one’s text, and when we now hover over the buttons, the tool tips pop up as they should. This adds a nice layer of information to the UI, where things could be made a bit clearer to the player.
I’ll end off with a few very quick remarks. You’ll see that the icons in the top-left are also 3D, so we’re able to add some visualization to them as well. I have them rotation permanently here, but you’d probably want to have them motionless for the most part, with just some quick animation or effect to draw some attention to them from time to time – you don’t want to overdo it. Next, I have some Text Mesh Pro objects underneath the icons that can be used to update the current supply and income rates. There are different ways this information could be displayed, but for now I’m going to go with the two differently coloured plain text labels. Finally, note that the UI button background images are actually somewhat transparent, which means you can still see the outlines of what’s going on on the map itself. Of course, this can also be adjusted to whatever looks and plays better.