#15-1 유니티 인벤토리 만들기(캔버스, UI, 텍스트)

이번 포스팅은 #14-1 유니티 체력바 만들기(캔버스, UI, 텍스트) 포스팅을 활용한 인벤토리 만들기를 진행하겠습니다.

#14-1 유니티 체력바 만들기(캔버스, UI, 텍스트) 포스팅은 하단에 배치하였습니다. 참고하시길 바랍니다.

#14-1 유니티 체력바 만들기(캔버스, UI, 텍스트)

포스팅은 유니티 2D 게임 개발(게임 개발 프로그래밍)에 나온 예제로 진행합니다.

#1 유니티2D 개발 시작하기

플레이어가 동전아이템을 주우면 동전아이템이 저장되는 인벤토리를 만들도록 하겠습니다. 

인벤토리는 5개의 아이템을 주울 수 있도록 5개의 인벤토리를 만들겠습니다.

---

인벤토리(Inventory)만들기

인벤토리로 사용할 스프라이트 이미지를 설정하겠습니다.

저는 먼저 인벤토리 스프라이트를 저장할 폴더를 생성하였습니다.

Assets > Sprite > Inventory 폴더를 생성한 후에 폴더에 InventorySlot 스프라이트를 저장하였습니다.

 

 

InventorySlot 스프라이트를 사진과 같이 설정하였습니다

Sprite Mode : Multiple

Pixels Per Unit(PPU) : 32

Filter Mode : Point(no filter)

Compression : None

Apply를 눌러 적용하고 Sprite Editor에서 Automatic(자동)으로  Slice하였습니다.

 

인벤토리 오브젝트를 만들겠습니다.

체력바 만들기와 마찬가지로 Hierarchy창 > 마우스 오른쪽 클릭 > UI > Canvas 를 선택합니다.

EventSystem은 체력바와 같은 이유로 삭제하고 Canvas 오브젝트 설정은 사진과 같이 합니다.

이름 : InventoryObject

Canvas 컴포넌트 > Render Mode > Screen Space - Overlay

Canvas 컴포넌트 > Pixel Perfecyt > 체크

Canvas Scaler 컴포넌트 > UI Scale Mode > Scale With Screen Size 

Canvas Scaler 컴포넌트 > Reference Pixels Per Unit > 32 

설정합니다.

InventoryObject를 선택하고 마우스 오른쪽 클릭> Create Empty를 선택하여 새로운 UI요소를 생성합니다.

새롭게 만들어진 InventroyObject의 자식 오브젝트인 UI 요소의 설정은 사진과 같이합니다.

이름 : InventoryBackground

Rect Transform 컴포넌트 > Anchor Presets > top-left 설정합니다.

Add Component > Horizontal Layout Group(가로 레이아웃 그룹) 컴포넌트 추가합니다.

※Horizontal Layout Group 컴포넌트는 자동으로 모든 하위 뷰를 가로 방향을 나란히 배치합니다.

 

InventotyBackground의 위치입니다.

체력바를 위치했던 방법와 같은방법으로 화면의 왼쪽 상단에 위치합니다.

 

InventoryObject를 선택 > Create Empty 새로운 UI 요소를 생성합니다.

새로운 UI 요소를 사진과 같이 설정합니다

이름 : Slot

Rect Transform 컴포넌트 > Width : 80 , Height : 80 설정합니다.

 

Slot 오브젝트는 하나의 아이템 또는 "스태커블" 아이템의 수량을 보여주는 UI 입니다.

Slot 오브젝트는 배경 이미지, 아이템 이미지, 트레이 이미지, 텍스트 오브젝트 4개의 자식 오브젝트를 가집니다.

Slot 오브젝트는 프리팹으로 만들어 복사본 5개를 인스턴스화 하는 코드를 만들 것입니다.

 

Slot 오브젝트를 선택 > 마우스 오른쪽 클릭 > UI > Image 오브젝트를 선택하고 이 과정을 2번합니다.

Slot 오브젝트의 자식 오브젝트인 이미지 오브젝트를 2개 만드는 것 입니다.

첫번째 이미지 오브젝트의 이름을 Background로 변경합니다.

두번째 이미지 오브젝트의 이름을 ItemImage로 변경합니다.

 

첫번째 이미지 오브젝트인 Background의 Inspector창입니다.

Rect Transform 컴포넌트 > Width : 80 , Height : 80 설정

부모오브젝트인 Slot의 크기와 동일합니다.

Image 컴포넌트 > Source Image > 프로젝트에 맞게 설정합니다 

InventorySlot_0

저는 책에서 제공하는 예제이미지를 사용하였습니다.

 

두번째 이미지 오브젝트인 ItemImage의 인스펙터 창입니다.

Rect Transform 컴포넌트 > Width : 80 , Height : 80 설정합니다.

부모오브젝트인 Slot의 크기와 동일합니다.

Image 컴포넌트는 비활성화 합니다. 

소스 이미지가 생기면 이미지 컴포넌트를 활성화 하겠습니다. 지금은 비활성화 하겠습니다.

Slot 오브젝트의 첫번째 자식 오브젝트인 Background에 새로운 이미지 오브젝트를 추가합니다.

Background의 자식 오브젝트의 이름을 Tray로 변경합니다.

스태커블 아이템의 수량 텍스트를 배치할 작은 "트레이"입니다.

Tray 오브젝트의 Inspector 창입니다.

Rect Transform 컴포넌트 > Anchor Presets > bottom-right 설정합니다.

Rect Transform 컴포넌트 > Pos X , Pos Y : 0 으로 설정하여 부모 오브젝트의 오른쪽 아래 부분으로 위치시킵니다.

Rect Transform 컴포넌트 > Width : 48 , Height : 32 로 크기를 설정합니다.

Image 컴포넌트 > Source Image > 프로젝트에 맞게 설정합니다.

InventorySlot_1

저는 책에서 제공하는 예제 이미지를 사용하였습니다.

 

다음은 Tray 오브젝트의 자식오브젝트로 Text 오브젝트를 추가하겠습니다.

방금 만든 Tray 오브젝트를 선택 > UI > Text를 선택하여 자식 오브젝트로 텍스트 오브젝트를 생성합니다.

텍스트 오브젝트의 이름을 QtyText로 설정합니다.

QtyText 오브젝트의 Inspector창 입니다.

Rect Transform 컴포넌트 > Width : 25 , Height : 20 크기를 설정합니다.

Text 컴포넌트 > Text 속성 : 00으로 설정합니다.

Text 컴포넌트 > Character 속성 > Font, Font Size, Alignment, Color 를 프로젝트에 맞게 설정합니다.

Text 컴포넌트를 비활성화 합니다.

나중에 코드를 통해 활성화할 예정입니다.

 

지금까지 설정한 Slot 오브젝트를 Prefab으로 만들고 Hierarchy창에서 삭제합니다.

코드를 통해 Slot 오브젝트 프리팹의 복사본을 인스턴스화 해서 인벤토리를 채울 것 입니다.

Slot 오브젝트를 Hierarchy창에서 삭제한 뒤에 InventoryObjcet 또한 Prefab으로 만들었습니다.

InventoryObject 또한 Prefab으로 만든 뒤에 Hierarchy창에서 삭제합니다.

 

마지막으로 Ctrl + S를 눌러 Scene을 저장합니다!

---

감사합니다! :)