공부하는 식빵맘 👱‍♀️

공부하는 식빵맘 👱‍♀️

반갑습니다 :)

Chapter 5-6. 인벤토리 : 인벤토리 툴팁(Tooltip)

Date:     Updated:

카테고리:

태그:

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

Chapter 5. 인벤토리

🚖 툴팁(Tooltip) UI 만들기

image

이렇게 인벤토리애 아이템이 든 슬롯에 마우스 커서를 두면 해당 아이템에 대한 설명을 띄우도록 한다. 이것이 바로 Tooltip.

UI 구조

image

image

image

툴팁은 인벤토리의 기능이므로 인벤토리 UI 의 자식으로 넣어 준다.

  • SlotToolTip 👉 빈 오브젝트. 📜SlotToolTip.cs 이 붙을 예정..
    • Base_Outer 👉 Panel UI
      • 가장 크고, 밝은 초록색을 가진 패널. 뒤에 그려져 테두리처럼 보인다.
        • 그러도록 크기와 색상을 맞춤 너비높이 (200, 100) 투명도는 절반
      • 앵커 프리셋을 middle - center 로 하여 부모를 기준으로 한 PosX, PosY 좌표의 원점을 가운데로 맞춘다.
      • 툴팁은 인벤토리의 아이템 슬롯에 커서를 둘 때만 활성화 할 것이기 때문에 비활성화 해둔다.
      • Raycast Target를 해제해준다.
        • 이제 체크 되어 있다면 나중에 아이템 슬롯 위에서 마우스 이벤트가 발동되어 이 툴팁 패널이 활성화 될때, 툴팁 패널이 슬롯을 가로막아 Raycast를 대신 받아서 아이템 슬롯의 마우스 이벤트 발동을 방해하기 때문이다.
      • Base_Inner 👉 Panel UI
        • 그러도록 크기는 너비높이 (190, 90) 색상은 Base_Outer 보단 어두운 초록색으로
      • 앵커 프리셋을 middle - center 로 하여 부모를 기준으로 한 PosX, PosY 좌표의 원점을 가운데로 맞춘다. 투명도는 절반
      • Raycast Target를 해제해준다.
        • TxT_ItemName 👉 Text UI
          • 아이템의 이름
          • 위에 배치 한다.
          • Raycast Target를 해제해준다.
        • TxT_ItemDesc 👉 Text UI
          • 아이템 설명
          • 중간에 배치 한다.
          • Best Fit 체크 해준다.
            • 이걸 체크하면 TxT_ItemDesc Text UI 오브젝트의 크기에 텍스트 크기가 꽉 채워 맞춰지고 텍스트의 크기는 텍스트 오브젝트의 크기를 따라간다.
              • 따라서 Max Size, Min Size 를 통해 텍스트 크기의 최소 최대 값을 지정해줄 수 있다.
          • Raycast Target를 해제해준다.
        • TxT_ItemHowToUsed 👉 Text UI
          • 아이템 사용법
          • 아래 우측에 배치한다. (우측 정렬)
          • Raycast Target를 해제해준다.


📜Item.cs 아이템 설명 추가

    [TextArea]  // 여러 줄 가능해짐
    public string itemDesc; // 아이템의 설명
  • itemDesc
    • 툴팁의 TxT_ItemDesc 텍스트로 띄울 ‘아이템 설명’을 추가해주었다.
    • [TextArea] 👉 유니티 인스펙터에서 string을 몇 줄에 걸쳐 값을 할당할 수 있도록 TextArea 가 열린다.

image

이렇게 itemDesc 값을 할당할 수 있는 Text Area 가 인스펙터에 생성된다. Text Area 로 여러 줄에 걸친 문자열을 할당할 수 있다. 모든 아이템들에 설명을 추가해주었다.


🚖 툴팁 띄우기

📜SlotToolTip.cs

SlotToolTip 오브젝트에 붙는다.

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

public class SlotToolTip : MonoBehaviour
{
    [SerializeField]
    private GameObject go_Base;  

    [SerializeField]
    private Text txt_ItemName;
    [SerializeField]
    private Text txt_ItemDesc;
    [SerializeField]
    private Text txt_ItemHowtoUsed;

    public void ShowToolTip(Item _item, Vector3 _pos)
    {
        go_Base.SetActive(true);
        _pos += new Vector3(go_Base.GetComponent<RectTransform>().rect.width * 0.5f, 
                            -go_Base.GetComponent<RectTransform>().rect.height * 0.5f, 
                            0);
        go_Base.transform.position = _pos;

        txt_ItemName.text = _item.itemName;
        txt_ItemDesc.text = _item.itemDesc;

        if (_item.itemType == Item.ItemType.Equipment)
            txt_ItemHowtoUsed.text = "우 클릭 - 장착";
        else if (_item.itemType == Item.ItemType.Used)
            txt_ItemHowtoUsed.text = "우 클릭 - 먹기";
        else
            txt_ItemHowtoUsed.text = "";
    }

