フェードアウトとフェードインのUIを追加しました。一度作っておけば使いまわしが可能です。
初心者でも簡単に出来ますので、是非作ってみてください。
👇1秒かけてフェードアウトしてゲーム画面に遷移
👇ボール発射前、1秒かけてフェードイン
👇GIF動画のブロック崩しの作り方はこちら（自作キャラなくても問題なし）
Fade Out の UI
簡単な４STEPで説明します。
Widget Blueprint作成
コンテンツブラウザ内で右クリック、[User Interface]から[Widget Blueprint]を作成。
名前を[UMG_FadeOut]として、ダブルクリックして開く。
(UMG = Unreal Motion Graphics UI)
Border作成
ドラッグして[Border]を画面に追加。
画面右の[Details]パネルから、[Border]の大きさを画面の大きさに設定。
↓
アニメーション作成
画面左下の[Animations]から、[+ Animation]をクリック。名前を[FadeOut]とする。
[Timeline]パネルで[+ Track]をクリックして、[Border]を選択する。
↓
↓
[Border]の右から[+ Track ]をクリックして、[Bruch Color]を選択。
↓
[Brush Color]の左の小さな▽をクリック。
↓
RGBAの値を全て０（透明）にする。
[Timeline]パネルの右側にあるバーを[1.00]の場所にドラッグする。
Aの値だけ[1.0]にする（不透明）。
↓
タイムラインにキーフレームが打たれる。
[0.00]秒では透明、[1.00]秒では不透明（黒）になることが分かる。
Graphの編集
画面右上で[Graph]を選択。
エディタ上で右クリック。[play animation]を検索してノードを作成。
↓
[FadeOut]を[Play Animation]の[In Animation]にドラッグ。
↓
[Event Construct]と繋げる。こうすることで、UIが表示されたタイミングでアニメーションが再生される。
👇クリックで拡大
UIを組み込む
以前作ったブロック崩しにFade Out のUIを組み込んでいきます
👇ブロック崩しの作り方
フェードアウトを組み込みたいUIを表示。
（今回はタイトルのUIを使用する。タイトルのUIの作り方などについては、こちらの記事をどうぞ。）
画面右上からグラフを選択。
[Create Widget]のノードを作成。
[Class]として、先ほど作った[UMG_FadeOut]を選択。
↓
[Add to Viewport]のノードを作成して、先ほどのノードと繋ぐ。
↓
フェードアウトしたいタイミングに、このノードを組み込む。
（Delayすることで、フェードアウトした後に次のノードに移れる。）
👇クリックで拡大
Fade In のUI
Fade Out のUIをコピペして作るので、簡単にできます。
[UMG_FadeOut]を選択してCtrl + W（複製）。
名前は[UMG_FadeIn]として開く。
アニメーションを先ほどと逆にする。
[0.00]のときAを１（不透明）、[1.00]のときAを０（透明）。
ブループリントに組み込む。
今回は、ボールの発射前に追加した。
Twitterしてます
ブログの更新をお知らせ
コメント