【UE5】Interior Configurator Tutorial Part 3｜タスクバーウィジェットのアニメーション設定

Unreal Engine 5でのArchviz Blueprintの作成: タスクバーウィジェットのアニメーション設定

本記事では、Unreal Engine 5を使用してタスクバーウィジェットのアニメーションを作成する方法を解説します。この手順に従うことで、タスクバーが画面の下からフェードインし、再度タブキーを押すとフェードアウトするようになります。

1. タスクバーのアニメーション設定

まず、BP_Mainウィジェットに戻り、Designerタブをクリックします。左側のパネルからTaskbar_Panelを選択し、詳細パネルで「Position Y Offset」や「Size Y」を確認します。これらの値を覚えておきましょう。

1. タスクバーを画面下に移動:
   • タスクバーを選択した状態で、Position Yの値を調整して、タスクバーが画面下に配置されるようにします。
2. アニメーションの作成:
   • Animationタブをクリックし、レイアウトにドッキングします。
   • Fade Inという新しいアニメーションを作成し、Trackボタンをクリックしてタスクバーを選択します。
   • タイムラインの開始位置にPosition Yのキーを追加し、その後、タイムラインを1秒に移動して、元の値（-120）に戻します。これで、タスクバーが下から上にフェードインするアニメーションが完成します。
3. オフセットとサイズのアニメーション:
   • Offset RightとSize Yも同様にアニメーションを設定します。Offset Rightを0に戻し、Size Yを120に設定することで、タスクバーが画面全体に広がる効果が得られます。
4. 透明度のアニメーション:
   • タイムラインを0に設定し、Opacityを0にして最初のキーを追加します。その後、タイムラインを1秒に移動してOpacityを1に戻します。さらに、タイムラインを0.7秒に移動し、Opacityを0.5に設定することで、スムーズなフェードイン効果を実現します。
5. フェードアウトアニメーションの作成:
   • Fade Outという新しいアニメーションを作成し、タスクバーが少し上に移動しながらフェードアウトするように設定します。これもPosition YとOpacityのキーを追加して設定します。

2. ブループリントの調整

次に、作成したアニメーションをブループリントで制御します。

1. イベントの設定:
   • Event Constructを使って、Fade Inアニメーションが自動的に再生されるように設定します。Play Animationノードを使ってFade Inを再生し、イベントを接続します。
2. タブキーでの操作:
   • BP_FirstPersonCharacterに移動し、タブキーの入力イベントを設定します。タブキーが押されたときにタスクバーが表示され、再度押されたときにタスクバーが非表示になるように制御します。
3. ゲームのポーズ:
   • タスクバーが表示されたときにゲームがポーズするように設定します。これには、Set Game Pausedノードを使用し、タスクバーがフェードインするときにゲームがポーズされ、フェードアウトするときに再開されるようにします。
4. マウスカーソルの制御:
   • タスクバーが表示されている間、マウスカーソルが表示されるようにし、非表示になるときにカーソルも消えるように設定します。これには、Set Show Mouse CursorノードとSet Input Mode Game Onlyノードを使用します。

3. 最終調整

最後に、テキストの表示を調整します。タブキーを押した際に表示されるテキストを削除するか、適宜変更して完成です。

これで、Unreal Engine 5でタスクバーウィジェットのアニメーションを作成し、タブキーでその表示を制御するブループリントが完成しました。ゲーム内でのユーザーインターフェースの動きをカスタマイズする際に、ぜひ参考にしてください。