概要
この記事では、Unreal Engine 5 で、下の動画のように、様々なサイズ、様々な向きで動かすことのできる、矢印のウィジェットを作成します。
ゲームの選択肢の横や、チュートリアルなどで表示されたりするやつです。
この記事の主な対象者
- Widget Blueprint（WBP）の作り方の基礎を習得されている、初心者の方
1. 動く矢印のウィジェットを作成する
最初に、下図のようなウィジェット構成のWBPを作成します。（今回の記事では「WBP_MovingArrow」という名前のWBPを作成します。）
| ウィジェット名 | ウィジェットの種類 | 備考 |
|---|---|---|
| Scale Box | Scale Box | このウィジェットを一番上の親にします。 こちらの記事に書いたように、このウィジェットのアスペクト比が変えられても、アスペクト比が保たれるようにするために使用します。 |
| Size Box | Size Box | 「Scale Box」ウィジェットと同じ理由で使用します。 こちらの記事に書いたように、詳細パネルの「チャイルドレイアウト」＞「WidthOverride」「HeightOverride」にチェックを入れ、「Scale Box」ウィジェットのサイズを入力します。 |
| Canvas Panel | Canvas Panel | 矢印を動かす場所として使用します。 |
| ArrowImage | Image | 動かす矢印です。「Canvas Panel」ウィジェット上でのサイズは、上図のように、「Canvas Panel」ウィジェットの縦幅をめいいっぱい使用するようにします。 また、上図のように「Canvas Panel」の左上端に「ArrowImage」ウィジェットの左上端が合わさるようにします。 |
次に、矢印が動くアニメーションを作成します。
上で作成したWBPのアニメーションタブを開き、下図の赤枠の「＋アニメーション」のボタンを押し、アニメーションを追加します。（今回の記事では、アニメーション名を「MovingArrow」とします。）
次に、矢印の位置を移動させるための、アニメーションのトラックを追加します。下図のように、アニメーションを開いた状態で、かつウィジェット一覧から「Arrow Image」ウィジェット（下図の赤枠）を選択した状態にしたら、「＋トラック」ボタン（下図のオレンジ枠）を押します。「＋トラック」ボタンを押して表示された一覧の中から、「ArrowImage(Canvas Panel Slot)」を選択します。
「ArrowImage(Canvas Panel Slot)」を選択し終えると、下図のようなトラックが追加されています。
上図のトラックが追加されていることを確認したら、下図の赤枠の「＋トラック」ボタンをクリックし、下図のオレンジ枠の「Layout Data.Offsets」を選択します。
右の赤線（下図赤枠）は、アニメーションの終了時間を表しています。右の赤線を矢印が1度横に動いて、元の位置に戻ってくるまでの時間の場所にずらします。（今回の記事では「2.00」の位置にずらします。）
アニメーションのタイムラインバーをアニメーション終了時間のところまで移動させトラックの「左」のところ（下図の赤枠）のキーを追加するためのボタン（下図のオレンジ丸）を押します。
上図のトラックの「左」は、「Canvas Panel」ウィジェット上における「ArrowImage」ウィジェットのX座標を表しており、この値を時間で変化させて、矢印が横に動くアニメーションを作成します。
次に、アニメーションのタイムラインバーをアニメーションの中間の時間（今回の記事では「1.00」）のところまで移動させ、同様にして「左」のところにキーを追加します。
中間の時間にキーを追加し終えたら、中間の時間のところに作成したキー（下図の赤丸）を押して選択し、「左」のトラックの値（下図のオレンジ丸）を、矢印がふわふわ動く際の横の移動量を入力します。
これで、矢印が動くアニメーションは完成です。アニメーションタブのプレイボタンを押したら、下の動画のように、矢印が動くかどうか確認します。
矢印が動くアニメーションの作成が完了したら、この矢印ウィジェットが表示された瞬間から、作成した矢印が動くアニメーションの再生が始まるようにしていきます。
矢印のWBPのイベントグラフを開き、下図のノードを組みます。（今回の記事では、矢印が動くアニメーション名を「MovingArrow」としているため、アニメーションのノードの名前が「MovingArrow」となっています。）
上図の赤丸の「Num Loops to Play」の値に「0」を設定し忘れないようにします。「Num Loops to Play」の値に「0」を設定することで、アニメーションがループ再生されるようになり、矢印が動くアニメーションが常に再生されるようになります。
これで、使いまわせる動く矢印のウィジェットの作成が完了したので、実際に様々な向き、サイズで配置します。
2. 様々なサイズ、向きで矢印ウィジェットを配置する
最初に、表示したいUI画面のWBPを作成します。
表示したいUI画面のWBPを作成したのちに、パレットタブの検索欄に、上で作成した動く矢印ウィジェットのファイル名を検索欄に入力します。入力すると、上で作成した動く矢印ウィジェットが表示されるので、ウィジェットとして追加します。
追加した矢印ウィジェットのサイズに関しては、「Canvas Panel」ウィジェット上に矢印ウィジェットを置いていたら、詳細パネルの「スロット」＞「サイズX」「サイズY」で設定します。
矢印ウィジェットの向きに関しては、詳細パネルの「レンダートランスフォーム」＞「Angle」で角度を変更するようにします（下図の赤枠）。
ただし、回転させて向きを変更するのではなく、左右反転させたいという場合は、詳細パネルの「レンダートランスフォーム」＞「Scale」＞「X」の値を「-1」に変更するようにします（下図のオレンジ枠）。
これで、サイズや向きの調整は完了です。
サイズや向きを調整した動く矢印ウィジェットが、下の動画のようにサイズや向きに合わせた適切な動きをしているか確認します。
以上で今回の記事の内容は終了です。
最後まで読んでいただき、ありがとうございました。