Button button component introduction
Button is an interactive UI component in UGUI.
It is also a component that is often encountered in development.
Click to complete a series of operations: perform certain events, actions, switch states, etc.
Click "Create→UI→Button" in Unity's Hierarchy view to create a Button component:
3. Button component properties
The property panel of Button is shown in the figure below:
Let's talk about the Image component in detail in the next section, focusing on the Button component.
Button has three Transition Setting transition types, which we will introduce respectively:
Color Tint - color transition
Attributes Introduce
Interactable Whether to activate the button's response
Transition The transition animation type of the button, including Color Tint color transition, Sprite Swap picture transition, Animation animation transition
Target Graphic Target Graphic
Normal Color The color in the normal state
Highlighted Color The color in the state when the mouse is hovering
Pressed Color The color of the clicked state
Disabled Color The color of the disabled state
Color Multiplier Color multiplier
Fade Duration The time when the effect disappears
Navigation Navigation type
OnClick Click the event list
color transition type, by adjusting the color change to display button selection, click, removal, etc. different effects.
Sprite Swap - image transition
Attributes Introduce
Interactable Whether to start the button's response
Transition The transition animation type of the button, including Color Tint color transition, Sprite Swap picture transition, Animation animation transition
Target Graphic Target Graphic
Highlighted Sprite Picture in the mouse hover state
Pressed Sprite Picture in the click state
Disabled Sprite Disabled Image
Navigation Navigation Type
OnClick Click Event List
Image transition type, by dragging in different images to display different effects such as button selection, click, and removal.
Animation - animation transition
Attributes Introduce
Interactable Whether to activate the button's response
Transition The transition animation type of the button, including Color Tint color transition, Sprite Swap picture transition, Animation animation transition
Target Graphic Target Graphic
Normal Trigger Normal State Trigger
Highlighted Trigger Mouse Hover State
Trigger Pressed Trigger Click State trigger
Disabled Trigger Disable state trigger
Auto Generate Animation Automatically generate animation, click to automatically generate Button animation Navigation
navigation type
OnClick click event list
animation transition type, by setting different trigger states to display button selection, click, Move away and other different effects.
4. Button component binding event
4-1. Visual creation and event binding
Click the + sign of OnClick on the Button component
Then assign the object of the bound script to the Button component
4-2. Bind events by directly binding scripts Use the onClick.AddListener method code
that comes with the Button component
using UnityEngine;
using UnityEngine.UI;
public class ButtonTest : MonoBehaviour
{
public Button m_Button;
public Text m_Text;
void Start()
{
m_Button.onClick.AddListener(ButtonOnClickEvent);
}
public void ButtonOnClickEvent()
{
m_Text.text = "鼠标点击";
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
4-3. Bind the event code by monitoring the clicked object through the ray
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
public class ButtonTest : MonoBehaviour
{
public Text m_Text;
void Update()
{
if (Input.GetMouseButtonDown(0))
{
if (OnePointColliderObject() != null)
{
if (OnePointColliderObject().name == "Button" || OnePointColliderObject().name == "Text")
{
ButtonOnClickEvent();
}
}
}
}
//Click on the object to get the name of the object
public GameObject OnePointColliderObject()
{ //The object PointerEventData eventDataCurrentPosition = new PointerEventData(EventSystem.current); //The current pointer position eventDataCurrentPosition.position = new Vector2(Input. mousePosition.x, Input.mousePosition.y); //Feedback data after ray hit List<RaycastResult> results = new List<RaycastResult>(); //Cast a ray and return all collisions EventSystem.current.RaycastAll(eventDataCurrentPosition, results); //Return the clicked object if (results.Count > 0) return results[0].gameObject; else return null; }
public void ButtonOnClickEvent()
{ m_Text.text = "Mouse Click"; } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42 _ .
43.
44.
45.
46.
4-4. Realize the button click event through EventTrigger
Write code
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
[RequireComponent(typeof(EventTrigger))]
public class ButtonTest : MonoBehaviour
{
public Text m_Text;
void Start()
{
Button btn = transform.GetComponent<Button>();
EventTrigger trigger = btn.gameObject.GetComponent<EventTrigger>();
EventTrigger.Entry entry = new EventTrigger.Entry
{
// 鼠标点击事件
eventID = EventTriggerType.PointerClick,
// 鼠标进入事件 entry.eventID = EventTriggerType.PointerEnter;
// 鼠标滑出事件 entry.eventID = EventTriggerType.PointerExit;
callback = new EventTrigger.TriggerEvent()
};
entry.callback.AddListener(ButtonOnClickEvent);
// entry.callback.AddListener (OnMouseEnter);
trigger.triggers.Add(entry);
}
public void ButtonOnClickEvent(BaseEventData pointData)
{ m_Text.text = "Mouse Click"; } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16 . 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31.
4-5. Handle the Button response event UIEventListener.cs through the general class UIEventListener
using UnityEngine;
using UnityEngine.EventSystems;
public class UIEventListener : MonoBehaviour, IPointerClickHandler
{ // define event proxy public delegate void UIEventProxy(); // mouse click event public event UIEventProxy OnClick;
public void OnPointerClick(PointerEventData eventData)
{
if (OnClick != null)
OnClick();
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
ButtonTest.cs
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
[RequireComponent(typeof(EventTrigger))]
public class ButtonTest : MonoBehaviour
{
public Text m_Text;
void Start()
{
Button btn = this.GetComponent<Button>();
UIEventListener btnListener = btn.gameObject.AddComponent<UIEventListener>();
btnListener.OnClick += delegate () {
ButtonOnClickEvent();
};
}
public void ButtonOnClickEvent()
{ m_Text.text = "Mouse Click"; } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17 . 18. 19. 20. 21. 22. 23. 24.
5. Analysis of Common Problems of Button Components
5-1. Clicking the Button has no effect
No matter how you click the Button, it has no effect:
This may be due to hierarchical reasons, other UI blocks the Button:
You can see that the Text box blocks the Button, and the Text box does not block the Button, or the Button is adjusted to the bottom to solve the problem:
5-2. Button click does not respond
This question is very similar to the first question, but there is a difference. This is that the click has an effect, but does not respond:
This unresponsive problem is likely to be that the registration time of the code has not been executed. First check whether the OnClick on the button is bound to the event (if any):
Then check whether the code has got the Button, and then execute the code:
After logging in, copy
using UnityEngine;
using UnityEngine.UI;
public class ButtonTest : MonoBehaviour
{
public Button m_Button;
public Text m_Text;
void Start()
{
m_Button.onClick.AddListener(ButtonOnClickEvent);
}
public void ButtonOnClickEvent()
{
m_Text.text = "鼠标点击";
}
}