Создание пользовательской текстовой анимации

Версия: 6000.3+

TextElement.PostProcessTextVertices API позволяет изменить вершины сетки каждого глифа непосредственно перед тем, как UI Toolkit отобразит их. Вы можете использовать этот обратный вызов для настройки положения, оттенка и координат UV текста на низком уровне.

Примерный обзор

Этот пример создает пользовательское окно Редактора, которое анимирует текст путем вставки и удаления глифов при нажатии Пробел. Он использует TextElement.PostProcessTextVertices API для изменения вершинных данных текстовых глифов.

Вы можете найти завершенные файлы, созданные этим примером, в хранилище GitHub.

Предварительные условия

Это руководство предназначено для разработчиков, знакомых со скриптами Unity Editor, UI Toolkit и C#. Перед началом работы ознакомьтесь со следующим:

• TextElement

Создание настраиваемого окна редактора с анимацией текста

Создайте скрипт C# для настраиваемого окна Редактора. Используйте запланированное задание для отслеживания времени анимации. В методе OnPostProcessTextVertices повторите GlyphsEnumerable и настройте альфа-канал каждого вершинного оттенка до завершения выравнивания.

1. Создайте проект Unity с любым шаблоном.
2. Создайте папку с именем Editor, если у вас ее нет.
3. В папке Editor создайте скрипт C# с именем TextAnimation.cs со следующим содержанием:

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using TextElement = UnityEngine.UIElements.TextElement;

public class TextAnimation : EditorWindow
{
    [MenuItem("Window/UI Toolkit/TextAnimation")]
    public static void ShowExample()
    {
        TextAnimation wnd = GetWindow<TextAnimation>();
        wnd.titleContent = new GUIContent("TextAnimation");
    }

    Label label;
    float animationDuration = 1f; // in seconds
    float elapsed = 0f;
    float startRealtime;
    IVisualElementScheduledItem animationJob;
    bool isTextVisible = true;

    public void CreateGUI()
    {
        VisualElement root = rootVisualElement;

        var container = new VisualElement()
        {
            style =
            {
                flexGrow = 1,
                top = 0,
                bottom = 0,
                right = 0,
                left = 0
            },
            focusable = true // We can only receive key events on a window with a focusable element.
        };
        label = new Label("Hello ❤️ World!") { style = { flexGrow = 1, fontSize = 24, unityTextAlign = TextAnchor.MiddleCenter } };
        container.Add(label);
        root.Add(container);

        rootVisualElement.RegisterCallback<KeyDownEvent>(evt => OnSpacebarPressed(evt), TrickleDown.TrickleDown);
        label.PostProcessTextVertices += OnPostProcessTextVertices;

        const int targetHz = 60;
        animationJob = label.schedule.Execute(UpdateTime).Every(1000 / targetHz);
        animationJob.Pause(); // Pause the job until the animation starts
    }

    private void UpdateTime()
    {
        elapsed = Mathf.Min(Time.realtimeSinceStartup - startRealtime, animationDuration);
        if (elapsed >= animationDuration)
        {
            elapsed = animationDuration; // Cap at max duration
            animationJob.Pause();
        }

        label.MarkDirtyRepaint();
    }

    public void OnSpacebarPressed(KeyDownEvent evt)
    {
        if (evt.keyCode != KeyCode.Space || animationJob.isActive)
            return;

        elapsed = 0f;
        startRealtime = Time.realtimeSinceStartup;
        animationJob.Resume();
        isTextVisible = !isTextVisible;
    }

    void OnPostProcessTextVertices(TextElement.GlyphsEnumerable glyphs)
    {
        int glyphsToToggle = (int)(elapsed * glyphs.Count / animationDuration);

        int toggled = 0;
        foreach (TextElement.Glyph glyph in glyphs)
        {
            if (toggled++ >= glyphsToToggle)
                break;

            var verts = glyph.vertices;
            for (int i = 0; i < verts.Length; i++)
            {
                var v = verts[i];
                var tint = v.tint;
                tint.a = isTextVisible ? (byte)255 : (byte)0;
                v.tint = tint;
                verts[i] = v;
            }
        }
    }
}

Испытать образец

Проверьте образец текстовой анимации в окне пользовательского редактора.

1. В меню выберите Окно > UI Toolkit > TextAnimation, чтобы открыть окно примера.
2. Нажмите пробел, чтобы начать анимацию.

Дополнительные ресурсы

• Стиль текста с богатыми текстовыми тегами