[Unity / C#] 커스텀 Tooltip 띄우기

📋 목차

1. 아이템 리스트 작성
2. 중간 결과
3. 최종 결과
4. 오늘의 배운 점
5. 다음 계획

🎨 Tooltip UI 제작

재료 종류를 담을 UI는 빈 오브젝트로 생성하고, 위에서 아래로 나열하기 위해 Vertical Layout Group 컴포넌트를 넣습니다.

그리고 나열될 아이템은 Recipe_Slot이라는 ItemIcon(Image)과 ItemNum(Text)을 자식으로 삼은 프리팹을 만듭니다.

📜 아이템 제작 재료 정보 표시

아이템을 제작할때 제작대에서 필요한 재료가 보여야 합니다. 그래서 IPointerEnterHandler와 IPointerExitHandler를 이용하여 마우스를 제작대의 아이템에 올렸을시 Tooltip이 보이는 로직을 짤겁니다.
일단 RecipeTooltip이라는 스크립트를 생성하고, Benchslot 프리팹의 컴포넌트에 넣습니다.

📄 RecipeTooltip 스크립트

// RecipeTooltip.cs

using UnityEngine;
using UnityEngine.EventSystems;
using System.Linq;
using UnityEngine.UI;
using TMPro;


public class RecipeTooltip : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
{
	// Tooltip에 표시될 슬롯
    [Header("UI Elements")]
    public GameObject recipeSlotPrefab;

    private GameObject player;
    private PlayerState playerState;
    private BenchSlot benchSlot;
    private GameObject Tooltip;
    private UIManager uiManager;
    
    void Start()
    {
        player = GameObject.FindGameObjectWithTag("Player");
        if (player)
        {
            playerState = player.GetComponent<PlayerState>();
        }
        benchSlot = GetComponent<BenchSlot>();
        Tooltip = GameObject.Find("Tooltip");
        uiManager = GameObject.Find("UIManager").GetComponent<UIManager>();
    }

	// 마우스 커서가 BenchSlot 안으로 들어옴
    public void OnPointerEnter(PointerEventData eventData)
    {
        if (!playerState || !benchSlot) return;

        int slotIndex = benchSlot.slotIndex;

        if (!playerState.unlockedRecipes[slotIndex]) return;
        ItemData recipeData = playerState.unlockedRecipes[slotIndex];

        SetRecipeSlots(recipeData);
    }

	// 마우스 커서가 BenchSlot 밖으로 나감
    public void OnPointerExit(PointerEventData eventData)
    {
        HideTooltip();
    }

	// group만큼 Prefab을 자식으로 생성하고 이미지 및 갯수 할당
    private void SetRecipeSlots(ItemData recipeData)
    {
        var requireGroups = recipeData.ingredients.GroupBy(item => item.itemName);

        ShowTooltip();

        foreach (var group in requireGroups)
        {
            GameObject recipeSlot = Instantiate(recipeSlotPrefab, Tooltip.transform);
            string count = $"x{group.Count()}";
            
            recipeSlot.GetComponentInChildren<Image>().sprite = group.First().icon;
            recipeSlot.GetComponentInChildren<Image>().color = Color.white;
            recipeSlot.GetComponentInChildren<TextMeshProUGUI>().text = count;
        }
    }

    public void ShowTooltip()
    {
        Tooltip.SetActive(true);
    }

    public void HideTooltip()
    {
        uiManager.ClearTooltip(Tooltip);
    }
}

🗑️ Tooltip 없애기

Tooltip은 커서가 밖으로 나가거나 제작대 창이 닫힐 때도 꺼져야 합니다. 그 함수는 위에서 ClearTooltip이라고 했습니다.

// UIManager.cs

public void ClearTooltip(GameObject Tooltip)
{
	// 생성됐던 Slot을 초기화하지 않으면 다음 Tooltip에서 이전 정보가 여전히 남아있게 됨
    // 안전성을 위해 역순으로 자식을 없앰
    for (int i = Tooltip.transform.childCount - 1; i >= 0; i--)
    {
        Destroy(Tooltip.transform.GetChild(i).gameObject);
    }
    Tooltip.SetActive(false);
}

// InteractionDetector.cs

private bool CheckIsUIOpen()
{
    if (uiManager.isBenchOpen)
    {
        GameObject Tooltip = GameObject.Find("Tooltip");
        
        // 제작대 UI가 켜져있고 Tooltip 또한 있을 경우 Tooltip을 초기화하고 없앰
        if (Tooltip) uiManager.ClearTooltip(Tooltip);
        
        uiManager.ToggleBench();
        return true;
    }
    return false;
}

🎮 최종 결과

각 Slot에 마우스를 올릴 때 해당 아이템의 재료가 Tooltip에 뜨게 됩니다.

📚 오늘의 배운 점

• IpointerEnterHandler, IPointerExitHandler 활용
• Tooltip 제작

🎯 다음 계획

다음 글에서는:

1. 현재 들고 있는 아이템 표시
2. 인벤토리에서 퀵슬롯으로 아이템 등록
   • 아이템 추가
   • 아이템 제거
   • 아이템 스왑