UGUI里可用的Shader+流光效果

UGUI里可用的Shader+流光效果

U3D抠脚菜鸡的第一篇Blog

这是一篇超级无脑的copy。。。不过帮我实现了甲方爸爸的需求。所以写下来方便更多萌新使用。
首先感谢以下两个链接博主的贡献。(因为就是参考copy这两位大牛的代码。。。)
流光效果(http://www.mamicode.com/info-detail-1111952.htm)
缺少_Stencil和_ColorMask的解决办法https://blog.csdn.net/rcfalcon/article/details/50511574)

需求

UGUI设计的图片,背景是个边框,一开始交上去的稿件有点单调,需要让边框里有光影的效果。于是想到了遮罩+UV贴图。做出来的效果老板略满意,但是希望效果更好一些。所以把UV流动改成了流光效果。
在这里插入图片描述

接下来就是copy实现过程了:

新建一个Shader,具体什么类型无所谓。因为你终将会替代掉它。。。

双击打开,可以愉快的copy编辑了:

Shader "Sprites/FlowLight"
 {
    Properties
    {
	[PerRendererData]
		_MainTex("Sprite Texture", 2D) = "white" {}
		_Color("Tint", Color) = (1, 1, 1, 1)
	[MaterialToggle] 
		PixelSnap("Pixel snap", float) = 0
		_FlowlightTex("Flowlight Texture", 2D) = "white" {}
        _Power("Power", float) = 1
        _SpeedX("SpeedX", float) = 1
        _SpeedY("SpeedY", float) = 0
        //以下代码块可以有效防止Editor报缺失参数的错误(笔者踩过的坑)
		_StencilComp("Stencil Comparison", Float) = 8
		_Stencil("Stencil ID", Float) = 0
		_StencilOp("Stencil Operation", Float) = 0
		_StencilWriteMask("Stencil Write Mask", Float) = 255
		_StencilReadMask("Stencil Read Mask", Float) = 255
		_ColorMask("Color Mask", Float) = 15
		//-----
	}
	
     SubShader
     {
		Tags{	
			"Queue" = "Transparent"
			"IgnoreProjector" = "True"
			"RenderType" = "Transparent"
			"PreviewType" = "Plane"
			"CanUseSpriteAtlas" = "True"
		}
		  //以下代码块可以有效防止Editor报缺失参数的错误(笔者踩过的坑)
		Stencil{
			Ref[_Stencil]
			Comp[_StencilComp]
			Pass[_StencilOp]
			ReadMask[_StencilReadMask]
			WriteMask[_StencilWriteMask]
		}
		//----
		Cull Off
	         Lighting Off
	         ZWrite Off
	         Blend One OneMinusSrcAlpha
			
        Pass
        {
	         CGPROGRAM
	         #pragma vertex vert
	         #pragma fragment frag
        	 #pragma multi_compile _ PIXELSNAP_ON
		 #include "UnityCG.cginc"
				
             struct appdata_t
             {
                 float4 vertex : POSITION;
                 float4 color : COLOR;
                 float2 texcoord : TEXCOORD0;
             };
            struct v2f
            {
                 float4 vertex : SV_POSITION;
                 fixed4 color : COLOR;
                 half2 texcoord : TEXCOORD0;
                 half2 texflow : TEXCOORD1;
            };
	    fixed4 _Color;
	    sampler2D _FlowlightTex;
            fixed4 _FlowlightTex_ST;
            fixed _SpeedX;
            fixed _SpeedY;
	
             v2f vert(appdata_t IN)
             {
                 v2f OUT;
                 OUT.vertex = UnityObjectToClipPos(IN.vertex);
                 OUT.texcoord = IN.texcoord;
                 OUT.texflow = TRANSFORM_TEX(IN.texcoord, _FlowlightTex);
                 OUT.texflow.x += _Time * _SpeedX;
                 OUT.texflow.y += _Time * _SpeedY;
                 OUT.color = IN.color * _Color;
             #ifdef PIXELSNAP_ON
                 OUT.vertex = UnityPixelSnap(OUT.vertex);
             #endif
					
                 return OUT;
             }
			
             sampler2D _MainTex;
             float _Power;
			
             fixed4 frag(v2f IN) : SV_Target
             {
                 fixed4 c = tex2D(_MainTex, IN.texcoord);
                 fixed4 cadd = tex2D(_FlowlightTex, IN.texflow) * _Power;
                 cadd.rgb *= c.rgb;
                 c.rgb += cadd.rgb;
                 c.rgb *= c.a;
                 return c;
             }
        ENDCG
       }
   }
}

然后再新建一个Material把刚才的shader拖上去

覆盖Material

再把FlowTex替换成你希望的效果的图片

流光效果(拖放到FlowTex上)

把这个新建的Material拖到UGUI的图片上,运行即可

Inspector

在这里插入图片描述

如果甲方爸爸让你的字也发光怎么办呢。。。我也不知道。。。不过可以用遮罩,在Text下加一个Mask的组件,然后把上面做好的那个BlingBling的RawImage拖到Text的子节点上。

Text的Inspector

OJBK
愣着干嘛,笑啊

愣着干嘛,笑啊。。。哈哈哈哈哈

### 回答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: UGUI是Unity自带的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也将不断完善和更新,为用户的交互体验提供更加细致、流畅的支持。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值