Unity WebGL构建中按钮消失问题技术问询

问题描述 #

我在游戏中设置了2个用于切换控制方案的按钮，同时编写了一个用于淡入激活状态方案按钮的脚本。该脚本在Unity编辑器中运行正常，但构建为WebGL版本后，尝试更改按钮颜色时按钮会消失。

涉及脚本内容（翻译后） #

ButtonsFade脚本

using UnityEngine;
using UnityEngine.UI;

public class ButtonsFade : MonoBehaviour
{
    public CustomButton[] buttons;
    private CustomButton currentActiveButton;

    void Start()
    {
        // 默认激活第一个按钮
        if (buttons.Length > 0)
        {
            SetActiveButton(buttons[0]);
        }
    }

    public void SetActiveButton(CustomButton newActiveButton)
    {
        if (currentActiveButton != null)
        {
            currentActiveButton.StartFadeOut();
        }
        currentActiveButton = newActiveButton;
        currentActiveButton.StartFadeIn();
    }
}

CustomButton脚本

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class CustomButton : MonoBehaviour
{
    public Image buttonImage;
    public Color activeColor = Color.white;
    public Color inactiveColor = Color.gray;
    public float fadeSpeed = 0.5f;

    private Coroutine currentFadeCoroutine;

    void Awake()
    {
        if (buttonImage == null)
        {
            buttonImage = GetComponent<Image>();
        }
        // 初始设置为非激活颜色
        buttonImage.color = inactiveColor;
    }

    public void StartFadeIn()
    {
        if (currentFadeCoroutine != null)
        {
            StopCoroutine(currentFadeCoroutine);
        }
        currentFadeCoroutine = StartCoroutine(FadeToColor(activeColor));
    }

    public void StartFadeOut()
    {
        if (currentFadeCoroutine != null)
        {
            StopCoroutine(currentFadeCoroutine);
        }
        currentFadeCoroutine = StartCoroutine(FadeToColor(inactiveColor));
    }

    private IEnumerator FadeToColor(Color targetColor)
    {
        Color startColor = buttonImage.color;
        float elapsedTime = 0f;

        while (elapsedTime < fadeSpeed)
        {
            buttonImage.color = Color.Lerp(startColor, targetColor, elapsedTime / fadeSpeed);
            elapsedTime += Time.deltaTime;
            yield return null;
        }

        buttonImage.color = targetColor;
        currentFadeCoroutine = null;
    }
}

问题原因分析 #

WebGL平台对UI元素的渲染和逻辑执行有特殊限制，导致按钮消失的常见原因包括：

• 颜色透明度异常：WebGL下浮点数计算精度与编辑器存在差异，颜色插值过程中Alpha值可能意外被置为0，导致按钮完全透明。
• Shader兼容性问题：默认UI Shader（如UI/Default）在WebGL下动态修改颜色时，可能出现渲染异常，尤其是带Mask的Shader。
• 协程执行偏差：WebGL的协程调度逻辑与编辑器有细微差别，可能导致颜色插值未正确执行，直接跳转到目标颜色（若目标颜色Alpha为0则消失）。

解决方案 #

1. 强制锁定颜色Alpha值 #

修改CustomButton中的FadeToColor协程，确保颜色Alpha始终为1（除非你需要透明效果）：

private IEnumerator FadeToColor(Color targetColor)
{
    // 强制目标颜色和起始颜色的Alpha为1
    targetColor = new Color(targetColor.r, targetColor.g, targetColor.b, 1f);
    Color startColor = new Color(buttonImage.color.r, buttonImage.color.g, buttonImage.color.b, 1f);
    float elapsedTime = 0f;

    while (elapsedTime < fadeSpeed)
    {
        buttonImage.color = Color.Lerp(startColor, targetColor, elapsedTime / fadeSpeed);
        elapsedTime += Time.deltaTime;
        yield return null;
    }

    buttonImage.color = targetColor;
    currentFadeCoroutine = null;
}

2. 替换WebGL兼容的UI Shader #

将按钮Image的Shader从UI/Default替换为UI/Default (No Mask)，该Shader在WebGL下动态修改颜色的兼容性更好，避免Mask带来的渲染异常。

3. 使用Tween插件替代协程 #

WebGL下手动协程的稳定性不如专用Tween插件，推荐使用DOTween实现颜色淡入淡出：

1. 导入DOTween插件（可从Unity Asset Store免费获取）；
2. 修改CustomButton脚本如下：

using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;

public class CustomButton : MonoBehaviour
{
    public Image buttonImage;
    public Color activeColor = Color.white;
    public Color inactiveColor = Color.gray;
    public float fadeSpeed = 0.5f;

    void Awake()
    {
        if (buttonImage == null)
        {
            buttonImage = GetComponent<Image>();
        }
        buttonImage.color = inactiveColor;
    }

    public void StartFadeIn()
    {
        buttonImage.DOKill();
        buttonImage.DOColor(activeColor, fadeSpeed).SetEase(Ease.Linear);
    }

    public void StartFadeOut()
    {
        buttonImage.DOKill();
        buttonImage.DOColor(inactiveColor, fadeSpeed).SetEase(Ease.Linear);
    }
}

4. 检查Inspector颜色设置 #

确认activeColor和inactiveColor的Alpha值均设置为1，避免误设为0导致按钮透明。

内容的提问来源于stack exchange，提问作者Dankisey