【Unity技巧】LOGO闪光效果

写在前面

本文参考了风宇冲的博文,在按照这篇博文实现LOGO闪光时,发现了一些问题。最严重的就是背景无法透明,看上去背景始终是黑色的;其次就是各个变量的意义不是非常明确,调节起来不方便;而且在闪光条的角度处理上考虑不全,在角度为钝角时会有Bug。

这篇文章针对上面的问题修改了该Shader,并将各个变量作为Shader面板中的可调节变量,可视化编辑闪光效果。

代码

Shader "Custom/LogoFlash" {
	Properties {
        _MainTex ("Base (RGB)", 2D) = "white" {}
        _FlashColor ("Flash Color", Color) = (1,1,1,1)
        _Angle ("Flash Angle", Range(0, 180)) = 45
        _Width ("Flash Width", Range(0, 1)) = 0.2
        _LoopTime ("Loop Time", Float) = 1
        _Interval ("Time Interval", Float) = 3
//        _BeginTime ("Begin Time", Float) = 2
    }
    SubShader
    {
    	Tags { "Queue"="Transparent" "RenderType"="Transparent" }

        CGPROGRAM
        #pragma surface surf Lambert alpha
//		#pragma target 3.0

        sampler2D _MainTex;
        float4 _FlashColor;
        float _Angle;
        float _Width;
        float _LoopTime;
        float _Interval;
//        float _BeginTime;

        struct Input
	{
		half2 uv_MainTex;
	};

        float inFlash(half2 uv)
        {
            float brightness = 0;

            float angleInRad = 0.0174444 * _Angle;
            float tanInverseInRad = 1.0 / tan(angleInRad);

//            float currentTime = _Time.y - _BeginTime;
	    float currentTime = _Time.y;
	    float totalTime = _Interval + _LoopTime;
            float currentTurnStartTime = (int)((currentTime / totalTime)) * totalTime;
            float currentTurnTimePassed = currentTime - currentTurnStartTime - _Interval;

            bool onLeft = (tanInverseInRad > 0);
	    float xBottomFarLeft = onLeft? 0.0 : tanInverseInRad;
	    float xBottomFarRight = onLeft? (1.0 + tanInverseInRad) : 1.0;

	    float percent = currentTurnTimePassed / _LoopTime;
            float xBottomRightBound = xBottomFarLeft + percent * (xBottomFarRight - xBottomFarLeft);
            float xBottomLeftBound = xBottomRightBound - _Width;

            float xProj = uv.x + uv.y * tanInverseInRad;

            if(xProj > xBottomLeftBound && xProj < xBottomRightBound)
            {
              	brightness = 1.0 - abs(2.0 * xProj - (xBottomLeftBound + xBottomRightBound)) / _Width;
            }

            return brightness;
        }

        void surf (Input IN, inout SurfaceOutput o)
        {
            half4 texCol = tex2D(_MainTex, IN.uv_MainTex);
            float brightness = inFlash(IN.uv_MainTex);

            o.Albedo = texCol.rgb + _FlashColor.rgb * brightness;
            o.Alpha = texCol.a;
        }

        ENDCG
    }

    FallBack "Unlit/Transparent"
}

编译成功后,材质面板如图所示:

各变量意义如下:

  • Base (RGB):LOGO的png图片
  • Flash Color:闪光条的光颜色
  • Flash Angle:闪光条的角度,范围是0到180°
  • Flash Width:闪光条宽度,范围是0到1.0
  • Loop Time:闪光条滚动一次的时间
  • Time Interval:两次相邻的闪光条滚动的时间间隔

效果

写在最后

代码中有一个变量的相关代码被注释掉了,即_BeginTime,这个是用来控制第一次闪光的时间。

由于移动端对指令和寄存器的数码要求较高,如果添加_BeginTime及其相关操作就会超过限制,需要指明Shader Mode 3.0

实际上,用Shader实现LOGO闪光效果比脚本实现(用一张闪光图,在脚本中控制UV坐标来实现)的资源消耗要大很多,因此实际中不建议这样使用。

【Unity技巧】LOGO闪光效果

时间: 2024-10-24 12:06:48

【Unity技巧】LOGO闪光效果的相关文章

[Shader]LOGO闪光效果

