Unity – Custom UI Button Graphics
How to load your own graphic to create a custom UI Button.
1. Create a 2D Project
Simple Graphic Button
This is our image
2. MAIN TOP MENU> Assets> Import New Asset> custom-button.png
NB: PNG is RGBA, your button can have a alpha channel inside, ready to use in Unity.
Project> custom-button> Inspector> Texture Type> Sprite (2D and UI)> click ‘Apply’
NB: you have to load your image as Sprite or it can not be used in UI elements
3. MAIN TOP MENU> GameObject> UI> Button
In the scene there are:
– Main Camera
– Canvas
— Button
— Text (the text of the button)
-> EventSystem
4. Hierarchy> Button> Inspector>
>Image (Script)
– Source Image: Project DRAG AND DROP custom-button over here
– Image Type: Simple
>Rect Transform
– Width 100 / Height 100 we need a square to maintain the correct aspect ratio.
5. Hierarchy> Button/Text> Inspector> Text (Script), remove the text ‘Button’
DONE!
Invisible Button
Use a PNG graphics completely transparent.
Setup Effects
6. Hierarchy> Button> Inspector> Button (Script)
– Interactable: check
– Transition: Color Tint
– Normal Color> 255,255,255 use the original color of the graphic
– Highlighted Color> 255,0,0 on mouse over red color will be added
Play
Swap Between 2 Buttons
How to swap between custom graphics
2. MAIN TOP MENU> Assets> Import New Asset> custom-button.png
NB: PNG is RGBA, your button can have a alpha channel inside, ready to use in Unity.
Project> custom-button> Inspector> Texture Type> Sprite (2D and UI)> click ‘Apply’
NB: you have to load your image as Sprite or it can not be used in UI elements
Do the same with custom-button-swap.png
3. MAIN TOP MENU> GameObject> UI> Button
In the scene there are:
– Main Camera
– Canvas
— Button
— Text (the text of the button)
-> EventSystem
4. Hierarchy> Button> Inspector>
>Image (Script)
– Source Image: Project DRAG AND DROP custom-button over here
– Image Type: Simple
>Rect Transform
– Width 100 / Height 100 we need a square to maintain the correct aspect ratio.
5. Hierarchy> Button/Text> Inspector> Text (Script), remove the text ‘Button’
6. Hierarchy> Button> Inspector> Button (Script)
– Interactable: check
– Transition: Sprite Swap
– Highlighted Sprite: Project DRAG AND DROP custom-button-swap over here
Play
