Unity スプライトに影をつける　～その3～

前回作ったCutoutシェーダーにSprite Rendererの色情報を加えます…

※このページの内容の動作確認にはUnity5.6を使用しています。

前回は、Cutoutのシェーダーを作成し、裏側にも自然な影がつくよう無理くり変更を加えたのですが、Sprite RendererのColorのことをすっかり忘れていたので少しだけ追記。

どうやらSprite Rendererで設定したColorの値は頂点カラーとして設定されるようなので、以前の投稿でやったのと同じ方法でシェーダーを頂点カラーに対応させれば色が反映されるようになります。

Shader "Custom/Cutout Double-sided" {
 Properties {
  _Cutoff ("Cutoff", Range(0,1)) = 0.5
  _Color ("Color", Color) = (1,1,1,1)
  _MainTex ("Albedo (RGB)", 2D) = "white" {}
  _Glossiness ("Smoothness", Range(0,1)) = 0.5
  _Metallic ("Metallic", Range(0,1)) = 0.0
 }
 SubShader {
  Tags { "Queue"="AlphaTest" "RenderType"="TransparentCutout" }
  LOD 200
  
  Cull Off
  
  CGPROGRAM
  #pragma surface surf Standard alphatest:_Cutoff addshadow fullforwardshadows vertex:vert
  #pragma target 3.0
  
  sampler2D _MainTex;
    
  struct Input {
   float2 uv_MainTex;
   fixed4 vertexColor;
  };
 
  void vert (inout appdata_full v, out Input o) {
   UNITY_INITIALIZE_OUTPUT(Input, o);
   o.vertexColor = v.color; // 頂点カラーを取得
  }
  
  half _Glossiness;
  half _Metallic;
  fixed4 _Color;
 
  void surf (Input IN, inout SurfaceOutputStandard o) {
   fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
   o.Albedo = c.rgb * IN.vertexColor.rgb; // 頂点カラーを適用
   o.Metallic = _Metallic;
   o.Smoothness = _Glossiness;
   o.Alpha = c.a;
  }
  ENDCG
  
  Cull Front
  
  CGPROGRAM
 
  #pragma surface surf Standard alphatest:_Cutoff fullforwardshadows vertex:vert
  #pragma target 3.0
 
  sampler2D _MainTex;
  
  struct Input {
   float2 uv_MainTex;
   fixed4 vertexColor;
  };
  
  void vert (inout appdata_full v, out Input o) {
   UNITY_INITIALIZE_OUTPUT(Input, o);
   o.vertexColor = v.color; // 頂点カラーを取得
   v.normal.xyz = v.normal * -1;
  }
 
  half _Glossiness;
  half _Metallic;
  fixed4 _Color;
 
  void surf (Input IN, inout SurfaceOutputStandard o) {
   fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
   o.Albedo = c.rgb * IN.vertexColor.rgb; // 頂点カラーを適用
   o.Metallic = _Metallic;
   o.Smoothness = _Glossiness;
   o.Alpha = c.a;
  }
  ENDCG
 }
 FallBack "Diffuse"
}

頂点カラーのうち使用するのはRGBだけで、アルファは反映されないようにしています。

頂点カラーで色付け

どうしてもアルファを反映させて透過させたい！という場合は

Blend SrcAlpha OneMinusSrcAlpha

のようにブレンドを指定したうえで

o.Alpha = c.a * IN.vertexColor.a;

surf関数でアルファに頂点カラーの情報を渡せばOK。

Blendで透過処理　なんか変

ただこれだと透け方がおかしいので

Tags { "Queue"="Transparent" "RenderType"="TransparentCutout" }

のように、タグのQueueをAlphaTestからTransparentに変更して描画順を変えます。

Transparentを指定

これで自然な見た目で透過するようになりました。ただし、Transparentを指定すると基本的に他のオブジェクトから受ける影は描画されなくなってしまいます。つまり今までやってきたことが水の泡です。あちゃー！

あと、アルファ値がプロパティの_Cutoffより小さくなってしまうとalphatest:_Cutoffのおかげで無残にも完全な透明になってしまうので気を付けましょう。

てなわけで、スプライト用のシェーダーについてはとりあえずこのへんで。サーフェスシェーダーはかなり楽で便利ですが、もうちょっと痒い所に手が届くような突っ込んだ処理をやりたければやはりフラグメントシェーダーを使うべきかもしれませんね。　また勉強しよ…。

おねむゲーマーの備忘録

2017年7月21日