2 분 소요

Intro

이번 포스팅에서는 인벤토리 아이템에 마우스를 갖다댔을 때, 아이템의 설명을 보여주는 툴팁 UI를 만들어보았습니다.

툴팁을 표시할 UI부터 만들어줍니다.

image

image

해당 아이템의 이름과, 툴팁내용을 받아와서 표시할 텍스트를 가지게됩니다.

ItemToopTipUI.cs

툴팁 표시를 위한 스크립트를 생성합니다.

툴팁위치는 슬롯의 오른쪽 아래에 나타나도록 할 생각입니다.

image

슬롯의 pivot은 LeftTop으로 설정되어있기때문에, 툴팁의 위치는 슬롯의 위치 + Vector2(슬롯너비, -슬롯높이)가 됩니다.

또한 다음 세가지를 고려해야합니다.

  1. 툴팁 UI 우측이 잘리는경우 - 슬롯 좌측하단에 표시
  2. 툴팁 UI 하단이 잘리는경우 - 슬롯 우측상단에 표시
  3. 툴팁 UI 우측,하단이 모두 잘리는경우 - 슬롯 좌측상단에 표시
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

/*  
                        ItemTooltipUI 

            - SetUIPosition: 아이템 툴팁 UI 위치 선정
            - SetItemInfo : ItemData를 받아와 Text 설정
 */
public class ItemTooltipUI : MonoBehaviour
{
    [SerializeField] private Text itemNameText;             // 아이템 이름 텍스트
    [SerializeField] private Text itemTooltipText;          // 아이템 툴팁 텍스트

    private RectTransform myRect;


    private void Awake()
    {
        HideTooltipUI();
        Init();
    }

    private void Init()
    {
        TryGetComponent(out myRect);
        // 피벗 : LeftTop
        myRect.pivot = new Vector2(0f, 1f); ;   
    }

    public void ShowTooltipUI() => gameObject.SetActive(true);
    public void HideTooltipUI() => gameObject.SetActive(false);

    // 해당 슬롯 아이템의 정보로 Text 설정
    public void SetItemInfo(ItemData data)
    {
        itemNameText.text = data.ItemName;
        itemTooltipText.text = data.ItemToolTip;
    }

    // 툴팁 UI 위치 설정(슬롯 우측하단)
    public void SetUIPosition(RectTransform slotRect)
    {
        float slotWidth = slotRect.rect.width;
        float slotHeight = slotRect.rect.height;

        // 툴팁 최초 위치 설정(슬롯 우측 하단)
        myRect.position = slotRect.position + new Vector3(slotWidth, -slotHeight);
        Vector2 pos = myRect.position;

        // 툴팁 크기
        float width = myRect.rect.width;
        float height = myRect.rect.height;

        // 우측 및 하단이 잘렸는 지 여부
        bool rightTruncated = pos.x + width > Screen.width;
        bool bottomTruncated = pos.y - height < 0f;

        // 오른쪽만 잘림
        if(rightTruncated && !bottomTruncated)
        {
            myRect.position = new Vector2(pos.x - width - slotWidth, pos.y);
        }
        // 아래쪽만 잘림
        else if(!rightTruncated && bottomTruncated)
        {
            myRect.position = new Vector2(pos.x, pos.y + height + slotHeight);
        }
        // 둘 다 잘림
        else if(rightTruncated && bottomTruncated)
        {
            myRect.position = new Vector2(pos.x - width - slotWidth, pos.y + height + slotHeight);
        }
    }
}

InventoryUI

InventoryUI에서 마우스 커서가 유효한 슬롯위(아이템이 있고, 접근가능한)에 올라갔을 때

툴팁 UI를 활성화 시켜줍니다.

따라서 다음 순서를 통해 툴팁이 활성화됩니다.

  1. 슬롯에 마우스 커서 올리기
  2. InventoryUI : 아이템이 있는경우, Inventory에 ItemData 요청
  3. Invnetory : InventoryUI에 ItemData 전달
  4. InventoryUI : ItemTooltipUI에 ItemData 및 해당슬롯의 Rect 전달
  5. ItemTooltipUI : 툴팁 위치 설정 및 툴팁 보여주기
    [SerializeField] private ItemTooltipUI itemTooltipUI;   // 툴팁 UI

    private void Update()
    {
         ShowOrHideTooltipUI();
    }

    // 툴팁 UI 슬롯 데이터 갱신
    private void UpdateTooltipUI(ItemSlotUI slot)
    {
        if (!slot.IsAccessible || !slot.HasItem)
            return;

        // 툴팁 정보 갱신
        itemTooltipUI.SetItemInfo(inventory.GetItemData(slot.Index));

        // 툴팁 위치 설정
        itemTooltipUI.SetUIPosition(slot.SlotRect);
    }

    // 아이템 툴팁 UI 활성/비활성화
    private void ShowOrHideTooltipUI()
    {
        // 마우스가 아이템 아이콘 위에 올라가있을 때 툴팁표시
        bool isValid =
            pointerOverSlot != null && pointerOverSlot.HasItem && pointerOverSlot.IsAccessible
            && (pointerOverSlot != beginDragSlot);

        if (isValid)
        {
            UpdateTooltipUI(pointerOverSlot);
            itemTooltipUI.ShowTooltipUI();
        }
        else
            itemTooltipUI.HideTooltipUI();

    }

테스트

image

댓글남기기

참고