[Unity3D] 인벤토리 [Part 1] - Inventory UI

※ 주의 

이 글은 아마추어가 개인적으로 생각하여 작성하는 것으로, 이곳에 나오는 내용을 맹신하지 않는것을 당부드립니다.

Menu

1. 인벤토리 껍데기 만들기.

- 인벤토리의 Pivot 설정.

- 슬롯의 Pivot 설정.

- 슬롯 사이즈 설정.

- 슬롯 간 거리 설정.

- 슬롯의 가로, 세로 개수 설정.

- 인벤토리의 가로 사이즈, 세로 사이즈 설정.

- 슬롯 생성 및 부모설정.

- 모든 슬롯을 관리해줄 리스트를 생성.

2. 아이템 획득 시 검사조건 만들기 및 슬롯 기능 만들기.

- 아이템을 먹었을 때, 인벤토리 내의 슬롯을 모두 검사한다.

  *검사조건 : -> 슬롯 내에 같은 아이템이 존재하는지?

-> 슬롯내에 같은 아이템이 존재할 경우 겹칠수 있는지?

-> 슬롯내에 같은 아이템이 존재하지만, 겹칠수 없는경우 빈 슬롯이 존재 하는지?

- 슬롯을 스택으로 만들어 아이템 관리하기

  ->아이템이 슬롯에 들어갔을때 이미지 변경.  

  ->아이템을 겹칠경우 텍스트 갱신.

  ->아이템을 사용할 경우 텍스트 갱신.

  ->아이템을 모두 사용했을 때 이미지 변경.

3. 아이템 만들기 및 획득

 - 아이템 타입 설정.

 - 아이템의 이미지 설정.

 - 아이템 겹칠수 있는 최대치 설정.

 - 아이템과의 충돌로 아이템 획득하기.

4. 인벤토리내에 아이템 드래그 앤 드랍으로 아이템 옮기기 및 자리 바꾸기.

 - 처음 마우스 버튼을 누를 때

 - 누르고 이동할 때

 - 드래그가 끝났을 때

 - 누른 버튼을 땠을 때

의 4가지 상태로 나눠 드래그 앤 드랍 구현.

5. XML문서를 이용한 인벤토리 아이템 저장.

- Save

- Load

1. 인벤토리 껍데기 만들기.

이렇게 생긴 인벤토리를 만들려고 한다.

그러면 필요한 이미지가 3개 있다.

1). 인벤토리 배경 이미지.

2). 슬롯 이미지.

3). 투명 이미지.

1). 인벤토리 배경 이미지 생성 후 Pivot설정하기.

  (1). 하이러키 창에서 마우스 오른쪽 버튼을 클릭해서 UI에 Image를 생성한다. (객체이름 Inventory)

  (2). Image를 생성하면 Canvas가 생성되고 그 자식으로 Image가 생성된 것을 볼 수 있을 것이다.

  (3). 새로 생성된 Image를 클릭한 뒤, Image컴포넌트에 Source Image에 자신이 가져온 인벤토리 배경 이미지를 넣는다.

  (4). Scene으로 돌아와 인벤토리 배경 이미지의 pivot을 사진과 같이 옮긴다.

동그라미를 인벤토리 이미지에 왼쪽 상단에 옮기는 이유는 저 곳을 기준으로 슬롯을 그려줄 것이기 때문이다.

2). 슬롯 이미지 생성 후 Pivot정해주기.

 (1). Canvas에 자식으로 Image를 하나 만들어준다. (객체이름 OriginSlot)

 (2). Image컴포넌트 Source Image에 슬롯 이미지를 넣어준다.

 (3). 슬롯의 Pivot을 설정해준다.

 

 (4). 슬롯의 자식으로 Image를 하나 생성한 후 Source Image에 투명 이미지를 씌운다. (객체이름 Item)

 (5). 투명 이미지의 위치를 슬롯의 가장자리에 위치시킨다.

※ 투명이미지의 Pivot은 옮길필요 없다.

 

투명 이미지를 슬롯안에 넣어준 이유는 아이템을 획득했을 때 이 투명이미지를 아이템 이미지로 바꿔줄 것이기 때문이다.

 (6). 다 만든 슬롯을 Project창으로 옮겨 프리팹으로 만든다.

 (7). 하이러키창에 슬롯을 지운다.

3). 설정하기.

 (1). 슬롯 사이즈 설정하기.

 (2). 슬롯 간 거리 설정하기.

 (3). 슬롯의 가로 세로 개수 설정하기.

 (4). 인벤토리 배경 이미지의 가로,세로 사이즈 설정하기.

