Creating UI Button – Unity3D


Creating UI Button – Unity3D

There are 2 options to add a button in Unity. You can use UI elements of Unity or you can create your own button with a game object. We will inspect default UI elements of Unity in this post.

With 4.6 edition, Unity helps us to create UI buttons easily. You can edit all components of a button and they call a function when they are pressed. You don’t need to write a click function, it detects the click automatically. Just assign a function and let it work. Lets see how it works.

Open a project (2D or 3D, it doesn’t matter) and create a button(Game Object>UI>Button). Screen Shot 2015-04-03 at 16.00.35A button is created in a canvas. And EventSystem is created too. You see Canvas in scene with a frame. You can put your UI items anywhere in this frame but they must be the chile of frame. You can see that button has a child named Text. This text represents the text of button. When you click it, you see text editor includes font size, font type, font color etc. You can edit all of these as you desire.

 

 

Screen Shot 2015-04-03 at 16.13.56

 

 

Click button object and see it in inspector. As you see, you can change button material in here. Also you can edit its colors for actions. If you want to your own sprites instead of colors, change “Color Tint” with “Sprite Swap”. Sprite material boxes will be appear instead of colors. Change settings and create your own unique button. Last 2 steps to create our working button.

Create an empty game object named UIManager. We will attach our button scripts to this object and we will attach this object to our button.

Create a C# script named UIFunctions. Write a function which you want to call with your button. For example, write a debug.

 

 

Back to Unity and attach this script to UIManager. Click button object and click + button at the bottom of On Click(). Drag UIManager into the box in On Click(). Select Print function in drop down box near it(UIFunctions>Print). Press play and test your button. Check the console and see Button text.

Screen Shot 2015-04-03 at 16.31.56

 

©Coffee Break Codes – Creating UI Button – Unity3D

Leave a comment

Your email address will not be published. Required fields are marked *