Unity UI System: Buttons!
In this article, I’ll go over buttons, but I want to start digging a little deeper into each of these topics because there is just SOOOOO much power and customizability involved in this stuff. So first, buttons:
What are they? How are they used?
In Unity, buttons are simply images with a Button component attached. Thats it. When you add a button in the scene it will look something like this:
Pretty boring. BUT if you’ve got some awesome UI assets to use in your project, you can customize the look of the button by simply changing the image componenet’s source image to something else.
Cool…but how can these be used? Each button has an onclick event trigger.
So if I were to make a simple method that prints a message in the console, I could add that method to this button and when I click it, have it called like so:
I’ve attached this script to the button. Now I can reference this method in the OnClick for the button.
When I click it, the message prints out.
SO you can probably see the power behind using these for something more intricate like… maybe activating and deactiving certain objects/making specific animations play/etc etc…
But… Buttons basically encompass the rect transform. What I mean is… when you have a button…if you click anywhere in it’s rect transform, you’ll actually have that onclick method called….
This can be annoying since rect transforms are all rectangles… sometimes UI isnt just a bunch of rectangles. What if your rectangles overlap!? Well.. Unity, being the insanely-powerful-can’t-believe-its-free engine that it is… has a solution for this! Well….. a few actually. I’ll go over 1 for now.
The AlphaHitTestMinimumThreshold is a cool way to handle this kind of thing. Unity — Scripting API: UI.Image.alphaHitTestMinimumThreshold (unity3d.com)
In this example, you see two different buttons. One blue and one orange. BUT their rect transforms overlap. SO when you click in the overlapping area, its not really sure which one you’re trying to click so you can get some weird behavior. the way we can use the method above is to simply create a script… I’ll call it ClickableImage.
The alpha threshold specifies the minimum alpha a pixel must have for the event to considered a “hit” on the Image. So anything with an alpha of 0.5 or higher will be “clickable”. SO if I click in the overlapping areas where the alpha is 0, nothing happens.
This is pretty handy. There are some prerequisite set up things before this will work though. The images used must have the mesh type set to Full Rect and Read/Write enabled in the import settings. Is this the most performant solution? Probably not. Can you ue masks to achieve something similar? Of course! This was just a demonstration of a differnt kind of implementation to show how versatile this stuff can be.
Theres lots of other cool features the buttons have. For example: the transition type. By default its set to color tint, but what if you want to change the image of your button when its hovered over or clicked?
You can change this to sprite swap instead!
So if I want to hover over the pink button and turn it blue, I’d just assign the appropriate image to the highlighted field and viola!
You can do lots of cool stuff with this. The possibilities are basically endless. I’d love to see some of the neat stuf fyou’ve accomplished with your button set ups! Feel free to reach out and show off your stuff!
