[언리얼 엔진 4.8] 모션그래픽 UI 인벤토리 - 01. 프로젝트 개요

언리얼 엔진 공식 유튜브 튜토리얼 시리즈 [ https://youtu.be/r4tltrLLVuQ ] 학습 후 필기 복습

---

화면 왼쪽 상단 플레이에 영향을 주는 게이지와 i 키를 누르면 화면 오른쪽에 인벤토리 창이 출력되는 설정을 해본다.

특정 아이템 근처로 가면 아이템 위쪽에 텍스트로 이름이 출력되고 e 키를 눌러 픽업 혹은 버릴 수 있게 만든다.

아이템은 인벤토리 화면으로 들어가서 활성화 했을때 다양한 옵션들이 출력되게 한다.

---

언리얼 엔진 공식 유튜브 튜토리얼 시리즈 [ https://youtu.be/tD3dIPxtLzA ] 학습 후 필기 복습

---

인벤토리 창에서 보이는 아이템 썸네일은 가로 32, 세로 32 의 PNG 확장자로 만들어준다.

언리얼에서 임포트하는 모든 에셋은 PNG 확장자이어야 하며, 32 의 사이즈는 단순히 예제에 적합한 사이즈이다.

영상에서는 스타터 콘텐츠의 도형을 스크린샷하여 Banana, Can, Fire, Orange 에셋을 제작하였다.

언리얼_튜토리얼_UMG_영상2_에셋.zip

콘텐츠 브라우저에서 Contents - Textures 폴더를 새로 만들고 썸네일 이미지들을 드래그 앤 드롭해준 다음, 모두 저장 버튼을 통해 불러와준다.

콘텐츠 브라우저에서 Contents - UMG 폴더를 새로 만들고 우클릭 - User Interface - Widget Blueprint 를 눌러 GameHUD 과 InventorySlot, PickupText 이라는 이름으로 3개의 위젯 블루프린트를 만들어준다.

폰트 기능은 말 그대로 폰트 정보를 반영하는 옵션이며, Slate 는 UI 를 구축하는 핵심 프레임워크 이다.

FirstPersonCharacter 블루프린트에서 Float 유형의 HealthValue, EnergyValue, MoodValue 3개의 변수를 만들고 컴파일해준다.

MoodValue 의 기본값을 25% 로 설정하기 위해 디테일 패널에서 기본값을 0.25 로 설정해준다.

EnergyValue 는 0.5, HealthValue 는 0.75 로 설정해준다.

FirstPersonHUD 에 보이는 Draw crosshair in center of screen 는 말 그대로 화면에 보이는 크로스헤어를 통제한다.

Boolean 유형으로 ShowCrosshairs 라는 이름의 변수를 만들어준 다음, Event Receive Draw HUD 노드와 Draw Texture 노드 사이의 연결핀을 끊어준다.

단축키 " B " 를 눌러 Branch ( 분기 노드 ) 를 만들어준 다음, Receive Draw HUD 이벤트와 연결해준다.

Don't Draw if using VR headset 가 보일 경우 기존 생성한 분기의 False 에 새로운 분기를 만들어 실행 핀을 이어주면 된다.

분기 노드의 True 실행 핀과 Draw Texture 노드를 연결해주고 Condition 에 직전에 생성한 ShowCrosshair 변수핀을 연결해준다.

회색의 코멘트 박스를 현 블루프린트의 모든 노드를 포함하게끔 확대해주고 컴파일해준다.

콘텐츠 브라우저의 Blueprint 폴더에 ActionInterface 블루프린트 인터페이스를 만들어준다.

UseAction 함수와 DropAction 함수를 추가해 만들어준다.

DropAction 함수를 선택한 상태에서 디테일 패널의 Input 의 + 버튼으로 Item To Drop 이라는 이름의 Actor 를 추가해준다.

다시 콘텐츠 브라우저 Blueprints 폴더에서 우클릭 - Blueprints - Structure ( 구조체 ) 를 추가하고 이름을 Inventory Struct 로 지어준다.

구조체는 다양한 함수들의 집합으로, 모든 함수들이 이곳에 저장되어 있기 때문에 필요한 정보를 불러낼 수 있다.

InventoryStruct 는 픽업 아이템의 썸네일이나 아이템 위에 보이는 텍스트, 인벤토리 아이템 클릭 시 발동되는 정보를 관리하게 된다.

InventoryStruct 에 들어가서 Actor 레퍼런스 유형의 Item 변수, Texture 2D 유형의 ItemImage 변수, Text 유형의 Pickup Text 와 Action Text 유형의 4개의 변수를 만들어준다.

Item 변수는 레벨에 생성되는 픽업 아이템, ItemImage 변수는 픽업 아이템의 이미지, Pickup Text 는 레벨에서 아이템의 이름을 출력하는 변수, Action Text 변수는 인벤토리에서 아이템을 클릭하면 나타나는 안내 텍스트를 담당한다.