読者です 読者をやめる 読者になる 読者になる

テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

UnityのuGUIのUIにシェーダーを適応する

GUI(uGUI/NGUI/旧UI) Unity 2D Shader おもしろ演出、演出の強化

uGUIのUIは今までのUIと違い、独自のシェーダーを適応することが出来ます。例えば、下のように「y軸で縞模様を作る」のようなエフェクトを付与・動的に変更する事が出来ます。

 

f:id:tsubaki_t1:20140917010205p:plain

 

やり方は単純です。

 

まずUnity 4.6のダウンロードページからBuilt-in Shaders for Unityを入手します。

それを解凍し、Assets直下に入れます。今後はこのシェーダーをコピーしカスタマイズしていきます。uGUIのシェーダーをカスタマイズしなければuGUIの機能(表示順番の管理やエフェクト等)を使用できない為です。

 

後は、ImageコンポーネントのMaterialにカスタマイズしたシェーダーを適応したマテリアルをアタッチします。これだけです。

f:id:tsubaki_t1:20140917010650p:plain

 

シェーダーをカスタマイズする事で、単純なスプライトの移動等では表現が面倒な表現を比較的少ない負荷で実装することが出来ます。

やってみると意外と面白いので、ちょっと試しにやってみると良いかもしれません。その際、WebGL向けシェーダーが結構参考になったりします。

 

f:id:tsubaki_t1:20140917015232p:plain

 

ちなみに同じ理屈でUnity 2Dのスプライト用シェーダーも色々とカスタマイズ出来るはず。