ShaderForge-流光效果

发表于2018-07-12
评论0 615浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏程序行业精英群

711501594
游戏开发中,经常会用到在封面对LOGO之类的图片进行流光特效,下面就来看下是如何使用ShaderForge插件实现流光效果的。

流光效果
对图片的LOGO文字部分叠加一个流动光线的效果


生成流光的原理

简单来讲,就是先提供一张光线的贴图,让这张贴图根据时间发生偏移,然后叠加上到原来的图片上。

实现

制作流光图
使用ps的渐变工具

如果想让流光只叠加到文字部分,可以直接制作一张文字部分为白色,其他部分为黑色的图片,直接用乘法叠加到之前准备的流光图上。

贴图偏移
改变贴图的uv纹理坐标,这里我们让u坐标随着时间线性增大,材质贴图会出现匀速向右偏移的效果

为流光贴图叠加颜色设置范围
乘以颜色值,乘以制作好的蒙版图
叠加到原来的图片上去

ShaderForge实现流光效果

ShaderForge节点树

手写UnityShader代码实现LOGO流光效果
Shader "Unlit/liuguang_u"
{
    Properties
    {
        _MainTex ("mainTex", 2D) = "white" {}
        _LiuguangTex("liuguangTex", 2D) = "white" {}
        _MaskTex("maskTex", 2D) = "white" {}
        _Color("color", Color) = (1,0,0,1)
        _ScrollXSpeed("xScrollValue",Range(-10,10))=2
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog
            #include "UnityCG.cginc"
            //uniform sampler2D mainTex;
            uniform sampler2D _LiuguangTex;
            uniform sampler2D _MaskTex;
            fixed4 _Color;
            fixed _ScrollXSpeed;
            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };
            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
            };
            sampler2D _MainTex;
            float4 _MainTex_ST;
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }
            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                // add
                fixed4 col = tex2D(_MainTex, i.uv);
                fixed xScrollValue = _ScrollXSpeed * _Time.y;
                float2 scrolledUV = i.uv + fixed2(xScrollValue,0.0f);
                float4 liuguangCol = tex2D(_LiuguangTex, scrolledUV);
                float4 maskCol = tex2D(_MaskTex, i.uv);
                float3 finalColor = col.rgb + _Color.rgb*maskCol*liuguangCol;
                fixed4 finalRGBA = fixed4(finalColor,1);
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return finalRGBA;
            }
            ENDCG
        }
    }
}

Tips:
如果想要节省贴图资源,可以用数学计算的方法生成流光,这样就可以节省一张流光图的空间
来自:https://blog.csdn.net/v_xchen_v/article/details/78420296

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

标签:

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台