Unity实现UI光晕效果（发光效果）

前言

UI光晕效果（发光效果）是一种常见的呈现方式，可以让UI元素更加突出和吸引人的注意力。在Unity中，我们可以使用一些技术来实现这个效果，例如Shader和后处理效果等。接下来，我将介绍一种使用Shader实现UI光晕效果的方法。

Shader实现UI光晕效果

在Unity中，Shader是一种用于定义渲染对象表面的程序。我们可以通过编写自定义Shader来控制UI元素的渲染效果，包括光晕效果。

首先，我们需要创建一个新的Shader。在Unity的Project视图中，右键点击任意文件夹，在弹出的上下文菜单中选择 "Create" -> "Shader"。命名新的Shader并双击打开。

Shader "UI/Outline"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _OutlineColor ("Outline Color", Color) = (1,1,1,1)
        _OutlineWidth ("Outline Width", Range(0.01,0.1)) = 0.03
    }
    SubShader
    {
        Tags { "Queue"="Transparent" "RenderType"="Transparent" }
        Blend SrcAlpha OneMinusSrcAlpha
        ZWrite Off
        ZTest LEqual
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            sampler2D _MainTex;
            fixed4 _OutlineColor;
            float _OutlineWidth;

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

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

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                half4 textureColor = tex2D(_MainTex, i.uv);
                half4 outlineColor = _OutlineColor * smoothstep(1.0 - _OutlineWidth, 1.0, textureColor.a);
                return outlineColor;
            }
            ENDCG
        }
    }
}

以上是一个简单的UI光晕效果的Shader代码。在上面的代码中，我们定义了一个名为"UI/Outline"的Shader，并提供了一些属性来控制光晕效果的颜色和宽度。其中，_MainTex表示UI元素的主纹理，_OutlineColor表示光晕的颜色，_OutlineWidth表示光晕的宽度。

使用Shader实现UI光晕效果

一旦我们创建了自定义的Shader，接下来需要将其应用到UI元素上。首先，我们需要创建一个材质。在Unity的Project视图中，右键点击任意文件夹，在弹出的上下文菜单中选择 "Create" -> "Material"。给新的材质命名并双击打开。在Inspector视图中，将Shader属性设置为我们刚刚创建的"UI/Outline"。

然后，将新创建的材质应用到UI元素上。选择要应用光晕效果的UI元素对象，在Inspector视图中找到"Image"组件。将Material属性设置为我们刚刚创建的材质。

最后，我们需要在运行时通过代码控制光晕效果。例如，可以修改材质的属性来改变光晕的颜色和宽度。以下是一个示例代码：

using UnityEngine;
using UnityEngine.UI;

public class UIOutlineController : MonoBehaviour
{
    public Image targetImage;
    public Color outlineColor;
    public float outlineWidth;

    private Material material;

    void Start()
    {
        material = targetImage.material;
    }

    void Update()
    {
        material.SetColor("_OutlineColor", outlineColor);
        material.SetFloat("_OutlineWidth", outlineWidth);
    }
}

在上述代码中，我们创建了一个名为UIOutlineController的脚本，通过该脚本可以动态控制UI元素的光晕效果。将该脚本添加到具有UI元素的游戏对象上，然后在Inspector视图中设置目标Image和光晕的颜色、宽度。在每一帧的Update函数中，我们通过material.SetColor和material.SetFloat来修改材质的属性，从而实现动态调整光晕效果的目的。

总结

通过使用自定义Shader和修改材质的属性，我们可以在Unity中实现UI光晕效果（发光效果）。首先，我们需要创建一个自定义的Shader来定义光晕效果，然后创建一个材质并将该Shader应用到UI元素上。最后，我们可以通过修改材质的属性来动态调整光晕的颜色和宽度。通过这种方式，我们可以为UI元素添加吸引人的发光效果，提升用户体验。