【 UNity3D-UGUI series 】 (3) Button component details

This is the third day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

Recommended reading

• CSDN home page
• GitHub open source address
• Unity3D plugin sharing
• Jane’s address book
• My personal blog
• QQ group: 1040082875

Hello everyone, I am a Buddhist engineer ☆ quiet small magic dragon ☆, update Unity development skills from time to time, think useful remember one key three link oh.

One, foreword

First, introduce a UGUI, NGUI is the predecessor of UGUI, Unity development team took NGUI development team under their own development team, and developed UGUI from this. The UGUI system has only been integrated into the Unity editor since Version 4.6.

UGUI features:

• flexible
• fast
• visualization

There are many advantages for developers, such as:

• High efficiency
• Achieve good results
• Easy to use and expand
• High compatibility with the Unity editor

2. Button Component introduction

Button is an interactive UI component within the UGUI. It is also a component that is often encountered in development. Click to perform a series of actions: perform certain events, actions, state changes, etc.

Click “Create→UI→Button” in Unity’s Hierarchy view to Create a Button component:

Button Component properties

Button’s property panel is as follows:The Image component will be covered in detail in the next section, focusing on the Button component.

Button public three Transition Setting types, we introduce them respectively:

Color Tint — Color transitions

Color transition type, which adjusts color changes to show different effects of button selected, clicked, and removed.

Sprite Swap — Image transitions

Image transition type, by dragging in different images, to show the different effects of the button selected, clicked, moved, etc.

Animation — Animation transitions

Animation transition type, by setting different trigger states, to show the different effects of the button selected, clicked, removed, etc.

Button Component binding event

4-1. Visual creation and event binding

Click the + sign on OnClick on the Button componentThen assign the binding script object to the Button component

4-2. Bind events through direct 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 = "Mouse click"; }}Copy the code

4-3. Bind events by ray listening for clicked objects

code

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 its name
    public GameObject OnePointColliderObject()
    {
        // The object that holds mouse or touch data
        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);
        // Returns the clicked object
        if (results.Count > 0)
            return results[0].gameObject;
        else
            return null;
    }

    public void ButtonOnClickEvent()
    {
        m_Text.text = "Mouse click"; }}Copy the code

4-4. Achieve button click events through EventTrigger

Write the 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
        {
            // Mouse click events
            eventID = EventTriggerType.PointerClick,
            / / mouse into the event entry. The eventID = EventTriggerType. PointerEnter;
            / / mouse sliding out event entry. The 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"; }}Copy the code

4-5. Handle Button response events through the generic UIEventListener class

UIEventListener.cs

using UnityEngine;
using UnityEngine.EventSystems;

public class UIEventListener : MonoBehaviour.IPointerClickHandler
{
    // Define the event broker
    public delegate void UIEventProxy();
    // Mouse click events
    public event UIEventProxy OnClick;

    public void OnPointerClick(PointerEventData eventData)
    {
        if(OnClick ! =null) OnClick(); }}Copy the code

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"; }}Copy the code

5. Button component common problem analysis

5-1. Button clicking has no effect

No matter how much you click on the Button, nothing happens:This may be due to hierarchy, as other UI blocks Button:The Text box is in the way of Button. If the Text box is not in the way of Button, or the Button is at the bottom, you can solve the problem:

5-2. Button does not respond when clicked

This question is similar to the first question, but there is a difference, this is the effect of clicking, but does not respond:Check if the OnClick on the button is bound to an event (if any) :Then check to see if the code gets Button, and then if the code executes:

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 = "Mouse click"; }}Copy the code

Whether the component was retrieved, executed, and executed correctly.