概要
回転画像にマスクをかける表現を作る方法を解説します。
![1_overview - STYLY 回転する画像にマスクをかける表現](https://styly.cc/wp-content/uploads/2018/11/1_overview.gif)
回転する画像にマスクをかける表現
サンプル
GitHubサンプルプロジェクト
サンプル空間
回転マスクの解説
テクスチャを回転させる
まずは、以下のような回転する画像を作ります。
![1 - STYLY 画像を回転させる](https://styly.cc/wp-content/uploads/2018/11/1-1.gif)
画像を回転させる
テクスチャにマスクをかける
マスク画像の色が白い部分は表示させ、黒い部分は非表示にします
![img_5bfd529c84a31 - STYLY 回転マスク 概要](https://styly.cc/wp-content/uploads/2018/11/img_5bfd529c84a31.png)
回転マスク 概要
マスク結果
以下のような結果が得られます。
![2 - STYLY 回転テクスチャにマスクをかけた結果](https://styly.cc/wp-content/uploads/2018/11/2-1.gif)
回転テクスチャにマスクをかけた結果
テクスチャを変更することで多彩な表現が作れるでしょう。
![sample - STYLY テクスチャの他の組み合わせ](https://styly.cc/wp-content/uploads/2018/11/sample.gif)
テクスチャの他の組み合わせ
これらのテクスチャはGitHubのサンプルプロジェクトにあるものを利用しています。
Unity上で回転マスク表現をつくる
さっそく、回転マスク表現をUnity上で作っていきます
使用するテクスチャ
今回は以下の2枚のテクスチャを使用します。 ダウンロードして、プロジェクトファイルへ追加してください。
![intensive_line - STYLY ベーステクスチャ](https://styly.cc/wp-content/uploads/2018/11/intensive_line.png)
ベーステクスチャ
![マスク用テクスチャ rect.png - STYLY マスク用テクスチャ](https://styly.cc/wp-content/uploads/2018/11/rect.png)
マスク用テクスチャ
板の作成
HierarchyウィンドウのCreateメニューからPlaneを選択し、板を作成します
![img_5bfd54e11b12a - STYLY Planeオブジェクトの作成](https://styly.cc/wp-content/uploads/2018/11/img_5bfd54e11b12a.png)
Planeオブジェクトの作成
![img_5bfdc80a69419 - STYLY 作成したPlaneオブジェクト](https://styly.cc/wp-content/uploads/2018/11/img_5bfdc80a69419.png)
作成したPlaneオブジェクト
シェーダーの作成
テクスチャのマスク加工を行うために、Unityに備わっているシェーダー機能を利用します。 ProjectタブのCreateボタンを選択し、Shader/Unlit Shaderを選択してシェーダーファイルを作成します。
![img_5bfd56c076c4e - STYLY シェーダーファイルの作成](https://styly.cc/wp-content/uploads/2018/11/img_5bfd56c076c4e-e1543329569712.png)
シェーダーファイルの作成
![img_5bfdbcc0bd9da - STYLY 作成したシェーダーファイル](https://styly.cc/wp-content/uploads/2018/11/img_5bfdbcc0bd9da.png)
作成したシェーダーファイル
作成したシェーダーファイルを開き、以下のシェーダーコードを貼り付けて保存します。
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を選択してマテリアルを作成します。
![img_5bfdbd8a05b2c - STYLY マテリアルの作成](https://styly.cc/wp-content/uploads/2018/11/img_5bfdbd8a05b2c.png)
マテリアルの作成
![img_5bfdbe42c2b79 - STYLY 作成したマテリアル](https://styly.cc/wp-content/uploads/2018/11/img_5bfdbe42c2b79.png)
作成したマテリアル
マテリアルへテクスチャ登録
作成したマテリアルにテクスチャとマスク用テクスチャを登録します。 先ほど作成したマテリアルをクリックして選択状態にします。
![img_5bfdbf3171bf6 - STYLY マテリアルをクリック](https://styly.cc/wp-content/uploads/2018/11/img_5bfdbf3171bf6.png)
マテリアルをクリック
他のアセットをクリックした時にInspectorタブの表示が変更されないように Inspectorタブの右上にある鍵アイコンをクリックして、ロック状態にしておきます。
![img_5bfdc25bb6a41 - STYLY 鍵アイコンをクリックしてロック状態にする](https://styly.cc/wp-content/uploads/2018/11/img_5bfdc25bb6a41.png)
鍵アイコンをクリックしてロック状態にする
![img_5bfdc2a6e1b8b - STYLY Inspectorタブのロックがかかった状態](https://styly.cc/wp-content/uploads/2018/11/img_5bfdc2a6e1b8b.png)
Inspectorタブのロックがかかった状態
テクスチャをドラッグ&ドロップしてテクスチャをマテリアルへ登録します
![img_5bfdc08ff3eaa - STYLY テクスチャのマテリアルへの登録](https://styly.cc/wp-content/uploads/2018/11/img_5bfdc08ff3eaa.png)
テクスチャのマテリアルへの登録
以上でマテリアルの設定は終わりです。
![img_5bfdc98e456f8 - STYLY テクスチャ登録後のマテリアル](https://styly.cc/wp-content/uploads/2018/11/img_5bfdc98e456f8.png)
テクスチャ登録後のマテリアル
マテリアルをPlaneオブジェクトへ登録
ドラッグ&ドロップで先ほど作成した板(Planeオブジェクト)にマテリアルを登録します。
![img_5bfdc8d21c2b1 - STYLY Planeオブジェクトへのマテリアル登録](https://styly.cc/wp-content/uploads/2018/11/img_5bfdc8d21c2b1.png)
Planeオブジェクトへのマテリアル登録
完成
これで回転マスクの完成です。
![result - STYLY マテリアルの適用結果](https://styly.cc/wp-content/uploads/2018/11/result.gif)
マテリアルの適用結果
回転マスクの編集
色を変更
回転マスクの色を変更してみましょう。 マテリアルの色を選択し、色を変更します。
![img_5bfdca849f4f3 - STYLY 色のクリック](https://styly.cc/wp-content/uploads/2018/11/img_5bfdca849f4f3.png)
色のクリック
以下のように黄色を設定してみます。
![img_5bfdcad215a5c - STYLY 黄色を設定](https://styly.cc/wp-content/uploads/2018/11/img_5bfdcad215a5c.png)
黄色を設定
回転マスクの板オブジェクトの全体に黄色がつきます。
![img_5bfdcb9e765b1 - STYLY 色の変更結果](https://styly.cc/wp-content/uploads/2018/11/img_5bfdcb9e765b1.png)
色の変更結果
UnityからSTYLYへアップロード
Unity上で作成したオブジェクトのSTYLYへのアップロード方法については下記リンクをご覧ください。 https://styly.cc/ja/manual/unity-asset-uploader/