ゲーム制作まで書くブログ

読まないで><

UE4_複数の画像を配列にぶちこんで、連続でゆっくり表示させるウィジェット

アンダーテイルのプロローグとか、インディのゲームでよくある

紙芝居みたいなのをUE4ウィジェットで再現する。

 

For each loopでやればいいのかなと思ったがうまくいかなかった。

ので

無理やり再現する方法となる。

 

1.ウィジェットを作成

名前はなんでもいい

 

2.イメージを放り込む(バインドして関数を作っておく)

パレットの一般から、ImageをCanvasPanelの下に置く

f:id:NeToSuKe:20201122184919p:plain

f:id:NeToSuKe:20201122185112p:plain

Imageの詳細のここを押すと、表示する画像をブループリントで制御できる関数を作ってくれる。

画像ではもう作っちゃったあとだからボタンの表示が違うけど「バインド」とか書いてある。

 

3.アニメーションを作成(フェードインとフェードアウト)f:id:NeToSuKe:20201122184951p:plain

イメージのトラックを追加して、RenderOpacityを追加

好きなようにアニメーションを作る。

0.0だと透明。1.0だと不透明。

好きな数字のところにピンを置くと、間は勝手にアニメーションする。

 

4.Constructにカスタムイベントをつなぐ(構造体を作成するイベント)

f:id:NeToSuKe:20201122185027p:plain

画像はあとからどんどん増やす(減らす)かもしれないので

見やすいところで作業するためにカスタムイベントで逃がす。

 

5.構造体の変数を用意(画像入れる用)

f:id:NeToSuKe:20201122185225p:plain

こんな感じ

 

6.MakeArrayでテクスチャを構造体にする

f:id:NeToSuKe:20201122185241p:plain

こんな感じ

 

7.用意した構造体の変数にセット

f:id:NeToSuKe:20201122185256p:plain

Altを押しながら変数から構造体変数をドラッグアンドドロップ

そのままイベントグラフに落としても、選ばせてくれるのでできる。

 

8.イメージの関数にMakeBrushFromTextureをReturnValueつなぐ(サイズは0)

急にここからImageのバインドで作成した関数のイベントグラフに飛ぶ

f:id:NeToSuKe:20201122185318p:plain

こんな感じ

 

9.構造体の変数からGET(参照)、IntにInt型の変数を作成してつなぐ

f:id:NeToSuKe:20201122185357p:plain

こんな感じ

 

10.DoOnceをイベントTickにつなぐ

f:id:NeToSuKe:20201122185411p:plain

こんな感じ

これで1回だけ処理をしてくれるようになる。

あとでリセットさせて何回も処理はさせるんだけど

そのタイミングをこっちでいじれるようになる。

 

11.ブランチをつなぐ

f:id:NeToSuKe:20201122185446p:plain

こんな感じ

 

12.構造体の変数からLastIndexで最大値をとってくる

f:id:NeToSuKe:20201122185505p:plain

こんな感じ(めんどくさくなってきた)

 

13.作ったInt型の変数と<=でくらべる(変数が構造体の数より多くなったらFALSE)

f:id:NeToSuKe:20201122185531p:plain

こんな感じ

1枚目の処理が終わったときに、Int型の変数をどんどんプラスしていって

構造体にぶちこんだ画像の数よりも多くなったら終わり、という流れにする。

 

14.FI/FOのアニメーションをつなぐ

f:id:NeToSuKe:20201122185549p:plain

こんな感じ

アニメーションは変数の上の方にAnimationsってまとめたる(▶押すと開く)

 

15.Delayをつなげて、アニメーション終了まで処理を待たせる

f:id:NeToSuKe:20201122185608p:plain

アニメーションの変数からピンを伸ばしてGetEndTimeをつなげる

DelayのピンにReturnValueをつなげると

アニメーションの長さ分、以降の処理を遅らせる。

これで、アニメーション微調整しても

いちいち数字をここに入力しに来なくてもいい。

 

16.Int型の変数に+1してセットする

f:id:NeToSuKe:20201122185625p:plain

