自定义TimeLine实现卡拉OK轨

系列文章目录

自定义TimeLine


自定义TimeLine


前言

自定义TimeLine实际上就是自定义轨道, 在这里我们实现一个简单的例子,我使用的Unity版本是2021.3.20f1c1

创建的一个URP项目。其实Build-in也是一样的 但是有的代码可能需要改一下。

正文

在这里先介绍一下实现思路,因为要实现的是我们每次收看音乐频道的时候下方歌词的效果,首先我们需要创建两个Text一个在下面,作为底色,然后在控制上层的字进行移动以达到效果

UI部分

我使用TMP创建的Text,其中的结构如下图

其中有一个地方需要着重说一下就是 Mask 这是一个 空物体挂在了Rect Mask 2D 组件 用于遮挡文字实现效果,如果不使用遮罩而是直接控制Text会出现文字卡顿的现象为了避免这种现象所以使用的是遮罩。

还有就是需要把中心点设为(0,0)

还有就是创建一个空物体加上Playable Director 组件控制timeline。

代码部分

Data(数据)

csharp 复制代码
using UnityEngine.UI;
using UnityEngine.Playables;

public class TextBehaviour : PlayableBehaviour
{
    
    public string line; //我们要显示的文字
    public float speed; // 文字移动的速度
}

Clip(片段)

csharp 复制代码
using UnityEngine;
using UnityEngine.Playables;
using UnityEngine.Timeline;


public class TextClip : PlayableAsset,ITimelineClipAsset
{
    private TextBehaviour template;
    //这俩个参数是参数,不需要进行拖拽操作所以没有使用再上一篇讲的暴露变量
    public float speed;
    public string Line;
    
    public override Playable CreatePlayable(PlayableGraph graph, GameObject owner)
    {
        var playable = ScriptPlayable<TextBehaviour>.Create(graph, template);
        TextBehaviour clone = playable.GetBehaviour();
        clone.speed = speed;
        clone.line = Line;
        return playable;
    }
    public ClipCaps clipCaps => ClipCaps.All;
}

Track(轨道)

csharp 复制代码
using UnityEngine;
using UnityEngine.Playables;
using UnityEngine.Timeline;

[TrackBindingType(typeof(TextController))]
[TrackColor(255/255f,255/255f,200/255f)]
[TrackClipType(typeof(TextClip))]
public class TextTrack : TrackAsset
{
    public override Playable CreateTrackMixer(PlayableGraph graph, GameObject go, int inputCount)
    {
        return ScriptPlayable<TextMixer>.Create(graph, inputCount);
    }
}

Mixer(混合)

csharp 复制代码
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Playables;

public class TextMixer : PlayableBehaviour
{
    private string defaultLine = default;
    private float defaultProgress = default;
    
    public override void ProcessFrame(Playable playable, FrameData info, object playerData)
    {
        var textController = playerData as TextController;
        int inputCount = playable.GetInputCount();
        
        
        
        string currentLine = defaultLine;
        float currentProgress = defaultProgress;
        bool isEmpty = true;
        for (int i = 0; i < inputCount; i++)
        {
            var clipPlayable = (ScriptPlayable<TextBehaviour>)playable.GetInput(i);// 获取当前的 
            TextBehaviour behaviour = clipPlayable.GetBehaviour();
            float inputWight = playable.GetInputWeight(i);
            Debug.Log(inputWight);
            if (inputWight > 0)
            {
                isEmpty = false;
                float progress = (float)(clipPlayable.GetTime() / clipPlayable.GetDuration());
                if(textController) textController.OnUpdate(behaviour.line,behaviour.speed,progress);
            }
            
            //textController.OnUpdate(defaultLine,0,defaultProgress);
            
        }

        if (isEmpty)
        {
            textController.OnUpdate(defaultLine,0,defaultProgress);
        }

    }
}

被控制物体

csharp 复制代码
using System.Collections;
using System.Collections.Generic;
using TMPro;
using UnityEngine;


public class TextController : MonoBehaviour
{
    public TextMeshProUGUI baseText;
    public TextMeshProUGUI colorText;
    [SerializeField]private RectTransform maskTransform;

    public void OnUpdate(string line,float speed,float progress)
    {
        baseText.text = line;
        colorText.text = line;

        float x = colorText.preferredWidth * progress * speed;
        maskTransform.sizeDelta = new Vector2(x, maskTransform.sizeDelta.y);
    }
}


总结

基本上说完了,因为这个只是做一个简单示例所以也没有过多的细讲。因为只要理解了原理这其实很简单的。

相关推荐
土了个豆子的11 小时前
unity中的动画混合树
unity·游戏引擎
奔跑的犀牛先生14 小时前
unity学习26:用Input接口去监测: 鼠标,键盘,虚拟轴,虚拟按键
unity
Dr.勿忘1 天前
C#面试常考随笔8:using关键字有哪些用法?
开发语言·unity·面试·c#·游戏引擎
存储服务专家StorageExpert1 天前
答疑解惑:如何监控EMC unity存储系统磁盘重构rebuild进度
运维·unity·存储维护·emc存储
追逐梦想永不停1 天前
Unity实现按键设置功能代码
unity
我命由我123452 天前
游戏引擎 Unity - Unity 下载与安装
c语言·开发语言·c++·后端·unity·c#·游戏引擎
车载诊断技术2 天前
车载软件架构 --- 基于AUTOSAR软件架构的ECU开发流程小白篇
网络·unity·架构·汽车·电子电器框架·车载充电器(obc)
我命由我123452 天前
游戏引擎 Unity - Unity 启动(下载 Unity Editor、生成 Unity Personal Edition 许可证)
c语言·c++·后端·unity·c#·游戏引擎·ue4
我命由我123452 天前
游戏开发领域 - 游戏引擎 UE 与 Unity
开发语言·c++·unity·c#·游戏引擎·unreal engine·unreal engine 4
一个一定要撑住的学习者2 天前
Day29(补)-【AI思考】-精准突围策略——从“时间贫困“到“效率自由“的逆袭方案
人工智能·unity·游戏引擎