![見出し画像](https://assets.st-note.com/production/uploads/images/116866622/rectangle_large_type_2_56bbaaf590c65e9add9630801298ff06.png?width=1200)
[UEFN&Verse]ゲームっぽいメッセージウィンドウを出す
2023/12/5時点でUEFN28.00になったらこの記事の一部がエラーになるようになってしまった
バグとして修正されるのかちょっと様子見したいと思う
UEFNでアドベンチャーゲームを作りたい
まずは基本的な挙動として何かを調べると対象に対するメッセージが表示される仕組みを考えてみる
プロジェクトを作る
必要最低限の操作法はこちらを参考に
UEFNを起動してプロジェクトを作成する
テンプレートは何でも良いし、新規に作らなくても既にあるプロジェクト上でも良い
記事ではTestProject002という名前で島テンプレートのBlankを指定している
![](https://assets.st-note.com/img/1695349075007-rmhWFF9965.png?width=1200)
標準のメッセージを出す
まずはボタンを押したら標準のデザインのメッセージウィンドウが出る最低限の仕組みを作ってみる
必要なデバイスをシーンに配置する
コンテンツブラウザから、All > Devices にある
"ポップアップダイアログの仕掛け"をシーンに配置
![](https://assets.st-note.com/img/1695350411072-GdyVX1CApc.png?width=1200)
同じくAll > Devices にある"ボタン"もシーン配置
![](https://assets.st-note.com/img/1695350473409-RMx4sWbyvn.png?width=1200)
Verse Explorerからプロジェクトを右クリックして、
"Add new Verse file to project"を選択
![](https://assets.st-note.com/img/1695380610939-f1V7Lsv2e0.png)
名前を適当に message_dialog_device とつけ [作成]
![](https://assets.st-note.com/img/1695414129812-vu1PgYaOV9.png?width=1200)
コンテンツブラウザの [プロジェクト名]コンテンツ > CreativeDevice の下に作られている message_dialog_deviceVerseクラスをシーンに配置
![](https://assets.st-note.com/img/1695414793595-sPEjjtK8uM.png?width=1200)
スクリプトを組む
Verse Explorerからmessage_dialog_device.verseを開く
![](https://assets.st-note.com/img/1695698937289-q4FovjRYuI.png)
プログラムを以下のように編集する
using { /Fortnite.com/Devices }
using { /Verse.org/Simulation }
using { /UnrealEngine.com/Temporary/Diagnostics }
# See https://dev.epicgames.com/documentation/en-us/uefn/create-your-own-device-in-verse for how to create a verse device.
# A Verse-authored creative device that can be placed in a level
message_dialog_device := class(creative_device):
@editable
_Button : button_device = button_device{}
@editable
_PopupDialogDevice : popup_dialog_device = popup_dialog_device{}
OnBegin<override>()<suspends>:void=
_Button.InteractedWithEvent.Subscribe(OnSelectButton)
_PopupDialogDevice.RespondingButtonEvent.Subscribe(OnDialogClose)
OnSelectButton(Agent :agent) : void=
_PopupDialogDevice.Show(Agent)
return
OnDialogClose(Agent : agent, Index : int) : void=
Print("OKボタンが押された")
return
Verseメニューから [Verseコードをビルド]を選択
メッセージログでビルドが成功したことを確認する
![](https://assets.st-note.com/img/1695414603193-2Fjj90zb7z.png?width=1200)
スクリプトにデバイスを関連付ける
アウトライナー上で message dialog device を選択
詳細タブから[ゲーム中に表示] を オフ
Message Dialog Deviceから
[_Button] にシーンに置いた [ボタン] を選択
[_PopupDialocDevice] にシーンに置いた [ポップアップダイアログ] を選択
![](https://assets.st-note.com/img/1695415876677-4hFVk7mrac.png)
今度はアウトライナー上で生成したポップアップダイアログデバイスを選んで詳細タブから適当にタイトルを入力「ボタンが押された」といれた
反応タイプを 1ボタン に変更
![](https://assets.st-note.com/img/1695416732386-UBdkpefAIe.png)
ここで保存して動作確認する
![](https://assets.st-note.com/img/1695417008815-mnPnouNObz.png?width=1200)
任意のオブジェクトを選択する
アドベンチャーゲームだったら、例えば室内で机を調べたら、なにかアイテムが手に入ったりといったシチュエーションがあると思う
ボタンデバイスはモデルを変更できる
アウトライナーからボタンを選択し、詳細のカスタムメッシュから適当にメッシュを選択する
FBXファイルをコンテンツブラウザに登録しておけばそれを選ぶこともできるが、今回は適当にプリセットの木を選んでみる
![](https://assets.st-note.com/img/1695417351325-SsaZI5aRUi.png?width=1200)
ポップアップダイアログデバイスのタイトルも修正
![](https://assets.st-note.com/img/1695942285734-2PW7plMekM.png)
ここまで動作確認すると、木を選択するとメッセージがでる
![](https://assets.st-note.com/img/1695417614591-cqHOUYT4QN.png?width=1200)
メッセージウィンドウをカスタマイズする
標準のメッセージウィンドウはシステマチックなので、ゲームの世界観を出したいと思うと独自のUIデザインに変えたくなる
ウィジェットブループリントを利用すると簡単にUIをデザインすることができる
画像を用意する
まずはUIの画像を用意する必要がある
![](https://assets.st-note.com/img/1695417736941-IUqi0g6nNy.png?width=1200)
今回は以下のサイトのものを使わせていただいた
画像をプロジェクトに登録する
用意した画像をUEFNエディタのコンテンツブラウザで
All > [プロジェクト名]コンテンツ の下にドラッグすれば登録できる
![](https://assets.st-note.com/img/1695418034272-gUVWaDTV29.png?width=1200)
ウィジェットブループリントを追加
コンテンツブラウザから [(プロジェクト名)コンテンツ] を右クリックし、
コンテンツの追加 > ユーザーインターフェース > ウィジェットブループリントを選択する
![](https://assets.st-note.com/img/1695418174872-hkuGZijr9k.png?width=1200)
ダイアログが開くので Modal Dialog Variant を選択する
![](https://assets.st-note.com/img/1695418300263-xEtlrzNLAY.png?width=1200)
コンテンツブラウザにNewWidgetBlueprintが作られる
これから編集するUIデザインデバイスだ
MessageWidgetBlueprintとリネームしておく
![](https://assets.st-note.com/img/1695898899687-AxSNOcNk5l.png?width=1200)
MessageWidgetBlueprintをダブルクリックすると編集ウィンドウが開く
左側のパレットにはボタンやテキストなどUIに利用できるパーツが並ぶ
中央が編集画面、ここにパーツを配置してレイアウトを調整する
右側の 詳細 には 編集画面 に配置したパーツの詳細情報が表示される
![](https://assets.st-note.com/img/1695943716247-wwCp0jlKFq.png?width=1200)
レイアウトを組む
テキストやボタンを組み合わせてUIをレイアウトするためにはベースとなる枠組みとして Canvas Panel を配置する必要がある
パレットから編集画面にドラッグ&ドロップする
追加すると編集画面に緑色の四角い枠が表示される
![](https://assets.st-note.com/img/1695418589588-OYrmwFJ0PO.png?width=1200)
次はウィンドウの枠をレイアウトする
上で用意したウィンドウ画像をレイアウトする
パレットからImageをCanvas Panelの枠内にドラッグ&ドロップする
![](https://assets.st-note.com/img/1695901088243-z4Ioq1broQ.png?width=1200)
配置したImageの詳細画面からBrush>Imageからテクスチャを指定する
![](https://assets.st-note.com/img/1695901213543-tc9NosvKq2.png)
事前に登録したbox_blueを選ぶ
![](https://assets.st-note.com/img/1695418862220-N2hFBRs9bx.png)
編集画面上で大きさと位置を調整する
![](https://assets.st-note.com/img/1695418922210-BZnaRzKPoU.png?width=1200)
次はクローズボタンを配置する
UEFN Buttoin Qiet を使う
ボタンパーツには何種類かあるのだけどQietが使いやすい気がする
![](https://assets.st-note.com/img/1695419212812-ntwsvBerEh.png?width=1200)
詳細からコンテンツのTextに全角で✖をいれるといい感じの赤い×ボタンになったのでこれでいってみる
日本語環境以外では問題が出るのかもしれない
![](https://assets.st-note.com/img/1695419328942-9oQIp0oBai.png?width=1200)
ウィンドウの右上に配置するとそれっぽくなる
![](https://assets.st-note.com/img/1695419421811-ksWtcmBy3n.png?width=1200)
次はテキストを配置
UEFN Text Blockを使う
大きさを位置を適当に調整する
![](https://assets.st-note.com/img/1695419558683-Z7drMpkZvN.png?width=1200)
テキストの内容はコンテンツのTextに入力できる
![](https://assets.st-note.com/img/1695939708829-o66sfM2yQK.png)
最終的にこのような構成になる
![](https://assets.st-note.com/img/1695419591439-YMcW5siEFv.png)
ボタンを有効化する
デザインが完了したUIをVerseで制御できるようにする必要がある
各パーツに対してどのような意味を持つかを指定するイメージだ
View Bindingsウィンドウ上で指定する
まずはView Bindingsウィンドウを開く
このへんのタブで表示できるはず
![](https://assets.st-note.com/img/1701676250579-WYBzvVWD6x.png?width=1200)
開いたら [ウィジェットを追加]を押す
![](https://assets.st-note.com/img/1695939112338-dY987DMFF7.png?width=1200)
矢印の部分を[→ビューモデルに一方向]に変更する
![](https://assets.st-note.com/img/1695939140083-BreJs2GcSb.png?width=1200)
左側のフィールドを選択する
![](https://assets.st-note.com/img/1695939186287-phZvZIkS3i.png?width=1200)
Get Response Button 1 を選択する
![](https://assets.st-note.com/img/1695939433237-TFkJWGg79z.png?width=1200)
右側のフィールドを選択する
![](https://assets.st-note.com/img/1695939252271-NnM5H26uXG.png?width=1200)
CreativeMediaDialogViewmodel > Response を選択する
![](https://assets.st-note.com/img/1695939378108-KpgWyFioxJ.png?width=1200)
下のフィールドを選択する
![](https://assets.st-note.com/img/1695940535374-NhNoCqadJ7.png?width=1200)
Click Eventを選択する
![](https://assets.st-note.com/img/1695940567239-pOcDz4EvuT.png?width=1200)
最終的にこうなる
![](https://assets.st-note.com/img/1695939535607-Lm94taqk6v.png?width=1200)
これで「配置したボタンは1番目のボタンですよと」指定したことになる
ウェジットブループリントの設定は完了したので、ウィンドウを閉じる
ダイアログに適応する
作成したウェジットブループリントを事前に配置してあるポップアップダイアログに適応することでデザインを変更することができる
アウトライナーからポップアップダイアログを選択し、詳細のModal WidgetのTemplate Override Classに作成したMessageWidgetBlueprintを設定する
![](https://assets.st-note.com/img/1695939859489-zeoWPwWlMG.png)
ここで動作確認するとこんな感じになる
自由なデザインのUIを表示できるようになった
![](https://assets.st-note.com/img/1695939903246-gjH5yrudS2.png?width=1200)
Verse上でボタンをコントロールできるようにはなったがテキストも制御できないと実用的ではない
しかし方法が全然わからないので、判明次第追加しようと思う
Verse上でテキストを制御できるバージョンを追加しました
この記事が気に入ったらサポートをしてみませんか?