今回はUnityネタをやっていきます。
ゲームやアニメでよく見るアイリスイン・アイリスアウトをUnityで実装してみます。
アイリスイン・アイリスアウトとは
ゲームやアニメで画面を切り替えるときに使われる演出の一つです。
画面を少しずつ広げたり絞ったりして暗転させます。(閉じるのがアウト、開くのがイン)
Twitterのアイコンが丸くなったことで一躍脚光を浴びつつある、「昭和オチ」「昭和ワイプ」と呼ばれている演出技法、正式には「アイリスアウト」と呼ばれます。逆は「アイリスイン」。
— 祥太 (@shota_) 2017年6月16日
画像は『スマイルプリキュア！』第33話の「アイリスアウト⇒アイリスイン⇒アイリスアウト」の例です。 pic.twitter.com/IJiLZJle3d
2つ合わせてアイリスショットと言ったりしますね。
今回はこれをUnityで実装してみます。
必要なパッケージとアセットのインストール
UnmaskForUGUIというパッケージを使います。
これを使うと反転したマスクを作成できます。
Unity Package Managerからインストールする場合は、このURLを打ち込めばOK
また、UIアニメーションにDOTweenを使用します。
アイリスイン、アイリスアウトを実装する
ここから本題。
Canvasの作成
アイリスイン・アイリスアウトに対応したCanvasを作成するエディター拡張が用意されています。
Hierarchyビューを右クリックして、UI/Unmask/IrisShotを選択。
これでシーン内にCanvasが作成されます。
ちなみにCanvasのScaleModeがConstantPixelSizeなので最初に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
