Unreal Engine

【UE5】Interior Element Configurator Tutorial Part 8｜UI作成

こんにちは、設計屋です。今回は「Interior Element Configurator」の第7弾として、アニメーション付きのUIの作成方法を紹介します。これまで作成した機能をUIから操作できるようにしていきます。それでは、早速始めましょう！

ステップ1: UMGフォルダの作成

まず、プロジェクトに「UMG」というフォルダを作成し、必要な画像をダウンロードして保存します。画像のダウンロードリンクは詳細欄に記載してあります。

次に、右クリックして「User Interface Widget Blueprint」を作成し、名前を「UMG_Main」とします。これが今回のUI作成に使用するメインのウィジェットになります。

ステップ2: UMGデザイナーの説明

UMGデザイナーについて簡単に説明します。

  • 中央のウィンドウ: UIの見た目を確認できるウィンドウです。Photoshopのドキュメントと同じような役割を果たします。
  • パレット: ボタンなどの様々なウィジェットが用意されています。
  • ヒエラルキー: Photoshopのレイヤーに似ており、ウィジェットを配置するとここに追加されます。
  • ディテール: 各ウィジェットの設定を表示します。ここでアニメーションの編集も行えます。

ステップ3: CarPaint用のUI作成

1. ボタンの追加

  • パレットから「Button」を1つ追加します。
  • 「Anchors」を設定し、Positionを「0」、Sizeを「X: 120、Y: 120」に設定します。
  • Position Xを「10」、Position Yを「-130」に設定し、画面の端から10の距離を保ちます。

2. 画像の追加

  • Buttonの子要素として「Image」を追加し、テクスチャを設定します。
  • テクスチャグループを「UI」に設定し、必要に応じてサイズを調整します。
  • Buttonの背景色のアルファを「0」にして透明にします。

3. 名前の変更

  • ボタンと画像の名前をそれぞれ「B_Color」と「I_Color」に変更します。

ステップ4: CarPaintのボタンを3つ追加

  • パレットから「Horizontal Box」を追加し、サイズと位置を設定します（Size X: 300、Size Y: 100、Position X: 130、Position Y: -120）。
  • Horizontal Boxに「Button」を追加し、サイズを「Fill」に設定します。
  • それぞれのボタンに画像を追加し、背景色のアルファを「0」に設定します。
  • ボタンを複製し、テクスチャを変更します（例: UT_CarPaint、UT_CarPaint_Blue、UT_CarPaint_Silver）。

ステップ5: ドア開閉ボタンの作成

1. 縦に並べるための設定

  • パレットから「Vertical Box」を追加し、サイズと位置を設定します（Size X: 100、Size Y: 300、Position X: -120、Position Y: -310）。
  • Vertical Boxに「Button」を追加し、サイズを「Fill」に設定します。
  • それぞれのボタンに画像を追加し、背景色のアルファを「0」に設定します。

2. 名前の変更

  • ボタンと画像の名前を適切に変更します（例: UT_Light、UT_Door、UT_Env）。

ステップ6: プレイ中にUIを表示

  • 「BP_GM」にUMGを表示させる処理を追加します。
  • 「Create Widget」を追加し、クラスを「UMG_Main」に設定します。
  • 「Event BeginPlay」に繋ぎ、「Add to Viewport」を追加します。

ステップ7: ボタンの機能と紐付け

1. CarPaintのボタン

  • 「B_Silver」を選択し、「OnClicked」を追加します。
  • 「Event Dispatcher」を使用して他のアクターにイベントを送る設定をします。

2. BP_Carの設定

  • 「BP_Car」を開き、「Cast to BP_GM」と「Get Game Mode」を追加し、繋ぎます。
  • 「UMG」を取得し、変数を作成します。
  • 「Event BeginPlay」の後に「Delay」を追加し、処理が先に読み込まれるのを防ぎます。

ステップ8: ボタンの処理を追加

  • 他のボタン（例: B_Red、B_Blue）のイベントも追加します。
  • 各ボタンの変数を設定し、「Switch on Name」で処理を分岐させます。

ステップ9: UIアニメーションの追加

  • 「UA_CarPaint」というアニメーションを追加し、Horizontal Boxと3つのボタンを選択してTrackに追加します。
  • ボタンのスケールを変更するアニメーションを設定します。
  • 他のUI要素にも同様のアニメーションを設定します。

ステップ10: アニメーションの再生

  • ボタンのOnClickedイベントにアニメーションの再生処理を追加します。
  • 「Flip Flop」を使用してアニメーションを先頭から再生、逆方向から再生する処理を追加します。

完成

これでUIのアニメーション付きボタンが完成しました。プレイして動作を確認し、問題がないことを確認します。

お疲れ様でした！これで「Car Configurator」のチュートリアルは終了です。質問があればコメントで教えてください。今後もCGに関するチュートリアルをアップしていくので、チャンネル登録と高評価をお願いします。ありがとうございました！

-Unreal Engine
-