Unity開発者がUnreal Engineを始める前に知っておきたい違いと導入手順【比較・入門】②

Unity開発者がUnreal Engineを始める前に知っておきたい違いと導入手順【比較・入門】②

前回はUnreal Engineでログを出すところまではできましたね。

今回は、UIボタンの使用方法について解説します。

■目次

・環境

・UIボタンを使用したコールバック処理の登録方法

・さいごに

■環境

前回と同様「UnitTest」プロジェクトを使用していきます。

前回記事のURL：

https://www.easyassets-eza.jp/tech_pg_014/

バージョン：

Unreal Engine 5.5.3

■UIボタンを使用したコールバック処理の登録方法

Unityでは、

Button button;

button.onClick.AddListener(() => Hoge());

やインスペクター上からイベント登録をするのが一般的だと思います。

ではUnreal EngineのBlueprintでの実装方法を見ていきましょう。

UIボタンを配置し、ボタンを押したときに「Hoge!」とログ出力するようにします。

▼０１．ボタン配置用のBlueprintを作成します。
※UI用のBlueprintのため、ウィジェットブループリントを選択します。

▼０２．名前を「WBP_ButtonTest」とします。

▼０３．「WBP_ButtonTest」を開き、階層ウインドウに「CanvasPanel」と「Button」ウィジェットを画像のように配置してください。

▼０４．追加したButtonWidgetを選択し、詳細ウインドウの「Is Variable」にチェックをつけてください。

※これでBlueprint上でこのウィジェットを変数として扱うことができるようになります。

▼０５．名前を分かりやすくするために「TestButton」に変更します。
※座標をX:100,Y:100、サイズをX:100,Y:30にしておきます。

▼０６．「TestButton」の詳細ウインドウの下にある「On Clicked」をクリックしてください。2枚目の画像のように切り替われば成功です。

▼０７．関数「On Clicked」のイベントグラフ内で右クリックし「Print String」ノードを作成します。

▼０８．ログ出力で「Hoge!」という文字列が出るように設定します。

▼０９．「WBP_ButtonTest」をコンパイルして保存します。
※保存できたら閉じます。

▼１０．コンテンツブラウザ上で右クリックし、新規レベル「LV_ButtonTest」を作成します。

▼１１．「LV_ButtonTest」を開き、レベルブループリントを開きます。

▼１２．「LV_ButtonTest」のレベルブループリントの「BeginPlay」ノードの近くで右クリックし、「Create Widget」ノードを作成します。
作成したらClassピンに「WBP_ButtonTest」を登録してください。

▼１３．画面に描画するために「Add to Viewport」ノードを作成します。
※ピン Return Value をドラッグしながら右クリック。

▼１４．「LV_ButtonTest」を再生すると、ボタンが表示されるようになります。

▼１５．ボタンをクリックして「Hoge!」と出力されれば成功です！

■さいごに

いかがでしたか？

ボタンには「On Clicked」という関数があり、そこで処理を実装することでログが出力される仕組みです。

次回は、動的なレベル切り替えの方法について触れていこうと思います。