    public void HideToolTip()
    {
        go_Base.SetActive(false);
    }
}
  • go_Base
    • 사실상 전체적인 툴팁 패널 UI
    • 비활성화 되어 있는 가장 부모이자 가장 바깥쪽에 위치한 Base_Outer 툴팁 패널을 활성화/비활성화 해주기 위하여 GameObject 로 참조하였다.
  • ShowToolTip
    • 툴팁 UI 활성화 👉 📜Slot.cs 슬롯에서 MouseEnter 이벤트가 발생했을 때 호출될 것이라 public
      • 아이템 슬롯의 위치에 활성화 해주기 위하여 Vector3를 추가로 인수로 받는다.
      • Base_Outer 툴팁 패널을 활성화
      • 인수로 아이템 슬롯의 위치가 들어올 텐데, 이 위치보다 옆으로 Base_Outer 패널 너비의 절반, 아래로 Base_Outer 패널 높이의 절반만큼 더해진 위치에 활성화해줄 것이다.
        • Base_Outer 툴팁 패널의 위치를 해당 위치로 설정
      • 인수로 들어온 아이템의 이름과 설명으로 텍스트 설정
      • 아이템 사용법 텍스트는
        • 장비일 경우, 소모품일 경우, 아무것도 아닐 경우 띄우는게 다르게.
  • HideToolTip
    • 툴팁 UI 비활성화 👉 📜Slot.cs 슬롯에서 MouseExit 이벤트가 발생했을 때 호출될 것이라 public
      • Base_Outer 툴팁 패널을 비활성화

image


📜ItemEffectDatabase.cs

    [SerializeField]
    private SlotToolTip theSlotToolTip;

    // 📜SlotToolTip 👉 📜Slot 징검다리
    public void ShowToolTip(Item _item, Vector3 _pos)
    {
        theSlotToolTip.ShowToolTip(_item, _pos);
    }

    // 📜SlotToolTip 👉 📜Slot 징검다리
    public void HideToolTip()
    {
        theSlotToolTip.HideToolTip();
    }

📜Slot.cs 은 프리팹에 붙어서, 외부 오브젝트를 참조하기 위해선 FindObjectOfType을 통해 게임 시작 후 로딩을 받아야 한다. 또한 슬롯은 20 개나 되고 인벤토리 활성화 할 때마다 같이 로딩되기 때문에 📜Slot.cs 에서 너무 많은 외부 오브젝트를 로딩하는 것은 성능상 비효율적이다. 따라서 게임 내내 활성화 되있는 Database 오브젝트에 붙어 있어서 로딩이 한번만 이루어질 수 있는 이 📜ItemEffectDatabase.cs 에서 인벤토리와 관련하여 필요한 모든 외부 오브젝트를 참조해두어 징검 다리 역할을 하면 더 효율적이다. 📜Slot.cs 에선 📜ItemEffectDatabase.cs 를 참조하기만 하면 여러 컴포넌트들을 매번 로딩할 필요 없이 📜ItemEffectDatabase.cs 하나만 참조하면 되기 때문이다.

  • ShowToolTip
    • 📜Slot.cs 에서 📜SlotToolTip.cs 의 ShowToolTip 함수를 사용하게 하기 위한 징검 다리
  • HideToolTip
    • 📜Slot.cs 에서 📜SlotToolTip.cs 의 HideToolTip 함수를 사용하게 하기 위한 징검 다리
  • 프리팹인 📜Slot.cs 에서 하나라도 덜 로딩하게 하기 위하여.. 📜ItemEffectDatabase.cs 하나로 다 해결할 수 있도록.

image

  • 📜SlotToolTip.cs 이 붙어 있는 SlotToolTip 할당


📜Slot.cs

public class Slot : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler, IPointerClickHandler, IBeginDragHandler, IDragHandler, IEndDragHandler, IDropHandler
{
    // ...


    // 마우스 커서가 슬롯에 들어갈 때 발동
    public void OnPointerEnter(PointerEventData eventData)
    {
        if (item != null)
            theItemEffectDatabase.ShowToolTip(item, transform.position);
    }

    // 마우스 커서가 슬롯에서 나올 때 발동
    public void OnPointerExit(PointerEventData eventData)
    {
        theItemEffectDatabase.HideToolTip();
    }
}
  • IPointerEnterHandler 인터페이스 - OnPointerEnter(PointerEventData eventData)
    • 마우스 커서가 이 스크립트가 붙은 Slot 오브젝트에 들어갈 때 발동
    • 아이템이 있다면 해당 아이템에 관련한 툴팁을 활성화 한다.
      • 해당 슬롯의 위치 근처에 툴팁을 띄우도록 슬롯의 위치 transform.position 을 넘긴다.
  • IPointerExitHandler 인터페이스 - OnPointerExit(PointerEventData eventData)
    • 마우스 커서가 이 스크립트가 붙은 Slot 오브젝트에서 빠져나올 때 발동
      • 툴팁 비활성화


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

맨 위로 이동하기

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

댓글 남기기

최근 글 10 개 :)