凛(kagring)のUE4とUnityとQt勉強中ブログ

2016 年から UE4 を触り始めました。勉強したもののメモ用のブログです。C++ での Qt、Unity も少しあります。

PREV | PAGE-SELECT | NEXT

≫ EDIT

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

| スポンサー広告 | --:-- | comments(-) | trackbacks(-) | TOP↑

≫ EDIT

UE4 UMGで画面のフェードイン・アウトを実装する

ゲームとって必ず必要な画面のフェードイン・アウトを実装してみます。
とはいえ、色々間違ってる可能性もあるので、参考程度に見ていただければと思います。

・UE4 Unreal Motion Graphicsを使って黒画面フェードを実装する
http://unrealengine.hatenablog.com/entry/2014/11/07/222309

上記、alweiさんのブログを参考にさせていただきました。
ただ、自分はプログラマなので、フェードのアニメーションなどは使わず、
UMGのブループリントを主に実装してみました。

とりあえず、UMGのウィジェットを作成します。
フェード004
参考にしたブログの方ではImageを使っていましたが、
今回はテクスチャをはらなくても使える「Border」というパーツを使いました。
とりあえず画面いっぱいのサイズになるように「Border」を配置します。

色は何色でもいいのですがとりあえず黒に。
そしてブループリントで扱えるように、詳細の「ブラシ」の「カラー」を変数にバインドします。
フェード005
カラーの変数は「LinearColor」構造体で「FadeColor」という変数を用意しました。

とりあえずこれで表示の準備は終わったので、ブループリントでフェードの機能を実装します。
こんな感じで変数を用意してみました。
フェード002
「FadeColor」はフェードイン・アウトの色です。とりあえずは黒に。
「IsFadeIn」はTrueであればフェードイン中。Falseであればフェードアウト中です。
「FadeSpeed」はフェードの速度で、カラーのアルファ値の変化速度です。
「IsEnable」はフェード実行中かどうかのフラグになります。

「IsFadeIn」はEnumにした方がよいかなーと思ったのですが、とりあえずはそのままでいくことにしました。
Enumにすれば「IsEnable」もいらなくなりそうです。

上記の変数を使って組んだフェードイン・アウトのブループリントがこれです。
フェード001
すごいごちゃごちゃしてますが、要点は以下の感じです。
①「IsEnable」がTrueでなければ何もしない。
②「IsFadeIn」がTrueならフェードインの処理を実行(画面上処理)、Falseならフェードアウトの処理を実行(画面下処理。
③フェードインの処理は「FadeColor」のアルファ値を減らして透明に、フェードアウトは増やして不透明に。
④完全不透明か、完全透明になったらフェードの実行処理を停止(IsEnableをFalseに)

最後に無効化しているノードはテスト用で、フェードインとアウトが交互に繰り返されるようにしてます。
なので実際には要らない処理になります。

次に、フェードインとフェードアウトの開始をコールする関数を作成します。
フェード000
「SetFade」という関数を作成しました。
フェードの時間とフェードインかアウトかを受け取れるようにしています。
中身は値をセットしてるだけですね。

そして作ったウィジェットをビューポートに接続して実際に使ってみます。
フェード003
こんな感じに。
ウィジェットをビューポートに接続した直後にフェードインするように関数を呼び出しています。

実行するとこんな感じになりました。

ブループリントからパラメータがいじれるようにしたのでプログラマにはいいかなーと。
カラーも引数で設定できるようにすればホワイトアウトとかもできますね。
トランジションはこんな感じでつくっていくとよいかもですね。

ブループリントについては。結局はアルファ値を増やすか減らすかなので、
もっといい感じにかけそうな気がするのでどうしようか悩み中ですが、
はじめてブループリント組んだにしては上手くいったのではないかと!
スポンサーサイト

| UE4 | 19:15 | comments:0 | trackbacks:0 | TOP↑

COMMENT















非公開コメント

TRACKBACK URL

http://kagring.blog.fc2.com/tb.php/176-1008d74d

TRACKBACK

PREV | PAGE-SELECT | NEXT

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。