皆さんこんにちは。
NakaRyoです。
今回は、”Unreal Engineのウィジェットブループリント実装における「BET数を画面に表示する方法」””についてまとめました。
ゲームUI制作やブループリントの学習を進めている方の参考になれば幸いです。
STEP 1 :レベルの準備
まず、表示用のレベルを準備します。
①Unreal Engineを開き、ファイル → 新規レベル を選択します。
②レベル画面で「空のレベル」をクリックします。
③空のレベルが表示されたら、ファイル → 名前を付けて保存 を選択し、任意のフォルダおよびレベル名を指定します。
ここまでで、表示させるレベルの準備が完了です。
STEP 2 :ウィジェットブループリントの作成
続いて、画面に表示するUI（ユーザーインターフェース）を作成します。
①UI保管用のフォルダを作成し、フォルダ上で右クリック → ユーザーインターフェース → ウィジェットブループリント を選択します。
②ウィジェットブループリント作成時に ユーザーウィジェット を選択します。
③任意のファイル名を入力します。（本記事では WBP_BET とします）
④WBP_BET をダブルクリックし、編集画面を開きます。
以下のように配置を行います（階層別）：
CanvasPanel
⇒Text Box (BET SELECT)
・位置X：640 / 位置Y：210
・Font Size：100
・アンカー：中央上部
⇒Horizontal Box
・位置X：-920 / 位置Y：-560
・サイズX：1850 / サイズY：500
・アンカー：中央下部
⇒Button_BET5(階層 Horizontal Boxの下)
・フィル： 1
・Padding ：10
⇒テキスト（階層 Buttonの下）
・Text名：BET5
・Font size： 100
Button_BET10・Button_BET15・Button_BET20
※Button_BET5と同じ設定の為、説明割愛します。
テキスト名とButton_BET()の数値の部分だけ変更します。
最終的に以下の通りに表示されていれば成功です。
STEP 3 :ウィジェットブループリントのグラフ設定
次に、ボタン押下でBET数を表示させる処理を実装します。
①デザイン画面でコンパイルを実行後、Button_BET5 を選択し、右上の Is Variable にチェックを入れます。
②詳細 → イベント → OnClicked の ＋ボタン をクリックします。
③グラフエディタで以下のノード設定を行います。
・変数作成
変数名：SelectedBet
型：Integer
・ノード構成
On clicked Button_BET5の実行ピンからSET SelectedBetを繋げ、SelectedBetの数値を5にします。
グラフ空欄上を右クリックし、To Text(integer)を選択します。
Set SelectedBetのValueピンとTo textのValueピン同士をノード接続します。
グラフの空部分を右クリックし、Format Text（Textの配下）を選択します
※状況に合わせた表示のチェックを切るとヒットしやすいです。
Format TextのText入力欄に、”BET：{Bet}”を入力し、自動で Bet という入力ピン（Text型）が出現することを確認します。
ToTextのReturnValue を Format Text の Bet ピンにノードを繋ぎます。
デザイナー画面に移行して、テキスト” BET SELECT”を選択状態にし、右上のIs Variableチェックします。
グラフ画面に戻り、変数名（TextBlock67）をグラフ上にドラック＆ドロップし、Get設定します。
Get TextBlock_67の実行ピンからワイヤーを展開し、Set text(text)を選択します。
※候補がいくつか出てくるので、必ず指定した型と同じでないと、ノード接続が出来ないので注意。
（text）の部分まで検索入力することをおすすめします。
最後にFormat Text.Result を SetText.InTextをノード接続
Set SelectedBet の 実行ピンと SetText の 実行ピンをノード接続します。
全体のノード図
この処理を Button_BET10 / 15 / 20 にも実装し、それぞれ数値を変更します。
変化点としては、Selected Betの数値をそれぞれのbet数に変更します。
最後に コンパイルと保存 を行います。
STEP 4 :レベルブループリントの実装
作成したUIをゲーム画面に表示させます。
メニューから レベルブループリントを開く を選択します。
グラフにて以下を実装します。
Create Widgetノードを追加し、先ほど作成したWBP_BETを選択- 以下のノード設定を実施
※今回のノードは、検索で全てヒットするものなので、詳細説明は割愛します。
コンパイルと保存を実行します
STEP 5 :実装確認
最後に再生ボタンを押して確認します。
- ボタンを押す前 → 「BET SELECT」が表示されている状態
- ボタンを押した後 → BET数が反映される状態
この挙動が確認できれば、ウィジェットブループリントによるBET数表示の実装は完了です。
まとめ
本記事では、Unreal EngineのウィジェットブループリントでBET数を画面表示する手順を解説しました。
UIのデザインからブループリント設定、レベルへの組み込みまで
一連の流れを理解しておくことで、ゲーム開発におけるUI実装の応用が広がります。