Unity实现卡拉实现卡拉OK歌词过渡效果歌词过渡效果
主要为大家详细介绍了Unity实现卡拉OK歌词过渡效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
好长时间之前做过的一个项目 , 其中设计到用Unity模拟卡拉OK歌词过渡的效果 , 如下图所示 ↓ , 这里简单把原理部分分享一下.
文章目录
演示效果 ↓
歌词效果类 ↓
配套资源下载
演示效果演示效果 ↓
实现歌词动态调整功能
实现动态读取歌词文件功能
实现歌曲快进快退功能
实现歌曲单字时间匹配功能
实现可动态更换歌词前景色背景色功能
注注:
这里为实现精准过渡效果使用的是KSC歌词文件, 并不是LRC文件哦 .
这其中我认为就是如何实现歌词部分的前景色向后景色过渡的效果了, 开始的时候我想的也是很复杂 , 使用Shader的形式实现 ,网上找了
一些相关代码 , 发现不是特别理想 , 最终还是自己尝试着用Mask来实现的, 发现效果还不错 !
因为今天下班就过年回家啦! 其他细节之后会完善的 , 今天把工程文件先上传了 .
歌词效果类 ↓
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using System;
using DG.Tweening;
using DG.Tweening.Core;
/// <summary>
/// 用于显示歌词过渡的效果
/// 1. 获得路径加载并解析歌词文件信息
/// 2. 判断当前歌曲是否播放( 歌曲暂停的时候歌词效果也暂停 , 歌曲停止的时候歌词效果消失 )
/// 3. 判断歌曲快进或快退事件
/// </summary>
public class LayricPanelEffect : MonoSingleton<LayricPanelEffect>
{
#region *********************************************************************字段
//由外部传入的声音资源
[HideInInspector,SerializeField]
public AudioSource audioSource;
//歌词前景颜色;歌词后景颜色
[SerializeField]
public Color32 frontTextColor = Color.white, backTextColor = Color.black, outlineColor = Color.white;
//歌词面板的前景部分和后景部分
public RectTransform rectFrontLyricText, rectBackLyricMask;