【趣味】【ゲーム開発】Unityで読み込んだSpriteStudioで作った2Dアニメ素材の影を落とす方法

2019-09-08

僕は以前にも、SpriteStudioの素材をUnityの3D空間に召喚したことがある。

単に召喚しただけだと、影は落ちない。
先ほどのゲームも案出しの段階で、影を落としたいと思ったんだけど、
SpriteStudioはそれをサポートしていない。

↑せっかく3D世界に召喚したなら影落としたいよね。

 

というわけで、1番に思い付いたのはただ単純に
影が落ちるシェーダーを使えばいいんじゃないかということ。

SpriteStudioの素材を読み込んだらプレハブファイルができるので、
その中身にシェーダーが設定されている項目があると読んで、
中身を見ているとそれっぽい項目を発見。

↑4種類あるけど、とりあえず4つともいじって試すことにした。
 その結果どうやら、MIXがメインのシェーダーなのか、MIXをいじると影響が出た。

 

とりあえずMIXシェーダーマテリアルに、
影が落ちるシェーダーとしてStandardシェーダーを当ててみたのがこちら。
RenderringModeは一番それっぽく映った”Fade”を適用しています。

影は落ちたけど、なんか暗い…
テキトーな理解だけど、たぶん環境光の色の影響を受けている…?

そういうゲームを目指すならそれでもいいんだけど、
個人的にはあくまでも、SpriteStudioの基本のシェーダー描画で影を落としたいだけなので、
環境光の影響を受けるのは却下。

 

…。

…でも、影落ちたじゃん(現実逃避)
あ。せや!(迷走)

↑オブジェクトをダブらせて、片方はSpriteStudioのシェーダー、
もう片方はStandardシェーダーを充てて遊んだ動画です。

まあ…個人開発だし…?趣味だから…?
っていう妥協をするのも考えたが、色々問題なのでさすがにやめた。

 

シェーダープログラムに手を出すしかない。

ここで、経験の浅いUnityプログラマーに言いたいが、
「影落とすだけだし?」っていうUnity触り始めにC#触る位の軽い気持ちで
シェーダーに手を出したらだめですよ。たぶんプログラミングが嫌いになります。

…っていう記事を書こうと覚悟を決めたところで、
先ほどのMIXシェーダーファイルを開いた状態でネットサーフィンを始める。

色々試した結果、一番役立ったのは↓のサイトです。

 

ざっくり解説しますよ。

・上のサイトによると、僕がやりたい描画の方法は「アルファテスト」っていうらしい。
・でも、今回やりたいのはあくまでも「影を落としたい」だけ。
・SpriteStudioのMIXシェーダーは「アルファテスト」ではない別の描画方法を用いている。
・つまり、一つのシェーダーファイルで「SpriteStudioデフォルト描画(詳細は知らん)」と
 「アルファテストによる影落とし」の二回描画できればいい。

このことから、できたシェーダーファイルが以下の通り。

 

このコードもざっくり解説しますよ。

・SpriteStudioのデフォルトのMIXシェーダーをコピーしたファイルがもとになっている。
・// AlphaTest とコメントを打っているところが、これは先ほどの参考サイトから引用したコード
・一部コメントアウトしているのは、アルファテスト描画による本体の描画なので、影には関係ない。

 

実行結果がこちら

成し遂げたぜ。

 

…ただ、動画を見て気づいた方もいるかもしれないが、
実は左足の影が表示されていない。

これは、SpriteStudioの元ファイルで、この歩行アニメ時に
左足のZスケール値に-1を入れて左右反転させているからだ。

素材側で対応させるか、シェーダー側で対応させるか
問題は残っているが、それは別問題なのでとりあえず完成としてブログにまとめたぜ。

 

もし問題や改良策を見つけてくれたら、
俺のTwitterに連絡してほしい。

 

★追記

投影するために必要な設定を追記することにしました。
これで左足の影の問題も解決できます。

SpriteStudioのUnity表示用アセットを導入すると”View3D”というプレハブファイルがあり、
このオブジェクトの下にSpriteStudio用の素材を置けば表示できますが、
このプレハブファイルの”投影する”に”両面”を設定すれば影が落ちるようになります。

追記前は単に”オン”を設定していました。
それでも「できねぇよぉ…畜生!はめやがって!!」って思った方はTwitterにご一報!