今回作るのはこれ
ブログのネタをサクっとね
— ネリスさん (@NelisLuna) 2024年3月29日
任意位置に任意サイズで配置可能な「アイリス・アウト」の実装方法
チュートリアルなどの注視用やフェードアウト、ゲームの演出にも使えるかな？#UE5 #UE5Study pic.twitter.com/qcLfk5zO1g
古風な「もうこりごりだ～」と共にフェードアウトしていくあの演出を作成していく。
ここ最近だとダンジョン飯のこのシーンのアレ
アイリスアウトと呼ばれるらしい。
そんなに複雑な事をしないのでサクっとね
実装としてはマテリアルを利用したWidgetで実装していく
マテリアルの実装
今回はWidgetで利用するマテリアルのため、基本設定は以下の通り
MaterialDomain：UserInterface
BlendeMode：Translucent
また、完成形はこんな感じでつぶれた楕円のような形状となる。
マテリアルの内容はこんな感じ
パラメータになっているのは３つ
- ScreenSize：画面のサイズ。1920x1080みたいな。
- CenterPosition：円の中央座標。X,Yそれぞれ0~1の割合で指定する
- Radius：円の大きさ。今回の計算では0~2が0%~100%に該当する
何をしているかというと、今回のマテリアルはWidgetではこのように使う都合上、ただの正円のマテリアルを作ると引き延ばされてしまう。
そのため、この引き延ばされる分を先に圧縮しておくことで±０にして正円の状態で使うといった感じ。
そんなわけで結果的に正円になり、なおかついい感じの位置に円の中心点を持ってこれるというのがこのマテリアルの実装。
マテリアルインスタンスでパラメータをいじるとちょっと面白い。
※左上のプレビューサイズとScreenSizeパラメータの比率が同じじゃないと正円にならないので注意
Widgetに取り付ける
取り付け自体はImageにマテリアルを付けて、好きな色を付けて終わり
最初のTwitterに上げた動画では透過度0.5にしていた。
・円の中心点や画面サイズを指定する処理
なんかこう、いい感じにマウス座標を画面の座標と一致させて円の中心点を設定する。
今回はマウスに追従させることでわかりやすくするためマウス座標をいじっているが
画面上の位置を0~1にして渡せばいいだけなので方法はいろいろ。
大体の場合、ViewportSizeで割ることでちょうどいい感じになる。
なお、画面のちょうど中央が[X=0.5 Y=0.5]になる。
ScreenSizeはそのままViewportSizeを渡しているだけ。
画面サイズが一定であるならばこの処理は要らない
今回はマウスに追従させているが、特定のActorの位置に追従させたい場合にはConvertWorldLocationToScreenLocationノードでActorの座標を変換して指定してあげよう。
ググったら自分の記事が出てきて草なのだ
・円の大きさを変える処理
こちらは円のサイズを変更するための処理
今回もマウスの動きによって変更させるため、入力イベントのマウスホイール軸を使う。
特に変わったことはなく、マテリアルパラメータのRadiusに0~2の好きな値を渡せばいいだけ
実は別に２以上を指定しても特に問題はない。
アニメーションを使って編集する
WidgetのアニメーションはMaterialパラメータを直接編集可能なため、あらかじめ演出する方法が決まっているのであれば円の中心点や円のサイズをアニメーションさせることができる。
実際に使う場合はマウスに追従する理由も特にないと思うので、こちらの使われ方が主なものとなるはず。
もちろんアニメーションの範疇のため、カーブも利用可能。便利だぁ…
こっちの方法を先に教えろって話ですわ、はい。
アニメーションで円の拡縮をコントロールし、BPで円の中心座標を指定するコンビネーションで使っていくのが割と良いのかな？
あとがき
今回の実装の場合スクリーンサイズをTickで更新しているため、画面を任意に伸び縮みさせても比率が崩れず正常な表示を維持できるので、1920x1080以外でも問題なく利用でき、大変扱いやすくなってるはず。
素材もいらず実装自体も簡単なため、チュートリアルの注視点に使うなど入れてみてはどうでしょうか？
こんな極端な画面比率でも正円かつマウス座標に従った場所にキッチリ表示される
おまけ
こんな感じで使ってみてね
