Raspberlyのブログ

Raspberlyのブログ

Unityネタをメインとした技術系ブログです。にゃんこ大戦争や日常なども。そろそろブログタイトル決めたい

【Unity】画面遷移時のアイリスイン・アイリスアウトを実装する

今回はUnityネタをやっていきます。
ゲームやアニメでよく見るアイリスイン・アイリスアウトをUnityで実装してみます。

 

 

 

アイリスイン・アイリスアウトとは

ゲームやアニメで画面を切り替えるときに使われる演出の一つです。
画面を少しずつ広げたり絞ったりして暗転させます。(閉じるのがアウト、開くのがイン)

2つ合わせてアイリスショットと言ったりしますね。
今回はこれをUnityで実装してみます。

 

 

開発環境

Unity 2021.3.12f1

UnmaskForUGUI ver1.4.1

DOTween ver1.2.705

 

 

必要なパッケージとアセットのインストール

UnmaskForUGUIというパッケージを使います。
これを使うと反転したマスクを作成できます。

github.com

 

Unity Package Managerからインストールする場合は、このURLを打ち込めばOK

https://github.com/mob-sakai/UnmaskForUGUI.git

 

 

また、UIアニメーションにDOTweenを使用します。

 

 

 

 

アイリスイン、アイリスアウトを実装する

ここから本題。

Canvasの作成

アイリスイン・アイリスアウトに対応したCanvasを作成するエディター拡張が用意されています。
Hierarchyビューを右クリックして、UI/Unmask/IrisShotを選択。

 

これでシーン内にCanvasが作成されます。
ちなみにCanvasScaleModeConstantPixelSizeなので最初にScaleWithScreenSizeに直しておくといいかも。

 

Canvasの構成

Hierarchyビューはこんな感じ。
Unmaskはアイリスイン・アイリスアウト用の反転したマスク
Screenは画面を覆うパネルです。

 

Screenはデフォルトで半透明になっています、画面遷移に使いたいので単色塗りつぶし状態にしておきます。

 

Unmaskを移動させたり、Scaleを変えるとすでにそれらしい動きが実現できます。

ちなみにデフォルトのSpriteはサイズが小さく、
拡大するとかなりガビガビなので大きいSpriteを用意して差し替えた方がいいです

私はUI Builderというアセットにある円のSpriteを使用します。
これはまあ、サイズの大きいSpriteがあればなんでもいいです

 

 

TweenScript

最後にScriptでアイリスイン・アイリスアウトの動きをつけます。
前述した通り、DOTweenを使用しています。
以下のIrisShot.csを作成。IRIS_IN_SCALEはUnmaskが画面から見えなくなる大きさに調整します

using UnityEngine;
using DG.Tweening;

public class IrisShot : MonoBehaviour
{
    [SerializeField] RectTransform unmask;
    readonly Vector2 IRIS_IN_SCALE = new Vector2(30, 30);
    readonly float SCALE_DURATION = 1;

    public void IrisIn()
    {
        unmask.DOScale(IRIS_IN_SCALE, SCALE_DURATION).SetEase(Ease.InCubic);
    }

    public void IrisOut()
    {
        unmask.DOScale(new Vector3(0, 0, 0), SCALE_DURATION).SetEase(Ease.OutCubic);
    }
}

 

これを適当なオブジェクトにアタッチし、Unmaskを紐づけます。


これで準備完了。
IrisIn()、IrisOut()を呼び出すとこんな感じ。

画面遷移にぴったりなアイリスイン・アイリスアウトが実装できました。

 

 

TweenScript(応用)

今度はちょっと応用。
Unmaskにキャラクターの画像*1を設定し、シルエットを出すようにします。


Scriptにも手を入れ、跳ねるようなアニメーションを作ります。

using UnityEngine;
using DG.Tweening;

public class IrisShot2 : MonoBehaviour
{
    [SerializeField] RectTransform unmask;

    readonly Vector2 IRIS_IN_SCALE = new Vector2(15, 15);
    readonly Vector2 IRIS_MID_SCALE1 = new Vector2(0.8f, 0.8f);
    readonly Vector2 IRIS_MID_SCALE2 = new Vector2(1.2f, 1.2f);

    public void IrisIn()
    {
        unmask.DOScale(IRIS_MID_SCALE2, 0.4f).SetEase(Ease.InCubic); ;
        unmask.DOScale(IRIS_MID_SCALE1, 0.2f).SetDelay(0.4f).SetEase(Ease.OutCubic);
        unmask.DOScale(IRIS_IN_SCALE, 0.2f).SetDelay(0.6f).SetEase(Ease.InCubic);
    }

    public void IrisOut()
    {
        unmask.DOScale(IRIS_MID_SCALE1, 0.2f).SetEase(Ease.InCubic);
        unmask.DOScale(IRIS_MID_SCALE2, 0.2f).SetDelay(0.2f).SetEase(Ease.OutCubic);
        unmask.DOScale(new Vector2(0, 0), 0.4f).SetDelay(0.4f).SetEase(Ease.InCubic);
    }
}

 

これで準備完了。
IrisIn()、IrisOut()を呼び出すとこんな感じ。

かわいいゲームにぴったりなアイリスイン・アイリスアウトが実装できました。

 

背景の変更

Unmaskだけでなく、ScreenにもSprite*2を設定できます

 

変えてみるとこんな感じ。

 

 

 

まとめ

UnmaskForUGUIを使ってアイリスイン・アイリスアウトを実装しました。
今回は使用しませんでしたが、Sprite以外にもTextを反転したマスクとして使うこともできます。
画面遷移の演出にぜひ活用してみてください。

 

 

以上です。

 

© Unity Technologies Japan/UCL

*1:ユニティちゃんHD画像パック Vol.1を使用

*2:UniteJapan2014 Wallpaperを使用