【趣味】【ゲーム開発】Unityで読み込んだSpriteStudioで作った2Dアニメ素材の影を落とす方法
僕は以前にも、SpriteStudioの素材をUnityの3D空間に召喚したことがある。
https://twitter.com/avmiya238/status/1149918034821128193単に召喚しただけだと、影は落ちない。
先ほどのゲームも案出しの段階で、影を落としたいと思ったんだけど、
SpriteStudioはそれをサポートしていない。
↑せっかく3D世界に召喚したなら影落としたいよね。
というわけで、1番に思い付いたのはただ単純に
影が落ちるシェーダーを使えばいいんじゃないかということ。
SpriteStudioの素材を読み込んだらプレハブファイルができるので、
その中身にシェーダーが設定されている項目があると読んで、
中身を見ているとそれっぽい項目を発見。
↑4種類あるけど、とりあえず4つともいじって試すことにした。
その結果どうやら、MIXがメインのシェーダーなのか、MIXをいじると影響が出た。
とりあえずMIXシェーダーマテリアルに、
影が落ちるシェーダーとしてStandardシェーダーを当ててみたのがこちら。
RenderringModeは一番それっぽく映った”Fade”を適用しています。
影は落ちたけど、なんか暗い…
テキトーな理解だけど、たぶん環境光の色の影響を受けている…？
そういうゲームを目指すならそれでもいいんだけど、
個人的にはあくまでも、SpriteStudioの基本のシェーダー描画で影を落としたいだけなので、
環境光の影響を受けるのは却下。
…。
…でも、影落ちたじゃん(現実逃避)
あ。せや！(迷走)
↑オブジェクトをダブらせて、片方はSpriteStudioのシェーダー、
もう片方はStandardシェーダーを充てて遊んだ動画です。
まあ…個人開発だし…？趣味だから…？
っていう妥協をするのも考えたが、色々問題なのでさすがにやめた。
シェーダープログラムに手を出すしかない。
ここで、経験の浅いUnityプログラマーに言いたいが、
「影落とすだけだし？」っていうUnity触り始めにC#触る位の軽い気持ちで
シェーダーに手を出したらだめですよ。たぶんプログラミングが嫌いになります。
…っていう記事を書こうと覚悟を決めたところで、
先ほどのMIXシェーダーファイルを開いた状態でネットサーフィンを始める。
色々試した結果、一番役立ったのは↓のサイトです。
http://tsumikiseisaku.com/blog/shader-tutorial-transparent/
ざっくり解説しますよ。
・上のサイトによると、僕がやりたい描画の方法は「アルファテスト」っていうらしい。
・でも、今回やりたいのはあくまでも「影を落としたい」だけ。
・SpriteStudioのMIXシェーダーは「アルファテスト」ではない別の描画方法を用いている。
・つまり、一つのシェーダーファイルで「SpriteStudioデフォルト描画(詳細は知らん)」と
「アルファテストによる影落とし」の二回描画できればいい。
このことから、できたシェーダーファイルが以下の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
// // SpriteStudio5 Player for Unity // // Copyright(C) Web Technology Corp. // All rights reserved. // Shader "Custom/SpriteStudio5/Mix_AlphaTest" { Properties { _MainTex ("Base (RGB)", 2D) = "white" {} _OverlayParameter_Non ("Parameter(Non)", Vector) = (1.0, 0.0, -1.0, 0.0) _OverlayParameter_Mix ("Parameter(Mix)", Vector) = (1.0, 1.0, -1.0, 1.0) _OverlayParameter_Add ("Parameter(Add)", Vector) = (1.0, 0.0, -1.0, 1.0) _OverlayParameter_Sub ("Parameter(Sub)", Vector) = (1.0, 0.0, -1.0, -1.0) _OverlayParameter_Mul ("Parameter(Mul)", Vector) = (1.0, 1.0, 1.0, 1.0) // AlphaTest _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 _Cutoff ("Cutoff" , Range(0, 1)) = 0.5 } SubShader { Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" } Pass { Lighting Off Fog { Mode off } Cull Off ZTest LEqual ZWRITE Off Blend SrcAlpha OneMinusSrcAlpha CGPROGRAM #pragma vertex VS_main #pragma fragment PS_main #include "UnityCG.cginc" #include "Base/ShaderVertex_Sprite_SpriteStudio.cginc" #include "Base/ShaderPixel_Sprite_SpriteStudio.cginc" ENDCG SetTexture [_MainTex] { Combine Texture, Texture } } // AlphaTest Tags { "Queue" = "AlphaTest" "RenderType" = "TransparentCutout" } LOD 200 Cull Off CGPROGRAM #pragma target 3.0 #pragma surface surf Standard fullforwardshadows alphatest:_Cutoff // fixed4 _Color; // sampler2D _MainTex; // half _Glossiness; // half _Metallic; struct Input { float2 uv_MainTex; }; void surf (Input IN, inout SurfaceOutputStandard o) { // fixed4 c = tex2D(_MainTex, IN.uv_MainTex) * _Color; // o.Albedo = c.rgb; // o.Metallic = _Metallic; // o.Smoothness = _Glossiness; // o.Alpha = c.a; } ENDCG } FallBack "Transparent/Cutout/Diffuse" } |
このコードもざっくり解説しますよ。
・SpriteStudioのデフォルトのMIXシェーダーをコピーしたファイルがもとになっている。
・// AlphaTest とコメントを打っているところが、これは先ほどの参考サイトから引用したコード
・一部コメントアウトしているのは、アルファテスト描画による本体の描画なので、影には関係ない。
実行結果がこちら
成し遂げたぜ。
…ただ、動画を見て気づいた方もいるかもしれないが、
実は左足の影が表示されていない。
これは、SpriteStudioの元ファイルで、この歩行アニメ時に
左足のZスケール値に-1を入れて左右反転させているからだ。
素材側で対応させるか、シェーダー側で対応させるか
問題は残っているが、それは別問題なのでとりあえず完成としてブログにまとめたぜ。
もし問題や改良策を見つけてくれたら、
俺のTwitterに連絡してほしい。
★追記
投影するために必要な設定を追記することにしました。
これで左足の影の問題も解決できます。
SpriteStudioのUnity表示用アセットを導入すると”View3D”というプレハブファイルがあり、
このオブジェクトの下にSpriteStudio用の素材を置けば表示できますが、
このプレハブファイルの”投影する”に”両面”を設定すれば影が落ちるようになります。
追記前は単に”オン”を設定していました。
それでも「できねぇよぉ…畜生！はめやがって！！」って思った方はTwitterにご一報！