Verse 스타터 05 포트나이트 언리얼 에디터에서 UI로 NPC 제어하기 | Fortnite 문서

Verse 커맨더 미니게임에는 다음 UI가 있습니다.

캐릭터 명령: 이 버튼은 NPC에 대한 명령(Forward, Turn Left, Turn Right)에 매핑됩니다. 이러한 명령 중 하나를 선택하면 화면 하단의 목록에 명령이 추가됩니다.
Execute: NPC에게 화면 하단에 있는 명령 큐를 수행하라고 지시하는 실행 버튼입니다.
Remove: 목록에 추가된 마지막 명령을 제거하는 제거 버튼입니다.
Reset: 현재 보드를 리셋하여 명령 큐를 지우는 리셋 버튼입니다.
명령 목록: 플레이어가 명령을 추가하면 확장되고 플레이어가 명령을 제거하면 축소되는 동적 명령 목록입니다.

UI는 모두 Verse에서 구현됩니다. Verse UI로 시작하고 작동 방식을 이해하려면 인게임 UI 만들기를 확인하세요.

아래 섹션에서는 이 게임에서 사용되는 커스텀 버튼과 다이내믹 UI를 만드는 방법을 설명합니다.

버튼 만들기

버튼은 활성화되거나 비활성화되었을 때 외관을 처리하는 자체 클래스 minigame_button에서 생성됩니다. 음소거 버튼을 사용했으며, 이 버튼이 텍스트와 아이콘이 있는 가로 스택 박스를 오버레이한 다음 가로 스택 박스가 배경을 오버레이합니다. 이를 통해 포트나이트의 기본 버튼 디자인으로 얻을 수 있는 기능과 반응성을 유지하면서 버튼에 커스텀 룩 이펙트를 생성할 수 있습니다.

SetEnabled() 함수는 버튼의 활성화 여부를 기준으로 버튼 자체의 상호작용성을 설정하고, 사용하는 텍스처와 컬러를 교체합니다.

Verse

# The class for storing all the widget references for a button and setting its look.
minigame_button := class:

    # Store a reference of the overlay for easy removal later.
    var Widget:overlay = overlay:

    # Store a reference of the background texture widget to change easily later.
    BackgroundImage:texture_block = texture_block:
        DefaultImage := Textures.MiniGameUI.T_UI_Button_Blue_Rounded
        DefaultDesiredSize := vector2{X := 256.0, Y := 128.0}

화면에 명령 추가하기

하단에 있는 명령 목록의 각 슬롯은 command_queue 클래스의 인스턴스에 저장됩니다. 이 클래스는 슬롯의 외관을 처리하고 연관된 모든 명령 데이터를 저장합니다.

목록 디스플레이의 왼쪽 및 오른쪽 끝을 나타내기 위해, 목록에 명령이 없을 때도 항상 2개의 슬롯이 있습니다. 플레이어가 새 명령을 선택하면 오른쪽 끝은 명령 아이콘으로 업데이트되고 새로운 오른쪽 끝 슬롯이 추가됩니다. 그런 다음 명령 데이터 표현이 변수 CommandData에 저장됩니다.

플레이어가 제거 버튼을 선택하면 오른쪽 끝 위젯이 캔버스에서 제거되고 마지막 명령이 오른쪽 끝 슬롯으로 변경됩니다. 더 이상 이 슬롯과 관련된 명령이 없으므로 변수 CommandData는 false로 설정됩니다.

Verse

# A class that stores the image (texture) that is used to represent a command in the queue on screen
# and the enum associated with that command.
command_queue := class:
    # Store a reference of the overlay for easy removal later.
    var Widget:overlay = overlay{}

    # Store a reference of the background texture block to change the image easily later.
    BackgroundImage:texture_block = texture_block:
        DefaultImage := Textures.MiniGameUI.TransparentImage512
        DefaultDesiredSize := vector2{X := 88.0, Y := 88.0}

전체 UI 관리하기

UI의 코드 대부분은 verse_commander_minigame_ui 클래스에 있습니다. 이 클래스는 각 버튼의 외관과 고유한 텍스트 및 아이콘을 구성하고, UI 레이아웃을 생성하고, 명령이 추가 또는 제거될 때 변경사항을 처리합니다.

커스텀 이미지는 UEFN에서 Verse로 노출되는 텍스처입니다. 프로젝트에 임포트된 텍스처의 액세스 레벨은 submodules.verse 파일에서 정의됩니다. 자세한 내용은 Verse에 에셋 노출하기를 확인하세요.

이 코드는 UI 내 모든 위젯의 위치와 외관을 지정해야 하므로 다른 일부 파일보다 길어 보입니다. 대부분의 비헤이비어는 세 가지 함수 ResetCommandQueue(), Remove(), AddCommandToDisplay()에만 존재합니다.

Verse

# This file contains all the code to create and modify the UI
# in the Verse Commander minigame.
# The UI for the game contains:
#  - Buttons that map to commands for the NPC: forward, turn left, turn right.
#  - An execute button that tells the NPC to perform the queue of commands.
#  - A remove button that removes the last command added.
#  - A reset button that resets the current board and clears out the command queue.
#  - A dynamic list of commands that grows wider when a player adds commands and shrinks when a player removes commands.

using { /Fortnite.com/Devices }

다음 단계

마지막 단계인 7. 최종 결과에서 커스텀 캐릭터를 제작하기 위한 전체 코드 목록을 찾을 수 있습니다.

이제 커스텀 UI가 생겼으니, 다음 단계에서는 게임 및 이미 생성된 모든 요소를 관리하는 방법을 보여드리겠습니다.

6. 게임 루프 관리하기
Verse 스타터 템플릿에서 미니게임의 핵심 비헤이비어를 정의하는 방법을 알아봅니다.