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つかなと思います。

Sprite Maskのスケールを変更する
Sprite MaskのSpriteの画像を変更する

今回わたしは2番目のSpriteを変更するやり方で調整します。
単純に中塗りの丸い画像を用意してSprite MaskのSpriteに設定するだけです。
丸以外の形の画像でも大丈夫です。
ヒエラルキー、インスペクター、ゲームビューはこのような感じになっています。

ちなみにこちらは星型の画像をSprite Maskに設定したものです。

ちゃんとプレイヤーの動きに合わせて周りが見えるようになります。

以上がマスク処理を使って暗闇の中、プレイヤーの周りを見えるようにするやり方です。
マスク処理を使うとこれ以外にも様々なことが出来ますので興味がある人は是非調べて見て下さい。

別の記事で2Dのライトでプレイヤーの周りを照らす方法を紹介しています。

Unity URPのライトを使ってプレイヤーを照らしてみる

URPを使ってプレイヤーの周りを照らす方法です。最初の設定がちょっとむずかしいかも知れませんが便利です。

おすすめUnityオンライン学習

一人でゲーム開発が不安な方はオンラインスクールで学習すると効率が良いと思います。
以下に当てはまる人は検討してみると良いかもしれません。

「ゲーム作りけど何から初めればいい？」
「入門書をの次に何をしたらいいの？」
「疑問や問題を一人で解決出来ない。。」
「ゲームを完成させる自信がない。。」
「気軽に質問できる環境が欲しい。。」

自分で学習することに限界を感じたら
オンライン学習しましょう！

Udemy

特徴：教材動画買い切り型

レッスン方法:動画教材/Q&Aで質問

習得スキル:教材動画によって異なる

コース概要: ピンポイントで作りたいゲームジャンルの動画を見つけることができるかもしれません。また頻繁にセールを開催していますのでゲーム開発講座が1500円～で購入することも可能です。

ゲームジャンル別おすすめ講座はこちら Udemy 詳細

テックアカデミー

特徴：現役エンジニア伴走型レッスン

レッスン方法:チャット（週2回）/テキストチャット/課題レビュー

習得スキル:オリジナルゲームアプリの作成

コース概要: 途中で挫折しないためにメンター（相談者）が週2回、マンツーマンであなたの質問・相談に答えてくれるので、ゲーム開発・プログラミング未経験の人でも安心してゲーム開発に取り組めます。転職したい人向けのサポートもあります。無料体験もあります。

テックアカデミー詳細

テックスタジアム

特徴：ゲーム開発の為のオンラインスクール

レッスン方法:動画教材,Slackでの質問（24時間）

習得スキル: Unity,UnrealEngine、CG、企画、サーバー、AI、XR等

コース概要: ゲーム業界で必須な技術の習得が可能です。Slack上で待機している先生への24時間、何度でも質問できます。またIT・ゲーム業界への就職サポートが無料で受けられます。
ゲーム開発に特化したオンラインスクールですので、Unityはもとより、他のゲームエンジンやゲーム業界に興味がある方にはオススメです。

テックスタジアム詳細

デジハリONLINE

特徴：動画カリキュラム型レッスン

レッスン方法:動画講座/Slack/予約制Zoom相談

習得スキル:Unity基礎,実践/ハイクオリティ3Dゲーム

コース概要: デジタルハリウッド大学・大学院などを通じたデジタルコンテンツ業界とのつながりを活かし、最新かつ実践的なカリキュラムを提供しています。【基礎編】【実践編】とカリキュラムが分かれていて、それぞれに課題があり、ご自身の理解度を把握できます。最終的にはハイクオリティの3Dゲームが作れるようになります。

デジハリONLINE 詳細