2 분 소요

Intro

이번 포스팅에서는 인벤토리의 아이템을 버리는 기능을 구현했습니다.

아이템 버리기 기능의 순서는 다음과 같이 구현하였습니다.

  1. 인벤토리 아이템을 드래그 앤 드롭으로 인벤토리UI가 아닌 영역에 아이템 놓기
  2. InventoryUI - 마우스 이벤트의 EndDrag() 함수에서 Invnentory에 해당 아이템 제거요청
  3. Inventory - 해당 index의 아이템 제거 후 슬롯 정보 갱신
  4. InventoryUI - 슬롯 업데이트
  5. ItemSlotUI - 아이템 이미지와 텍스트 제거

팝업 UI 만들기

아이템을 버리려고할때 플레이어에게 경고창을 띄워 한 번더 아이템을 버릴지 확인하는 UI를 만들었습니다.

image

image


아이템 버리기 등을 통해 팝업창이 활성화되면, 팝업창 이외의 인벤토리영역과 상호작용을 금지하기위해 반투명한 판넬(판)을 활성화 시키도록 했습니다.

확인버튼을 누르게되면 아이템 버리기가 실행되고, 취소버튼을 누르게되면 툴팁만 사라지게됩니다.

InventoryPopupUI

InventoryPopupUI 에서는 아이템 버리기를 했을때 나타날 팝업UI와 사용자의 선택에 따른 이벤트를 처리합니다.

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

public class InventoryPopupUI : MonoBehaviour
{
    [Header("# 확인 팝업창")]
    [SerializeField] private GameObject confirmationPopupUI;    // 확인 팝업창
    [SerializeField] private Text confirmaitionItemNameText;    // 아이템 이름 텍스트
    [SerializeField] private Button confirmationOkButton;       // 확인버튼
    [SerializeField] private Button confirmationCancelButton;   // 취소버튼

    // 확인 버튼을 눌렀을 때 실행될 이벤트
    private event Action OnConfirmationOK;

    private void Awake()
    {
        InitUIEvents();
        HidePanel();
        HideConfirmationPopupUI();
    }

    // 이벤트 초기화 메서드
    private void InitUIEvents()
    {
        // 확인 버튼을 눌렀을 때 이벤트 추가
        confirmationOkButton.onClick.AddListener(HidePanel);
        confirmationOkButton.onClick.AddListener(HideConfirmationPopupUI);
        confirmationOkButton.onClick.AddListener(() => OnConfirmationOK?.Invoke());

        // 취소 버튼을 눌렀을 때 이벤트 추가
        confirmationCancelButton.onClick.AddListener(HidePanel);
        confirmationCancelButton.onClick.AddListener(HideConfirmationPopupUI);
    }

    // 판넬 활성화
    private void ShowPanel() => gameObject.SetActive(true);
    // 판넬 비활성화
    private void HidePanel() => gameObject.SetActive(false);

    // 확인 팝업 활성화
    private void ShowConfirmationPopupUI(string itemName)
    {
        confirmaitionItemNameText.text = itemName;
        confirmationPopupUI.SetActive(true);
    }

    // 확인 팝업 비활성화
    private void HideConfirmationPopupUI() => confirmationPopupUI.SetActive(false);

    // 이벤트 핸들러 설정
    private void SetConfirmationOkEvent(Action handler) => OnConfirmationOK = handler;
    
    // 버리기확인 팝업 띄우기
    public void OpenConfirmationPopupUI(Action okCallback, string itemName)
    {
        ShowPanel();
        ShowConfirmationPopupUI(itemName);
        SetConfirmationOkEvent(okCallback);
    }
}


각 메서드들에 대한 설명입니다.

  • InitUIEvents : 확인버튼과 취소버튼을 눌렀을 때 발생할 이벤트를 추가합니다.
    • 확인버튼
      • 판넬 비활성화
      • 팝업창 비활성화
      • OnConfirmationOK 이벤트 실행
    • 취소버튼
      • 판넬 비활성화
      • 팝업창 비활성화
  • Show/Hide Panel : 팝업이 활성화 되었을 때 인벤토리와의 상호작용을 막기위한 판넬의 활성/비활성화 함수입니다.
  • ShowConfirmationPopupUI : 팝업창을 활성화 합니다.
    • 아이템 이름부분에 해당 아이템 이름으로 설정합니다.
  • HideConfirmationPopupUI : 팝업창을 비활성화 합니다.
  • SetConfirmationOkEvent : OnConfirationOK 이벤트에 특정 handler를 설정합니다.
    • InventoryUI에서 “아이템버리기” 작업을 설정합니다.
  • OpenConfirmationPopupUI : InventoryUI 의 마우스이벤트에 의해 호출되는 함수입니다.
    1. 판넬 활성화
    2. 팝업창 띄우기
    3. 작업설정 : 넘겨받은 콜백 함수에따라 동작합니다.


InventoryUI

InventoryUI 에서 마우스 이벤트함수중 EndDrag() 함수에서 아이템 제거를 요청합니다.

    // 마우스 드래그 종료 처리(아이템 수량 나누기, 교환, 이동, 버리기 등)
    private void EndDrag()
    {
        ItemSlotUI endDragSlot = RaycastAndgetFirstComponent<ItemSlotUI>();

        // 아이템 이동 및 교환
        if(endDragSlot != null && endDragSlot.IsAccessible)
        {
            TrySwapItems(beginDragSlot, endDragSlot);

        }
        // 아이템 버리기
        if (!IsOverUI())
        {
            int index = beginDragSlot.Index;
            string itemName = inventory.GetItemName(index);

            popup.OpenConfirmationPopupUI(() => TryRemoveItem(index), itemName);
        }
    }
    
    // 아이템 버리기 요청
    private void TryRemoveItem(int index)
    {
        inventory.Remove(index);
    }

     // 해당 인덱스 슬롯의 아이템 제거(아이콘 및 텍스트 제거)
    public void RemoveItem(int index)
    {
        slotUIList[index].RemoveItemIcon();
    }

Inventory

InventoryUI에서 넘겨받은 index의 슬롯 아이템을 삭제합니다.

그다음 다시 InventoryUI에 해당 슬롯 아이템 삭제요청을 합니다.(아이콘 및 아이템 텍스트)

    // 해당 인덱스 슬롯의 아이템 제거
    public void Remove(int index)
    {
        if (!IsValidIndex(index)) return;

        // 인덱스의 아이템 제거
        items[index] = null;

        // 아이콘 및 텍스트 제거
        inventoryUI.RemoveItem(index);
    }
    
    // 해당 인덱스의 슬롯 아이템 이름 가져오기
    public string GetItemName(int index)
    {
        if (!IsValidIndex(index)) return null;
        if (items[index] == null) return null;

        return items[index].Data.ItemName;
    }

ItemSlotUI

ItemSlotUI 에서는 해당 슬롯의 아이콘과 텍스트를 없앱니다.

    // 슬롯에서 아이템 제거(아이콘, Text)
    public void RemoveItemIcon()
    {
        iconImage.sprite = null;
        HideIcon();
        HideText();
    }

테스트

  • 아이템을 버리려고하면 확인 팝업창이 활성화됩니다.
  • 팝업창이 활성화 되어있는 동안에는 인벤토리와 상호작용이 불가능합니다.
  • 확인버튼을 누르게되면 인벤토리에서 아이템이 삭제되고
  • 취소버튼을 누르게되면 팝업창만 비활성화됩니다.

image

댓글남기기

참고