Unity 中的音乐可视化

Unity 中的音乐可视化

本帖最后由 204有个大坑 于 2017-5-31 17:33 编辑 1738music-visulization-in-unity.jpg (32.33 KB, 下载次数: 0) 下载附件  保存到相册 2017-5-24 16:10 上传 目标：本文的主要目标是让你知道在Unity中怎么样使用音乐可视化。 最终输出是这样的： capture-1.gif (256.99 KB, 下载次数: 1) 下载附件  保存到相册 7 天前 上传 下边这张图片会给你一个最终输出的印象。 music-edit-300x188.png (14.5 KB, 下载次数: 0) 下载附件  保存到相册 2017-5-24 16:10 上传 步骤一：创建一个2D工程，命名为“Music Visualization” 步骤二：白条（就是白色的条形图片啦！） 制作一个白条，也可以从末尾给出的工程源码中找到。 bar-300x136.png (1.29 KB, 下载次数: 0) 下载附件  保存到相册 2017-5-24 16:10 上传 步骤三：制作预设，将白天做成预设，还有谁不懂怎做预设？百度或者你敢戳这里？ 步骤四： 现在，将预设拖拽到场景中，需要64个预设。像这样摆好： 注意： ￭ 你可以根据逻辑使用不同数量的对象 ￭在本例中，我使用的是44个对象的数组，大小=64（44<64） sound-edit-300x268.png (2.44 KB, 下载次数: 0) 下载附件  保存到相册 2017-5-24 16:10 上传 步骤五：新建脚本，新建C#脚本，命名为BarVisualization.cs。 [C#] 纯文本查看 复制代码 using UnityEngine; using System.Collections; using UnityEngine.UI; [RequireComponent( typeof (AudioSource))] public class BarVisulization : MonoBehaviour { public AudioClip[] clips; public SpriteRenderer[] barsSprites; public Slider musicSlider; [Range(0,10)] public float colorMultiplyer = 1; [Range(0,1)] public float s = 1; [Range(0,1)] public float v = 1; private int index = 0; private float musicLength; private AudioSource audio; void Start(){ audio = GetComponent (); } void Update () { Visulization (); if (Input.GetMouseButtonDown (0)) { ChangeSound (); } MusicSlider(); } void Visulization () { float [] musicData = audio.GetSpectrumData (64, 0, FFTWindow.Triangle); int i = 0; while (i<44) { barsSprites [i].transform.localScale = new Vector3 (musicData [i], 0.2f, 1); barsSprites [i].color = HSVtoRGB (musicData [i] * colorMultiplyer, s, v, 1); i++; } } void MusicSlider () { musicLength = audio.time; Debug.Log(musicLength); musicSlider.value = musicLength/audio.clip.length; } void ChangeSound () { index++; if (index > clips.Length - 1) { index = 0; } print (index); audio.clip = clips [index]; audio.Play (); } #region Static public static Color HSVtoRGB ( float hue, float saturation, float value, float alpha) { while (hue > 1f) { hue -= 1f; } while (hue < 0f) { hue += 1f; } while (saturation > 1f) { saturation -= 1f; } while (saturation < 0f) { saturation += 1f; } while (value > 1f) { value -= 1f; } while (value < 0f) { value += 1f; } if (hue > 0.999f) { hue = 0.999f; } if (hue < 0.001f) { hue = 0.001f; } if (saturation > 0.999f) { saturation = 0.999f; } if (saturation < 0.001f) { return new Color (value * 255f, value * 255f, value * 255f); } if (value > 0.999f) { value = 0.999f; } if (value < 0.001f) { value = 0.001f; } float h6 = hue * 6f; if (h6 == 6f) { h6 = 0f; } int ihue = ( int )(h6); float p = value * (1f - saturation); float q = value * (1f - (saturation * (h6 - ( float )ihue))); float t = value * (1f - (saturation * (1f - (h6 - ( float )ihue)))); switch (ihue) { case 0: return new Color (value, t, p, alpha); case 1: return new Color (q, value, p, alpha); case 2: return new Color (p, value, t, alpha); case 3: return new Color (p, q, value, alpha); case 4: return new Color (t, p, value, alpha); default : return new Color (value, p, q, alpha); } } #endregion } 注意：这个函数返回的是声音剪辑的频谱数组。更多信息戳这里。我用的是HSVtoRGB()函数将HSV转换成RGB .HSV比较容易理解，不信你戳这里。 untitled-300x154.png (12.33 KB, 下载次数: 0) 下载附件  保存到相册 2017-5-24 16:10 上传 步骤六：应用脚本 将脚本拖到空物体上，选中所有44个GameObject，将它们拖拽赋值到barsSprites （我也是醉了） main-camera-left-right-300x194.png (4.01 KB, 下载次数: 0) 下载附件  保存到相册 2017-5-24 16:10 上传 步骤七:将相机的背景整成黑色滴。 game-300x202.png (6.98 KB, 下载次数: 0) 下载附件  保存到相册 2017-5-24 16:10 上传 步骤八：声音剪辑 需要一些声音剪辑的样例。导入到工程里面，再拖拽赋值到数组Clips.(快扶我一下) bar-visulaization-300x142.png (9.18 KB, 下载次数: 0) 下载附件  保存到相册 2017-5-24 16:10 上传 步骤九：测试 现在，一切就绪。点击播放按钮，让色彩随着你的音乐动起来吧。当你在Unity中用到声音可视化时，希望这篇可以给你些帮助。有任何问题可在底下评论，我会尽快回复。 广告时间： 想获取游戏开发的idea？还等什么？现在就联系我们，让idea瞬间活起来。我司在印度被称为最好的 游戏开发公司，有之一。 工程源码下载地址：https://codeload.github.com/tejas123/music-visualization-in-unity/zip/master 原文作者：Amit Kapdi 原文连接：http://www.theappguruz.com/blog/music-visualization-in-unity 扫描下方二维码关注 游戏蛮牛 官方微信~每日都有精选干货与你分享哟~