지난시간에 만들어둔 UMG 폴더 내의 GameHUD를 연다. 

중앙의 창은 비주얼 디자이너라 하고 해당 창에 노출되는것은 게임 내에서도 보여지게 된다. 

게임 내 UI 창을 표현하는 시각적도구라고 보면 된다. 

왼쪽에 보면 팔레트라는 창이 있는데 여기서 기본적인 UI 요소를 가져올 수 있다. 




우선 팔레트에서 Horizonal box 를 비주얼디자이너창으로 가져온다. 

그리고 Vertical Box를 계층구조 내 Horizonal Box 안으로 집어넣는다. 

그리고 Vertical Box를 Ctrl + C, Ctrl + V를 통해 복사, 붙여넣기 한다. 

Vertical Box 하나에 텍스트를, 나머지 하나에는 Progress Bar 를 표시할것이다. 



팔레트의 일반 > Text 를 선택해 끌어다 Vertical Box 하나 위에 넣는다. 

Text 위젯을 복사하여 두개를 더 만들어준다. 

마찬가지로 일반 > Progress Bar를 남은 하나의 Vertical Box 안에 넣어주고 복사해서 3개로 만들어준다. 




비주얼 디자이너에 있는 Horizonal Box의 크기를 적절히 조절해 준 다음, 

Vertical Box의 Progress Bar 1,2,3을 전부 선택하여 우측 레이아웃창의 size 란을 자동에서 채우기로 변경한다. 





다름 프로그레스 바 가 있는 버티컬박스를 선택한 다음 우측 디테일 창의 슬롯 란에 보면 사이즈가 있는데 채우기 를 누르면 호라이즌박스 크기만큼 프로그래스바가 채워지는것을 볼 수 있다. 





Text 영역도 똑같이 선택하여 Layout의 size를 채우기로 바꿔주고, Jstification의 위치를 우측으로 바꿔준다. 


다음 첫번째 텍스트를 선택하여 우측 Content란의 Text 문구를 체력 으로 입력한다. 이 때 문구 앞 뒤로 Space 키를 눌러 빈공간을 둔다. 

마찬가지로 나머지 텍스트항목에 에너지, 기분 을 입력해준다.



Progress Bar 3개를 다 선택해서 우측 디테일란의 Fill Color and Opacity 란을 본다. 

파란색으로 기본설정되어있는데 프로그래스바는 색깔이 보이지 않는다. 이유는 디테일 > Progress 란의 Percent가 0 이기 때문이다. 




우선 Progress 내 Percent를 1로 해주고 Fill Color...를 통해 각각 색상을 선택해준다. 

이후 다시 Progress내 Percent를 0으로 다시 바꿔준다. 이후 블루프린트에따라 체력,에너지,기분 게이지가 조정될것이기 때문에 지금 채워두면 안된다. 

이는 Progress란의 바인드를 통해 연결한다. 



우선 화면 우상단의 디자이너>그래프 에서 그래프로 넘어가보면 아래와 같이 노드들이 있는데 Tick이벤트는 필요없으니 우선 삭제하자. 

강의에는 나오지 않았지만 맨위의 Pre Construct 이벤트도 필요는 없는 듯 하다.



이다음, 우클릭> Get Player Character 를 입력하여 불러오자. 




여기서 Return Value를 드래그하여 우측으로 끌어서 입력창에 Cast to 를 입력하면 ThirdpersonCharacter에 형변환 이 뜰 것이다. 



해당 블루프린트를 만들고 Construct 이벤트랑 연결해준다. 이 다음 ThirdPerson...에 행변환의 실행핀을 우측으로 드래그 해 보면 

Set Health Value, Set Energy Value, Set Mood Value 를 선택이 가능하다. 해당 변수들을 다룰 수 있게된것이다. 




하지만 여기서 해당변수를 적용하진 않고 지금까지 만든 형변환 내용을 레퍼런스로 불러와서 계속 활용하기 위해 

해당 형변환을 변수로 승격시켜야 한다. 

해당 형변환의 실행키를 우클릭, 변수로 승격을 선택하면 된다. 행변환 자체를 우클릭하면 해당메뉴가 뜨지 않으니 행변환 실행핀을 우클릭하자. 

변수로 승격하게 되면 좌측 변수 항목에 변수가 추가되고 이름을 적게 되는데 CharacterReference로 만들어 두자. 


비주얼 디자이너에서 C를 눌러 제목을 추가하자.

이벤트 컨스트럭트 스크립트가 완성되었다. 컴파일/저장을 하자. 



다시 우측 상단의 디자이너 메뉴로 돌아와서, 각 프로그래스 바를 종전에 만든 캐릭터 레퍼런스에 바인딩 한다. 

프로그래스 바를 선택한 다음 우측의 프로그래스란의 바인드 클릭, 캐릭터 레퍼런스를 선택한 다음 해당하는 Value (Health, Evergy, Mood) 를 선택하면 된다. 


컴파일/저장을 한 후 해당 블루프린트 창을 닫는다. 




지금까지 작업을 한 내용이 바로 인게임 내에서 보여지지는 않는다. 


보여주기위해서는 플레이어캐릭터 블루프린트 내에서 작업을 해주어야 한다. 


다시 ThirdPersonBlueprint를 열어주자. 


우클릭을 한 후 EventBeginPlay를 입력하여 BeginPlay 이벤트 를 생성해주자.

