UE4_複数の画像を配列にぶちこんで、連続でゆっくり表示させるウィジェット
アンダーテイルのプロローグとか、インディのゲームでよくある
For each loopでやればいいのかなと思ったがうまくいかなかった。
ので
無理やり再現する方法となる。
- 1.ウィジェットを作成
- 2.イメージを放り込む(バインドして関数を作っておく)
- 3.アニメーションを作成(フェードインとフェードアウト)
- 4.Constructにカスタムイベントをつなぐ(構造体を作成するイベント)
- 5.構造体の変数を用意(画像入れる用)
- 6.MakeArrayでテクスチャを構造体にする
- 7.用意した構造体の変数にセット
- 8.イメージの関数にMakeBrushFromTextureをReturnValueつなぐ(サイズは0)
- 9.構造体の変数からGET(参照)、IntにInt型の変数を作成してつなぐ
- 10.DoOnceをイベントTickにつなぐ
- 11.ブランチをつなぐ
- 12.構造体の変数からLastIndexで最大値をとってくる
- 13.作ったInt型の変数と<=でくらべる(変数が構造体の数より多くなったらFALSE)
- 14.FI/FOのアニメーションをつなぐ
- 15.Delayをつなげて、アニメーション終了まで処理を待たせる
- 16.Int型の変数に+1してセットする
- 17.最後のセットから、最初のDoOnceのResetにピンをつなぐ
- 18.最後に、ブランチのFalseに紙芝居後の処理をつなぐ
- おまけ
- おわり
1.ウィジェットを作成
名前はなんでもいい
2.イメージを放り込む(バインドして関数を作っておく)
パレットの一般から、ImageをCanvasPanelの下に置く
Imageの詳細のここを押すと、表示する画像をブループリントで制御できる関数を作ってくれる。
画像ではもう作っちゃったあとだからボタンの表示が違うけど「バインド」とか書いてある。
3.アニメーションを作成(フェードインとフェードアウト)
イメージのトラックを追加して、RenderOpacityを追加
好きなようにアニメーションを作る。
0.0だと透明。1.0だと不透明。
好きな数字のところにピンを置くと、間は勝手にアニメーションする。
4.Constructにカスタムイベントをつなぐ(構造体を作成するイベント)
画像はあとからどんどん増やす(減らす)かもしれないので
見やすいところで作業するためにカスタムイベントで逃がす。
5.構造体の変数を用意(画像入れる用)
こんな感じ
6.MakeArrayでテクスチャを構造体にする
こんな感じ
7.用意した構造体の変数にセット
Altを押しながら変数から構造体変数をドラッグアンドドロップ
そのままイベントグラフに落としても、選ばせてくれるのでできる。
8.イメージの関数にMakeBrushFromTextureをReturnValueつなぐ(サイズは0)
急にここからImageのバインドで作成した関数のイベントグラフに飛ぶ
こんな感じ
9.構造体の変数からGET(参照)、IntにInt型の変数を作成してつなぐ
こんな感じ
10.DoOnceをイベントTickにつなぐ
こんな感じ
これで1回だけ処理をしてくれるようになる。
あとでリセットさせて何回も処理はさせるんだけど
そのタイミングをこっちでいじれるようになる。
11.ブランチをつなぐ
こんな感じ
12.構造体の変数からLastIndexで最大値をとってくる
こんな感じ(めんどくさくなってきた)
13.作ったInt型の変数と<=でくらべる(変数が構造体の数より多くなったらFALSE)
こんな感じ
1枚目の処理が終わったときに、Int型の変数をどんどんプラスしていって
構造体にぶちこんだ画像の数よりも多くなったら終わり、という流れにする。
14.FI/FOのアニメーションをつなぐ
こんな感じ
アニメーションは変数の上の方にAnimationsってまとめたる(▶押すと開く)
15.Delayをつなげて、アニメーション終了まで処理を待たせる
アニメーションの変数からピンを伸ばしてGetEndTimeをつなげる
DelayのピンにReturnValueをつなげると
アニメーションの長さ分、以降の処理を遅らせる。
これで、アニメーション微調整しても
いちいち数字をここに入力しに来なくてもいい。
16.Int型の変数に+1してセットする
こんな感じ
Tickにつないでいるので、この処理は何度も呼ばれる。
その時に、呼び出す画像を次のものに移すため、変数を増やしておく。
画像の関数に作成したものは、
どの構造体から、何番目の画像を取り出す、というものなので
その何番目を管理する変数をいじれば
繰り返しの処理でも画像を変えることができる。
17.最後のセットから、最初のDoOnceのResetにピンをつなぐ
これでTickから処理が流れてきても
画像を差し替える処理が終わるまで、次の画像を見せるアニメーションは流れないし
終われば、もう一度処理を流すことができる。
18.最後に、ブランチのFalseに紙芝居後の処理をつなぐ
画像の枚数分(構造体にぶちこんだ枚数)処理が終わったら
ブランチからFalseに流れる。
自分はスタート画面に行くようにOpenLevelをつないだ。
テスト中はPrintStringをつないで、終わったら文字が出るようにして確認した。
- 1.ウィジェットを作成
- 2.イメージを放り込む(バインドして関数を作っておく)
- 3.アニメーションを作成(フェードインとフェードアウト)
- 4.Constructにカスタムイベントをつなぐ(構造体を作成するイベント)
- 5.構造体の変数を用意(画像入れる用)
- 6.MakeArrayでテクスチャを構造体にする
- 7.用意した構造体の変数にセット
- 8.イメージの関数にMakeBrushFromTextureをReturnValueつなぐ(サイズは0)
- 9.構造体の変数からGET(参照)、IntにInt型の変数を作成してつなぐ
- 10.DoOnceをイベントTickにつなぐ
- 11.ブランチをつなぐ
- 12.構造体の変数からLastIndexで最大値をとってくる
- 13.作ったInt型の変数と<=でくらべる(変数が構造体の数より多くなったらFALSE)
- 14.FI/FOのアニメーションをつなぐ
- 15.Delayをつなげて、アニメーション終了まで処理を待たせる
- 16.Int型の変数に+1してセットする
- 17.最後のセットから、最初のDoOnceのResetにピンをつなぐ
- 18.最後に、ブランチのFalseに紙芝居後の処理をつなぐ
- おまけ
- おわり
おまけ
初回だけ起動後すぐに表示されてかっこ悪いけど、空白を増やすとテンポが悪い
初回だけ空白のあるアニメーションを用意することで、急にパッと表示されるのを防ぐ
ブランチの後にもう一個ブランチを作って、Int変数の中身が0なら初回だから
Trueから初回だけ使いたいアニメーションにつなげておく
画像のスキップ、紙芝居のスキップ
画像の表示をスキップしたり、紙芝居そのものをスキップさせるには
ボタンの押下をイベントディスパッチャーで受け取って
そのイベントから、全部終わったとき(Int変数と構造体最大数を比べているブランチのFalse)の処理に直接つなげてやる
1.ゲームインスタンスにディスパッチャーを用意
ボタンの押下をイベントとして受け取って、ウィジェットのイベントグラフに飛ばすため
インスタンスの中にイベントディスパッチャーを作成する。
ゲームインスタンスが無い人は作る。
さすがにゲームインスタンスに関しては説明を省く。
2.レベルブループリントにボタンを押すとイベントが飛ぶ処理を作る
自分はAボタンとハンバーガーボタン(右のスタートボタン)のイベントを飛ばした。
ゲームインスタンスに作ったので、変数を呼び出す感覚で呼び出せる。
つなぐのは「呼び出し」
3.ウィジェットに戻って、イベントTickにイベントをバインドノードでつなぐ
ここでもゲームインスタンスから呼び出しでつなぐ。
つなぐのは「イベントをバインド」
赤い四角につなぐためにカスタムイベントを作ってつなぐと
「ボタンを押したらこのカスタムイベントを処理」となる。
念のため言っておくと
この処理はこのウィジェットを表示している時しか機能しないので
ゲーム中どこでもこのカスタムイベントが呼び出されるわけじゃない。
4.画像の表示をスキップ
1枚の表示をスキップするカスタムイベントをこんな感じでつなぐ
このカスタムイベントはInt変数のセットにつなぐ。
これで、表示中の画像をスキップして、次の画像の表示をする
という流れになる。
5.全部スキップ
同じようにカスタムイベントを作成し
最初のブランチのFalseにつなげた処理に直接つなぐ。
これでアニメーションも画像も全部スキップする。
おわり
小さな開発ばかりやって達成感を味わっているせいで
そもそも何を作りたかったのか忘れた。
企画書から仕様書を作らないと話が進まない・・・