UGUI使用Shader做圆角

将shader创建Material后,指定给Image的Material。

该shader会将矩形图片只渲染其中的方形部分,多余的部分会裁掉。方形部分加圆角。

需要注意图片自身要设置成方形,例如100*100.

效果如下图

原图

使用shader后

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'
 //create by keefor on 20210801
Shader "Custom/UI/TileTexture"
{
    Properties
    {
        [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
        _Color("Tint", Color) = (1,1,1,1)
  
        _RoundedRadius("Rounded Radius", Range(0, 0.5)) = 0.1
    }
 
    SubShader
    {
        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
            "PreviewType" = "Plane"
            "CanUseSpriteAtlas" = "True"
        }
 
        Cull Off
        Lighting Off
        ZWrite Off
        ZTest[unity_GUIZTestMode]
        Blend SrcAlpha OneMinusSrcAlpha
 
        Pass
        {
            CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			
			#include "UnityCG.cginc"
			#include "UnityUI.cginc"
			
			#pragma multi_compile __ UNITY_UI_ALPHACLIP
 
            struct appdata_t
            {
				float4 vertex   :POSITION;
				float4 color    :COLOR;
				float2 texcoord :TEXCOORD0;
            };
 
            struct v2f
            {
				float4 vertex:SV_POSITION;
				fixed4 color:COLOR;
				fixed2 texcoord :TEXCOORD0;
				fixed2 ratio :TEXCOORD1;
            };
 
            fixed4 _Color;
 
            float _RoundedRadius;
 
			uniform fixed4 _MainTex_TexelSize;
            v2f vert(appdata_t IN)
            {
                v2f OUT;
                OUT.vertex = UnityObjectToClipPos(IN.vertex);
 
                OUT.texcoord = IN.texcoord;
 
				fixed ratioy = _MainTex_TexelSize.z/_MainTex_TexelSize.w;
				fixed ratiox = 1/ratioy;
				if(ratioy >ratiox)ratioy = 1;else ratiox = 1;
				OUT.ratio = fixed2(IN.texcoord.x*ratiox,1+IN.texcoord.y*ratioy-ratioy);
                OUT.color = IN.color * _Color;
                return OUT;
            }
 
            sampler2D _MainTex;
 
            fixed4 frag(v2f IN) : SV_Target
            {
                half4 color = tex2D(_MainTex, IN.ratio) * IN.color;
 
                float x = abs(IN.texcoord.x -0.5);
                float y = abs(IN.texcoord.y -0.5);
 
                float r = 0.5-_RoundedRadius;
				
				if(x>r&&y>r)
					if((x-r)*(x-r)+(y-r)*(y-r)>_RoundedRadius*_RoundedRadius)
					color.a = 0;
 
                return color;
            }
            ENDCG
        }
    }
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: UGUI翻页动画Shader是一种用于Unity引擎中用户图形用户界面(UGUI)元素交互动画效果的特殊Shader。该Shader实现了各种UI元素(例如按钮、进度条、文本框等)的翻页动画效果。当用户在UI元素上进行互动时,翻页动画效果会在屏幕上呈现出来,为UI元素增添了动感和生动性。 该Shader的实现原理是基于OpenGL ES Shading Language(GLSL)语言,通过在shader中定义相关变量、函数、计算等操作,实现不同UI元素的翻页动画效果。例如,实现按钮按下时的翻页动画效果,可以通过以下操作实现:先定义一个时间变量t,通过逐渐递增这个变量,实现按钮的“翻页”效果,和控制按钮的不透明度变化,实现按钮尺寸变化及颜色变化等,从而达到翻页动画效果的目的。 UGUI翻页动画Shader具有高效运行、易于实现、定制性高等特点,在游戏制作、APP开发等领域被广泛应用。该Shader不仅可以实现基本的翻页动画效果,还可以实现更复杂的动画效果,例如卡片翻转、书页翻动等。 总之,UGUI翻页动画Shader是拥有广泛应用前景和开发价值的一种Shader,具有灵活性和多样性,可以大大增强游戏、APP等项目的用户体验效果。 ### 回答2: UGUIUnity自带的UI系统,可以用于制作UI界面。而翻页动画则是一种常见的UI效果,在翻页过程中,页面会根据鼠标的拖动或者触摸移动,并且具有一定的阻尼效果,这样用户可以更加自然的翻页。 UGUI翻页动画的实现离不开Shader技术,Shader可以控制UI界面中每个元素的材质,包括颜色、纹理、透明度、反射率、折射率等属性,通过改变这些属性的值来制作出不同的效果。 翻页动画使用Shader技巧主要包括: 1. 数学计算:通过计算页面的位置和距离来实现页面的移动和旋转,并且加入阻尼效果,使得页面翻转更加自然。 2. 材质属性:通过修改材质属性来实现不同的效果,比如设置不同的透明度来模拟页面翻转的过程,设置反射率和折射率来模拟页面的光影效果。 3. 贴图:通过贴图来实现页面内容的翻转效果,比如将背面的贴图翻转过来来模拟翻页过程中页面内容的变化。 总之,在实现UGUI翻页动画的过程中,Shader技术起到了至关重要的作用,通过合理的使用数学计算、材质属性和贴图等技巧,可以制作出各种不同的翻页动画效果,为UI界面增添更多的视觉效果和用户体验。 ### 回答3: ugui翻页动画shader实质上是一种用于实现翻页动画的渲染技术。这种技术能够让UI界面的元素在翻页时呈现出更加真实的效果,使得用户交互更加自然、流畅。该技术对于游戏或其他需要实现UI交互的应用程序都具有较高的实用性。 ugui翻页动画shader通常是由基于OpenGL或DirectX API等底层图形库实现的。它使用了像纹理映射、着色器等高级渲染技术,将翻页过程的各个阶段的纹理映射和着色组合起来,从而生成一种类似于真实书本翻页的效果。在使用过程中,ugui翻页动画shader需要许多参数来进行自定义配置,比如翻页速度、翻页曲率、阴影、透明度、边缘变形等等,可以根据实际需求进行相关设置。 在实现ugui翻页动画shader时,需要使用着色器编程语言进行编写,并且需要深入了解OpenGL或DirectX API的渲染原理。目前,许多专业3D制作软件都提供了ugui翻页动画shader的可视化开发工具,使得非专业人员也可以用较少的时间和精力实现比较高质量的翻页效果。 总的来说,ugui翻页动画shader技术的出现,不仅仅是UI界面效果的提升,更是对UI交互带来的革新和用户体验的提升。随着技术的不断发展,ugui翻页动画shader也将不断完善和更新,为用户的交互体验提供更加细致、流畅的支持。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值