[Unity / C#] 인벤토리의 아이템 시각화

주예성·2025년 6월 13일

1인개발 Game_Dev SignalHome Unity 학습기록

Unity 학습일지 - Signal Home 프로젝트

목록 보기

9/32

📋 목차

아이템 이미지 적용
중간 결과
IPointerClickHandler
더블클릭 시 이벤트
최종 결과
오늘의 배운 점
다음 계획

🖼️ 아이템 이미지 적용

만들었던 ItemData인 EnergyBar, HealKit, Water에 만들어둔 IconImage를 적용합시다.
아이템을 등록하려면 UIManager에서 해야겠죠?

// UIManager.cs

[Header("UI Panels")]
// 인벤토리 전체 UI
public GameObject inventoryPanel;
// 인벤토리의 Slot을 담고 있는 GameObject
public GameObject inventorySlotPanel;

private ItemData[] inventoryItems;
private int inventorySize = 21;

void Start()
{
	if (inventoryPanel && inventorySlotPanel)
    {
    	inventoryItems = new ItemData[inventorySize];
    }
}

public void AddItem(ItemData itemData)
{
    if (!itemData) return;
    for (int i = 0; i < inventorySize; i++)
    {
        if (inventoryItems[i] == null)
        {
            inventoryItems[i] = itemData;
            UpdateItemUI(i, itemData);
            Debug.Log("인벤토리에 아이템을 추가했습니다: " + itemData.itemName);
            return;
        }
    }
}

public void UpdateItemUI(int index, ItemData itemData)
{
    if (index < 0 || index >= inventorySize) return;

    Transform slot = inventorySlotPanel.transform.GetChild(index);
    Image itemImage = slot.GetComponentInChildren<Image>();
    if (itemImage)
    {
        itemImage.sprite = itemData.icon;
    }
}

그리고 AddItem함수를 PlayerController에 추가했던 TryPickupItem함수에 넣습니다.

// PlayerController.cs

[Header("Managers")]
[SerializeField] private GameObject UIManager;

private UIManager uiManager;

void Start()
{
	uiManager = UIManager.GetComponent<UIManager>();
}

void TryPickupItem()
{
	// inventory에 AddItem하는 함수 뒤에 넣습니다.
    uiManager.AddItem(item.itemData);
    // 본래 코드...
}

🎮 중간 결과

구분하기 위해 GameObject 또한 Quad로 변경 후 Material에 2D 텍스처를 적용했습니다.
그리고 Convex와 Is Trigger를 체크하여 물리적 충돌이 하지 않게 했습니다.

🖱️ IPointerClickHandler

HealKit: 체력 20 회복
Water: 수분 30 회복
EnergyBar: 포만감 30 회복

아이템 사용은 인벤토리 창에서 더블클릭으로 사용하게 됩니다. 그러므로 UI에서 마우스 클릭 이벤트를 생성하여 ItemData를 들고와 PlayerState를 변경하게 하면 되겠죠?
그럼 인벤토리를 관리할 InventorySlot 스크립트를 생성합시다.

using UnityEngine;
using UnityEngine.EventSystems;

public class InventorySlot : MonoBehaviour, IPointerClickHandler
{
    [SerializeField] private GameObject UIManager;
    public int slotIndex;

    private UIManager uiManager;
    private void Start()
    {
        if (UIManager)
        {
            uiManager = UIManager.GetComponent<UIManager>();
        }
    }
    public void OnPointerClick(PointerEventData eventData)
    {
        if (eventData.clickCount == 2)
        {
        	uiManager.OnSlotDoubleClick(slotIndex);
        }
    }
}

IPointerClickHandler와 OnPointterClick(PointerEventData eventData)는 이 스크립트를 가진 오브젝트의 클릭 이벤트를 담당합니다. 전 더블클릭 시 사용하게 할테니 eventData.clickCount == 2라고 조건을 달아둡시다.

🎉 더블클릭 시 이벤트

더블클릭을 하고 나면 해당 인덱스의 아이템 값이 사라지고, UI또한 업데이트를 해야 합니다. 이것을 위한 UI 전체 업데이트 함수를 제작하겠습니다.

// UIManager.cs

private Inventory inventory;

void Start()
{
	inventory = player.GetComponent<Inventory>();
    UpdateItemUI();
}

public void UpdateItemUI()
{
    if (!inventory || !inventorySlotPanel) return;
    for (int i = 0; i < inventory.items.Length; i++)
    {
        Transform transform = inventorySlotPanel.transform.GetChild(i);
        Image itemImage = transform.Find("ItemIcon").GetComponent<Image>();
        if (inventory.items[i] == null)
        {
            itemImage.sprite = null;
            itemImage.color = new Color(0, 0, 0, 0);
        }
        else
        {
            itemImage.sprite = inventory.items[i].icon;
            itemImage.color = Color.white;
        }
    }
}

이제 OnSlotDoubleClick을 제작할까요?

public void OnSlotDoubleClick(int slotIndex)
{
    if (!inventory.items[slotIndex]) return;
    inventory.RemoveItem(slotIndex);
    UpdateItemUI();
}