(2) 버튼 만들기 - 파이 메뉴(Pie / Radial Menu) 만들기

Unity 전체 링크

 

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

 

(1) 중심 게이지 만들기

(2) 버튼 만들기

(3) Tooltip 만들기

(4) Text 자동 크기 조절

(5) 버튼 배치하기

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

---

이제 버튼에 마우스를 가져다대면 배경색이 회색이 되도록 만들어보자.

 

 

 

 

PieMenu 아래에 빈 오브젝트로 ButtonSet을 만들고 UI - Button을 추가한 후, 적절히 배치한다.

 

Button의 색은 검은색, Text는 하얀색으로 수정한다.

 

Text - Paragraph 에서 Alignment를 변경하면 보기 좋게 정돈된다.

 

이제 PieButton.cs를 각 버튼에 추가한다.

UI에서 마우스 이벤트를 사용하기 위해서는 IPointerXXXHandler 인터페이스를 추가하고, 각 함수를 구현해야 한다.

 

Enter - 회색으로 변경

Exit - 원래 색으로 변경

Click - 클릭 이벤트 발생

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;

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

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

    public void OnPointerClick(PointerEventData eventData)
    {
        Debug.Log("click");
    }
    
    void Start()
    {
        btn = this.GetComponent<Button>();
        initColor = this.GetComponent<Image>().color;
    }
}

 

Button에 마우스를 가져다대면 회색으로 변하고 마우스가 바깥으로 나가면 원상태로 돌아오는 것을 알 수 있다.

 

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