2022年2月20日

Unity 2DでMaskを使いキャラクターの周りをくり抜く

Unityを使い2D見下ろしゲームやホラーゲームなどで暗闇の中を歩いてるときの演出でプレイヤーの周りだけをくり抜いて明るくしたい。みたいな演出を入れてみたいと思ったことはありませんか？
今回はMaskという処理を加えてそれを実装してみたいと思います。。
実際には暗闇の一部を切り抜くマスクという処理でそれっぽくしています。
このやり方以外にも2Dのライトを使って周りを照らすやり方もありますのでそれは別の記事で紹介したいと思います。

この手法を応用して下記のゲームで実装しています。

キモダメシ

レトロ2Dドット絵　ホラー脱出ゲーム【肝試し】

ではUnityを起動させ作業していきましょう。
新しい2Dプロジェクトを作成します。
今回は360*660の画面サイズです

Unityスキルアップ、
始めるなら今

パズル、脱出、RPG...目標のゲームを完成させよう！

人気のUnity講座はこちら

プレイヤーを用意し動かす

まずプレイヤーとなる画像を用意します。
今回は見下ろし型2Dを想定しています。
なので本当なら上下左右のプレイヤー画像を用意した方が良いかもしれません。
私は今回後ろ向きの画像だけを用意しました。
次にHierarchy上に空のゲームオブジェクトを作成します。
名前はPlayerにしましょうか。
次にPlayerにSpriteRendererコンポーネントを追加しSpriteを用意した画像にします。

さらにPlayerを動かすc#スクリプトを作りましょう。
PlayerControllerとしました。それをPlayerにアタッチしましょう。
ここまで出来たらHierarchyとInspectorはこんな感じになっていると思います。

ではプレイヤーを動かすスクリプトを書きます。
今回ソースコードを書くのはこれだけです。

キャラクターの動かし方に関しては色々な方法がありますが、今回はそれが本題ではありませんのでとりあえず入力を受け取ったらその値を用いtransform.Translate()を使ってサクッと動かします。

上下左右にプレイヤーが動きました。
アニメーションとかそういうのも今回は割愛してます、すみません！

覆い隠すオブジェクトを生成

では次に画面を覆い隠すオブジェクトを作ります。
ヒエラルキー上で右クリックし2D ObjectからSprites→Squareを選択し四角を作成して下さい。
これをCoverObjとします。
ではInspectorを調整していきます。
やり方は下記のような感じです。

まずはTransformをリセットし中央に持ってきます。
そしてスケールを変更し画面いっぱいに広げます。
デフォルトでは色が白なのでSpriteRendererコンポーネントのカラーを黒にしましょう。
Mask Interaction をNoneからVisible Outside Maskに変更。
プレイヤーよりも順序が上に来るようにOrder in Layerを1にしましょう。

画像のようなInspectorになっているかと思います。

これで覆い隠すカバーの設定は終了です。

プレイヤーの周りを見えるようにする

今SceneViewもGameViewも真っ暗になっていると思いますので最後にプレイヤーの周りだけを見えるようにしてみましょう。
ヒエラルキー上のPlayerを右クリックし2D ObjectからSprite Maskを選択して下さい。
するとPlayerの子要素にSprite Maskが追加されCoverObjの黒塗りの部分が切り抜かれたように穴があきPlayerが表示されました。
ただこれだと見える範囲が狭いので範囲を広げてみましょう。
簡単なやり方はこの2つかなと思います。