Last active
June 13, 2024 15:08
-
-
Save koster/0c2ee043848b557d5e628a45031bca9d to your computer and use it in GitHub Desktop.
Create material, apply to ui image, tweak corner radius etc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Shader "Custom/RoundedCornersGradientShader" | |
{ | |
Properties | |
{ | |
_MainTex ("Texture", 2D) = "white" {} | |
_ColorTop ("Top Color", Color) = (1,1,1,1) | |
_ColorBottom ("Bottom Color", Color) = (1,1,1,1) | |
_CornerRadius ("Corner Radius", Range(0, 0.5)) = 0.1 | |
} | |
SubShader | |
{ | |
Tags { "Queue"="Overlay" "IgnoreProjector"="True" "RenderType"="Transparent" } | |
LOD 200 | |
Blend SrcAlpha OneMinusSrcAlpha | |
ZWrite Off | |
Cull Off | |
Lighting Off | |
Pass | |
{ | |
CGPROGRAM | |
#pragma vertex vert | |
#pragma fragment frag | |
#include "UnityCG.cginc" | |
struct appdata_t | |
{ | |
float4 vertex : POSITION; | |
float2 uv : TEXCOORD0; | |
}; | |
struct v2f | |
{ | |
float4 pos : SV_POSITION; | |
float2 uv : TEXCOORD0; | |
}; | |
sampler2D _MainTex; | |
float4 _MainTex_ST; | |
fixed4 _ColorTop; | |
fixed4 _ColorBottom; | |
float _CornerRadius; | |
v2f vert (appdata_t v) | |
{ | |
v2f o; | |
o.pos = UnityObjectToClipPos(v.vertex); | |
o.uv = TRANSFORM_TEX(v.uv, _MainTex); | |
return o; | |
} | |
fixed4 frag (v2f i) : SV_Target | |
{ | |
float2 uv = i.uv; | |
// Determine the color based on vertical gradient | |
fixed4 color = lerp(_ColorBottom, _ColorTop, uv.y); | |
// Apply rounded corners | |
float2 center = float2(0.5, 0.5); | |
float2 dist = abs(uv - center); | |
float2 size = float2(0.5 - _CornerRadius, 0.5 - _CornerRadius); | |
if (dist.x > size.x && dist.y > size.y) | |
{ | |
float2 cornerDist = dist - size; | |
float distToCorner = length(cornerDist); | |
float radius = _CornerRadius; | |
color.a *= smoothstep(radius, radius - 0.001, distToCorner); | |
} | |
return color; | |
} | |
ENDCG | |
} | |
} | |
FallBack "UI/Default" | |
} |
Author
koster
commented
Jun 13, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment