Chapter 10-2. 생존킷 : 툴팁 띄우기

인프런에 있는 케이디님의 [유니티 3D] 실전! 생존게임 만들기 - Advanced 강의를 듣고 정리한 필기입니다. 😀
🌜 강의 들으러 가기 Click

생존 킷 : 툴팁 생성

슬롯 버튼에 마우스 커서를 갖다 대면 이 아이템의 이름과 필요한 재료 아이템들이 툴팁으로 나오게 할 것이다.

🚀 ToolTip UI 만들기

• 컴퓨터의 화면으로 쓰는 캔버스의 자식으로 Tool Tip Base 이미지를 추가해준다. 툴팁 배경이미지이다. 또 그의 자식들로 커서를 올린 해당 슬롯 아이템의 이름과 제작에 필요한 재료들과 설명을 보여줄 3 개의 텍스트를 추가한다.
• Tool Tip Base는 비활성화 해놓도록 한다. 커서를 올릴 때만 보여야 하기 때문이다.
• Tool Tip Base 이미지와 3 개의 텍스트들의 Raycast Target을 전부 해제해준다.
  • 커서를 올린 슬롯에서 마우스 이벤트를 감지한 후 툴팁을 활성화 하도록 할 것인데, 이게 체크 되어 있다면 툴팁 이미지와 3 개의 텍스트들이 슬롯을 가로막아 Raycast를 대신 받아서 아이템 슬롯의 마우스 이벤트 발동을 방해힐 수 있기 때문이다.
    • 툴팁은 슬롯들보다 Hierarchy 상에서 더 밑에 있으므로 더 위에 렌더링 되기 떄문.

📜ComputerToolTip

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

public class ComputerToolTip : MonoBehaviour
{
    [SerializeField] private GameObject go_BaseUI; // 툴팁 UI
    
    // 툴팁에 필요한 3 개의 텍스트
    [SerializeField] private Text kitName;
    [SerializeField] private Text kitDescription;
    [SerializeField] private Text kitNeedItem;

    public void ShowToolTip(string _kitName, string _kitDescription, string[] _needItem, int [] _needItemNumber)
    {
        go_BaseUI.SetActive(true);
        kitName.text = _kitName;
        kitDescription.text = _kitDescription;

        for (int i = 0; i < _needItem.Length; i++)
        {
            kitNeedItem.text += _needItem[i];
            kitNeedItem.text += " x " + _needItemNumber[i].ToString() + "\n";
        }
    }

    public void HideToolTip()
    {
        go_BaseUI.SetActive(false);
        kitName.text = "";
        kitDescription.text = "";
        kitNeedItem.text = "";
    }
}

Canvas 에 붙는다. Tool Tip Base는 평소 비활성화가 디폴트 상태이기 때문에 Tool Tip Base에 붙이면 동작하지 않는다.

• ShowToolTip 👉 툴팁 활성화
  • 해당 슬롯의 아이템 정보들을 📜ComputerKit 에서 알 수 있으므로 📜ComputerKit 에서 또 ShowToolTip 함수를 만들어 이 안에서 호출시킬 것이다.
  • Tool Tip Base를 활성화하고 그 아래 텍스트들을 설정한다.
    • _needItem 의 경우 재료가 여러개 있을 수 있기 때문에 for 문 돌려 텍스트에 append 시킨다.
• HideToolTip 👉 툴팁 비활성화
  • Tool Tip Base 비활, 텍스트들 빈 문자열로 초기화

캔버스에 스크립트 붙이고 툴팁 이미지와 텍스트들 할당.

📜ComputerKit

    [SerializeField]
    private ComputerToolTip theToolTip;

    public void ShowToolTip(int _buttonNum)
    {
        theToolTip.ShowToolTip(kits[_buttonNum].kitName, kits[_buttonNum].kitDescription, kits[_buttonNum].needItemName, kits[_buttonNum].needItemNumber);
    }

    public void HideToolTip()
    {
        theToolTip.HideToolTip();
    }

• ShowToolTip, HideToolTip
  • 📜ComputerToolTip의 함수 호출하여 툴팁 활성화, 비활성화
  • 또 이 함수들은 📜ComputerButton 를 통해 호출될 것이다.
    • 6개의 슬롯들에 붙는 📜ComputerButton 안에서 슬롯 안에(어떤 슬롯이냐는 _buttonNum로 감지) 들어 온 마우스 커서 이벤트를 감지하여 📜ComputerKit의 ShowToolTip, HideToolTip 함수를 호출하게 할 것이다.

theToolTip에 📜ComputerToolTip 가 붙어있는 Canvas 할당.

📜ComputerButton

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

public class ComputerButton : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
{
    [SerializeField] private ComputerKit theComputer;
    [SerializeField] private int buttonNum;

    public void OnPointerEnter(PointerEventData eventData) // 마우스가 슬롯 안에 들어갔을 때
    {
        theComputer.ShowToolTip(buttonNum);
    }

    public void OnPointerExit(PointerEventData eventData) // 마우스가 슬롯에서 빠져 나갔을 때
    {
        theComputer.HideToolTip();
    }
}

6 개의 슬롯에 붙을 수 있다. 우선 아이템은 하나만 쓰고 있기 때문에 첫번째 슬롯에만 붙여준다.

• buttonNum 슬롯 버튼. 예를 들어 첫 번째 슬롯의 경우 0 을 할당.
• 마우스 커서 이벤트 인터페이스를 상속 받고 오버라이딩한다.
  • 마우스 커서가 이 스크립트가 붙어있는 슬롯 안에 들어왔을 때
    • 툴팁 활성화 (📜ComputerKit의 ShowToolTip 호출)
  • 마우스 커서가 이 스크립트가 붙어있는 슬롯 안에서 나갔을 때
    • 툴팁 비활성화 (📜ComputerKit의 HideToolTip 호출)

첫 번째 슬롯의 경우 buttonNum 값은 0

이렇게 슬롯에 커서를 갖다대니 슬롯의 아이템 정보가 툴팁으로 뜬다.

---

🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄

맨 위로 이동하기

Unity Lesson 3 카테고리 내 다른 글 보러가기