Suutaの秘密基地

動く...動く...

UE4 もっとローディング画面②

概要

前回の記事では、非同期ローディング画面のデザインをUMGから行えるようになったよ! っていう内容でした。ただ、ロードアイコンだけどうにかしたいな(笑)っていう課題もあった。 今回は自分なりのローディングアイコンへの回答と、その過程でいろいろ試したことの紹介です。

マテリアルで

f:id:suuta1123:20200701005433j:plain

始めに思い付いたのがマテリアルだった。前にマリオオデッセイ風のHPゲージを作ったので、それを再利用しました。 Time式で経過時間をとってテクスチャを回転させています。作るのにあたってヒストリアさんの記事を参考にさせていただきました。

historia.co.jp

で、ロード画面で(OpenLevel中に)動くのかどうかというと動かなかった... まぁ何となくそんな気はしてました。そんなに甘くないよね。 ただ、実行する度に回転の初期位置が変化しているので、一度動いてから停止しているのかなと思いました。気になって調べてみるとTime式に原因がある感じでした。 もんしょさんの記事によると、 Time式はパーシスタントレベルの経過時間を計測しているらしく、パーシスタントレベルが変わるとリセットされるみたいです。つまり、ロード画面表示からOpenLevel( )呼び出しまでの間は動作するけど、 肝心のロード中はパーシスタントレベルが読み込めてないから動作しないのかもしれません。

monsho.blog63.fc2.com

IgnorePauseが原因

ブログ書いてる時に気づいたのですが、Time式のIgnorePauseをTrueにするとロード中でもTime式が有効になるっぽいです。 PauseといったらSetGamePauseのPauseだと思っていて、あまり気にしてませんでした。マテリアルも使えるってことですね。

f:id:suuta1123:20200701145909j:plain

Widget

続いてWidgetです。UMGエディターに公開されたSlateみたいなもので、ThrobberやCircularThrobberと同じものです。ThrobberやCircularThrobberがロード中でも動くんだったら 動くだろうということで、SlateのSSpinningImageをWidget化しました。SImageを指定されたパラメータで回転させるだけのWidgetです。Imageはマテリアルでも使用した マリオオデッセイのHPゲージマスク用テクスチャを使用します。

SpinningImage.h


SpinningImage.cpp


予想どおり動いてくれた。動いてくれたのは良いですけど、良い方法ではないですよね。SlateいじるならUMGで編集する意味がないです。 Widget自身が複雑なアニメーションを必要とした場合に対応できなくなります。(Slateでのアニメーションが難しい) ただ回転するロードアイコンが必要な場合はこれでもいいんですけどね。

アニメーションで

一番最後に思い付いたのがUMGアニメーションだった。1番簡単だし、慣れてる方法だ。ただ、作る前から1つ懸念要素があった。もう耳にタコな話だが "ヒッチ(カクつき)が起きるかどうか?" ということ。LoadingScreenAttributesを使わず重たいレベル(ElvenRuins)をOpenLevelするとUMGのアニメーションは必ずヒッチが起きる。いくらSWidgetに変換したからといっても、もとはUMGだからヒッチは起きるだろうと思っていた。おそらくこの偏見のせいで試そうと思ったのが最後になったのかもしれない。だが、いざ実装してみると思いのほかヌルヌルと動いてくれた… っと思ったのはつかの間、定期的にアニメーションの動作が鈍くなった。この時は原因が分からなかったが、動いた満足感であまり気にしないことにした。実際、AAAタイトルでもヒッチが起きているタイトルもあったからだ。まぁ、それはただ処理落ちしてるだけかもしれません。それ以降からロード中に一切動かなくなることだけ避け、処理が重いタイミングだけはヒッチが起きても妥協できるようになった。

カーブシーケンサーが原因

Time式のIgnorePauseと同じようにアニメーションにも落とし穴があった。アニメーションにもTimeLineノードのようなカーブエディタもがあり、 デフォルトでカーブの値が補完されていて変な挙動になっていたようだ。カーブをリニアにすると思ったように動作してくれた。 UMGのデザインから確認すると補完されておらずリニアなアニメーションをしているのだが、実行すると補完されたアニメーションが再生されていたため気づかなかった。

まとめ

f:id:suuta1123:20200701000041p:plain

ブログ書きはじめる前までは 「Widget > アニメーション でマテリアルはつかえねぇな...」って結果だったから、用途に応じて使い分けよう! というまとめのはずだった。でも、全部動いてしまったので好き方法で実装しようという結論になってしまった。 現時点では設計とか負荷とか詳しいことはわかりませんが、いつかそれらを意識しながら実装出来るようになれたらいいなと思います。 今回はFFVII リメイクのローディングアイコンのトレースが出来たのでひとまず満足です(´ω`)

動画

それぞれの方法でローディング画面を再生

youtu.be

FFVII リメイクのローディング画面っぽいやつ

youtu.be