2. 생명력, 에너지, 탄창 표시하기

이 단계에서는 HUD 에 플레이어의 생명력, 에너지, 탄창을 연결하여 표시하도록 합니다.

Windows
MacOS
Linux

더이상 필요하지 않은 페이지입니다.

비주얼: 생명력, 에너지, 탄창

여기서는 HUD 의 시각적인 면에 대한 구성을 시작하도록 하겠습니다.

  1. HUD 위젯 블루프린트를 위젯 블루프린트 에디터 에서 엽니다.

    Step2_6.png

    위젯 블루프린트 에디터 안에서 HUD 의 비주얼 레이아웃과 스크립트 함수성을 제공해 줄 수 있습니다.

    위젯 블루프린트 에디터의 여러가지 부분에 대한 상세 정보는 위젯 블루프린트 문서를 참고하세요.

  2. 팔레트 창 안의 Panel 아래 Horizontal Box 를 끌어 계층구조 창의 CanvasPanel 에 놓습니다.

    Step2_7.png

    Panel 위젯은 다른 위젯에 대한 일종의 컨테이너로, 그 안의 위젯에 대해 부가적인 함수성을 제공하는 것입니다.

  3. Panel 아래에서 Vertical Box 를 두 개 끌어 Horizontal Box 위에 놓습니다.

    Step2_8.png

  4. Common 아래 Text 위젯을 두 개 끌어 첫째 Vertical Box 에, Progress Bar 를 두 개 끌어 둘째 Vertical Box 에 놓습니다.

    Step2_9.png

  5. Horizontal Box 를 선택한 다음 그래프에서 박스가 창의 좌상단 구석에 오도록 크기와 위치를 조정합니다.

    Step2_10.png

    Progress Bar (진행상황 바)가 매우 작아 보이지만, 걱정 마세요. 바로 고쳐주겠습니다.

  6. Progress Bar 를 둘 다 선택한 다음 디테일 패널에서 Size (크기) 를 Fill (채우기)로 설정합니다.

    Step2_11.png

  7. 진행상황 바가 들어있는 Vertical Box 를 선택한 다음 그것도 채우기 로 설정합니다.

    Step2_12.png

  8. Horizontal Box 를 다시 선택한 다음 바와 텍스트가 같은 줄에 오도록 크기를 조절합니다.

    Step2_13.png

  9. 계층구조 창에서 가장 위의 Text 위젯을 선택한 다음 디테일 패널에서 Content 아래 Health : (생명력이)라 입력합니다.

    Step2_14.png

    나머지 Text 위젯은 이름을 Energy (에너지)라 합니다. 그래프가 다음과 같아 보일 것입니다.

    Step2_15.png

  10. Health 옆의 Progress Bar 를 선택하고 디테일 패널에서 Fill Color and Opacity (채우기 색 및 불투명도)를 녹색으로 설정합니다.

    UMGColorPicker1.jpg

    색을 정했는데도 진행상황 바의 색이 변하지 않습니다. 왜냐면 바를 채우는 Percent 값이 0.0 으로 설정되었기 때문입니다 (이 값을 바꿔 색을 테스트해 볼 수 있는데, 나중에 여기에 캐릭터의 생명력 값을 연동시키도록 하겠습니다).

  11. Energy 바에도 채우기 색을 설정해 줍니다 (여기서는 주황색을 선택했습니다).

  12. Ammo (탄창) 표시에는 위의 방법을 사용해서 다음과 같이 배치되도록 계층구조 에 위젯을 추가합니다.

    Step2_16.png

  13. 탄창 정보가 들어있는 Horizontal Box 를 선택한 채, 우상단 구석에 오도록 크기와 위치를 조정합니다.

    Step2_17.png

  14. Horizontal Box 를 계속 선택한 채, 디테일 패널에서 앵커 를 클릭한 뒤 우상단 앵커를 선택합니다.

    Step2_18.png

    그러면 앵커 메달이 화면 우상단 구석으로 이동됩니다.

    Step2_19.png

    위젯 앵커 를 통해 화면 크기와 상관 없이 앵커 메달 위치를 기준으로 위젯의 표시 위치를 지정할 수 있습니다. 다른 말로 화면 크기가 바뀌면, 위젯을 앵커 메달 위치(이 예제에서는 화면 우상단 구석)에서 똑같은 거리만큼 이동시킨다는 뜻입니다.

    그래프 내 Preview Size (미리보기 크기) 옵션을 클릭하고 변경하여 다른 화면 크기를 테스트해 볼 수 있습니다.