게임을 실행하면 이 노드가 모든 연결되어있는 노드들을 열어준다. 

이후, Beginplay이벤트의 실행핀을 옮겨와서 Create widget을 실행해준다. 


위젯 생성노드가 생기고, 해당 노드의 클래스 선택에 보면 만들어둔 위젯들이 보인다.

GameHUD를 선택하고, 해당 위젯생성노드의 실행핀을 우클릭하여 변수로 승격시켜서 레퍼런스로 사용하자. 





변수이름은 GameHUDReference로 설정해두자. 




이 다음 해당 변수의 핀을 가져와서 Add to Viewport 노드를 생성하자.




이 다음에는 만들어진 변수들 중 기존에 있는 점프블루프린트를 전환하여 Energy value에 적용 해 보도록 하겠다. 












'Unreal Engine' 카테고리의 다른 글

게임위젯/인벤토리 만들기 2  (2) 2018.06.09
게임위젯/인벤토리 만들기 (1)  (0) 2018.06.09
  1. GrancartZoo 2018.09.16 17:08 신고

    오! 꽤 하잖아!? ㅋㅋㅋ

언리얼엔진 블루프린트 인벤토리 만들기 


1. 썸네일 만들어서 넣기 

썸네일 이미지를 만들어서 프로젝트 내 Texture 폴더를 만들어서 이미지를 넣어놓는다. (png파일) 




2. 위젯 블루프린트 만들기


하단 창에 마우스 오른쪽 클릭 > 위젯블루프린트 선택을 통해 게임 위젯 블루프린트를 만든다. 


 


GameHUD, InventorySlot, PickupText 세가지를 만들어 준다. 


 


3. 선택한 기본게임스타일 (예제는 ThirdpersonBP) 폴더 > Blueprints > Thirdperson Character를 연다.


 


4. 블루프린트 창에서 좌측 변수(Variables) 항목에서 변수추가를 한다. 

 우선 HealthValue 변수를 만든다. 


 


5. 해당 변수를 선택하고 우측 상단의 디테일 항목에서 변수 유형을 플로트 (Floot) 으로 바꿔준다. 

 

 


6. 동일한 방식으로 EnergyValue, MoodeValue 두개의 변수를 더 만들어준다. 


MoodValue를 선택하여 디테일 창에서 기본값을 0.25로 변경한다. 

1이 100%로 꽉 찬 상태, 0.25는 25% 상태이다. 


마찬가지로 EnergyValue, HealthValue는 각각 0.5, 0.75로 수정해준다. 


7. 컴파일, 저장 후 블루프린트를 닫아준다. 


블루프린트 인터페이스 만들기 

8. 하단 컨텐츠 브라우저 창에서 우클릭 > 블루프린트 > 블루프린트 인터페이스를 열어준다. 


   


우측 상단 내 블루프린트에 함수 이름을 UseAction으로 바꿔준다. 

 

  

DropAction이라는 이름으로 함수를 하나 더 추가해준다. 


DropAction 함수를 선택 > 우측 하단의 입력(Input) 란에 새 파라미터를 추가한다. 
새 파라미터 이름은 Item To Drop 으로 변경하고 파라메터 속성을 Actor로 변환한다. 

이후 컴파일/저장 후 블루프린트를 닫는다. 


9. 컨텐츠브라우저 우클릭 > 블루프린트 > 구조체를 선택한다. 

   InventoryStruct라는 이름으로 구조체를 만들어 준다. 구조체는 쉽게말하면 함수의 집합니다. 

모든 함수들은 여기에 저장되기 때문에 다양한 함수를 불러오기에 좋다. 

여러 함수를 불러오기 좋기때문에 픽업아이템 분류에 좋다. 

예를들면 아이템 가까이에 가면 뜨는 아이템의이름, 아이템을 선택했을때 아이템에 대한 설명 등.. 모든 아이템 정보는 이 인벤토리 스트럭트가 관리하게 될 것 이다. 


 


구조체를 생성 한 후 더블클릭으로 연다. 


구조체 내 변수가 1개가 있고 총 4개를 만들것이므로 3개를 새변수를 클릭하여 추가 해 준다. 

첫번째변수는 속성을 Actor로 바꿔주고 Item으로 이름을 바꿔준다. 

두번째 변수는 속성을 Texture 2D로 바꿔주고 ItemImamge로 이름을 바꿔준다. 

세번째 변수는 속성을 Text로 바꿔주고, 이름을 PickupText로 바꿔준다. 

네번째 변수는 속성을 Text로 바꿔주고, 이름을 ActionText로 바꿔준다.


저장 후 닫는다. 


이제 준비 작업이 끝났다. 


게임 UI 위젯을 위한 블루프린트를 모두 만들었고 

기존 블루프린트를 캐릭터 체력,에너지,기분에 영향을 받을 수 있도록 수정하였다. 

그리고 다수 블루프린트간 정보를 전달할 수 있는 블루프린트 인터페이스도 만들었다. 

마지막으로 아이템 정보를 저장할 인벤토리 스트럭쳐도 만들었다. 



'Unreal Engine' 카테고리의 다른 글

게임위젯/인벤토리 만들기 2  (2) 2018.06.09
게임위젯/인벤토리 만들기 (1)  (0) 2018.06.09

+ Recent posts