🌟
uGUIのx,yを反転させるシンプルなシェーダをかこう
uGUIでパーツを左右対称なパーツなんかを配置するときにscaleを-1とかにして、半分の画像で補ったりする。
例えば、右矢印の画像で左矢印を表現するとか...
こういう素材でscaleを-1にして流用してしまうと、アニメーションを行うときにscaleがいじりにくくなる.
マイナスバージョンのアニメーションを無駄に作らなくちゃならなくなるなどだ.
シェーダを使っても反転できるので、今回はシンプルなx,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点を行った.
- 名前を "UI/XY-Reverse" に変更
- XReverse/YReverseというProperties定義
- Passに受け取る変数定義
- 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を作成して、xy−reverseを選択.
uGUIのImageのmaterialを設定してあげれば..
shaderのpropertyで反転できる画像の出来上がり..!
これでscaleと独立して画像の反転ができるようになる.
おわりに
こんな感じのノリでデフォルトのuGUIシェーダから外れずそれほど壊れない感じでshaderがかける.
ちょっとした色の調整とか、マスク切り抜きとか、いろいろコーディングしだいで幅が広がるのでおすすめ.
shadergraphは高機能でなんでもできるけど、サクッと作れてシンプルなこういうshaderもいいよね!
作ったやつはupmで利用できます! もしよかったらご利用ください.
Discussion