3 분 소요

Intro

이번 포스팅에서는 아이템 슬롯 클래스를 작성합니다.
아이템 슬롯 클래스는 다음과 같은 데이터들을 관리합니다.

  • 슬롯 인덱스
  • 슬롯 접근 가능 여부
  • 아이템 이미지
  • 아이템 수량 텍스트
  • 커서를 갖다 댔을때의 하이라이트 이미지

또한 슬롯에서 발생할 모든 기능들을 구현합니다.

  • 아이템 이미지의 변경/보이기/숨기기
  • 아이템 수량 텍스트의 변경/보이기/숨기기
  • 하이라이트 이미지의 보이기/숨기기
  • 슬롯 접근 가능 여부의 변경

등의 기능들을 구현해주어야합니다.

ItemSlotUI 클래스

  • 먼저, ItemSlotUI 클래스의 필드입니다.
public class ItemSlotUI : MonoBehaviour
{   
    [Header("# Options")]
    [SerializeField] private float padding = 1f;                        // .. 슬롯 내 아이콘과 슬롯 사이 여백
    [SerializeField] private float highlightAlpha = 0.5f;               // .. 하이라이트 이미지 알파값
    [SerializeField] private float highlightFadeDuration = 0.2f;        // .. 하이라이트 소요 시간

    [Header("# Connected Objects")]
    [SerializeField] private Image iconImage;           // .. 아이템 아이콘
    [SerializeField] private Text amountText;           // .. 아이템 갯수 텍스트
    [SerializeField] private Image highlightImage;      // .. 포커스 됐을 때 하이라이트 이미지

    // Properties
    #region
    public int Index { get; private set; }              // .. 슬롯 인덱스

    public bool HasItem => iconImage.sprite != null;    // .. 슬롯에 아이템이 있는지 여부(아이콘 여부로 확인)

    public bool IsAccessible => isAccessibleSlot && isAccessibleItem;   // .. 접근 가능한 슬롯 여부
    public RectTransform SlotRect => slotRect;          // .. 슬롯의 RectTransform
    public RectTransform IconRect => iconRect;          // .. 아이콘의 RectTransform
    #endregion

    // Private Fields
    #region
    private InventoryUI inventoryUI;                    

    private RectTransform slotRect;                     // .. 슬롯 RT
    private RectTransform iconRect;                     // .. 아이콘 RT
    private RectTransform highlightRect;                // .. 하이라이트이미지 RT

    private GameObject iconGo;                          // .. 아이콘 게임오브젝트
    private GameObject textGo;                          // .. 텍스트 게임오브젝트
    private GameObject highlightGo;                     // .. 하이라이트 게임오브젝트

    private Image slotImage;

    private bool isAccessibleSlot = true;               // .. 슬롯 접근 가능 여부
    private bool isAccessibleItem = true;               // .. 아이템 접근 가능 여부

    private float currentHighlightAlpha = 0f;           // .. 현재 하이라이트 이미지 알파값

    // .. 비활성화된 슬롯 색상
    private readonly Color InaccessibleSlotColor = new Color(0.2f, 0.2f, 0.2f, 0.5f);
    // .. 비활성화된 아이콘 색상
    private readonly Color InaccessibleIconColor = new Color(0.5f, 0.5f, 0.5f, 0.5f);
    #endregion
}
  • 다음은 메소드입니다.
    void ShowIcon() => iconGo.SetActive(true);              // .. 아이콘 활성화
    void HideIcon() => iconGo.SetActive(false);             // .. 아이콘 비활성화

    void ShowText() => textGo.SetActive(true);              // .. 텍스트 활성화
    void HideText() => textGo.SetActive(false);             // .. 텍스트 비활성화

    // .. 슬롯 인덱스 설정
    public void SetSlotIndex(int index) => Index = index;

    // .. 슬롯 활성화/비활성화 여부 설정
    public void SetSlotAccessibleState(bool value)
    {
        if (isAccessibleSlot == value) return;      // .. 중복처리

        // .. 사용 가능 슬롯 색상
        if(value)
        {
            slotImage.color = Color.black;
        }
        // .. 사용 불가 슬롯 색상, 아이콘 및 텍스트 숨기기
        else
        {
            slotImage.color = InaccessibleSlotColor;
            HideIcon();
            HideText();
        }

        isAccessibleSlot = value;
    }

    // .. 아이템 활성화/비활성화 여부 설정
    public void SetItemAccessibleState(bool value)
    {
        if (isAccessibleItem == value) return;

        if(value)
        {
            iconImage.color = Color.white;
            amountText.color = Color.white;
        }
        else
        {
            iconImage.color = InaccessibleIconColor;
            amountText.color = InaccessibleIconColor;
        }

        isAccessibleItem = value;
    }

    // .. 다른 슬롯과 아이템 아이콘 교환
    public void SwapOrMoveIcon(ItemSlotUI other)
    {
        // .. 제약 조건
        if (other == null) return;
        if (other == this) return;                                 // .. 자기 자신
        if (!this.IsAccessible || !other.IsAccessible) return;     // .. 자신 또는 다른 슬롯이 접근불가일 때

        var temp = iconImage.sprite;

        // .. 1. 다른슬롯에 아이템이 있는 경우 : Swap
        if (other.HasItem) SetItem(other.iconImage.sprite);

        // .. 2. 없을 때 : Move
        else RemoveItem();

        other.SetItem(temp);
    }

    // .. 슬롯에 아이콘 등록
    public void SetItem(Sprite itemSprite)
    {
        // .. 슬롯에 아이템이 없을 때
        if(itemSprite != null)
        {
            iconImage.sprite = itemSprite;
            ShowIcon();
        }
        // .. 있을 때
        else
        {
            RemoveItem();
        }
    }

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

    // .. 아이템 이미지 투명도 설정
    public void SetIconAlpha(float alpha)
    {
        iconImage.color = new Color(iconImage.color.r, iconImage.color.g, iconImage.color.b, alpha);
    }

    // .. 아이템 갯수 텍스트 설정
    public void SetItemAmount(int amount)
    {
        if (HasItem && amount > 1)
            ShowText();
        else
            HideText();

        amountText.text = amount.ToString();
    }
  • 작성된 ItemSlotUI 클래스를 아이템 슬롯 프리팹의 컴포넌트로 추가해줍니다.
  • 그리고 아이템슬롯의 아이콘, 텍스트, 하이라이트이미지를 연결해줍니다.

댓글남기기

참고