이렇게 설정을 하는 이유는 (슬롯 사이즈 * 슬롯의 가로(세로)개수) + (슬롯간 거리 * 슬롯의 가로(세로)개수)로 인벤토리 이미지의 크기를 정하기 때문이다.

만약 슬롯의 개수가 5개이고 슬롯의 가로 사이즈가 30이라고 하자. 5 * 30 = 150이 된다.

그럼 적어도 인벤토리 이미지의 가로(세로)사이즈는 150은 넘어야지 슬롯 이미지를 인벤토리 안으로 넣을수 있다.

그런데 이것만이 아니라 슬롯들은 서로 붙어있지 않고 일정 간격으로 떨어져있다. 이것이 슬롯간 거리인데,

이 거리도 계산해주어야 한다. 그렇지 않으면 슬롯이 인벤토리 이미지 밖으로 삐져나가기 때문이다.

슬롯간 거리는 슬롯과 슬롯과의 떨어진 거리인데 이 간격도 슬롯에 개수 + 1만큼 계산해주면 된다.

슬롯의 개수가 5개라고 하자. 그럼 간격도 5개 + 1개 존재하게 된다.

이렇게 모든 사이즈 및 개수가 설정되면 인벤토리 이미지의 가로(세로)사이즈를 측정할수 있게 된다.

4). Inventory스크립트 작성하기.

 

 'Inventory' Script

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
 
public class Inventory : MonoBehaviour
{
 
    // 공개
    public List<GameObject> AllSlot;    // 모든 슬롯을 관리해줄 리스트.
    public RectTransform InvenRect;     // 인벤토리의 Rect
    public GameObject OriginSlot;       // 오리지널 슬롯.
 
    public float slotSize;              // 슬롯의 사이즈.
    public float slotGap;               // 슬롯간 간격.
    public float slotCountX;            // 슬롯의 가로 개수.
    public float slotCountY;            // 슬롯의 세로 개수.
 
    // 비공개.
    private float InvenWidth;           // 인벤토리 가로길이.
    private float InvenHeight;          // 인밴토리 세로길이.
    private float EmptySlot;            // 빈 슬롯의 개수.
 
    void Awake()
    {
        // 인벤토리 이미지의 가로, 세로 사이즈 셋팅.
        InvenWidth = (slotCountX * slotSize) + (slotCountX * slotGap) + slotGap;
        InvenHeight = (slotCountY * slotSize) + (slotCountY * slotGap) + slotGap;
 
        // 셋팅된 사이즈로 크기를 설정.
        InvenRect.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, InvenWidth); // 가로.
        InvenRect.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, InvenHeight);  // 세로.
 
        // 슬롯 생성하기.
        for (int y = 0; y < slotCountY; y++)
        {
            for (int x = 0; x < slotCountX; x++)
            {
                // 슬롯을 복사한다.
                GameObject slot = Instantiate(OriginSlot) as GameObject;
                // 슬롯의 RectTransform을 가져온다.
                RectTransform slotRect = slot.GetComponent<RectTransform>();
                // 슬롯의 자식인 투명이미지의 RectTransform을 가져온다.
                RectTransform item = slot.transform.GetChild(0).GetComponent<RectTransform>();
 
                slot.name = "slot_" + y + "_" + x; // 슬롯 이름 설정.
                slot.transform.parent = transform; // 슬롯의 부모를 설정. (Inventory객체가 부모임.)
 
                // 슬롯이 생성될 위치 설정하기.
                slotRect.localPosition = new Vector3((slotSize * x) + (slotGap * (x + 1)),
                                                   -((slotSize * y) + (slotGap * (y + 1))),
                                                      0);
 
                // 슬롯의 자식인 투명이미지의 사이즈 설정하기.
                slotRect.localScale = Vector3.one;
                slotRect.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, slotSize); // 가로
                slotRect.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, slotSize);   // 세로.
 
                // 슬롯의 사이즈 설정하기.
                item.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, slotSize - slotSize * 0.3f); // 가로.
                item.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, slotSize - slotSize * 0.3f);   // 세로.
 
                // 리스트에 슬롯을 추가.
                AllSlot.Add(slot);
            }
        }
 
        // 빈 슬롯 = 슬롯의 숫자.
        EmptySlot = AllSlot.Count;
    }
}

※ 설명은 주석을 읽고 분석하도록 하자.

Inventory스크립트의 인스펙터창 정보.

완성