(3) Tooltip 만들기 - 파이 메뉴(Pie / Radial Menu) 만들기

Unity 전체 링크

 

파이 메뉴 만들기 (Pie / Radial Menu)

 

(1) 중심 게이지 만들기

(2) 버튼 만들기

(3) Tooltip 만들기

(4) Text 자동 크기 조절

(5) 버튼 배치하기

(6) 버튼에 이벤트 연결하기

---

버튼에 마우스를 일정시간 가져다대면 Tooltip(툴팁)이 나오도록 해보자.

 

마우스를 일정시간 가져다 대면 아래와 같이 나오도록 한다.

 

Text 자체에는 배경색이 없다. 따라서 이미지로 대체한다.

ButtonSet에 TooltipBackground(Image)를 만들고 Text로 Tooltip을 추가한다.

 

이미지의 색은 검은색, Text의 색은 하얀색으로 설정하고 Alignment를 적절히 선택한다.

 

tooltip과 관련된 변수를 추가한다.

tooltip은 현재 ButtonSet의 자식 오브젝트이므로, 각 버튼의 부모(transform.parent)에서 Find로 찾을 수 있다.

tooltipCount는 마우스가 버튼 위에 있을 때 부터 시간을 잰 후, tooltipTime보다 커지면 나타나게 한다.

    GameObject tooltip;
    bool mouseOn;
    float tooltipCount;
    float tooltipTime = 2.0f;

    void Start()
    {
        btn = this.GetComponent<Button>();
        initColor = this.GetComponent<Image>().color;
        tooltip = this.transform.parent.transform.Find("TooltipBackground").gameObject;
        tooltipCount = .0f;
    }

 

OnPointerEnter에서는 mouseOn 변수를 true로 변경하고, Exit에서는 false로 변경한다.

그리고 Exit에서는 tooltipCount를 초기화하고 tooltip도 끈다.

    public void OnPointerEnter(PointerEventData eventData)
    {
        this.GetComponent<Image>().color = Color.grey;

        mouseOn = true;
    }

    public void OnPointerExit(PointerEventData eventData)
    {
        this.GetComponent<Image>().color = initColor;

        mouseOn = false;
        tooltipCount = .0f;
        tooltip.SetActive(false);

 

이제 Update에서 mouseOn일 때 Time.deltaTime을 누적하여 설정한 시간보다 큰 경우 tooltip을 보여주면 된다.

tooltip의 위치는 버튼의 위치보다 약간 아래에서 오른쪽을 향하게 하였다.

    void Update()
    {
        if (mouseOn)
        {
            tooltipCount += Time.deltaTime;
            if (tooltipCount > tooltipTime)
            {
                tooltip.SetActive(true);

                Vector2 pos = (Vector2)this.transform.position + new Vector2(30, -35);
                tooltip.transform.position = pos;
            }
        }
    }

 

이제 마우스를 버튼에 2초 정도 가져다대면 tooltip이 나타난다.

 

전체 코드는 아래와 같다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class PieButton : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler, IPointerClickHandler
{
    Button btn;
    Color initColor;
    GameObject tooltip;
    bool mouseOn;
    float tooltipCount;
    float tooltipTime = 2.0f;

    public void OnPointerEnter(PointerEventData eventData)
    {
        this.GetComponent<Image>().color = Color.grey;

        mouseOn = true;
    }

    public void OnPointerExit(PointerEventData eventData)
    {
        this.GetComponent<Image>().color = initColor;

        mouseOn = false;
        tooltipCount = .0f;
        tooltip.SetActive(false);
    }

    public void OnPointerClick(PointerEventData eventData)
    {
        Debug.Log("click");
    }

    void Start()
    {
        btn = this.GetComponent<Button>();
        initColor = this.GetComponent<Image>().color;
        tooltip = this.transform.parent.transform.Find("TooltipBackground").gameObject;
        tooltipCount = .0f;
    }

    void Update()
    {
        if (mouseOn)
        {
            tooltipCount += Time.deltaTime;
            if (tooltipCount > tooltipTime)
            {
                tooltip.SetActive(true);

                Vector2 pos = (Vector2)this.transform.position + new Vector2(30, -35);
                tooltip.transform.position = pos;
            }
        }
    }
}

 

Unity Plus:

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

 

Unity Pro:

Unity Pro

 

Unity 프리미엄 학습:

Unity Learn