てんちょーの技術日誌

自分がつまづいたこととかメモ

【UE4】第4回ぷちコンに応募してみた HUD編【nukeK】

今回は割と終盤に作ったけど、いい感じになったHUDについてメモを残しておきます。

大きく分けて2つあります。

マップ移動に関して

まずgifで見るとこんな感じ f:id:shop_0761:20151009233343g:plain

普通はレベルストリーミングすれば済む話ですが、やったこと無い上失敗したら怖いなと思ってOpenLevelでマップ移動してます。

とはいっても普通に読み込んだらカックカクになってイマイチよくないので一手間加えてみました。

作戦としてはOpenLevelする前にHUDで暗転させる→NowLoadingレベルを挟む→次のステージのレベルはfadeOutで元に戻す

って感じです。ありきたりですが意外と悪くありません。(少なくともそのままOpenLevelするよりは

まずこちらの記事を参考にfadeInとfadeOutを作りました。 unrealengine.hatenablog.com

次にNowLoading用のレベル(changeLevel)を作りました。 HUDでNowLoadingの画像を表示させつつ、GameInstanceにあるLevel名を参照してOpenLevelさせてます。ここでOpenLevelのカクカク具合をごまかしてますw f:id:shop_0761:20151009232427p:plain

あとはGameInstanceにname型でNextLevelって変数を追加しておきました。

準備が出来たので実装します。

各レベルのBeginPlayでHUD作ってfadeOutさせます。 f:id:shop_0761:20151009231503p:plain

他のレベルに遷移するときはfadeInしつつ、fadeInのアニメーションの時間分だけdelayかけて(今回は2秒)、GameInstanceに遷移先のLevel名を保存してchangeLevelへと移動します。 f:id:shop_0761:20151009231956p:plain

するとchangeLevelを読み込んでNowLoading出してる間にOpenLevelするって感じになります。

こうすれば最初のgifみたいになると思います。

テキスト表示に関して

これについて説明していきます。 f:id:shop_0761:20151008121603g:plain

これもHUDなのでグラフの全体はこんな感じ f:id:shop_0761:20151009234949p:plain

見えないと思うので部分ごとに拡大していくので頑張って追ってくださいw

まずは変数をば (Imageは使ってない気がします) publicかどうかも割と適当 f:id:shop_0761:20151009235123p:plain

まずはじめのところ 一応textsIndexは初期化してます

Counterってのは後から出てくるのですが、現在出力対象の文字列が何文字目かって変数です。こいつはあとでIntに丸められます。 これとDelta、TextSpeedを掛けあわせて表示スピードを調整してます。

IsIntervalは無理やりテキストとテキストの間に間隔を持たせるために使ってるBoolです。後で出ます。 f:id:shop_0761:20151009235748p:plain

ひとつ目のbranch

InputTextsには出力したい文字列を格納してあります。その長さと今のIndexから続けるか判断してます。

ふたつ目のbranch

今出力中のtextとCounterを比較して末端に達してないかチェックしてます。 f:id:shop_0761:20151010000332p:plain

さっきのbranchのtrueの方

trueの時はgetSubstringノードで先頭からCounter文字目までの文字列をtextに格納してます。これが実際に画面に出力される文字列です。 f:id:shop_0761:20151010000815p:plain

falseの方

Coutnerリセット、textsIndexのインクリメントをしてます。 この先はIsIntervalをTextIntervalの時間分だけtrueにしてます。 単純にここでDelayかけてもTickで動いてるので上手くいきません。そのため脳筋みたいな実装してます。 f:id:shop_0761:20151010001007p:plain

あとはHUDのデザイナー側からテキストブロックを配置して、コンテンツ→Textのところにあるバインドで関数を作ります。 中身はTextをセットするだけ。 f:id:shop_0761:20151010001809p:plain

これで準備完了です。

使いたいところのレベルBPで設定していきます。

InputTextsをMakeArrayで入れたい文章を作ってます。無いと始まりません。 他にもTextSpeedとか、TextIntervalを変えて調整できます。ちなみにgifのtextInterbalは初期値の1ですね。 文字数制限はしてませんが、画面サイズと相談しないと見切れちゃうので要調整。

書いてて思いついたのですが、始めからIsIntervalをtrueにしておいて、任意のタイミングでfalseにすることで時間差で出せそう… f:id:shop_0761:20151010002013p:plain

あとライフ周りは特段大したことしてないので今回は省略します。概要的には画像3つ分それぞれにvisibleの条件つけて、現在のライフで判定してるだけです。

といった具合です。 まだまだ改良の余地はあると思いますが、今回はこんな感じで実装してあります。