【UE5】Interior Configurator Tutorial Part 7-3｜3Dウィジェットにホバーアニメーションを追加する方法

2024年12月7日

Unreal Engine 5で3Dウィジェットの素材セレクターを作成する際の、ディテールテキストのアニメーション設定に関するチュートリアルをご紹介します。この手順を通じて、ホバーアクションに応じたテキストの表示とアニメーションを設定する方法を学びます。初心者でも理解しやすいように、具体的な手順を詳しく説明します。

1. ウィジェットの準備

まず、3DウィジェットのPOI（ポイント・オブ・インタレスト）ウィジェットを開きます。これにより、ウィジェットのカスタマイズを始められます。

2. オーバーレイコンポーネントの追加

ウィジェットの検索パレットから「Overlay」コンポーネントを探し、キャンバスパネルにドラッグして追加します。この際、必ずボタンの上ではなく、キャンバスパネルの上にドロップするようにします。

設定の調整

サイズ: Xサイズを180、Yサイズを40に設定します。
位置: X座標はアイコンの中心に設定し、Y座標も同様にアイコンに合わせます（厳密でなくて構いません）。
ピボット: デフォルトのピボット値を0に設定します。

2ce20f46a047eeb011373217406d3841

3. ボーダーコンポーネントの設定

次に、「Border」コンポーネントをオーバーレイコンポーネントにドラッグします。ディテールパネルで、水平および垂直方向のアライメントをフルサイズに調整します。

104c92b4eb5231d0b74456cdee3dc74f

カラー設定

オーバーレイコンポーネントの階層の変更：Zオーダーを-1に設定します。
ボーダーコンポーネントの色の変更：色を黒（Alpha 0.5）に設定します。
「Draw As」を「Rounded Box」に変更し、Corner Radiusを設定します。

79d63e223196462e9b6b77409c4b21c4

8bf4ea7db3553331459f149e43f0686f

62b9ceb3c5474d35b9a4e851178cd5f8

4. 背景ぼかしの追加

「Background Blur」コンポーネントをオーバーレイコンポーネントにドラッグします。次に、以下の設定を行います。

アライメント：水平および垂直方向のアライメントをフルサイズに調整します。
ぼかしの強さ：3に設定します。
位置：ボーダーコンポーネントの上に配置します。
ピボット：0に設定します。

d6d3241284370324c2f81779b423a96c

これで、ぼかし効果がボーダーの背景として表示されるようになります。設定をコンパイルし、テストを行います。

5. アイコンの明るさ調整

次に、アイコンのボタンを選択し、ノーマルスタイルの色を「Full White」に変更します。テストを行い、アイコンがより明るく表示されることを確認します。

b6fdda289410af70be20b7609e544747

6. テキストコンポーネントの追加

「Text」コンポーネントをボーダーコンポーネントにドラッグし、次の設定を行います。

パディングの削除: ディテールパネルでパディングを一旦「0」にします。
フォント：Font>Typefaceを「Light」にし、Sizeを「12」に設定します。
アライメント: 水平アライメントを左側、垂直アライメントを中央に設定します。
テキスト内容: 「Floor Material」と入力します。
パディング調整：Leftを「40」に設定します。

448c4de43f7ef2698c8a4ed1cfb2446e

7. テキストアニメーションの設定

オーバーレイコンポーネントを選択し、レイアウトボタンをクリックしてアニメーションツールを表示します。

フェードインアニメーションの作成

アニメーション作成: プラスボタンをクリックして「Fade In」アニメーションを作成します。
トラック追加: オーバーレイコンポーネントを選択し、「Transform」設定でX値を0に設定し、最初のキーアニメーションを追加します。
タイムラインの調整: タイムラインのスライダーを0.35に移動し、X値を0に設定してキーアニメーションを追加します。

タイムライン：0秒時

b92dd6164c76a92c1dd2c130d4ab3f2e

タイムライン：0.35秒時

667ef0d1e1d80761abf83e4a4a6bbfe1

フェードアウトアニメーションの作成

アニメーションの複製: 「Fade In」アニメーションを複製して「Fade Out」に名前を変更します。
キーアニメーションの設定: X値を1に設定し、最初のキーアニメーションを追加します。次に、タイムラインを0.35に移動し、X値を0に設定してキーアニメーションを追加します。

タイムライン：0秒時

b9bb3aacc3cb814b35aa48049d51709a

タイムライン：0.35秒時

dda5463c08684226f8ade8c33eed9683

8. マウスホバーイベントの設定

最後に、ホバーイベントを設定してテキストを表示・非表示にします。

ホバーイベントの設定: アイコンボタンを選択し、ホバーイベントを追加します。
フェードインアニメーションのリンク: フェードインアニメーションをプレイするノードをキャンバスにドラッグし、ホバーイベントとリンクします。
フェードアウトアニメーションのリンク: フェードアウトアニメーションも同様に設定します。

62e747c333f1a36edb439f4ab1bc546b

4c8b31583c31e54d1527bf0151eee7f0

9. テストと完成

最後に設定をコンパイルし、テストを行ってアニメーションが期待通りに動作するか確認します。

以上で、Unreal Engine 5を使用して3Dウィジェットにホバーアニメーションを追加する手順が完了です。

参考動画

-Unreal Engine
-Unreal Engine 5.4