c# - 如何调整 UI.Text alpha 以波浪模式点亮？

Question

更新代码:

bool countUp;
int num = 0;
string hex1, hex2, hex3;
UnityEngine.UI.Text txt;

// Use this for initialization
void Start () {
    txt = GetComponent<UnityEngine.UI.Text>();
}

// Update is called once per frame
void Update () {

    // Control structure to oscillate between 0 and 255 repeatedly
    if (num >= 255)
        countUp = false;
    else if (num <= 0)
        countUp = true;

    if (countUp)
        num += 1;
    else
        num -= 1;

    // Update Hex values
    hex1 = (num/3).ToString("X");
    hex2 = (num/2).ToString("X");
    hex3 = (num/1).ToString("X");

    txt.text = "   <color=#ffffff" + hex1 + ">.</color> " +
        "<color=#ffffff" + hex2 + ">.</color> " +
        "<color=#ffffff" + hex3 + ">.</color>";
}

更新视觉效果:

目标是产生类似于波浪模式的行为，其中“光”线性传播并在角色经过时照亮每个角色。现在每个角色的行为方式都不尽如人意。

我更新了代码，希望以不同的速度递增，以便照亮第一个字符比第二个字符快，第二个字符比第三个字符快，并且在消光时相同。

当然有更有效的方法来解决这个问题。尝试了几种不同的策略，但似乎最清晰的方法是 if/elses 来确定一个数字是需要向上计数到 255 还是向下计数到 0，然后处理相应的递增/递减。

update1 到此结束

从 UI.Texts Material 获取颜色允许操作 alpha 值，如下所示。正如现在的代码一样，它上下移动 alpha 以创建振荡照明效果。当应用于整个文本时，效果就不那么鼓舞人心了。所需的行为是显示光线在文本中以波浪状模式移动，再次显示如下。尽管所需行为的样本以循环方式移动，但它的目的是使我所追求的结果可视化。

乍一看，我相信这可以通过嵌套到子项上的多个文本组件来实现，然后使用交替计时器来创建所需的行为。但是，我不认为这是解决此问题的最佳方法。

是吗？他们是一种更有效的方法吗？我想象做一些类似 GetComponent().text.Length 的事情，并使用 for 循环来改变每个字符的 alpha，但是，我从来没有做到那么远。

当前代码:

Color color;
bool bl;

// Use this for initialization
void Start () {
    color = GetComponent<UnityEngine.UI.Text>().material.color;

}

// Update is called once per frame
void Update () {
    if (color.a < 0)
    {
        bl = true;
    }

    if (color.a > 1)
    {
        bl = false;
    }

    if (bl == false)
    {
        color.a -= 0.005f;
    }

    if (bl == true)
    {
        color.a += 0.005f;
    }

    GetComponent<UnityEngine.UI.Text>().material.SetColor("_Color", color);
}

实际代码:

期望的行为(光以波浪模式移动，尽管这是圆形而不是线性的):

Answer 1

有多种方法可以解决这个问题，但我认为最直接的方法是利用 unity 的 Rich Text Features。 .如该链接中所述，在单个 Text 组件中，有一些选项可以根据每个字符调整颜色。

每一帧，您都会在 Text 组件中重建字符串，使其看起来像这样:

"<color=#ffffff00>A</color><color=#ffffff7f>B</color><color=#ffffffff>C</color>"
// A is invisible, B is 50% opacity, and C is opaque White

为了使其易于扩展，考虑定义一个接受字符和颜色并返回其标记的函数:

public string BuildColoredString(string s, Color c) {
    string hex = c.r.ToString("X2") +
        c.g.ToString("X2") +
        c.b.ToString("X2") +
        c.a.ToString("X2");
    return string.Format("<color={0}>{1}</color>", hex, c);
}

请记住，优化此解决方案的潜力很大，包括 StringBuilder 的使用。如果您不喜欢这个解决方案，您的其他选择包括编写自定义着色器(如果您希望字形本身具有一致的 alpha，这是最困难的选择)、您建议的具有单独文本组件的方法，或手动为动画设置关键帧与 Sprite 。我喜欢这个特殊的解决方案，因为它简单、可扩展并且与 Unity 的内置功能保持一致。

---

更新:

alpha 计算的直接数学解决方案可能涉及将一组百分比映射到一个完整的正弦波:

|_|___|___|___|__________________|
0%  A   B   C                   100%
     ----->
|_________|___|___|___|__________|
0%          A   B   C           100%

当它们通过末端时，它们会环绕，它们之间的间距可以改变以调整光的“宽度”。

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

[RequireComponent(typeof(Text))]
public class TextWave : MonoBehaviour {

    [Range(0f, 1.0f)]
    [SerializeField]
    float cyclesPerSecond = 1.0f;

    [Range(0f, 1f)]
    [SerializeField]
    float spacingFactor = 0.5f;

    int charCount;
    float[] percents;
    Text textComponent;

    Color baseColor;
    string baseString;

    void Awake() {
        textComponent = GetComponent<UnityEngine.UI.Text>();
        baseString = textComponent.text;
        baseColor = textComponent.color;
        charCount = baseString.Length;
        percents = new float[charCount];

        // Space the percentages
        for (int i = 0; i < charCount; ++i) {
            percents[i] = (spacingFactor / charCount) * i;
        }

        StartCoroutine(Step());
    }

    IEnumerator Step() {
        while(true) {
            StepPercents(cyclesPerSecond * Time.deltaTime);
            textComponent.text = BuildColoredString();
            yield return null;
        }
    }

    void StepPercents(float step) {
        for (int i = 0; i < charCount; ++i) {
            percents[i] -= step;
            if (percents[i] <= 0.0f) {
                percents[i] += (int)percents[i] + 1.0f;
            }
        }
    }

    string BuildColoredString() {
        string result = string.Empty;
        for (int i = 0; i < charCount; ++i) {
            Color color = GetColorFromPercent(percents[i]);
            result += FormatCharWithColor(baseString[i], color);
        }
        return result;
    }

    // Mathf.Sin(float) will return a smooth
    // curve of values between [-1, 1) resembling a `~`
    // and one wave is in the range of arguments [0f, 2π)
    Color GetColorFromPercent(float percent) {
        // Multiply by 0.5f then add 0.5 to translate graph range to [0, 1)
        var alpha = 0.5f + 0.5f * Mathf.Sin(percent * Mathf.PI * 2);
        return new Color(baseColor.r, baseColor.g, baseColor.b, alpha);
    }

    string FormatCharWithColor(char c, Color color) {
        string hex =
            ((int)(color.r * 256)).ToString("X2") +
            ((int)(color.g * 256)).ToString("X2") +
            ((int)(color.b * 256)).ToString("X2") +
            ((int)(color.a * 256)).ToString("X2");
        return string.Format("<color=#{0}>{1}</color>", hex, c);
    }
}