こんな感じ

Tickにつないでいるので、この処理は何度も呼ばれる。

その時に、呼び出す画像を次のものに移すため、変数を増やしておく。

画像の関数に作成したものは、

どの構造体から、何番目の画像を取り出す、というものなので

その何番目を管理する変数をいじれば

繰り返しの処理でも画像を変えることができる。

 

17.最後のセットから、最初のDoOnceのResetにピンをつなぐ

f:id:NeToSuKe:20201122185646p:plain

f:id:NeToSuKe:20201122185908p:plain

これでTickから処理が流れてきても

画像を差し替える処理が終わるまで、次の画像を見せるアニメーションは流れないし

終われば、もう一度処理を流すことができる。

 

18.最後に、ブランチのFalseに紙芝居後の処理をつなぐ

f:id:NeToSuKe:20201122185723p:plain

画像の枚数分(構造体にぶちこんだ枚数)処理が終わったら

ブランチからFalseに流れる。

自分はスタート画面に行くようにOpenLevelをつないだ。

テスト中はPrintStringをつないで、終わったら文字が出るようにして確認した。

 

 

 

 

おまけ

初回だけ起動後すぐに表示されてかっこ悪いけど、空白を増やすとテンポが悪い

初回だけ空白のあるアニメーションを用意することで、急にパッと表示されるのを防ぐ

ブランチの後にもう一個ブランチを作って、Int変数の中身が0なら初回だから

Trueから初回だけ使いたいアニメーションにつなげておく

f:id:NeToSuKe:20201122185741p:plain

 

画像のスキップ、紙芝居のスキップ

画像の表示をスキップしたり、紙芝居そのものをスキップさせるには

ボタンの押下をイベントディスパッチャーで受け取って

そのイベントから、全部終わったとき(Int変数と構造体最大数を比べているブランチのFalse)の処理に直接つなげてやる

 

1.ゲームインスタンスにディスパッチャーを用意

f:id:NeToSuKe:20201122185809p:plain

ボタンの押下をイベントとして受け取って、ウィジェットのイベントグラフに飛ばすため

インスタンスの中にイベントディスパッチャーを作成する。

ゲームインスタンスが無い人は作る。

さすがにゲームインスタンスに関しては説明を省く。

 

2.レベルブループリントにボタンを押すとイベントが飛ぶ処理を作る

f:id:NeToSuKe:20201122185827p:plain

自分はAボタンとハンバーガーボタン(右のスタートボタン)のイベントを飛ばした。

ゲームインスタンスに作ったので、変数を呼び出す感覚で呼び出せる。

つなぐのは「呼び出し」

 

3.ウィジェットに戻って、イベントTickにイベントをバインドノードでつなぐ

f:id:NeToSuKe:20201122185842p:plain

ここでもゲームインスタンスから呼び出しでつなぐ。

つなぐのは「イベントをバインド」

赤い四角につなぐためにカスタムイベントを作ってつなぐと

「ボタンを押したらこのカスタムイベントを処理」となる。

念のため言っておくと

この処理はこのウィジェットを表示している時しか機能しないので

ゲーム中どこでもこのカスタムイベントが呼び出されるわけじゃない。

 

4.画像の表示をスキップ

f:id:NeToSuKe:20201122185900p:plain

f:id:NeToSuKe:20201122185908p:plain


1枚の表示をスキップするカスタムイベントをこんな感じでつなぐ

このカスタムイベントはInt変数のセットにつなぐ。

これで、表示中の画像をスキップして、次の画像の表示をする

という流れになる。

 

5.全部スキップ

f:id:NeToSuKe:20201122185948p:plain

f:id:NeToSuKe:20201122185723p:plain
同じようにカスタムイベントを作成し

最初のブランチのFalseにつなげた処理に直接つなぐ。

これでアニメーションも画像も全部スキップする。

 

 

おわり

小さな開発ばかりやって達成感を味わっているせいで

そもそも何を作りたかったのか忘れた。

 

企画書から仕様書を作らないと話が進まない・・・