UnityのSprite用シェーダ(2本)

Feb 16, 2016 · unity

Unity公式のスプライトシェーダをベースにした、スプライトにエフェクトをつけるシェーダ2本。

• 指定色でベタ塗りにするシェーダ：SpriteBetaMask
• 指定色でアウトラインと影をつけるシェーダ：SpriteOutline

ベタ塗りシェーダ

未取得のアイテムをシルエット表示にしておきたいといった場合に、 わざわざ画像を別に用意しなくても良いように作ったシェーダ

プロパティ

• Mask Color：ベタ塗りにする時の色
• Mask On：trueでベタ塗り状態にする
• Tint：乗算する頂点色（SpriteRendererのColorと同じ）

アウトラインシェーダ

枠をつけてちょっと目立たせたいとか簡単な影を落としたいといった場合に、 画像を別に用意しなくても良い＆ある程度動的に変化できるように作ったシェーダ

プロパティ

• OutLine Spread：アウトラインの幅
• Outline Color：アウトラインの色
  α値は無視される
• Shadow Offset X/Shadow Offset Y：影の位置
  アウトラインの幅がある場合は、アウトラインの幅 + 影の位置を設定
• Shadow Color：影の色
• Alpha：全体のα値
  スプライト全体のαを変化させたい時は、SpriteRendererではなくこの値を使って変化させる

制約事項

• 本来のスプライトのサイズより小さくなるので注意
• Multiple Spriteでの使用は非推奨
• キャラのように複雑な形状とかの場合は途切れる可能性あり

※手抜きしたい時用なので、特に3つ目などの場合は画像自体を作るか2パスとかの正攻法での対応を。。。

説明

スプライトにアウトラインや影を簡単につけるには、参考リンクにあるような方法があるが、uGUIでしか使えないのと、太めの線をつけることができなかったので、自作した。

アウトラインや影も特別なことをしている訳ではなく、フラグメントシェーダで指定された分の幅をずらしてテクスチャを見に行き、画像がある（＝αがしきい値以上）ならアウトラインないし影の色を出力しているだけ。

0ではなくしきい値（コード内ではTHRESHOLDの0.1）にしたのは、縁取りをキレイにみせる為。固定値にしているが、使う画像によっては値を変えたりプロパティ化しても良いかも。それと、lerpとかsignを使っているのはifなどの分岐命令を使いたくなかったからだけど、これぐらいなら素直に分岐を使った方が楽だったかも・・・

さて、アウトラインシェーダの重要なポイントは、バーテックスシェーダのテクスチャのUV座標を縮小させている（下の13-14行目あたりの）ところ。

これが無いと太めのアウトラインや影をつけた時に途中で切れてしまう。初めはこの理由が判らなくてかなりハマってしまったのだけど、シーンの描画をワイヤフレームにして一目瞭然！Unityの スプライトは賢いことに、単に板ポリに画像を貼り付けるのではなく、ちゃんと形状に合わせてポリゴン分割をしてくれている。多分、四角形より描画範囲が狭くなるのでパフォーマンスがあがるからだろうけど、逆に余白がほぼ0に近い状態になるので太めの線だと切れてしまっていた。

なので、ポリゴンはそのままで中に表示する画像を縮小することで、無理やり余白を作っている。（モデルを法線方向へ膨らます通常のアウトラインシェーダとは逆にしてみた）

（左側が余白を作った状態なので、多少太めの線を引いても途切れない。逆に右側の通常のスプライトだと余白がほぼないのですぐに途切れてしまう。縮小する割合1.2は実際に試して自分の環境でバランスのとれた値なので、必要に応じて調整を）

ただ、それが逆に制約事項につながってしまっている。Multiple Spriteについては、隣のスプライトとの距離が近すぎるとそれが表示されてしまう場合があるし、ポリゴンがトゲトゲの様な感じの形状だとその部分が途切れてしまう。（が、自分の環境では特に問題にならないので放置今後の課題に）

感想

今回のサンプルに使わせてもらったこのキャラってなんて言うんだろう？？

参考リンク

• 公式：シェーダ置き場
  （バージョン毎のダウンロードから「ビルトインシェーダ」を選択）
• お手軽なuGUIでの方法：テラシュールブログ

開発環境

• Unity 5.3

ソース

• プロジェクト一式
• ベタ塗りシェーダ(ソースのみ)
• アウトラインシェーダ(ソースのみ)