NinaShader

Unity Shader 学習メモ

【uGUI】Imageの色を反転する

UnityのuGUIのシェーダーのカスタマイズをしてみます。

以下の記事を参考にしました。

tsubakit1.hateblo.jp

 

ビルドインシェーダーのダウンロード

まずは、組み込みシェーダーをダウンロードします。

過去のアーカイブをダウンロードできるページから、

unity3d.com

 

使用しているUnityのバージョンのビルドインシェーダーを選択します。今回はUnity 2019.1.1f1、OSはMacで試しました。

f:id:ninagreen:20190602033646p:plain

 

ダウンロードした builtin_shaders-2019.1.1f1.zip を解凍して、DefaultResourcesExtra/UI/UI-Default.shaderをUnityプロジェクトの適当な箇所にドラッグ&ドロップしてインポートします。

f:id:ninagreen:20190602034057p:plain

 

カスタマイズの準備は完了しました。

 

シェーダーの変更

uGUIのImageの色を反転させます。インポートしたUI-Defaultシェーダーを複製して任意の名前にします(ここではCustomUI-Negaとしました)

 

まずはUI-Negaシェーダーを開いて3行目のシェーダー名を変更します

Shader "UI/Default"

Shader "CustomUI/Nega"

に変更します。

 

次に101行目の色を決定している箇所の下に

half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;

この行を追加します。

color.rgb = 1 - color.rgb;

 

これでソースコードの変更は終了です。

 

シェーダーの適用

CustomUI-Negaを右クリックし、Create > Material とするとシェーダーが適用済のマテリアルが作成されます(知らなかった)。作成したマテリアルを適当なImageのMaterial欄にセットすれば完了です。

結果はこうなりました。

f:id:ninagreen:20190602041849p:plain