Unreal Engine

【UE5】Interior Configurator Tutorial Part 9-3|ミニマップボタンのカラーを変更する方法

Unreal Engine 5でのアーキビジュアライゼーション(Archviz)プロジェクトの一環として、ミニマップボタンのカラーを切り替える機能を実装する方法を解説します。このガイドでは、ボタンがアクティブか非アクティブかに応じて、ボタンの色が自動的に変更されるように設定します。初心者でも手順がわかりやすいように、ステップバイステップで説明します。

ミニマップボタンのアクティブ/非アクティブ状態を設定

BP_FirstPersonCharacterを開きます。

タイプ入力セクションの確認:

BP_FirstPersonCharacter内のタイプ入力セクションを見つけます。ここで、アクティブ状態と非アクティブ状態の名前を変更するためにPrint Stringノードを追加します。

  • アクティブ時: menu_activeという名前に設定し、青色に変更します。
  • 非アクティブ時: menu_inactiveという名前に設定し、赤色に変更します。

動作確認

Compileボタンを押してコンパイルし、Tabキーを押して状態が正しく表示されるか確認します。

ミニマップボタンのスタイル設定

ウィジェットを設定

BP_MainWidgetというブループリントを開き、ミニマップボタンを選択します。詳細パネルからボタンの名前をコピーし、ボタンの変数がチェックされていることを確認します。

アイコンとカラーの設定

  • アクティブ状態: アイコンを設定し、ボタンの色を緑色に設定します。
  • ホバーと押された時の状態: ホバーや押された時のボタンの状態も設定し、選択したテクスチャを適用します。

非アクティブ状態の設定

button_active変数を右クリックし、Duplicateを選択して複製します。これをbutton_inactiveという名前に変更し、赤色に設定します。

イベントの作成とロジックの設定

タスクバーのミニマップボタンがアクティブの時に緑色、非アクティブの時に赤色にします。

カスタムイベントの作成

空のキャンバス上で右クリックし、Add Custom Eventを選択します。これをRED_BTNGREEN_BTNという名前に変更し、入力を正しく接続します。

ボタンのトグル機能の実装

BP_FirstPersonCharacterに戻り、B入力からカスタムイベントを呼び出し、A入力からも別のイベントを呼び出して接続します。

変数の追加

初期画面でミニマップが表示されているのに、Tabを押してタスクバーを表示したときにミニマップボタンが緑色になっていないので修正します。

この場合は、Tabを押したときにミニマップボタンの状態(アクティブか非アクティブか?)を判断して緑色か赤色かを表示するようにします。

新しいBoolean変数is_button_activeを作成し、ボタンの状態を格納するように設定します。これを使って条件をチェックし、条件に応じてイベントが実行するようにします。

GREEN_BTNのクリックイベントとRED_BTNのクリックイベントをそれぞれ保存します。

最後に、変数「IsButtonActive?」をGETして「Branch」の「Condition」に接続し、ミニマップのアクティブ状況をブランチに渡します。

これにより、ミニマップがアクティブであれば「緑色」、非アクティブであれば「赤色」が表示されます。

動作確認

最後に、すべてをコンパイルして保存し、テストを行います。Tabキーを押すと、ミニマップが表示され、ボタンの色が緑色に変わります。ミニマップが非表示になると、ボタンの色が赤色に変わります。この状態を繰り返して、動作が期待通りであることを確認します。


これで、Unreal Engine 5でミニマップボタンのカラーを切り替える機能を実装する方法がわかりました。初心者の方でも、今回の手順を踏めば簡単に実装できるはずです。次回のチュートリアルをお楽しみに!

参考動画

-Unreal Engine
-