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

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

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

流れを見ていただければわかると思いますが実装するのは非常にシンプルです。
ではUnityを起動させ作業していきましょう。
新しい2Dプロジェクトを作成します。
今回は360*660の画面サイズです

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

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

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

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

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

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

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

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

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

画像のようなInspectorになっているかと思います。
CoverObjのインスペクター

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

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

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

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

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

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

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

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

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

関連記事

Unityの学習方法

Unityを始めプログラミング全般について皆さんは普段どのようにして勉強してますか?

ネットで検索したり、書籍を読んだり、オンラインスクールなど様々な方法があります。

逆にたくさん方法があり過ぎで、どれをやればいいかわからないという方にオススメの方法をいくつか紹介します。

kindle unlimited

これはAmazonが提供する電子書籍読み放題のサービスです。

月額980円で約200万冊以上が読み放題でとてもお得です。

また30日無料体験もできるのが魅力です。

当然Unityに関する書籍もたくさん揃っています。

またC#関連の書籍や、プログラミングのものも多数あります。

プログラミング関連の書籍は値段が結構しますので、それらが無料で読めるのはかなりお得なサービスです。

30日無料体験もありますので気に入らなければその期間に解約すれば料金は発生しません

オンラインで学習

質問が出来るおすすめのUnity学習方法ページです。

・Unityでゲーム作りたいけど何から初めたら良いかわからない。

・独学でゲームを完成させられるか不安。

・ゲーム開発でわからないことを一人で解消できない。

・入門書を一通りやってみたが次に何していいかわからない。

こんな人におすすめしたい内容になっています。

最後までご覧頂いてありがとうございました。

感想・コメントをどうぞ

購読
通知する
guest
0 コメント
Inline Feedbacks
View all comments

関連記事