Unity中Shader实现UI流光效果

这篇具有很好参考价值的文章主要介绍了Unity中Shader实现UI流光效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

在很多游戏的 UI 中,都有实现 一道光扫过 UI 的效果


一、实现思路1:

1、采集两张贴图,一张是主纹理,一张是扫光纹理

2、在 v2f 定义一个二维变量 “uv2” 来存放 uv 偏移后的值

3、在顶点着色器中,仿照之前的 uv 流动效果,与 _Time相乘后存放于 uv2 中

  • Unity中Shader的时间_Time

4、最后,流光纹理使用 uv2 采样 和 主纹理 使用 uv 采样的结果相加输出即可

注意:因为,这是UGUI的Shader,记着修改渲染顺序为 透明层级 和 混合模式
Tags {“Queue” = “TransParent”}
Blend SrcAlpha OneMinusSrcAlpha

二、实现思路2(计算出区域):

代码:

Shader "MyShader/UILight"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		
		// 速度 默认左->右
		_Speed ("Speed", range(-2, 2)) = 1.04
		
		// 宽度
		_Width ("Width", range(1, 10)) = 5.83

		// 角度
		_Angle ("Angle", range(-1, 1)) = 0.33

		// 亮度
		_Light ("Light", range(0, 1)) = 0.51
	}
	SubShader
	{
		Tags {"Queue" = "TransParent"}
		LOD 100
		
        //混合模式
        Blend SrcAlpha OneMinusSrcAlpha
			
		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			
			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

			struct v2f
			{
				float2 uv : TEXCOORD0;
				float4 vertex : SV_POSITION;
			};

			sampler2D _MainTex;
			
			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = v.uv;
				return o;
			}
			
			float _Speed; 
			float _Width; 
			float _Angle; 
			float _Light; 
			fixed4 frag (v2f i) : SV_Target
			{
				fixed4 col = tex2D(_MainTex, i.uv);
				float x = i.uv.x + i.uv.y * _Angle;
				float v = sin(x - _Time.w * _Speed);
				v = smoothstep(1 - _Width / 1000, 1.0, v);
				float3 target = float3(v, v, v) + col.rgb;
				col.rgb = lerp(col.rgb, target, _Light);
				return col;
			}
			ENDCG
		}
	}
}


效果:
unity流光效果,Unity,unity,ui,游戏引擎文章来源地址https://www.toymoban.com/news/detail-754016.html


参考文章

  • Unity3D Shader系列之UI流光效果
  • Unity流光shader,无需图片

到了这里,关于Unity中Shader实现UI流光效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【游戏开发小技】Unity通过UI全屏图来模糊场景画面(Shader | 模糊 | 滤镜 | Blur)

    一、前言 嗨,大家好,我是新发。 以前我写文章都是很长很长,接下来我会尝试用新的方式来写博客,尽量简短,以实用为主。同时也是作为自己零碎的一些记录,方便查阅。 本文我要说的是在 Unity 中通过 UI 全屏图来模糊场景画面的效果。 二、效果演示 这是没用模糊效果

    2024年02月05日
    浏览(41)
  • 【Unity】URP屏幕后处理UI模糊效果实现

     这里Canvas(1)设置为Overlay能渲染出指定UI高清,其他UI模糊,然而这做法非常不好,如果此时再打开UI 以及 关闭模糊效果 要将这些置顶UI 恢复到原本Canvas里,也就是要管理2套Canvas Shader代码实现模糊  1个Canvas和2个摄像机 主要以上内容,实际上就是因为Render Pass Event是只能Af

    2024年02月10日
    浏览(41)
  • Unity Shader - UI/Default shader 优化示例

    Unity : 2020.3.37f1 Pipeline : BRP 做性能优化都是慢慢都扣出来的 当然,优先处理 top 热点的 但是一些就算不是 top,但是像素面积有多,overdraw 也多不可小觑 当然,如果你能找到性能热点,那还是优先分析一下哪些 shader 占的 cycles 最高,和 A, L/S, T, 最高 还有 register 的数量尽可能

    2024年02月07日
    浏览(44)
  • Unity中UI Shader遮罩RectMask2D

    Unity中UI Shader遮罩RectMask2D 当父级物体有Rect Mask 2D组件时激活. 需要先手动定义此变体#pragma multi_compile _ UNITY_UI_CLIP_RECT 同时需要声明:_ClipRect(一个四维向量,四个分量分别表示RectMask2D的左下角点的xy坐标与右上角点的xy坐标.) UnityGet2DClipping (float2 position, float4 clipRect)即可实现遮

    2024年02月07日
    浏览(50)
  • 【Unity Shader】Special Effects(八)Wireframe 线框化(UI)

    更新日期:2023年6月17日。 Github源码:[点我获取源码] 线框化 效果可以将一张图像根据纹理轮廓转换为纯线框的图像,效果如下:

    2024年02月10日
    浏览(31)
  • 【Unity Shader】Unity中利用GrabPass实现玻璃效果

    《入门精要》中模拟玻璃是用了Unity里的一个特殊的Pass来实现的,这个Pass就是 GrabPass ,比起上一篇博客实现镜子的方法,这个方法我认为相对复杂,因此在实现之前需要对GrabPass及实现原理做一个更加详细的介绍。 场景物体拜访和贴图完全参考《入门精要》: 以及当前场景

    2024年02月09日
    浏览(49)
  • 【Unity100个实用小技巧】如何修改UI上材质的Shader

    ☀️博客主页:CSDN博客主页 💨本文由 萌萌的小木屋 原创,首发于 CSDN 💢 🔥学习专栏推荐:面试汇总 ❗️游戏框架专栏推荐:游戏实用框架专栏 ⛅️点赞 👍 收藏 ⭐留言 📝,如有错误请指正 📆 未来很长,值得我们全力奔赴更美好的生活✨ ------------------❤️分割线❤

    2024年02月14日
    浏览(50)
  • Unity用Shader实现边缘光效果

    《自学记录》 1、先创建一个Cube,再创建两个材质球Cube、Unilt 2、再创建一个shader代码UniltShader【Project右键Create-Shader-NewSurfaceShader】把里面原来的代码删除,写入下面的代码 3、把shader UniltShader拖给材质球Unilt 4、把Cube的Mesh Renderer中Materials的Size改为2,然后把材质球Cube、Unilt分

    2024年02月08日
    浏览(46)
  • UnityShader基础案例(二)——UI流光,扭曲,外边框,波纹效果

    结果:                   实现需要三张图片,一个便是要显示的主纹理,一个是主纹理的透明通道纹理(用于识别边框),一个是流光纹理。         还有一种UI流光是在外面一直转圈的。         不只是局限于UI,场景中的传送门也可以这样做,加个广告牌技术,

    2024年02月02日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包