Verse スターター 05 Unreal Editor for Fortnite の UI で NPC を制御する | Fortnite ドキュメンテーション

Verse コマンダーミニゲームには、以下の UI があります。

キャラクターコマンド：これらのボタンは、NPC ([Forward (前進)]、[Turn Left (左に向く)]、[Turn Right (右に向く)]) のコマンドにマッピングしています。これらのコマンドのいずれかを選択すると、画面の下部にあるリストに追加されます。
実行：画面の下部にあるコマンドのキューを実行するように NPC に指示する [Execute (実行)] ボタン。
削除：リストに追加された最後のコマンドを削除する [Remove (削除)] ボタン。
リセット：現在のボードをリセットし、コマンドキューをクリアする [Reset (リセット)] ボタン。
コマンドリスト：プレイヤーがコマンドを追加したときに大きくなり、プレイヤーがコマンドを削除すると小さくなるコマンドの動的リスト。

UI はすべて Verse で実装されています。 Verse 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」ファイルで定義されます。詳細については、「UEFN 内のアセットを Verse に公開する」を参照してください。

UI のすべてのウィジェットの位置と外観を指定する必要があるため、このコードは他のファイルより長いように見えます。ほとんどの動作は、3 つの関数 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 }

次のステップ

UI を作成するためのコードの完全なリストについては、最終ステップ「7. 最終結果」を参照してください。

カスタム UI を設定したので、次のステップでは、ゲームおよび作成したすべての項目を管理する方法を紹介します。

6. ゲームループを管理する
Verse スターターテンプレートでミニゲームのコアの動作を定義する方法の詳細を説明します。