Unityとフェード

ゲーム実装で使うであろうフェードアウトについて実装方法を紹介

フェードイン・アウト?

言わずもがな暗転のことである。自キャラが死んだ時、ロードを挟むときなどプレイヤーに見てほしくないものを隠すあれ。フェードアウトしてsceneをロードする系はもうたくさん出回っているので他のサイト様を参考してくだされ。おすすめはこちら.
今回の記事ではsceneをロードしたくない、けどフェードを使いたいという人向け。大きく分けて2種類(個人的に実装した中で)。

プログラムからアクセスしてフェードイン・アウト

一番ポピュラーな実装かと思われる方法。下記のコードをImageがアタッチされているオブジェクトに貼り付ければフェードが実装可能。

using UnityEngine;
using UnityEngine.UI;//uGUIにアクセス
using System.Collections;

public class fade : MonoBehaviour {
   private Image image;
   private float time;
   public float fadetime;

   void Start () {
      time = fadetime;//初期化
      image = GetComponent<Image>();//Imageコンポネントを取得
 }

   void Update () {
      time -= Time.deltaTime;//時間更新(徐々に減らす)
      float a = time / fadetime;//徐々に0に近づける
      var color = image.color;//取得したimageのcolorを取得
      color.a = a;//カラーのアルファ値(透明度合)を徐々に減らす
      image.color = color;//取得したImageに適応させる
 }
}
Fadein

フェードイン

time=fadetimeを消してtime-=Time.deltatime;をtime+=Time.deltatimeに変えるとfadeoutが実装できる。

using UnityEngine;
using UnityEngine.UI;//uGUIにアクセス
using System.Collections;

public class fade : MonoBehaviour
{
    private Image image;
    private float time;
    public float fadetime;

    void Start()
    {
        //time = fadetime;
        time = 0;//初期化
        image = GetComponent<Image>();//imageコンポネントを取得
    }

    void Update()
    {
        time += Time.deltaTime;//時間更新.今度は増えていく
        float a = time / fadetime;
        var color = image.color;
        color.a = a;
        image.color = color;
    }
}
フェードアウト

フェードアウト

これはuGUIのpanelにアタッチしてImageのComponentを取得後RGBAのalpha値(一番下)を徐々に増やしたり減らしたりすると言うもの。

アニメーションを使ったフェードイン・アウト

Animationを使ってもフェードを実装することが可能。
UnityからWindow>Animation>[Create New Clip]を選択。
適当に名前つける。aa9c0221d1a29ab2184d03842515c037

0:00をクリックしたあとImageのColorのAを弄くる。

7f9b102099564559b1a410bcefd5f91a

同じ要領で1:00でAを255、2:00でAを0にする。
(今回は例として2秒でフェードイン・アウトをする。)

作ったAnimationを再生させる

下準備としてAnimator(Window>Animator)からアニメーションを登録しておく。
Animatorの下にあるParameters>Triggerを選択。その後適当に名前をつける。
AnyState→fadeout(作ったアニメーション)とする。下準備はここまで
aa57363ea66174d6b5a6c391a5208cf1

C#で以下のコードを入力後、Panelにアタッチして再生するとフェードイン・アウトが再生される。

//ゲームが始まった際にAnimationを再生させる
 void Start () {
 GetComponent<Animator>().SetTrigger("fade");
 }

デフォルトだと再生させたらループ再生されるのでprojectビューからfadeout(作ったアニメーション)を選択し,LoopTimeのチェックを外す。

まとめ

自分はフェードはAnimationで実装する。視覚的で楽だからである。ただプログラムで組むよりもメモリを多く消費することが予想させれるのでもりもりフェードを使うようならプログラムで組んだほうがいいのかもしれない。ただAnimationで実装すると色を変えながらフェードなど応用できそうな部分が多々あるので弄りがいがありそうだ。(この程度ならプログラム側でも実装できそうだが・・・・)

fc2b5396652e1bd9c25147fbc2fa4ecd

色が変わりながらフェード

 おまけ

今回はただアニメーションを再生させれば良いと言う事でSetTriggerを使ったがAnimatorにはSetfloat,SetInt(integer),SetBoolなどがあり
flaot>int>bool>triggerの順に設定できるアニメーションの数が決まっている。
下のやつはinのボタンを押すとフェードインのアニメーションがoutを押すとフェードアウトのアニメーションが再生されるようになる。

b599e95cf923ee97cb4e7645d6b89b46

 

参考サイト様

ftvlog [Unity]スプライトをフェードアウトさせる 

Unityとフェード」への2件のフィードバック

  1. 通りすがりのUnity人 の発言:

    イメージの透過の方法が知りたかったので助かりました!
    アニメーションの方法を使わせていただきました、ありがとうございます!

    いいね

    • コメントありがとうございます。

      それが悲しみ( ˘ω˘ )が少しでも役に立てたのでしたら嬉しい限りです。
      アニメーションはcurveを使うとプログラミングでは難しい処理とかもできるのでぜひ弄りまくってください。

      いいね

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中