FADE | ScreenFXアセットによるフェードイン・フェードアウト

スポンサーリンク
Unity
スポンサーリンク
↑管理人が個人でUnity+Live2Dで作成しているスマホゲームです

ココのコイン落としの開発も順調に進み、そろそろシーン遷移の際のフェードイン・フェードアウトを実装したくなりました。
Unityアセットストアで色々と調べていたのですが、シンプル過ぎるものや高度過ぎる物などが多く困っていたところ、ちょうど良さそうなFADE | ScreenFXというUnityアセットが。
動画を見た感じだとなかなかリッチな感じのエフェクトが40種類(同種あり)揃っています。ココのコイン落としは「アイデアや技術は無くても見た目や演出や操作性を丁寧に作ればユーザ体験や満足度は十分高められる」という感覚でやってますので、手軽にオシャレな要素を追加できる(そして軽そうな)アセットというのは貴重です。
$25という価格とレビューが微妙だという所だけ気になりましたが、動画を見た自分の感覚を信じて購入!

スポンサーリンク

中身

マニュアルの類はなくComponentsにスクリプト類、Effectsには様々なエフェクト類が入っています。ExamplesにはEffect Reel(順繰りにエフェクトを見せる)、ExampleScene_Cube(キューブが配置されている。スペースを押すとExampleScene_Sphereに移動)、ExampleScene_Sphere (球体が配置されている。スペースを押すとExampleScene_Cube に移動) の3つのシーンファイルがあります。Editorの中身は使い方がよく分かりませんでした。

サンプル

Effect Reel は単体で実行可能で、シーンは移動せずに単純にエフェクトを繰り返すだけです。ExampleScene_Cube とExampleScene_Sphere は両方を既存Projectに追加した上で実行するとスペースで遷移可能です。

使い方

FadePostProcessコンポーネントをシーン上のGameObjectに追加します。Emptyでもカメラでも何でもいいです。こいつがフェードの中心となる処理がまとめられたコンポーネントです。Default Fade Effectにデフォルトで設定されるフェードエフェクトを指定します。Effect Durationは実行時間です。Effect Easingはエフェクトの動き方の調子です。一番左の設定だと動きません。
EventsではFaded Up(フェードイン終了)、Faded Down(フェードアウト終了)時の処理を追加できます。コレを使えばフェードイン終了後に音楽を鳴らし始めたりする事が可能です。
Developerの項目ではGame画面でフェードの特定時間の状態を簡単にチェックできます。
Effect Materialでは現在指定中のエフェクトのマテリアルを変更できます。これはEffects内のエフェクトを選択して変更する事も可能です。

更にFadeUpOnStartコンポーネントも追加します。Fade Post ProcessにはFadePostProcessが追加されているオブジェクトを指定し、Random EffectsでSizeはフェードのたびにランダムでエフェクトを変化させたい時に2以上の数値を指定します。0ならデフォルト、1なら固定のエフェクトを指定できます。
フェードインはこれだけで実装完了なのでとても簡単です。

FadeDown()、FadeUp()メソッドを見ればわかりますが、2つ目の引数でコールバックを指定できます。
つまり

fadePostProcess.FadeDown(false, () =>SceneManager.LoadScene("NextScene"));
のようにしてフェードが終わった後にシーン遷移という処理を実装できます。

注意点

実際に実行してみると分かりますが、少し重いシーンを読み込んだりした場合、フェードインが途切れたり全く表示出来なくなったりします。これはFadePostProcess.csにあるFadeUpCoroutine()の中の

alpha -= Time.unscaledDeltaTime / effectDuration;
のTime.unscaledDeltaTime が実時間を参照しているせいです。つまりシーンロード完了から描画開始までにもたつきがあると、指定秒数2秒のはずが1秒しか表示されなかったりします。この部分を
alpha -= Time.deltaTime / effectDuration;
に修正すると問題なく動作するようになりますので変更しておいた方が良いと思います。

1 Star2 Stars3 Stars4 Stars5 Stars (1票 平均: 5.00)
読み込み中...

コメント

広告ブロッカーを無効にしてください。

タイトルとURLをコピーしました