このようなクリックできるUIを作っていきます
コードは以下の動画を参考しています。
コードの全体
using { /Fortnite.com/Devices }
using { /Verse.org/Simulation }
using { /UnrealEngine.com/Temporary/Diagnostics }
using { /UnrealEngine.com/Temporary/UI }
using { /UnrealEngine.com/Temporary/SpatialMath }
using { /Fortnite.com/UI}
UI := class(creative_device):
@editable
ButtonUI :button_device = button_device{}
TextForButton<localizes>:message="Hello"
var PlayerCanvas : canvas = canvas{}
OnBegin<override>()<suspends>:void=
ButtonUI.InteractedWithEvent.Subscribe(HandleButtonPress)
CreateUI() : canvas =
ButtonForCanvas : button_quiet = button_quiet{DefaultText := TextForButton}
ButtonForCanvas.OnClick().Subscribe(HandleUIButtonClick)
NewCanvas : canvas = canvas:
Slots := array:
canvas_slot:
Anchors := anchors{Minimum := vector2{X := 0.5, Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}} # (0, 0) is to left (1, 1) is to bottom right
Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
Alignment := vector2{X := 0.5, Y := 0.5} # Center is anchored
SizeToContent := true
Widget := ButtonForCanvas
HandleButtonPress(Agent : agent) : void =
if (Player := player[Agent],PlayerUI := GetPlayerUI[Player]):
set PlayerCanvas = CreateUI()
PlayerUI.AddWidget(PlayerCanvas,player_ui_slot{InputMode :=ui_input_mode.All})
HandleUIButtonClick(Message : widget_message) : void =
Player :=Message.Player
if(PlayerUI := GetPlayerUI[Player]):
PlayerUI.RemoveWidget(PlayerCanvas)
コードの解説
冒頭
今回の仕組みではボタンデバイスを使うため、11行目で定義しています。
12行目でクリックできるボタンに表示させる文字を定義しています。
String型ではなくmessage型なのは後に、はのDefaultTextの値として設定するためです。 (DefaultTextはmessage型である必要があります)
13行目で、後にcanvas型の情報が入る変数を定義しておきます
関数宣言
20行目からCreateUIを宣言しています。
コードブロックでは、ボタンを画面上に作成するために必要なcanvas型の情報作成して返すということをしています。
21行目でbutton_quietクラスのインスタンスを作成して、DefaultTextメンバー=TextForButtonとしています。
button_quietクラス自体にメンバーは存在しませんが、親であるtext_button_baseクラスのメンバーにDefaultTextが存在します。※
ちなみにtext_button_baseクラスの子には以下の3つがあり今回はbutton_quietを使っています。
この3つの違いはUIの色になります。
button_loud→黄色
button_regular→青
button_quiet→透明
22行目は、画面上のボタンをクリックしたらHandleUIButtonClick関数を実行するという意味です。
OnClickメソッドも親であるtext_button_baseクラスを対象とするため、button_quietクラスも対象にできます。
23行目からCreateUIによって返される値を設定するため、canvasクラスのインスタンスを作成しています。
CanvasクラスにはSlotsというメンバーがあり行目以降その値を定義しています。
Slotsは配列であり、またSlotsの型であるcanvas_slotは構造体であるため、難解な式になっています。
読みやすくするため配列定義と構造体のインスタンス化の表記がドキュメントのよくある表記と少し異なっています。
今回のコードの書き方
構造体のメンバーの意味はそれぞれ以下のようになります。
今回はボタンを真ん中に配置するため、アンカーの位置は真ん中、ボタンの相対位置は0(アンカーの場所)、ピボットは0.5でボタンの真ん中とします。
サイズは文章に自動に合うように、SizeToContentをtrueとしています。
33行目からはHandleButtonPress関数を宣言しています。
InteractedWithEventをきっかけに呼び出されるため、引数はagent型となります。
コードブロックの意味は以下のようになります。
34行目のifは条件分岐のためと言うよりは、失敗コンテキストであるif文の括弧内に失敗する可能性のある式を書くためのものです。
36行目のAddWidgetメソッドはplayer_ui情報を対象とし、引数にwidget型と、player_ui_slot型を持ちます。
そのためwidget型の方は、widget型の子クラスであるcanvas型のPlayerCanvasを書きます。ここで、ボタンの位置や文章を決定しています。
player_ui_slot型は構造体でそのメンバーのInputModeの型であるui_inout_modeは列挙型です。列挙型のメンバーのAllにアクセスして、InputModeの値としています。
ここでは、ボタンが表示されている時の他の入力を許可するかを決定しています。
Allだとボタンが表示されている間、プレイヤーは動くことも視点を移動させることもできません。
39行目からは、HandleUIButtonClick関数を宣言しています。
OnCrickメソッドをきっかけに呼び出されるため、引数はwidget_message型となります。
コードブロックの意味は以下のようになります。
widget_messageは構造体で、メンバーであるPlayerにアクセスして、player情報を取得しています。
41行目のif文はHandleButtonPress関数の時と同様に失敗コンテキストを使うためのものです。
RemoveWidgetメソッドはplayer_ui情報を対象とし、引数にwidget型を持ちます。
そのため、widget型の子クラスであるcanvas型のPlayerCanvasを書きます。
OnBegin~
コードブロックの意味は
ボタンを押したらHandleButtonPressを呼び出す
となります。
このように動けば完成です。
コメント
コメント一覧 (1件)
[…] あわせて読みたい 【UEFN】VerseでクリックできるUIを表示させる – WithCreative […]