逆マスクを使ってチュートリアル/トランジッションを作ろう！

逆マスクとは？

ゲームやイラスト作成、写真加工をすること時、「マスクを掛ける」という表現を聞くときがよくあります。
マスクを掛けるというのは、画像全体の一部分だけを隠すことです。

マスクが一部を隠すのだとしたら、逆マスクは指定した箇所だけを表示するイメージです。

なお、今回は、UIにおける逆マスクを解説しますが、Sprite Rendererの場合は対応方法が異なります。
詳しくは以下の記事で解説しているのでご覧ください。

あわせて読みたい

Unityでマスクを使って画像を切り取る方法！マスクを使った演出方法も紹介！ 画像を表示するときに切り取って表示したい、どうやったらいいんだろう？ 本記事の内容 ・画像にマスクを掛けて表示する方法・マスクを使った演出の紹介 マスクを使った...

逆マスクを実装出来るアセット UnmaskForUGUI

UnmaskForUGUIのインストール

こちらのOSSを使用します。

インストール方法はカンタン。パッケージマネージャーから、GitURLからパッケージ追加します。
URLは以下の通りです。

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

ちなみに、このOSSの作者、mob-sakaiさんの他のOSSには、有用なものが揃っているので、一度作者さんのほかのリポジトリを除いてみるのもおすすめです。
世の中のソーシャルゲームのクレジットにも、mob-sakaiさんのOSSがクレジットされていることを度々見ます。

逆マスクの設定方法

マスク用のCanvasを作成し、位置を調整

まずはマスク用のCanvasを作成します。
通常のUIを表示しているCanvasよりも上のレイヤーに来るように設定すると良いと思います。

次に、追加したCanvas内に、ヒエラルキーウィンドウで右クリックをしてから、UI > Unmask > Unmasked Panelを選択します。

すると、一部分だけが切り取られたようなUnmaskパネルが表示されます。

このUnmask部分のサイズを調整するとこで、Unmaskの範囲を変えられます。

このUnmaskオブジェクトのImageを変えればマスクの形も変えられます。

逆マスクを使った演出

アイリスイン/アウトトランジッション

逆マスクを使うことで、ちょっとだけ面白いトランジッションを作れます。

昔のアニメで、「ちゃんちゃん」ってなるときにも使われるやつです(伝わってくれ...)。

Unmaskのアセットを使えば、このアイリスイン、アイリスアウトをすぐ実装出来るようになっています。

アイリスイン/アイリスアウトの実装方法

STEP

Iris Shotの追加

ヒエラルキーウィンドウで右クリックをしてから、
UI>Unmask > Iris Shot を選択してヒエラルキーに追加します。

STEP

Screenの透明度を0にする

デフォルトだと半透明になっているので、透明ではないようにカラーを設定します。

STEP

Unmaskのテクスチャを設定

Unmask内のImageに、設定したいシルエットの画像をセットします。私は以下の画像を設定しました。
丸に近い形状でないと、キレイな表現にならないので注意。

STEP

アニメーションの設定

最後に、Unmaskのオブジェクトを縮小・拡大することで、画面を隠す範囲を調整します。

今回はアニメーションクリップを使って、少しバウンスするようなアニメーションとして設定しました。

まとめ

以上、逆マスクをカンタンに実装出来る、mob-sakaiさんのUnmaskForUGUIの紹介でした！

それでは素敵なゲーム制作ライフを！