[유니티] 인벤토리 시스템(번외) - 아이템 툴팁

✅  기능

아이템에 마우스를 올리면 해당 아이템의 설명을 볼 수 있습니다. 이 기능은 [인벤토리 시스템]을 기반으로 동작합니다.

 

✅ 사용 예시

 

 

아래 영상과 같이 기본적으로 툴팁은 마우스를 기준으로 우측으로 나타납니다. 하지만 마우스가 우측으로 이동할경우 화면 밖을 나갈 수 있기때문에 일정 비율을(본 글에서는 75%)넘어가면 마우스를 기준으로 좌측으로 나타나게 하였습니다.

 

✅ 구현

using System.Text;
using UnityEngine;
using TMPro;

/// <summary>
/// 인벤토리에서 아이템의 설명을 보도록 한다.
/// </summary>
public class ItemDescription : MonoBehaviour
{
    [Header("텍스트 관련 오브젝트")]
    [SerializeField] private GameObject mToolTipObj;
    [SerializeField] private Canvas mCanvas;

    [Header("매니저")]
    [SerializeField] private ItemDataManager mItemDataManager;

    private TextMeshProUGUI mTextArea; //텍스트 라벨
    private RectTransform mRectTransform; //UI 트랜스폼

    private StringBuilder mStringBuilder; //스트링 빌더

    private void Start()
    {
        mTextArea = mToolTipObj.GetComponentInChildren<TextMeshProUGUI>();
        mRectTransform = mCanvas.GetComponent<RectTransform>();

        mStringBuilder = new StringBuilder();

        mToolTipObj.SetActive(false);
    }

    public void LateUpdate()
    {
        if(mToolTipObj.activeInHierarchy) CalcMousePosition();
    }

    /// <summary>
    /// InventorySlot에서 호출되며 아이템 정보를 보여준다.
    /// </summary>
    /// <param name="id"></param>
    public void OpenUI(int id)
    {
        mStringBuilder.Clear();

        //이름 가져오기
        mStringBuilder.Append("<b>");
        mStringBuilder.AppendLine(mItemDataManager.GetName(id));
        mStringBuilder.Append("</b>");

        //설명 가져오기
        mStringBuilder.AppendLine();
        mStringBuilder.AppendLine(mItemDataManager.GetDescription(id));

        //텍스트 replace
        mTextArea.SetText(mStringBuilder.ToString());
        mToolTipObj.SetActive(true);
    }

    /// <summary>
    /// 설명 UI를 닫는다.
    /// </summary>
    public void CloseUI()
    {
        mToolTipObj.SetActive(false);
    }

    /// <summary>
    /// 마우스의 위치를 계산하여 설명UI가 마우스를 따라다니게 한다.
    /// </summary>
    private void CalcMousePosition()
    {
        Vector2 localPosition; // 변환된 canvas내 현재 좌표
        Vector2 mousePosition = new Vector2(Input.mousePosition.x, Input.mousePosition.y); //마우스의 현재 위치

        // 텍스트 라벨을 가져온다.
        RectTransform rt = mToolTipObj.transform as RectTransform;

        // 마우스 좌표를 canvas내에서의 좌표로 변환
        RectTransformUtility.ScreenPointToLocalPointInRectangle(mRectTransform, mousePosition, mCanvas.worldCamera, out localPosition);

        //툴팁이 마우스 기준 우측에 나오는것을 고려하여 마우스의 위치가 가로길이 기준 75%를 초과하면 마우스기준 우측으로 나타나도록 한다.
        //계산식은 현재 나타난 텍스트UI의 가로길이만큼을 빼주며, *0.5f는 Scale이 0.5f로 설정되어있기때문에 사용
        if (mousePosition.x > Screen.width * 0.75f) { localPosition.x -= rt.sizeDelta.x * 0.5f; }

        // 위치 변경
        rt.anchoredPosition = localPosition;
    }
}

 

[SerializeField] private GameObject mToolTipObj;
[SerializeField] private Canvas mCanvas;

• 툴팁을 보여줄 게임오브젝트와 하이어라키에서 툴팁을 자식으로 가지는 캔버스를 지정합니다.

 

[SerializeField] private ItemDataManager mItemDataManager;

• 아이템의 정보를 가져올 수 있는 아이템 데이터 매니저입니다.
• 본 글에서는 다루지 않지만, 간단하게 정보를 가져올 수 있는 기능을 하는 클래스입니다.

 

private void Start()

• 기본적으로 사용할 변수들을 초기화해줍니다.
• 컴포넌트를 획득하고, 일반적인 작업을 수행합니다.

 

public void LateUpdate()

• 현재 툴팁이 활성화되어있으면, 지속적으로 툴팁을 마우스의 위치로 변경해줍니다.

 

public void OpenUI(int id)

• 툴팁을 활성화합니다. 
• 매개변수인 id(아이템 코드)를 기반으로 아이템데이터매니저에서 아이템에 대한 정보를 얻어옵니다.

 

public void DisableToolTip()

• 툴팁을 비활성화합니다.

 

private void CalcMousePosition()

• 마우스 포인터의 위치를 계산하여 적절한 위치로 UI를 옮기도록 합니다.
• RectTransformUtility.ScreenPointToLocalPointInRectangle()를 사용하여 마우스 좌표의 위치를 사용중인 캔버스의 위치로 변환해줍니다.
• 마우스의 위치가 현재 화면의 위치를 기준으로 적당히 우측에 있는경우 UI의 위치를 조절하여 텍스트가 좌측방향에 나타나도록 합니다.

 

✅ 사용(외부에서 호출)

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

/// <summary>
/// 인벤토리 슬롯 하나를 담당
/// </summary>
public class InventorySlot : MonoBehaviour, IPointerClickHandler, IBeginDragHandler, IDragHandler, IEndDragHandler, IDropHandler, IPointerEnterHandler, IPointerExitHandler
{
    ...

    private void Update()
    {
        if (mIsTooltipActive)
        {
            mToolTipScript.EnableToolTip(mItem.ItemID);
            mIsTooltipActive = false;
        }

    	...
        
    }
    
    ...
    
    //마우스가 올려지면 발생하는 이벤트
    public void OnPointerEnter(PointerEventData eventData)
    {
        if (mItem != null)
        {
            mIsTooltipActive = true;
        }
    }    
    
    ...
}

• 현재 아이템에 마우스 포인트를 올리면 OnPointerEnter함수가 호출되어 툴팁을 보여주도록 합니다.