【Unity】ゲームオブジェクトをフェードする（徐々に透明にする　:　DOTWeen編）

2024年4月19日

自作コードでもフェードを実行するメソッドなど作成できますが、DOTweenを使うと比較的簡単に実現できますのでみていきましょう

基本的な構成

実行結果

３秒かけてフェードアウトするゲームオブジェクトの様子を見てみましょう

透明化するための準備

タイトル「透明度を変化させるためのマテリアルの作成」を参考にアルファ値を変化させることができるマテリアルを作成して、Mesh RendererのMaterilにアウトレット接続しておきます

サンプルコード

フェードしたいゲームオブジェクトにアタッチします

using UnityEngine;
using DG.Tweening;

public class DOTweenSample : MonoBehaviour
{
    private void Start()
    {
        // アルファ値を３秒かけて０にする
        GetComponent<Renderer>().material.DOFade(0, 3);
    }
}

説明

// アルファ値を３秒かけて０にする
GetComponent<Renderer>().material.DOFade(0, 3);

GetComponent<Renderer>() は、同じゲームオブジェクトにアタッチされた Renderer コンポーネントを取得します。この Renderer の material プロパティにアクセスして、そのマテリアルを操作しています。

DOFade(0, 3) はDOTweenのメソッドの一つで、マテリアルのアルファ値を3秒かけて0にアニメーションします。アルファ値が0になると、オブジェクトは完全に透明になり、見えなくなります。

このコードは特に、シンプルなフェードアウトのエフェクトを作成するために使用されることが多いです。例えば、オブジェクトを徐々に消滅させる演出などに利用できます。

汎用的なライブラリ目的に応用

汎用的に活用するために、UIのCanvasをフェードさせる場合と上記のようなゲームオブジェクトをフェードさせる場合について考えてみましょう

コード

シーンを跨いでも呼び出すことができるようにシングルトンで構成します

UnityでDOTweenを使って汎用的なフェードイン・フェードアウトライブラリを作る方法について説明します。UI要素（キャンバス、イメージ、テキストなど）のフェード遷移を処理する再利用可能な関数を実装するための構造を以下に示します。

  1. DOTweenのセットアップ: まず、UnityプロジェクトにDOTweenがインストールされていることを確認してください。UnityアセットストアまたはDOTweenのウェブサイトからインストールできます。
  2. フェードマネージャーの作成: このスクリプトはフェード遷移を管理します。
using UnityEngine;
using DG.Tweening;  // DOTweenの名前空間をインポート

public class FadeManager : MonoBehaviour
{
    // シングルトンインスタンス
    public static FadeManager Instance;

    void Awake()
    {
        if (Instance == null)
        {
            Instance = this;
            DontDestroyOnLoad(gameObject);
        }
        else
        {
            Destroy(gameObject);
        }
    }

    // CanvasGroupをフェードする関数
    public void FadeCanvasGroup(CanvasGroup canvasGroup, float targetAlpha, float duration)
    {
        canvasGroup.DOFade(targetAlpha, duration).SetUpdate(true);
    }

    // SpriteRendererをフェードする関数
    public void FadeSpriteRenderer(SpriteRenderer spriteRenderer, float targetAlpha, float duration)
    {
        spriteRenderer.DOFade(targetAlpha, duration).SetUpdate(true);
    }

    // 必要に応じて異なるコンポーネント（例：Text, Image）のための関数を追加
}

説明

このコードは、UnityでDOTweenライブラリを使用して、SpriteRenderer コンポーネントのアルファ値をアニメーションさせる方法を示しています。以下に各部分の詳細を説明します。

spriteRenderer.DOFade(targetAlpha, duration)
  • spriteRenderer は、SpriteRenderer コンポーネントのインスタンスを指します。このコンポーネントはUnityで2Dスプライトを表示する際に使用されます。
  • DOFade はDOTweenのメソッドで、スプライトの透明度（アルファ値）をアニメーションさせるために使用されます。
  • targetAlpha はアニメーションの終了時にスプライトが到達すべきアルファ値を指定します。この値は0.0（完全に透明）から1.0（完全に不透明）の間で指定します。
  • duration はアニメーションにかかる時間で、秒単位で指定します。この時間の長さによってアニメーションの速さが変わります。
.SetUpdate(true)
  • SetUpdate(true) は、このアニメーションが「TimeScale」の影響を受けないように設定するためのメソッドです。Unityでは、通常のアップデート処理（Update メソッド内での処理）はゲームの時間の進行に連動していますが、Time.timeScale を変更することでこれを制御できます。たとえば、Time.timeScale を0に設定すると、ゲーム内での時間の流れが停止し、通常はアニメーションも停止します。
  • SetUpdate(true) が呼び出されると、そのアニメーションは Time.timeScale の値に関わらず進行するようになります。これは、メニュー画面など、ゲームがポーズされている間でもアニメーションを続けたい場合に便利です。

この一行のコードは、ゲームのポーズ中でもスムーズに透明度が変化するアニメーションをSpriteRendererに適用するために使用されることがあります。このような機能は、ユーザーインターフェースの要素や、ゲームのポーズ中にも注目を集めたい特定の視覚効果に便利です。

使用方法

フェードアウト

このマネージャーを使用するには、コードのどこからでもフェード関数を呼び出します。たとえば、0.5秒でキャンバスグループをフェードアウトさせるには、以下のようにします：

CanvasGroup myCanvasGroup = GetComponent<CanvasGroup>();
FadeManager.Instance.FadeCanvasGroup(myCanvasGroup, 0, 0.5f);  // フェードアウト

フェードイン

FadeManager.Instance.FadeCanvasGroup(myCanvasGroup, 1, 0.5f);  // フェードイン

拡張とカスタマイズ

FadeManagerに追加のユーティリティメソッドを拡張して、他の種類のオブジェクトをフェードするか、シーケンスなどの複雑なアニメーションを処理する方法を提供できます。

これらのステップに従うことで、Unity内の様々なプロジェクトやコンポーネント間で再利用可能な多用途フェード管理システムを作成し、DOTweenを使用したフェード遷移の実装を簡素化することができます

透明度を変化させるためのマテリアルの作成

ゲームオブジェクトのマテリアルの変更

プリミティブのオブジェクt（Cube）などは、デフォルトのマテリアルを使っていて、透明にはなりません
そこで、マテリアルを作成して、透明度を更新できるようにしておきます

マテリアルの作成

プロジェクトビューからMaterialの作成を選択します

マテリアルの設定を変更

レンダリングモードをOpaqueからFade（また、Transparent）に変更します

色は、自由に変えていいです

ゲームオブジェクトにアウトレット接続

参考）レンダリングモードの種類

  1. Opaque（不透明）:
    • 不透明なオブジェクトに使用します。アルファチャンネルが無視され、オブジェクトは完全に不透明として描画されます。一般的な物体や壁、建物などの不透明な要素に使用します。
  2. Fade（フェード）:
    • 一部が透明で一部が不透明なオブジェクトに使用します。アルファチャンネルが考慮され、透明度が変化します。このモードは、半透明な物体や、フェードイン/フェードアウトの効果を持つオブジェクトに適しています。例えば、煙、葉っぱ、ガラスの窓など。
  3. Transparent（透明）:
    • 完全に透明なオブジェクトに使用します。アルファチャンネルが無視され、オブジェクト全体が透明に描画されます。これは、ガラス、水、宝石、液体などの完全に透明な物体に使用します。また、オブジェクトの背面から見えることが期待される場合にも使用します。

TWeen,Unity

Posted by hidepon