次の操作によってウィジェットをインタラクション可能にできます。
AddWidget()関数を使ってウィジェットを追加する際に、player_ui_slot{InputMode := ui_input_mode.All }引数を追加する。イベント ハンドラをウィジェットのイベントにバインディングする。
現在、次のウィジェットをインタラクション可能にすることができます。
次のセクションでは、これらのウィジェットをインタラクション可能にする方法の例を示します。
ボタンのインタラクション
次のステップに従ってボタンを含む UI を作成し、プレイヤーがそのボタンとやり取りした際に、指定したボタン テキストを画面にプリントする動作を加えます。
先述の「ウィジェットを削除する」セクションで作成した Verse ファイルを開きます。
「
CreateMyUI()」という名前の関数を作成します。これを使って UI を作成します。CreateMyUI() : canvas = MyUIButton : button_loud = button_loud{DefaultText := TextForMyUI} MyInteractableButtons : canvas = canvas: Slots := array: canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}} Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.5, Y := 0.5} SizeToContent := true Widget := MyUIButton return MyInteractableButtonsMaybeMyUIPerPlayerの型を[player]?canvasに変更します。var MaybeMyUIPerPlayer : [player]?canvas = map{}新しい関数
CreateMyUI()を呼び出すために、NewUIの割り当てを変更します。Verse# UI are added per Player. HandleButtonInteraction(Agent : agent) : void = if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]): if (MyUI := MaybeMyUIPerPlayer[InPlayer]?): PlayerUI.RemoveWidget(MyUI) if (set MaybeMyUIPerPlayer[InPlayer] = false) {} else: NewUI := CreateMyUI() PlayerUI.AddWidget(NewUI) if (set MaybeMyUIPerPlayer[InPlayer] = option{NewUI}) {}新しいウィジェットを追加する際に
player_ui_slot{InputMode := ui_input_mode.All}引数を加えて、このウィジェットの作成時にプレイヤーがキャンバスでカーソルを使用できるようにします。Verse# UI are added per Player. HandleButtonInteraction(Agent : agent) : void = if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]): if (MyUI := MaybeMyUIPerPlayer[InPlayer]?): PlayerUI.RemoveWidget(MyUI) if (set MaybeMyUIPerPlayer[InPlayer] = false) {} else: NewUI := CreateMyUI() PlayerUI.AddWidget(NewUI, player_ui_slot{InputMode := ui_input_mode.All}) if (set MaybeMyUIPerPlayer[InPlayer] = option{NewUI}) {}すべての UI ボタンには、サブスクライブ可能な
OnClick()listenableイベントが含まれています。 このイベント ハンドラには、void戻り型とwidget_message型のパラメータが 1 つ必要になります。CreateMyUI() : canvas = MyUIButton : button_loud = button_loud{DefaultText := TextForMyUI} MyUIButton.OnClick().Subscribe(HandleSelectedUIButton) MyInteractableButtons : canvas = canvas: Slots := array: canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}} Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.5, Y := 0.5} SizeToContent := true Widget := MyUIButton return MyInteractableButtons HandleSelectedUIButton(Message : widget_message) : void = # プレイヤーがそのボタンを押した場合の動作を定義しますHandleSelectedUIButtonで、ボタンのテキストを画面にプリントして、画面からウィジェットを削除します。widget_messageでは、どのプレイヤーと UI 要素がそれを選択したかがわかっているため、その情報を使ってボタンのテキストを取得し、プレイヤーに表示されているウィジェットを特定して画面から削除できます。VerseHandleSelectedUIButton(Message : widget_message) : void = if (PlayerUI := GetPlayerUI[Message.Player], MyUI := MaybeMyUIPerPlayer[Message.Player]?, SelectedButton := text_button_base[Message.Source]): Print("Player selected {SelectedButton.GetText()}") PlayerUI.RemoveWidget(MyUI) if (set MaybeMyUIPerPlayer[Message.Player] = false) {}この例の全体的なコードは次のとおりです。
Verseusing { /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
スライダーのインタラクション
次の手順に従うと、スライダーを含む UI を作成し、プレイヤーがスライダーを操作したときに設定値を画面に出力する動作を追加できます。
「ボタンのインタラクション」で作成した Verse ファイルを開きます。
スライダーで「
CreateMyUI()」という名前の関数を更新します。CreateMyUI() : canvas = MyUIButton : button_loud = button_loud{DefaultText := TextForMyUI} MyUIButton.OnClick().Subscribe(HandleSelectedUIButton) MyUISlider : slider_regular = slider_regular: DefaultValue := 5.0 DefaultMinValue := 0.0 DefaultMaxValue := 10.0 DefaultStepSize := 0.5 MyInteractableWidgets : canvas = canvas: Slots := array: canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}} Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.5, Y := 0.5} SizeToContent := true Widget := MyUISlider canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.6}, Maximum := vector2{X := 0.5, Y := 0.6}} Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.5, Y := 0.5} SizeToContent := true Widget := MyUIButton return MyInteractableWidgetsすべての UI スライダーには、サブスクライブできる
OnValueChanged()listenableイベントがあります。 このイベント ハンドラには、void戻り型とwidget_message型のパラメータが 1 つ必要になります。CreateMyUI() : canvas = MyUIButton : button_loud = button_loud{DefaultText := TextForMyUI} MyUIButton.OnClick().Subscribe(HandleSelectedUIButton) MyUISlider : slider_regular = slider_regular: DefaultValue := 5.0 DefaultMinValue := 0.0 DefaultMaxValue := 10.0 DefaultStepSize := 0.5 MyUISlider.OnValueChanged().Subscribe(HandleValueChangedUISlider) MyInteractableWidgets : canvas = canvas: Slots := array: canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}} Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.5, Y := 0.5} SizeToContent := true Widget := MyUISlider canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.6}, Maximum := vector2{X := 0.5, Y := 0.6}} Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.5, Y := 0.5} SizeToContent := true Widget := MyUIButton return MyInteractableWidgets HandleValueChangedUISlider(Message : widget_message) : void = # プレイヤーがスライダーの値を変更したときに何が起こるかを定義しますHandleValueChangedUISliderで、スライダーの値を画面に出力します。widget_messageはどのプレイヤーが操作し、どの UI 要素を選択したかを認識するため、その情報を使用してスライダーの値を取得し、プレイヤーに表示されるウィジェットを見つけることができます。VerseHandleValueChangedUISlider(Message : widget_message) : void = if: PlayerUI := GetPlayerUI[Message.Player] MyUI := MaybeMyUIPerPlayer[Message.Player]? ChangedSlider := slider_regular[Message.Source] then: Print("Player changed slider value to {ChangedSlider.GetValue()}")この例の全体的なコードは次のとおりです。
Verseusing { /Fortnite.com/Devices } using { /Verse.org/Simulation } using { /UnrealEngine.com/Temporary/UI } using { /Fortnite.com/UI } using { /UnrealEngine.com/Temporary/SpatialMath } interactable_slider := class(creative_device): # Set the Button device in the Editor to reference the device in the level @editable