uGUIのx,yを反転させるシンプルなシェーダをかこう

uGUIでパーツを左右対称なパーツなんかを配置するときにscaleを-1とかにして、半分の画像で補ったりする。

例えば、右矢印の画像で左矢印を表現するとか...

こういう素材でscaleを-1にして流用してしまうと、アニメーションを行うときにscaleがいじりにくくなる.
マイナスバージョンのアニメーションを無駄に作らなくちゃならなくなるなどだ.

シェーダを使っても反転できるので、今回はシンプルなｘ，yを反転させるシェーダを昔ながらの方法で書いてみる.

step

1. built in shaderをDL

unity archiveからビルトインシェーダをDLする

2. uGUIのシェーダをコピーしてくる

uGUIのシェーダっぽいものを引っ張ってくる

• builtin_shaders-2021.2.7f1/DefaultResourcesExtra/UI/UI-Default.shader

3. 中身を改変する

今回はx,yの両軸で反転させるshaderが欲しかったので下記3点を行った.

1. 名前を "UI/XY-Reverse" に変更
2. XReverse/YReverseというProperties定義
3. Passに受け取る変数定義
4. vertex shaderでxとyの値によって反転処理

Shader "UI/XY-Reverse"
{
    Properties
    {
// ...      
        [Toggle(X_REVERSE)] _XReverse ("X Reverse", Float) = 0
        [Toggle(Y_REVERSE)] _YReverse ("Y Reverse", Float) = 0
    }

    SubShader
    {
// ...
        Pass
        {
// ...
            float _XReverse;
            float _YReverse;

            v2f vert(appdata_t v)
            {

                
                if (_XReverse > 0) {
                  OUT.texcoord = float2(1.0 - OUT.texcoord.x, OUT.texcoord.y);
                }
                if (_YReverse > 0) {
                  OUT.texcoord = float2(OUT.texcoord.x, 1.0 - OUT.texcoord.y);
                }

                OUT.color = v.color * _Color;
                return OUT;
            }
// ...
        }
    }
}

usage

materialを作成して、ｘｙ−reverseを選択.

uGUIのImageのmaterialを設定してあげれば..

shaderのpropertyで反転できる画像の出来上がり..!
これでscaleと独立して画像の反転ができるようになる.

おわりに

こんな感じのノリでデフォルトのuGUIシェーダから外れずそれほど壊れない感じでshaderがかける.
ちょっとした色の調整とか、マスク切り抜きとか、いろいろコーディングしだいで幅が広がるのでおすすめ.
shadergraphは高機能でなんでもできるけど、サクッと作れてシンプルなこういうshaderもいいよね!

作ったやつはupmで利用できます! もしよかったらご利用ください.

• https://github.com/mattak/XYReverseShader