포트나이트 언리얼 에디터에서 화면에 위젯 배치하기 | Fortnite 문서

캔버스 위젯으로는 위젯 슬롯에 위젯을 추가하는 방식으로 화면에 위젯을 배치할 수 있습니다.

다음 코드는 화면 중앙 버튼에 'Center'라는 텍스트를 표시하는 캔버스 위젯의 예시입니다.

Verse

using { /Fortnite.com/Devices }
using { /Verse.org/Simulation }
using { /UnrealEngine.com/Temporary/UI }
using { /Fortnite.com/UI }
using { /UnrealEngine.com/Temporary/SpatialMath}

hello_world_device := class(creative_device):

    # Set the Button device in the Editor to reference the device in the level
    @editable

캔버스 슬롯 세팅

캔버스 슬롯의 다음 필드를 변경하여 캔버스에 위젯을 배치할 수 있습니다.

악령(Fiend)	설명	값
앵커(Anchors)	위젯이 고정될 캔버스 내 위치로, 캔버스의 퍼센티지로 지정됩니다. 캔버스의 크기가 조절되면 위젯은 새 캔버스 내의 앵커에 어태치된 채로 유지됩니다. 위젯의 최대 및 최소 앵커를 지정할 수 있으며, 이를 통해 콘텐츠 크기에 맞춤(Size To Content)이 활성화된 경우 위젯의 크기를 변경할 수 있습니다.	앵커의 X 및 Y 필드의 범위는 0~1입니다. `vector2{X := 0.0, Y := 0.0}`는 캔버스의 왼쪽 상단, `vector2{X := 1.0, Y := 1.0}`는 캔버스의 오른쪽 하단이 됩니다.
정렬(Alignment)	앵커 위치에 배치할 위젯의 부분입니다. 예를 들어 정렬 필드가 `vector2{X := 0.5, 1.0}`인 경우 위젯의 중앙 하단이 앵커 위치에 배치된 것입니다.	정렬의 X 및 Y 필드의 범위는 0~1입니다. `vector2{X := 0.0, Y := 0.0}`는 위젯의 왼쪽 상단, `vector2{X := 1.0, Y := 1.0}`는 위젯의 오른쪽 하단이 됩니다.
오프셋	이 필드는 위젯의 크기 및 위치에 다음과 같은 두 가지 영향을 미칠 수 있습니다. 앵커와 정렬이 둘 다 설정되어 있는 경우, 이 필드에서 위젯을 배치할 앵커로부터의 오프셋을 지정할 수 있습니다. 위젯이 크기가 올바르지 않은 방식으로 고정되어 있는 경우, 이 필드는 위젯에 할당된 크기 공간을 나타낼 수 있습니다. 하지만 콘텐츠 크기에 맞춤이 활성화되어 있는 경우에는 위젯도 필요한 크기를 취해야 합니다.	여백은 반드시 0~1080의 범위 내여야 합니다. 이 해상도는 플레이어의 화면 해상도에 맞춰 스케일 조절됩니다.
콘텐츠 크기에 맞춤(Size To Content)	활성화한 경우, 위젯의 크기를 원하는 대로 변경할 수 있습니다.	`true`/`false`로 이 옵션의 활성화 여부를 나타낼 수 있습니다.

UI 요소의 위치와 레이아웃은 플랫폼에 따라 좌우됩니다. UI 해상도는 플레이어가 사용하는 플랫폼에 따라 결정되며, 해당 UI도 맞춰서 스케일 조절됩니다.

일반적으로 위젯 배치 워크플로는 다음과 같은 순서로 구성됩니다.

앵커로 캔버스에서 위젯이 표시될 위치(캔버스의 크기가 조정되는 경우 포함)를 정확하게 지정합니다.
정렬로 앵커 위치에 배치될 위젯 부분을 지정합니다.
오프셋으로 앵커 포인트로부터 오프셋을 적용합니다.
콘텐츠 크기에 맞춤으로 위젯의 크기를 필요에 따라 조정합니다.

다음은 앵커 위치 기준의 위젯 표시 위치가 오프셋이 변경됨에 따라 어떻게 바뀌는지 보여줍니다.

오프셋 상단 여백이 0.0일 때

오프셋 상단 여백이 50.0일 때

다음은 앵커 위치에 있는 위젯 부분의 '정렬' 필드에 따라 어떻게 변경되는지 보여줍니다.

정렬을 위젯 가운데로 설정했을 때: vector2{X := 0.5, Y := 0.5}

정렬을 위젯 왼쪽 상단으로 설정했을 때: vector2{X := 0.0, Y := 0.0}

다음은 위젯의 크기가 최소 및 최대 앵커에 따라 어떻게 변경되는지 보여줍니다.

최소 및 최대 앵커가 같을 때: vector2{X := 0.5, Y := 0.5}

최소 및 최대 앵커가 다를 때 Minimum := vector2{X := 0.4, Y := 0.4}, Maximum := vector2{X := 0.6, Y := 0.6}

화면상에 위젯 배치하기 예시

다음 코드는 화면 여러 곳의 다양한 포인트에 위젯을 배치하는 예시입니다.

Verse

using { /Fortnite.com/Devices }
using { /Verse.org/Simulation }
using { /UnrealEngine.com/Temporary/UI }
using { /Fortnite.com/UI }
using { /UnrealEngine.com/Temporary/SpatialMath}

hello_world_device := class(creative_device):

    # Set the Button device in the Editor to reference the device in the level
    @editable