Unity技术分享之使用Unity实现卡拉OK歌词过渡效果
好长时间之前做过的一个项目 , 其中设计到用Unity模拟卡拉OK歌词过渡的效果 , 如下图所示 ↓ , 这里简单把原理部分分享一下.
文章目录
- 演示效果
- 歌词效果类
- KSC文件解析类
- 配套资源下载
演示效果
- 实现歌词动态调整功能
- 实现动态读取歌词文件功能
- 实现歌曲快进快退功能
- 实现歌曲单字时间匹配功能
- 实现可动态更换歌词前景色背景色功能
注:
这里为实现精准过渡效果使用的是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;
/// true 显示面板歌词
public void LyricPanelControllerView (KSC.KscWord curRowInfo, bool isPanelView)
{
// Debug.Log ("当前行是否开始=====>" + isPanelView.ToString ());
_textLogMessage.text = isStartLyricEffectTransition.ToString ();
rectBackLyricMask.sizeDelta = new Vector2 (0f, rectFrontLyricText.sizeDelta.y);
rectBackLyricMask.GetComponentInChildren <Text> ().text = _lyricText.text = "";
if (isPanelView) {
//根据时间得到当前播放的是第i行的歌词
//处理歌词面板信息 , 显示歌词
foreach (var item in curRowInfo.PerLineLyrics) {
_lyricText.text += item;
rectBackLyricMask.GetComponentInChildren<Text> ().text = _lyricText.text;
}
StartCoroutine (LyricPanelControllerEffect (curRowInfo, isPanelView));
} else {
StopAllCoroutines ();
rectBackLyricMask.sizeDelta = new Vector2 (0f, rectFrontLyricText.sizeDelta.y);
// StartCoroutine (LyricPanelControllerEffect (curRowInfo, isPanelView));
//当前歌词结束以后将歌词框初始化成0
rectBackLyricMask.GetComponentInChildren <Text> ().text = _lyricText.text = string.Empty;
}
}
/// The panel controller effect.
/// If set to true is panel effect.
public IEnumerator LyricPanelControllerEffect (KSC.KscWord curRowInfo, bool isPanelEffect)
{
//当前时间歌词播放进度的百分比比例
int curWordIndex = 0;
if (isPanelEffect) {
rectBackLyricMask.DORewind ();
yield return null;
rectBackLyricMask.sizeDelta = new Vector2 (0f, rectFrontLyricText.sizeDelta.y);
//开始效果过渡
if (audioSource.isPlaying) {
for (int i = 0; i < curKscword.PerLinePerLyricTime.Length; i++) {
rectBackLyricMask.DOSizeDelta (
new Vector2 (((float)(i + 1) / curKscword.PerLinePerLyricTime.Length) * rectFrontLyricText.sizeDelta.x, rectFrontLyricText.sizeDelta.y)
, curKscword.PerLinePerLyricTime [i] / 1000f
, false).SetEase (Ease.Linear);
// Debug.Log ("第" + i + "个歌词时间");
yield return new WaitForSeconds (curKscword.PerLinePerLyricTime [i] / 1000f);
}
} else {
Debug.LogError ("歌曲没有播放 ！！！！");
}
} else {
yield return null;
rectBackLyricMask.DOSizeDelta (new Vector2 (0f, rectFrontLyricText.sizeDelta.y), 0f, true);
}
}
/// true 则使用系统配置的默认颜色.
public void StartPlayMusic (string lyricFilePath, AudioSource audioSource, Color frontColor, Color backColor, Color outlineColor, bool isIgronLyricColor)
{
_timer = 0f;
//初始化ksc文件
KSC.InitKsc (lyricFilePath);
this.lyricFilePath = lyricFilePath;
this.audioSource = audioSource;
_textContentLyric.text = string.Empty;
if (!isIgronLyricColor) {
//歌曲颜色信息
this.frontTextColor = frontColor;
this.backTextColor = backColor;
this.outlineColor = outlineColor;
}
#region ****************************************************输出歌词文件信息
//对初始化完成后的信息进行输出
if (KSC.Instance.SongName != null) {
print ("歌名==========>" + KSC.Instance.SongName);
}
if (KSC.Instance.Singer != null) {
print ("歌手==========>" + KSC.Instance.Singer);
}
if (KSC.Instance.Pinyin != null) {
print ("拼音==========>" + KSC.Instance.Pinyin);
}
if (KSC.Instance.SongClass != null) {
print ("歌类==========>" + KSC.Instance.SongClass);
}
if (KSC.Instance.InternalNumber > 0) {
print ("歌曲编号=======>" + KSC.Instance.InternalNumber);
}
if (KSC.Instance.Mcolor != Color.clear) {
print ("男唱颜色=======>" + KSC.Instance.Mcolor);
}
if (KSC.Instance.Mcolor != Color.clear) {
print ("女唱颜色=======>" + KSC.Instance.Wcolor);
}
if (KSC.Instance.SongStyle != null) {
print ("风格==========>" + KSC.Instance.SongStyle);
}
if (KSC.Instance.WordCount > 0) {
print ("歌名字数=======>" + KSC.Instance.WordCount);
}
if (KSC.Instance.LangClass != null) {
print ("语言种类=======>" + KSC.Instance.LangClass);
}
//一般是独唱歌曲的时候使用全Tag标签展现参数信息
foreach (var item in KSC.Instance.listTags) {
print (item);
}
#endregion
//显示整个歌词内容
for (int i = 0; i < KSC.Instance.Add.Values.Count; i++) {
KSC.Instance.Add.TryGetValue (i, out kscword);
for (int j = 0; j < kscword.PerLineLyrics.Length; j++) {
_textContentLyric.text += kscword.PerLineLyrics [j];
}
_textContentLyric.text += "\n";
}
}
/// KSC文件解析类
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System.IO;
using System.Text;
using UnityEngine.UI;
using System;
using System.Text.RegularExpressions;
using System.Runtime.InteropServices;
/// 返回歌词信息(Lrc实例)
public static KSC InitKsc (string LrcPath)
{
int row = 0;
//KscWord对象
//清除之前的歌曲歌词, 保持当前
KSC.Instance.Add.Clear ();
using (FileStream fs = new FileStream (LrcPath, FileMode.Open, FileAccess.Read, FileShare.Read)) {
string line = string.Empty;
using (StreamReader sr = new StreamReader (fs, Encoding.Default)) {
while ((line = sr.ReadLine ()) != null) {
//每次循环新建一个对象用于存储不同行数内容
KSC.KscWord kscWord = new KSC.KscWord ();
#region ######################################合唱歌曲格式
if (line.StartsWith ("karaoke.songname := '")) {
Instance.SongName = SplitStrInfo (line);
} else if (line.StartsWith ("karaoke.internalnumber := ")) {
if (SplitIntInfo (line) != 0) {
Instance.InternalNumber = SplitIntInfo (line);
}
} else if (line.StartsWith ("karaoke.singer := '")) {
Instance.Singer = SplitStrInfo (line);
} else if (line.StartsWith ("karaoke.wordcount := ")) {
if (SplitIntInfo (line) != 0) {
Instance.WordCount = SplitIntInfo (line);
}
} else if (line.StartsWith ("karaoke.pinyin := '")) {
Instance.Pinyin = SplitStrInfo (line);
} else if (line.StartsWith ("karaoke.langclass := '")) {
Instance.LangClass = SplitStrInfo (line);
} else if (line.StartsWith ("karaoke.songclass := '")) {
Instance.SongClass = SplitStrInfo (line);
} else if (line.StartsWith ("karaoke.songstyle := '")) {
Instance.SongStyle = SplitStrInfo (line);
} else if (line.StartsWith ("karaoke.videofilename :='")) {
Instance.VideoFileName = SplitStrInfo (line);
} else if (line.StartsWith ("mcolor :=rgb(")) {
if (SplitColorInfo (line) != Color.clear) {
Instance.Mcolor = SplitColorInfo (line);
}
} else if (line.StartsWith ("wcolor :=rgb(")) {
if (SplitColorInfo (line) != Color.clear) {
Instance.Wcolor = SplitColorInfo (line);
}
#endregion
#region ##################################################独唱歌曲风格
} else if (line.StartsWith ("karaoke.tag('")) {
//获取tag标签的参数信息
KSC.Instance.listTags.Add (SplitTagInfo (line));
#endregion
#region ################################################歌词正文部分解析
} else if (line.StartsWith (("karaoke.add"))) { //表示歌词正文部分
if (SplitLyricStartTime (line) != null) {
//行号 ( 从0行开始 )
//获取每句歌词部分的开始时间
kscWord.PerLineLyricStartTimer = SplitLyricStartTime (line);
//获取每句歌词部分的结束时间
kscWord.PerLintLyricEndTimer = SplitLyricEndTime (line);
//获取每行歌词的内容,并存储到KSCWord中 ( 歌词文字的数组信息 左 → 右 )
kscWord.PerLineLyrics = SplitPerLineLyrics (line);
//获取每行中单个文字的过渡时间数组 ( 歌词文字过渡时间数组 左 → 右 )
kscWord.PerLinePerLyricTime = SplitPerLinePerLyricTime (line);
KSC.Instance.Add.Add (row, kscWord);
row++;
}
} else {
//忽略ksc文件中的其他部分
if (line != "" && !line.Contains ("CreateKaraokeObject") && !line.Contains ("karaoke.rows") && !line.Contains ("karaoke.clear;") && !Regex.IsMatch (line, @"^\//")) {
Debug.LogWarning ("歌词含有不能解析的部分 ===> " + line);
}
}
#endregion
}
}
}
Debug.Log ("LyricFileInitialized" + " Path : \n" + LrcPath);
return Instance;
}
#region ****************************************************************解析歌词用的正则表达式部分 需更新
/// 返回基础信息
public static string SplitStrInfo (string line)
{
// char[] ch = new char[]{ '\0', '\0' };
// return line.Substring (line.IndexOf ("'") + 1).TrimEnd (ch);
string pattern = @"'\S{1,20}'"; //获取歌曲标签信息
Match match = Regex.Match (line, pattern);
//去除两端的小分号
string resout = string.Empty;
resout = match.Value.Replace ("\'", string.Empty);
return resout;
}
/// The int info.
/// Line.
public static int SplitIntInfo (string line)
{
string pattern = @"\d+"; //获取歌曲标签参数为数字的信息
Match match = Regex.Match (line, pattern);
//去除两端的小分号
int result = 0;
result = Int32.Parse (match.Value);
return result;
}
/// The color info.
/// Line.
public static Color32 SplitColorInfo (string line)
{
string pattern = @"[r,R][g,G][b,G]?[\(](2[0-4][0-9])|25[0-5]|[01]?[0-9][0-9]?"; //获取歌曲标签参数为颜色值的信息
MatchCollection matches = Regex.Matches (line, pattern);
return new Color (float.Parse (matches [0].ToString ()), float.Parse (matches [1].ToString ()), float.Parse (matches [2].ToString ()));
}
/// The tag info.
public static string SplitTagInfo (string line)
{
string temp;
string pattern = @"\([\W|\w]+\)"; //获取歌曲标签参数为颜色值的信息
Match match = Regex.Match (line, pattern);
temp = match.Value.Replace ("(", string.Empty).Replace (")", string.Empty).Replace ("'", string.Empty).Replace (",", "：");
return temp;
}
/// The lyric start time.
/// Line.
public static float SplitLyricStartTime (string line)
{
float time = 0f;
Regex regex = new Regex (@"\d{2}:\d{2}\.\d{2,3}", RegexOptions.IgnoreCase); //匹配单句歌词时间 如: karaoke.add('00:29.412', '00:32.655'
MatchCollection mc = regex.Matches (line);
time = (float)TimeSpan.Parse ("00:" + mc [0].Value).TotalSeconds;
return time;
}
/// The lyric start time.
/// Line.
public static float SplitLyricEndTime (string line)
{
Regex regex = new Regex (@"\d{2}:\d{2}\.\d{2,3}", RegexOptions.IgnoreCase); //匹配单句歌词时间 如: karaoke.add('00:29.412', '00:32.655'
MatchCollection mc = regex.Matches (line);
float time = (float)TimeSpan.Parse ("00:" + mc [1].Value).TotalSeconds;
return time;
}
/// The line lyrics.
/// Line.
public static string[] SplitPerLineLyrics (string line)
{
List<string> listStrResults = new List<string> ();
string pattern1 = @"\[[\w|\W]{1,}]{1,}"; //获取歌曲正文每个单词 如 : karaoke.add('00:25.183', '00:26.730', '[五][十][六][个][星][座]', '312,198,235,262,249,286');
string pattern2 = @"\'(\w){1,}\'"; //获取歌曲正文每个单词 如 : karaoke.add('00:28.420', '00:35.431', '夕阳底晚风里', '322,1256,2820,217,1313,1083');
Match match = (line.Contains ("[") && line.Contains ("]")) ? Regex.Match (line, pattern1) : Regex.Match (line, pattern2);
//删除掉 [ ] '
if (match.Value.Contains ("[") && match.Value.Contains ("]")) { //用于合唱类型的歌词文件
string[] resultStr = match.Value.Replace ("][", "/").Replace ("[", string.Empty).Replace ("]", string.Empty).Split ('/');
foreach (var item in resultStr) {
listStrResults.Add (item);
}
} else if (match.Value.Contains ("'")) { //用于独唱类型的歌词文件 ( 尚未测试英文歌词文件!!!!!!!!!!!!!!!!!!!!!!! )
char[] tempChar = match.Value.Replace ("'", string.Empty).ToCharArray ();
foreach (var item in tempChar) {
listStrResults.Add (item.ToString ());
}
}
return listStrResults.ToArray ();
}
/// The line per lyric time.
/// Line.
public static float[] SplitPerLinePerLyricTime (string line)
{
string pattern = @"\'((\d){0,}\,{0,1}){0,}\'"; //获取歌曲正文每个单词过渡时间 如 : karaoke.add('00:25.183', '00:26.730', '[五][十][六][个][星][座]', '312,198,235,262,249,286');
string str = null;
List<float> listfloat = new List<float> ();
//删除掉 多余项
str = Regex.Match (line, pattern).Value.Replace ("'", string.Empty);
// Debug.Log (str);
foreach (var item in str.Split (',')) {
listfloat.Add (float.Parse (item));
}
return listfloat.ToArray ();
}
#endregion
#region ********************************************************************歌词正文部分的时间与文字信息
/// 哈哈 ,不敢说代码如何清新脱俗 , 自己也在学习的路上 , 有程序爱好者想要交流的话欢迎交流啊 . 有心的朋友可以看看 , 年后看时间再完善啦
配套资源下载