스크립트: 생명력, 에너지, 탄창

비주얼 레이아웃이 준비되었으니, HUD 요소 배후의 함수성을 제공해 줄 것들을 연결해 주면 됩니다.

  1. 위젯 블루프린트 에디터 창의 우상단 구석에 있는 그래프 버튼을 클릭합니다.

    Step2_20.png

  2. 그래프 에서 Event Construct 노드 아래 우클릭 한 뒤 Get Player Character 노드를 추가합니다.

  3. Return Value 핀을 끌어놓고 FirstPersonCharacter 에 형변환 을 선택합니다.

    Step2_21.png

    여기서는 플레이어 캐릭터에 사용되는 캐릭터 블루프린트가 정말 First Person Character 블루프린트인지 검사합니다.

  4. As First Person Character 핀을 끌어놓고 변수로 승격 을 선택(하고서 이름을 My Character 로 설정)한 뒤 아래와 같이 연결합니다.

    Step2_22.png

    FirstPersonCharacter 블루프린트 안에 들어있는 변수에 접근할 수 있게 됩니다.

  5. 툴바의 컴파일 을 클릭하여 스크립트를 컴파일합니다.

  6. 디자이너 탭으로 돌아가 Health 옆의 Progress Bar 를 선택합니다.

  7. 디테일 패널에서 Progress 아래, Percent 옆의 바인드 옵션을 선택한 다음 MyCharacterHealth 를 사용하도록 설정합니다.

    HealthProgress.jpg

    그러면 Progress Bar 의 값이 First Person Character 블루프린트 안의 Health 값에 바인딩합니다. 이제 캐릭터 블루프린트의 Health 값이 바뀔 때마다 HUD 의 값도 자동으로 업데이트됩니다. 바인딩 후 Progress Bar 가 변하지 않는 것도 볼 수 있는데, Event Construct (이벤트 구성시, 다른 말로 게임이 시작되면 벌어지는 HUD 구성시) 벌어지도록 해놨기 때문입니다.

  8. Energy 옆의 Progress Bar 를 선택하고 위 프로세스를 반복, PercentMyCharacterEnergy 에 바인딩합니다.

    EnergyProgress.jpg

  9. Ammo 텍스트 다음의 25 를 선택한 다음, Text 에 대한 디테일 패널에서 바인드 를 클릭하고 바인딩 생성 합니다.

    CreateBinding.jpg

    기존에 Sub-Object Properties 를 사용하여 같은 유형의 프로퍼티를 바인딩했던 방식으로, 별도의 커스텀 바인딩을 만들 수도 있습니다. 여기서는 Text 프로퍼티를 First Person Character 블루프린트의 Integer 프로퍼티에 바인딩하여 현재 탄창 수를 표시하도록 하겠습니다.

  10. 생성되어 자동으로 열린 함수 안에서 Ctrl 키를 누르고 MyCharacter 변수를 끌어 그래프에 놓습니다.

    Step2_27.png

  11. MyCharacter 핀을 끌어놓고 Get Ammo 를 선택합니다.

  12. Ammo 핀을 Return NodeReturn Value 에 연결합니다.

    Step2_28.png

    연결시 To Text 로의 변환 노드가 자동 생성됩니다.

  13. 나머지 25 텍스트에도 위 과정을 반복하여 "Max Ammo" 텍스트에 대한 바인딩을 만들어 줍니다.

    Step2_29.png

    Max Ammo 를 바꾸지 않으려면 필요없는 작업이지만, 아무튼 이렇게 해 주면 바꿀 수 있습니다.

  14. 컴파일, 저장플레이 버튼을 클릭하여 에디터에서 플레이합니다.

    이제 HUD 에 Health, Energy, Ammo 값이 표시되며, 캐릭터 블루프린트의 현재 값이 반영됩니다. Space 를 누르면 캐릭터가 점프하면서 에너지가 소모되고, 좌클릭 은 무기를 발사하며 탄창이 줄고, F 키를 누르면 생명력을 잃게 됩니다 (나중에 여기에 대미지 시스템을 연결해 주면 됩니다).

다음 섹션에서는 지금까지 구성한 게임을 로드하는 데 사용할 수 있는 메인 메뉴를 만들겠습니다.

Select Skin
Light
Dark

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback