지난시간에 만들어둔 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 신고

    오! 꽤 하잖아!? ㅋㅋㅋ

+ Recent posts