【Unity】DOTweenを使ったフェードイン・フェードアウト
今回はUnity Assettで有名な「DOTween」を使って、フェードイン・フェードアウトの実装方法をご紹介します。
既に「DOTween」プロジェクト内にインポートされてる前提で解説しますので、まだの場合は下記からダウンロードしてください！
環境
- OS : macOS Sequoia 15.2
- Unity : Unity6(6000.0.34f1)
- Rendering Pipeline : URP
- Unity Assets : DOTweenインストール済み
FadeCanvasの作成
まず、ヒエラルキーの UI > Canvas からフェード用のキャンバスを新規作成します。
次に、Canvasの設定を以下のように行います。
Render ModeをScreen Space - Overlayに設定Sort Orderを他のゲームオブジェクトより高く設定Graphic Raycasterコンポーネントを削除
Sort Orderを高く設定することで、フェード画像を最前面に表示できます。
また、Graphic Raycasterコンポーネントを削除することで、FadeCanvasは当たり判定を持たず、背後のゲームオブジェクトに対してタップやクリックが可能になります。
続いて、作成したFadeCanvasの子要素としてUI > Imageを追加します。
Imageの設定は以下の通りです。Rect TransformのStretchを設定Left、Right、Top、Bottomの余白をすべて 0 に設定- 色をお好みで設定し、透明度は 0 にしておく
Rect Transformを Stretchにし、余白を 0 にすることで、画面全体に画像を広げることができます。
次にFadeさせる為のスクリプトを作っていきます。
Fade用のスクリプトの設定
C#スクリプトを新規作成し、名前をFadeとして、コードの内容を下記のようにします。
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening; // 追加
public class Fade : MonoBehaviour
{
[SerializeField] private Image _fadeImage; // フェード画像
[SerializeField] private float _fadeDuration; // フェード時間
// フェードイン
public void FadeIn()
{
_fadeImage.DOFade(0f, _fadeDuration);
}
// フェードアウト
public void FadeOut()
{
_fadeImage.DOFade(1f, _fadeDuration);
}
}
まず、DOTweenの機能を使うために、using DG.Tweening;を追加します。
次に、[SerializeField]によって、フェードに使う画像と時間をインスペクターから設定できるようにしています。
そして、今回のポイントは以下のコードです↓
_fadeImage.DOFade(0f, _fadeDuration);
この一文は、それぞれ以下のような意味を持ちます：
- 変化させる対象 :（
_fadeImage） - Tweenの種類 :（
DOFade：アルファ値を変える） - 変化後の値, 所要時 : (
0f,_fadeDuration)
この1行で「フェード画像のアルファ値を、指定した時間をかけて0（透明）にする」処理を実行しています。
次に、先ほど作成したFadeCanvasにこのスクリプトをアタッチし、フェード画像とフェード時間を設定します。
その後、FadeCanvasとは別に新しくCanvasを作成し、子要素としてボタンButtonを２つ追加します。
このボタンにFadeCanvasのFadeOut()、FadeIn()を呼び出す処理をそれぞれ設定します。
ここまで設定できたら、ボタンを押すことで画面がフェードアウトするはずです。
フェードに緩急をつける
無事にフェードができただけでも十分ですが、フェードに緩急をつけることで、より本格的な表現が可能になります。
DOTweenには「イージング」と呼ばれる、アニメーションに緩急をつけるオプションがあります。
設定の仕方は簡単で、先程のコードに下記のように追加してあげるだけです。
_fadeImage.DOFade(1f, _fadeDuration).SetEase(Ease.イーズの種類);
イーズの種類の部分に、お好きなイーズ名を入れてあげれば、その動きでフェードを表現できます。
イーズの種類については、下記の記事がとても参考になります↓
ちなに、デフォルトではOutQuadというイージングが設定されており、これは「最初が速く、だんだんゆっくりになる」動きみたいです。
以上、DOTweenを使ったフェードイン・フェードアウト方法でした！
参考
- DOTween（参照日: 2025 年 07 月 22 日）
- @broken55 - Unity DOTween 入門（参照日: 2025 年 07 月 22 日）