?? 这个效果在很多LOGO及广告宣传中都会用到.商业开发的做法应该是拿一张闪光的图,对其做uv移动,然后和原图两张图混合,这样运算会小很多,需要储存的变量也会小很多.本讲不用图而完全通过计算得出闪光区域,主要是借此加深uv计算实现特殊效果的实现,以及计算uv的方法.代码注释配合图解已经比较详细了,跟着做就行,随便找一张半透明的图来做地图即可. ? Shader "Custom/logo" {??? Properties {??? ??? _MainTex ("Texture

Unity3D教程宝典之Shader篇:第五讲LOGO闪光效果

转载自风宇冲Unity3D教程学院 这个效果在很多LOGO及广告宣传中都会用到.商业开发的做法应该是拿一张闪光的图,对其做uv移动,然后和原图两张图混合,这样运算会小很多,需要储存的变量也会小很多.本讲不用图而完全通过计算得出闪光区域,主要是借此加深uv计算实现特殊效果的实现,以及计算uv的方法.代码注释配合图解已经比较详细了,跟着做就行,随便找一张半透明的图来做地图即可. Shader "Custom/logo" { Properties { _MainTex ("Text

【Unity技巧】自定义消息框(弹出框)

写在前面 这一篇我个人认为还是很常用的,一开始也是实习的时候学到的,所以我觉得实习真的是一个快速学习工程技巧的途径. 提醒:这篇教程比较复杂,如果你不熟悉NGUI.iTween.C#的回调函数机制,那么这篇文章可能对你比较有难度,当然你可以挑战自我. 言归正传,消息框,也就是Message Box,在Windows下很常见,如下图: 在游戏里,我们也会用到这样的消息框.例如用户按了返回按钮,一般都会弹出一个确认退出的按钮.用户在执行某些重要操作时,我们总是希望再一次确认以防用户的无意操作,以此来

Unity 实现物体破碎效果(转)

感谢网友分享,原文地址(How to Make an Object Shatter Into Smaller Fragments in Unity),中文翻译地址(Unity实现物体破碎效果) In this tutorial I will show you how to create a simple shattering effect for your Unity game. Instead of just "deleting" a crate (or any other obje

【Unity技巧】开发技巧

写在前面 和备忘录篇一样,这篇文章旨在总结Unity开发中的一些设计技巧,当然这里只是我通过所见所闻总结的东西,如果有不对之处欢迎指出. 技巧1:把全局常量放到一个单独的脚本中 很多时候我们需要一些常量,例如是否输出Log,正式服务器和测试服务器的IP等等,我们可以把这些常量写在同一个脚本里,并设置属性为public static,然后在其他脚本里直接访问该变量即可.当代码量越来越大时,你会发现这样会减少很多查找常量的时间.而且,这样更改时也非常方便,例如当需要发布新版本时,你只要把该脚本中的l

[blog 算法原理]如何做出半透明和闪光效果

如何做出半透明和闪光效果 一开始看到这样的效果的时候,我感觉非常酷,等到搞明白原理之后,才发现原来很酷的效果可以通过很简单的代码实现,这就更酷了. 首先,需要获得读取一些图片,最好是自然的图片,带点后现代风格的那种. 像这张,带有一种工厂颓废风格的图片,就很是适合. 然后需要在图像中创建一个矩形. 如果是直接创建的话,那么就应该是这样的效果: Rect rect(0,0,200,400);    rectangle(src,rect,Scalar(0,0,0)); Rect rect(0,0,2

CSS技巧收集——毛玻璃效果

CSS技巧收集--毛玻璃效果 原文地址    http://www.cnblogs.com/ghost-xyx/p/5677168.html 先上 demo和 源码 其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性.但是要做一个好的毛玻璃效果,需要注意很多细节. 比如我们需要将上图中页面中间的文字区域变成毛玻璃效果,首先想到的是给其设置一个透明度,并添加模糊滤镜: .content { background-color: rgba(0,0,0,0.

炫彩logo粒子效果

h2{font-size:1.5em}p{text-indent:2em;}前端开发whqet,csdn,王海庆,whqet,前端开发专家 昨天我们学习了利用requestAnimationFrame优化动画控制,然后就忍不住冲动,在fork别人codepen的基础上,实现了这个炫彩logo粒子效果,效果预览如下. -------------------------------------------------------------------------------------------

简单CSS技巧实现的Logo动画效果(很像导航栏上经常运用的效果,但有差别)

之前不少人提过说要实现像阿里百秀Logo那样的动画效果,为了满足广大用户的需求,这里就简单做个演示.东西相对较简单,所以不要认为你搞不定它. 下面是演示的案例代码 1 <style> 2 .imlogo{ 3 display:block; 4 width:160px; 5 height:80px; 6 background:#FF5E52 url(logo2.png) center 22px no-repeat; /* 写法一般是 先水平位置 ,然后垂直位置*/ 7 -webkit-trans