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

2018年11月29日 2019年02月07日

1 概要
2 サンプル
3 回転マスクの解説
4 Unity上で回転マスク表現をつくる
5 回転マスクの編集
- 5.1 色を変更
6 UnityからSTYLYへアップロード

概要

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

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

サンプル

GitHubサンプルプロジェクト

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

サンプル空間

回転マスクの解説

テクスチャを回転させる

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

画像を回転させる

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

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

回転マスク概要

マスク結果

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

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

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

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

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

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

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

使用するテクスチャ

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

ベーステクスチャ

マスク用テクスチャ

板の作成

HierarchyウィンドウのCreateメニューから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"
}