Unreal Editor for Fortnite でウィジェットを画面上に配置する | 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

キャンバススロットを設定する

ウィジェットをキャンバス内に配置する際は、キャンバススロットの以下のフィールドを調整できます。

フィールド	説明	値
Anchors (アンカー)	ウィジェットが固定されているキャンバス内の場所で、キャンバスの比率で指定されます。キャンバスのサイズが変わっても、このウィジェットは元の固定位置にアタッチされたままとなります。ウィジェットの最大アンカーと最小アンカーを指定できます。SizeToContent が有効な場合は、これによってウィジェットのサイズが変わることがあります。	アンカーの 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}` はウィジェットの右下になります。
オフセット	このフィールドは、次のようにウィジェットのサイズと位置に影響を及ぼします。 [Anchors (アンカー)] と [Alignment (アラインメント)] の両フィールドが設定されている場合は、このフィールドでアンカーからのオフセットを指定して、ウィジェットを配置できます。固定されているウィジェットのサイズが不適切な場合は、そのウィジェットにアロケートされているサイズスペースをこのフィールドで表示できます。ただし、SizeToContent が有効な場合は、ウィジェットによって必要なサイズに調整されます。	マージンは 0 ～ 1080 の範囲内である必要があります。この解像度は、プレイヤーの画面の解像度に合わせてスケールされます。
SizeToContent	有効にすると、ウィジェットのサイズを希望どおりに変更できます。	このオプションが有効かどうかは `true` / `false` で示されます。

UI 要素の位置とレイアウトはプラットフォームに依存します。 UI の解像度はプレイヤーが使用しているプラットフォームによって定義され、UI はそれに合うようにスケールされます。

全般的に、ウィジェットを配置するためのワークフローは、次の順序で各フィールドを設定する流れになります。

[Anchors (アンカー)] で、ウィジェットをキャンバスのどの場所に表示するかを指定します。キャンバスのサイズが変更される場合も含みます。
[Alignment (アラインメント)] で、アンカー位置に配置するウィジェットの部分を指定します。
[Offsets (オフセット)] で、アンカーポイントからのオフセットを適用します。
SizeToContent で、必要に応じてウィジェットのサイズを変更します。

次の画像では、オフセットマージンの変更により、アンカー位置を基準とするウィジェットの表示位置がどのように変わるかを示しています。

オフセットトップマージンは 0.0

オフセットトップマージンは 50.0

次の画像では、Alignment フィールドの変更により、アンカー位置にあるウィジェットの部分にどのような影響が及ぶかを示しています。

ウィジェットの中央に設定されたアラインメント、vector2{X := 0.5, Y := 0.5}

ウィジェットの左上に設定されたアラインメント、vector2{X := 0.0, Y := 0.0}

次の画像では、最小アンカーと最大アンカーの変更により、ウィジェットのサイズにどのような影響が及ぶかを示しています。

最小アンカーと最大アンカーが同じ：vector2{X := 0.5, Y := 0.5}

最小アンカーと最大アンカーが異なる：最小：= vector2{X := 0.4, Y := 0.4}、最大：= 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

キャンバス スロットを設定する

画面上でのウィジェットの配置例

キャンバススロットを設定する