Unityを利用した2D画像の回転マスク表現

概要

回転画像にマスクをかける表現を作る方法を解説します。

回転する画像にマスクをかける表現

回転する画像にマスクをかける表現

 

サンプル

GitHubサンプルプロジェクト

https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/RotationMask_Sample 

サンプル空間 

 

回転マスクの解説

テクスチャを回転させる

まずは、以下のような回転する画像を作ります。

画像を回転させる

画像を回転させる

 

テクスチャにマスクをかける

マスク画像の色が白い部分は表示させ黒い部分は非表示にします

回転マスク 概要

回転マスク 概要

 

マスク結果

以下のような結果が得られます。

回転テクスチャにマスクをかけた結果

回転テクスチャにマスクをかけた結果

  テクスチャを変更することで多彩な表現が作れるでしょう。

テクスチャの他の組み合わせ

テクスチャの他の組み合わせ

これらのテクスチャはGitHubのサンプルプロジェクトにあるものを利用しています。  

Unity上で回転マスク表現をつくる

さっそく、回転マスク表現をUnity上で作っていきます  

使用するテクスチャ

今回は以下の2枚のテクスチャを使用します。 ダウンロードして、プロジェクトファイルへ追加してください。

ベーステクスチャ

ベーステクスチャ

 

マスク用テクスチャ

マスク用テクスチャ

板の作成

HierarchyウィンドウのCreateメニューからPlaneを選択し、板を作成します

Planeオブジェクトの作成

Planeオブジェクトの作成

 

作成したPlaneオブジェクト

作成したPlaneオブジェクト

シェーダーの作成

テクスチャのマスク加工を行うために、Unityに備わっているシェーダー機能を利用します。 ProjectタブのCreateボタンを選択し、Shader/Unlit Shaderを選択してシェーダーファイルを作成します。

シェーダーファイルの作成

シェーダーファイルの作成


作成したシェーダーファイル

作成したシェーダーファイル

  作成したシェーダーファイルを開き、以下のシェーダーコードを貼り付けて保存します。

Shader "STYLY/Examples/RotationMask" {
	Properties{
		_Color("Color", Color) = (1,1,1,1)
		_OverTex("Base Texture (RGB)", 2D) = "white" {}
		_MaskTex("Mask Texture (RGB)", 2D) = "white" {}
		_RotationSpeed("Rotation Speed", Float) = 1.0
	}
		SubShader{
			Tags { "RenderType" = "Opaque" }
			LOD 200

			CGPROGRAM
			#pragma surface surf Standard fullforwardshadows
			#pragma target 3.0

			sampler2D _MaskTex;
			sampler2D _OverTex;

			struct Input {
				float2 uv_MaskTex;
				float2 uv_OverTex;
			};

			float _RotationSpeed;
			fixed4 _Color;

			#define ANGLE (_Time.z * _RotationSpeed)

			void surf(Input IN, inout SurfaceOutputStandard o) {
				fixed4 mask = tex2D(_MaskTex, IN.uv_MaskTex);
				clip(mask.r - 0.5); // do not draw if mask.r is less than 0.5

				fixed2 center = fixed2(0.5, 0.5);

				float2x2 rotate = float2x2(cos(ANGLE), -sin(ANGLE), sin(ANGLE), cos(ANGLE));
				fixed2 uv_OverTex = mul(rotate, IN.uv_OverTex - center) + center;
				fixed4 over = tex2D(_OverTex, uv_OverTex);
				fixed4 c = mask * over * _Color;
				o.Emission = c.rgb;
			}
			ENDCG
		}
		FallBack "Diffuse"
}

 

マテリアルの作成

シェーダーを右クリックし、Create/Materialを選択してマテリアルを作成します。

マテリアルの作成

マテリアルの作成


作成したマテリアル

作成したマテリアル

 

マテリアルへテクスチャ登録

作成したマテリアルにテクスチャとマスク用テクスチャを登録します。 先ほど作成したマテリアルをクリックして選択状態にします。

マテリアルをクリック

マテリアルをクリック

    他のアセットをクリックした時にInspectorタブの表示が変更されないように Inspectorタブの右上にある鍵アイコンをクリックして、ロック状態にしておきます。

鍵アイコンをクリックしてロック状態にする

鍵アイコンをクリックしてロック状態にする

 

Inspectorタブのロックがかかった状態

Inspectorタブのロックがかかった状態

  テクスチャをドラッグ&ドロップしてテクスチャをマテリアルへ登録します

テクスチャのマテリアルへの登録

テクスチャのマテリアルへの登録

以上でマテリアルの設定は終わりです。

テクスチャ登録後のマテリアル

テクスチャ登録後のマテリアル

 

マテリアルをPlaneオブジェクトへ登録

ドラッグ&ドロップで先ほど作成した板(Planeオブジェクト)にマテリアルを登録します。

Planeオブジェクトへのマテリアル登録

Planeオブジェクトへのマテリアル登録

 

完成

これで回転マスクの完成です。

マテリアルの適用結果

マテリアルの適用結果

 

回転マスクの編集

色を変更

回転マスクの色を変更してみましょう。   マテリアルの色を選択し、色を変更します。

色のクリック

色のクリック

  以下のように黄色を設定してみます。

黄色を設定

黄色を設定

  回転マスクの板オブジェクトの全体に黄色がつきます。

色の変更結果

色の変更結果

 

UnityからSTYLYへアップロード

Unity上で作成したオブジェクトのSTYLYへのアップロード方法については下記リンクをご覧ください。 https://styly.cc/ja/manual/unity-asset-uploader/