[Unity]2Dゲームで好きな形のマスクを簡単に行う方法

mask

 

チュートリアルで特定の場所に注目させたい!

キャラクターにライトを当てている感じの表現がしたい!

でもuGUIのマスク機能だと好みの形で切り抜くことができない!!

 

そんな時に便利なマスク機能を紹介します。

今回は、↑のGIF画像のようなマスクを作る方法を説明します。

 

手順は以下。

 

1.マスク用のカメラを用意する

2.任意の画像(色)のスプライトで画面を覆う

3.3Dオブジェクトを生成し、マスク用シェーダーを適用する

 

1.マスク用にカメラを用意しよう

Main Cameraとは別に、マスク機能専用のカメラを用意しましょう。

今回はこんな感じで設定しました。

mask1

●Clear Flags は Depth Only

●Culling Mask はマスク用のレイヤー(今回は「Mask」)を作ってそのレイヤーのみを表示するようにします

●Depthを他のカメラより大きい数字にして、最前面に設定します

 

2.画面を任意のスプライトで覆う

ここは用途によって変わると思いますが、

今回は画面の一部だけをマスクしたいので、

全体を一旦真っ黒のスプライトで覆います。

mask8

 

単純に真っ黒のスプライトで画面全体を覆っただけです。

Layerの設定をMask専用のレイヤーに変更しておきましょう。

 

3.3Dオブジェクトを生成し、マスク用シェーダーを適用する

シェーダーというと、拒否反応を示す方もいらっしゃるかもしれませんが、

今回はとっても簡単なシェーダーを使います。

 

Shader "Masked/Mask" {
	SubShader {
		Tags {"Queue" = "Geometry+10" }
		
		ColorMask 0
		ZWrite On
		
		Pass {}
	}
}

 

シェーダーは下記のサイトとかを参考にしております。

オブジェクトの一部をマスクする

 

上記のスクリプトをShadersフォルダ以下に.shaderファイルとして追加しましょう。

今回はMask.shaderという名前にしました。

mask3

 

続いて、作成したシェーダーを使用するために、Materialを設定しましょう。

Materialsフォルダを作り、Maskという名でMaterialを作成します。

mask4

 

Materialの設定を変更します。

ShaderのStandardの部分を、Masked->Maskに変更します。

mask5

 

↑で設定したMaterialを使用した3Dオブジェクトを用意しましょう。

今回は円形に切り抜きたいので、Unity標準のShpereを使用します。

mask6

 

生成したSphereのMaterialを先ほど作成したMaskに変更します。

あと、Layerの設定もマスク専用レイヤーに変更します。

mask7

 

以上で、Sphereのある部分だけ黒いスプライトが切り取られ、

隠れていた下の部分が表示されるようになっていると思います。

※うまく切り抜かれない場合は、3DオブジェクトのZ軸が0以外になっていないか確認してください
 

まとめ

下記の簡単な手順で任意の形にマスクすることができるようになりました。

 

1.マスク用のカメラを用意する

2.任意の画像(色)のスプライトで画面を覆う

3.3Dオブジェクトを生成し、マスク用シェーダーを適用する

 

今回はSphereを使用していますが、

星形の3Dオブジェクト等を用意すれば、星型で切り抜くことができるようになりますし、

自分で色んな形のオブジェクトを用意すれば、好きな形でマスクができるようになると思います!

 

また、画面を覆うスプライトを半透明にすれば、

「暗闇でキャラのところだけ明るくする」といった表現もできます。

 

使い方次第で色々できると思うので、

面白いゲームの一機能にでもなれば幸いです!

 

 

 

 

LINEで送る
Pocket

You can leave a response, or trackback from your own site.

Leave a Reply

*

Powered by WordPress | Designed by: wordpress themes 2011 | Thanks to Best WordPress Themes, Find WordPress Themes and