ながつきぶろぐ

Unityのこととかゲームのこととか書けたらよいなブログ。

「Shader Forge」でSpriteのシェーダーを作ってみた

この記事のタイトルとURLをコピーする

ひよこバトルで「ノックバック」を実装中でございまして、
その際に「無敵時間」を表現するために点滅を入れようかなーと思いました。

点滅の実装自体はC#のソースで書いたりアニメーション使うことでできはするのですが、
シェーダーを書いてマテリアルをつける/外すを変えた方がコスト的によいのかなーと思い、書くことにしました。
(実際よいのかはパフォーマンス見てないので分かりません)

※自分がやったことしか書いてないので、チュートリアル的なものではありません!

自前で書いてみたけど挫折した

シェーダーのコード上書きしてしまった上に書き方を忘れてしまったため再現ができないのですが、
元々作っておいたアウトラインの点滅シェーダー(下のgif)をもとに書いてみました。 f:id:nagatuki_elv:20180519223824g:plain

おそらく元のシェーダーがアウトライン書く用だったためうまいこといかなかったのです。

「Shader Forge」を使ってみた

シェーダーのコードを書かなくても、各処理をつなぐだけでシェーダーができちゃうアセットです。
シェーダーを勝手に書いてくれます。
いわゆるビジュアルプログラミング的な感じですかね?
「書かなくてもよい」とは書きましたが、コードを書いて値を計算するためのノードはちゃんとあるのでご安心を…。

入手方法

Unityアセットストアからダウンロードできます。
昔は有料だった気がしましたが、どこかのタイミングで無料化されたっぽくて今は無料です。(ググったら今年の5月から?)

追記(2018/07/09)
どうやらアセットストアから削除されてしまったようです。
こちらのGitから同じものが落とせます。 github.com


インポートすると、Assetsフォルダ直下に「ShaderForge」というフォルダができ、そのフォルダ以下だけに処理がぶら下がっています。

起動

Unity上部のメニューバーから、「Window」→「Shader Forge」でウィンドウが開けます。
(新規プロジェクトじゃないため余計なものも入ってます…!) f:id:nagatuki_elv:20180519225601g:plain

TOPウィンドウ

f:id:nagatuki_elv:20180519225800p:plain 基本的に、上部の大きいボタンだけ使えばよいかと思います。
「New Shader」はシェーダーを新規で作成します。
「Load Shader」はShaderファイルを読み込んでノード作成をするのですが、Shader Forgeで作ったものをロードするようにした方がよいと思います。
予めコードを書いたシェーダーをロードすると、何か消えるかもしれません…。
「Node Documentation」から、ブラウザでドキュメントやチュートリアルが見れます。(日本語はないです)

シェーダーの種類選択

f:id:nagatuki_elv:20180519230407p:plain 上記で「New Shader」を選択した後に表示されます。作りたいシェーダーの種類を選択します。
種類を選んだあとにダイアログが立ち上がるので、シェーダーファイル(.shader)の保存先を指定します。

今回は「Sprite」を選びました。

シェーダー編集画面

f:id:nagatuki_elv:20180519230856p:plain こちら「Sprite」でシェーダーを作成したあとの画面になります。

左上

シェーダーのイメージ画像(マテリアル選択したときに出るやつ)と、あとコンパイルボタンと戻るボタン。
「Auto」にチェックを入れると変更の度にコンパイルしてくれますが、当然重くなるのでその時は外しましょう。
「Settings」はちゃんと見てないです!

左下

有効になっているシェーダープロパティが出てきます。サムネイルのだとメインテクスチャと色ですね。
ぶっちゃけ左下は「Properties」以外ちゃんと見てないので分かりません。

ここがメインで触るところになります。

点滅シェーダーを作る

「2つのアルファ値を設定し、その2値を切り替える」シェーダーを作成します。

プロパティの作成

今回は以下の3つを作成します。

  • Alpha1:アルファ値その1
  • Alpha2:アルファ値その2
  • FlashSpeed:点滅速度(大きいほど早く切り替わる)

f:id:nagatuki_elv:20180519232527g:plain

右クリックでメニューが出てきますので、そちらの「Properties」→「Slider」を選択します。
それだけでスライダーのプロパティができあがります。

できあがったノードの上部を選択し、プロパティ名(Alpha1とAlpha2)に変更します。
アルファは0~1でよいので、「Min」と「Max」はそのままです。
「Slider」はスライダーの設定値ですが、お好みの値に変えてしまってください。

FlashSpeedについては、同じく右クリックの「Properties」→「Value」です。
数字が設定値になります。お好みでどうぞ。(私は10にしています)

f:id:nagatuki_elv:20180519233316p:plain
ちなみに作成したノードを右クリックし、「Edit Comment」を選択するとノードの上部にコメントが書けます。べんり。

点滅処理の作成

今回はコードを書きます。

f:id:nagatuki_elv:20180519233917g:plain 右クリックメニューから、「Code」→「Code」を選択します。 四隅をドラッグすると領域の広さを変えられるので、見やすいように変えてしまいましょう。

「Edit」をクリックして、コード入力できる状態にします。
以下をコピペします。時間で0~1の値に変化するコードになります。

return (sin(Time.w * FlashSpeed) + 1.0) * 0.5;

なお、点滅のコードは以下を参考にさせていただいています。
qiita.com

コードはreturnで返却する形にして、記載します。
テキストボックス右上は戻り値の型です。今回は「Float」でよいです。

「Add Input」を押すと、そのコードへの入力変数を追加できます。
今回は、「Float」型の_FlashSpeedを使いたいので、それを追加します。

ノードをつなげる

SliderやValue、Codeのノードの左右にちょろっと出てきているでっぱりがありますが、こちらがそのノードに対する入力・出力になります。
ドラッグすることでつなげることができ、それらの値が関連付けられるようになります。

今回ですと、「FlashSpeed」の右側の端子と「code」の左側の端子を繋げます。

テクスチャのアルファを変更する

今までの操作だと、まだテクスチャには何も変化がありません。

2つのアルファを切り替える

右クリックメニューの「Arithmetic」→「Leap」で線分補間(あってる?)ができます。
AとBの2値と、T(0~1)をもとに値を返します。
Tが0だとAと同じ、1だとBと同じ、0.5だとAとBの中間です。

計算したアルファをテクスチャに反映

Leapで補間したアルファをテクスチャに載せます。
右クリックメニューの「Arithmetic」→「Multiply」から、乗算ノードを作成します。

作成したノードの端子は、それぞれ以下を繋ぎましょう。(分かりやすいようにOutputを先にしています)

  • Output(右側の端子):コメントで「// A」となっている「Multiply」ノードの右側の端子と繋がっている端子(「Premultiply Alpha」のコメントがあるノードのBと「Main」の「Opacity」)
  • A:コメントで「// A」となっている「Multiply」ノードの右側の端子
  • B:「Leap」のOutput端子

f:id:nagatuki_elv:20180520002502p:plain こちらが完成図になります。

完成!

できた!

終わりに

結構ズボラなところがありましたが、逆に言えばそれだけズボラでもそれっぽいものが書けてしまうやつなのです。これ書いてる方が時間かかってる
あとそもそも覚えるまでが大変なのはツールの宿命なので仕方ない。