Unity UGUI 流光特效

UGUI 流光特效

效果图:

在这里插入图片描述

原理

1. 写个简单的Shader:

float4 frag (v2f i) : SV_Target
{
	float4 col = tex2D(_MainTex, i.uv);
	float2 uv = i.uv - 0.5;
	float2 pt = pointbyangle( fmod( _StartAngle + _Time.y * _Speed, 360));
	float l = clamp( 1 - length( uv - pt ) / ( _Size * 1.414213562373), 0, 1 );
	float4 bor = lerp( _BorderColor, _BorderColor * col.a, _Alpha );
	return lerp( float4(0,0,0,0), bor, l );
}

2. 创建一个材质赋予Image

在这里插入图片描述
材质可以配置的项有流光颜色、流光位置、速度、大小、开始角度(这是为了多个UI组件都具有该特效时,避免流光全都同步,赋予开始角度后,可以打乱每个窗体的流光角度,使他们各自不同)。

要注意的小坑

想要让PostProcess在UGUI上起作用,Canvas渲染模式不能设置为Overlay,其他两种模式都可以,如果UI仅仅需要摆到屏幕上,则使用Camera模式,如果UI需要摆到场景中,则World Space模式。

源码下载:
https://download.csdn.net/download/sdhexu/21540738

  • 5
    点赞
  • 69
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

示申○言舌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值