【游戏开发创新】手把手教你使用Unity制作一个高仿酷狗音乐播放器(声音可视化 | 频谱 | Audio)

文章目录

      • 一、前言
      • 二、获取UI素材
      • 三、使用UGUI制作界面
        • 1、界面布局
        • 2、账号圆形头像
        • 3、搜索框
        • 4、调节UI层
        • 5、黑色按钮悬浮高亮效果
        • 6、纯文字按钮
        • 7、滚动列表自适应
        • 8、歌名与视频图标混排
        • 9、点击按钮切换图片
        • 10、进度条
      • 四、写代码
        • 1、歌曲的播放与暂停
        • 2、声音频谱特效
        • 3、发布exe隐藏标题栏
      • 五、工程源码
      • 六、完毕

一、前言

嗨,大家好,我是新发。
事情是这样的,我在听歌的时候听到了滨崎步的MY ALL,热泪盈眶,我点开了桌面的酷狗,端详了一下,冒出个想法,我能不能用Unity做一个样子和酷狗音乐播放器一样的应用呢?
于是,我就做了一个,最终效果如下:
请添加图片描述
运行效果:
请添加图片描述
请添加图片描述
发布成exe,运行效果:
请添加图片描述
下面,我来讲讲我的制作过程~

二、获取UI素材

下面是真酷狗界面,
在这里插入图片描述
根据界面,去阿里图标库搜索需要的素材,
阿里图标库地址:https://www.iconfont.cn/
比如我们要找这一块的图标素材,
在这里插入图片描述
我的电台为例,
在这里插入图片描述
你就搜电台,找到一个形状相似的图标,如下
在这里插入图片描述
点击图标,可以先设置图标的颜色为白色,然后再下载,
在这里插入图片描述
以此类推,我找的素材如下:
在这里插入图片描述
所有的UI素材图片格式都设置为Sprite (2D and UI)
在这里插入图片描述
有一部分UI需要设置一下九宫格,不然可能会变形,比如这个椭圆按钮,
在这里插入图片描述

三、使用UGUI制作界面

最终界面效果如下,
在这里插入图片描述
下面我会挑一下重点讲一下。

1、界面布局

在开始做UI界面之前,我们要先分析一下界面布局,首先从大布局看,是上、中、下,
在这里插入图片描述
那我们做界面时,就按上、中、下三块来做,
在这里插入图片描述
如下:
请添加图片描述
中间布局,又可以继续拆分成顶部标签栏和底部详细面板,以我的音乐为例,底部面板可以分为左右布局,如下:
在这里插入图片描述
这样子,我们中间就可以分成tabsleftright三块,
在这里插入图片描述
如下:
请添加图片描述
以此类推,大布局里嵌小布局,小布局里继续嵌小小布局,根据界面进行合理设计。

2、账号圆形头像

头像图片是正正方方的,如下:
请添加图片描述
我们需要显示圆形头像,可以使用Mask组件,如下head_frame节点,
在这里插入图片描述
使用一张圆形的图片显示,并挂上Mask组件,
在这里插入图片描述
子节点head_img就是头像图片了,
在这里插入图片描述
使用RawImage组件来显示头像,
在这里插入图片描述
效果如下:
在这里插入图片描述

3、搜索框

搜索框使用InputField组件,
在这里插入图片描述
替换框的图片,设置颜色,如下,
在这里插入图片描述
搜索框中再放一个Button来显示放大镜图片,
在这里插入图片描述
在这里插入图片描述
效果如下:
请添加图片描述

4、调节UI层

我的音乐这个按钮,
在这里插入图片描述
正确是要显示在最前面,
在这里插入图片描述
它之所以被挡住,是因为UGUI默认是按节点的顺序来渲染的,后面的按钮排在它下面,所以后面的按钮会盖住它,
在这里插入图片描述
如果我们不想调节节点的顺序,但有想让我的音乐按钮显示在前面,我们可以给它单独挂一个Canvas节点,并设置Sort Order为一个大于上一级CanvasSort Order的值,
在这里插入图片描述
这样它就可以正常显示在前面了,
在这里插入图片描述

5、黑色按钮悬浮高亮效果

鼠标悬停在按钮上时,按钮呈高亮状态,如下,
请添加图片描述
如果你把按钮Image图片设置为黑色,那么是没有这个高亮效果的,因为一个按钮是由ImageButton配合工作的,Button组件可以设置各个状态的颜色,Button组件的颜色和Image的颜色相乘就是最终的按钮状态颜色,如果Image颜色你设置成黑色,那么相乘得出的结果都是黑色,你也就看不到高亮效果了,
在这里插入图片描述
正确做法是,Image为白色,ButtonNormal Color为黑色,其他状态的颜色根据具体需求而定,比如高亮Hightlighted Color为灰色,最终颜色设置如下:
在这里插入图片描述

6、纯文字按钮

这排按钮是纯文字按钮,
在这里插入图片描述
UGUI创建的默认按钮是带图片的,做下小改动即可,我们通过菜单创建一个Button
在这里插入图片描述
Image组件移除掉,
在这里插入图片描述
然后把子节点的Text赋值给Button组件的Target Graphic即可,
在这里插入图片描述
设置一下按钮的各个状态颜色,
在这里插入图片描述
我们直接调节Button节点的宽高即可调节响应区域啦~
在这里插入图片描述
鼠标靠近文字时,按钮可以检测到,如下,

注:对于有图片的按钮,如果也想扩大按钮的响应区域但又不想扩大图片本身,也可以利用这个技巧,把按钮背景图作为Button组件的子节点显示即可

请添加图片描述

7、滚动列表自适应

滚动列表用的是ScrollView
请添加图片描述
需要处理的是Content的自适应,首先列表是竖向滑动的,我们给Content节点挂上VerticalLayoutGroup组件,
在这里插入图片描述
要让Content的高度随着列表item的数量增多而增大,我们可以使用ContentSizeFitter组件,把Vertical Fit设置为Preferred Size
在这里插入图片描述
然后给item设定一个高度,
在这里插入图片描述
这样子,当item增多的时候,Content节点就会自动扩大高度啦,
请添加图片描述

8、歌名与视频图标混排

在单曲列表中,歌名和视频图标混排在一起,视频图标需要跟在歌名后面,歌名文字增多,视频图标需要自动往后移动,如下:
请添加图片描述
这个要用到锚点,视频图标作为歌名文字的子节点,然后视频图标的锚点设置为middle-right,如下,这样子,视频图标就会以文字框的右边为参考线计算相对位置了,
在这里插入图片描述

9、点击按钮切换图片

点击按钮切换按钮图片,如下
请添加图片描述
这里要写点代码,在代码中替换Button组件的ImageSprite对象,例:

playBtn.onClick.AddListener(() =>
{
    if (!audioSource.isPlaying)
    {
        audioSource.Play();
        playBtn.image.sprite = pauseSprite;
    }
    else
    {
        audioSource.Pause();
        playBtn.image.sprite = playSprite;
    }
});

10、进度条

进度条使用Slider组件,
请添加图片描述

需要解决的是进度条很细的情况下,扩大进度条的操作区域,解决办法是给Slider添加一个Image组件,并设置透明度为0
在这里插入图片描述
调整Slider的高为一个稍微大一点的值,
在这里插入图片描述
调整BackgroundTopBottom,使其变细,
在这里插入图片描述
同理,Fill Area也调整一下TopBottom,使其变细,
在这里插入图片描述
这样子做出来的进度条,就可以很细,但是操作区域又得到保证,
在这里插入图片描述

四、写代码

1、歌曲的播放与暂停

Unity中要播放一个声音并听到,需要两个组件配合,一个是AudioSource(相当于喇叭),另一个AudioListener(相当于耳朵),
其中,AudioListener默认挂在摄像机上,如果你有多个摄像机,要确保场景中只有一个激活状态的AudioListener,否则会报错。
AudioSource需要赋值AudioClip成员,即设置具体的声音文件,我们可以直接拖拽一个声音文件到AudioSourceAudioClip成员上,如下:
在这里插入图片描述
我们也可以在代码中动态设置:

// AudioClip audioClip = TODO 动态加载AudioClip文件;
audioSource.clip = audioClip;

动态加载资源文件我之前的文章有讲过三种主要方式,大家感兴趣的可以看下,
《Unity游戏开发——新发教你做游戏(三):3种资源加载方式》
在这里插入图片描述
然后播放声音和暂停播放,调用AudioSourcePlayPause方法即可:

// (继续)播放
audioSource.Play();
// 暂停
audioSource.Pause();

2、声音频谱特效

声音播放过程中,可以实时显示频谱特效,
请添加图片描述
这里要用到AudioSourceGetSpectrumData接口,这个接口可以采样声谱数据块,

public static void GetSpectrumData(float[] samples, 
									int channel, 
									FFTWindow window);

参数说明:
samples: 函数返回值。将音频样本数据传送至samples数组,数组大小必须为2的n次方,最小64,最大8192
channel: 声道,一般设置为0
window: 转换信号所用的窗函数,算法越复杂,声音越柔和,但速度更慢。
用法 :
先声明一个浮点数组:

public float[] samples = new float[512];

然后在Update方法里面使用方法:

audiosource.GetSpectrumData(samples, 0, FFTWindow.BlackmanHarris);

我这里封装了一个脚本,如下:

using UnityEngine;

/// <summary>
/// 声音特效
/// </summary>
public class AudioEffect : MonoBehaviour
{
    // 用于显示的方块
    public GameObject cubeObj;
    // 方块的其实点
    public Transform startPoint;

    // 采样数据长度
    private const int SPECTRUM_CNT = 512;
    // 采样数据
    private float[] spectrumData = new float[SPECTRUM_CNT];
    // 方块Transform数组
    private Transform[] cubeTransforms = new Transform[SPECTRUM_CNT];

    void Start()
    {
        //cube生成与排列
        Vector3 p = startPoint.position;

        for (int i = 0; i < SPECTRUM_CNT; i++)
        {
            p = new Vector3(p.x + 0.11f, p.y, p.z);
            GameObject cube = Instantiate(cubeObj, p, cubeObj.transform.rotation);
            cube.transform.parent = startPoint;
            cubeTransforms[i] = cube.transform;
        }
    }

    /// <summary>
    /// 当前帧频率波功率,传到对应cube的localScale
    /// </summary>
    public void UpdateEffect(AudioSource audioSource)
    {
        audioSource.GetSpectrumData(spectrumData, 0, FFTWindow.BlackmanHarris);
        float scaleY;
        for (int i = 0; i < SPECTRUM_CNT; i++)
        {
            scaleY = Mathf.Lerp(cubeTransforms[i].localScale.y, spectrumData[i] * 10000f, 0.5f);
            // 限制一下功率
            if (scaleY > 400)
            {
                scaleY -= 400;
            }
            else if (scaleY > 300)
            {
                scaleY -= 300;
            }
            else if (scaleY > 200)
            {
                scaleY -= 200;
            }
            else if (scaleY > 100)
            {
                scaleY -= 100;
            }

            cubeTransforms[i].localScale = new Vector3(0.15f, scaleY, 0.15f);
        }
    }
}

其中cubeObj是一个用于显示的小方块,我们做一下方块预设,如下:
在这里插入图片描述
材质球用的shaderUnlit/Texture,贴图是上面白下面黑的渐变色,
在这里插入图片描述
因为这个特效要显示在UI界面中,并且是穿插在UI层中,我这里使用RenderTexture来解决。
先创建一张RenderTexture
在这里插入图片描述
然后创建一个独立的摄像机EffectCamera(记得把AudioListener组件去掉),Culling Mask只勾选Water层,
在这里插入图片描述
主摄像机记得把Water去掉,
在这里插入图片描述
把特效的Layer设置为Water
在这里插入图片描述
这样子,特效就只会在EffectCamera摄像机中渲染了,
我们把刚刚的RenderTexture拖给EffectCamera摄像机的Target Texture,如下,
在这里插入图片描述
接着,给audioEffect节点挂AudioEffect脚本,并赋值成员对象,如下,
在这里插入图片描述
这样特效就会渲染到RenderTexture上了,如下:
请添加图片描述
我们再使用一张RawImage来显示它,
在这里插入图片描述
我们可以调节RawImage的颜色来调整特效的颜色,如下:
请添加图片描述

3、发布exe隐藏标题栏

发布成exe,运行时自动隐藏默认的标题栏,
请添加图片描述
隐藏标题栏的方法,我之前有写过相关文章,《Unity发布PC平台exe的窗口花样(WindowsAPI、捕获关闭事件、隐藏窗口标题栏、隐藏最小化最大化关闭按钮等等)》
用到了几个Windows API,如下:

[DllImport("user32.dll")]
public static extern IntPtr GetForegroundWindow();

[DllImport("user32.dll")]
public static extern long GetWindowLong(IntPtr hwd, int nIndex);

[DllImport("user32.dll")]
public static extern void SetWindowLong(IntPtr hwd, int nIndex, long dwNewLong);

[DllImport("user32.dll")]
public static extern bool ShowWindow(IntPtr hwd, int cmdShow);

隐藏标题栏:

#if UNITY_STANDALONE && !UNITY_EDITOR
/// <summary>
/// 窗口风格
/// </summary>
const int GWL_STYLE = -16;
/// <summary>
/// 标题栏
/// </summary>
const int WS_CAPTION = 0x00c00000;


// 隐藏标题栏
var hwd = GetForegroundWindow();
var wl = GetWindowLong(hwd, GWL_STYLE);
wl &= ~WS_CAPTION;
SetWindowLong(hwd, GWL_STYLE, wl);
#endif

另外,我们需要实现这三个按钮的逻辑,
在这里插入图片描述
最小化窗口:

#if UNITY_STANDALONE && !UNITY_EDITOR
/// <summary>
/// 最小化
/// </summary>
const int SW_SHOWMINIMIZED = 2;

// 获得窗口句柄
var hwd = GetForegroundWindow();
// 设置窗口最小化
ShowWindow(hwd, SW_SHOWMINIMIZED);
#endif

最大化窗口:

#if UNITY_STANDALONE && !UNITY_EDITOR
/// <summary>
/// 最大化
/// </summary>
const int SW_SHOWMAXIMIZED = 3;

// 获得窗口句柄
var hwd = GetForegroundWindow();
// 设置窗口最小化
ShowWindow(hwd, SW_SHOWMAXIMIZED);
#endif

关闭程序:

Application.Quit();

五、工程源码

本文的工程源码我以上传到CODE CHINA,感兴趣的同学可自行下载学习,
地址:https://codechina.csdn.net/linxinfa/UnityMusicPlayer
注:我使用的Unity版本为Unity 2020.1.14f1c1 (64-bit)
温馨提示:本工程仅供学习使用,禁止用于商业用途,否则后果自负
在这里插入图片描述

六、完毕

好了,今天就到这里吧。

我是林新发:https://blog.csdn.net/linxinfa
原创不易,若转载请注明出处,感谢大家~
喜欢我的可以点赞、关注、收藏,如果有什么技术上的疑问,欢迎留言或私信,我们下期见~

热门文章

暂无图片
编程学习 ·

exe4j详细使用教程(附下载安装链接)

一、exe4j介绍 ​ exe4j是一个帮助你集成Java应用程序到Windows操作环境的java可执行文件生成工具&#xff0c;无论这些应用是用于服务器&#xff0c;还是图形用户界面&#xff08;GUI&#xff09;或命令行的应用程序。如果你想在任务管理器中及Windows XP分组的用户友好任务栏…
暂无图片
编程学习 ·

AUTOSAR从入门到精通100讲(126)-浅谈车载充电系统通信方案

01 引言 本文深入研究车载充电系统策略,设计出一套基于电动汽车电池管理系统与车载充电机的CAN通信协议,可供电动汽车设计人员参考借鉴。 02 电动汽车充电系统通讯网络 电动汽车整车控制系统中采用的是CAN总线通信方式,由一个整车内部高速CAN网络、内部低速CAN网络和一个充电…
暂无图片
编程学习 ·

CMake(九):生成器表达式

当运行CMake时&#xff0c;开发人员倾向于认为它是一个简单的步骤&#xff0c;需要读取项目的CMakeLists.txt文件&#xff0c;并生成相关的特定于生成器的项目文件集(例如Visual Studio解决方案和项目文件&#xff0c;Xcode项目&#xff0c;Unix Makefiles或Ninja输入文件)。然…
暂无图片
编程学习 ·

47.第十章 网络协议和管理配置 -- 网络配置(八)

4.3.3 route 命令 路由表管理命令 路由表主要构成: Destination: 目标网络ID,表示可以到达的目标网络ID,0.0.0.0/0 表示所有未知网络,又称为默认路由,优先级最低Genmask:目标网络对应的netmaskIface: 到达对应网络,应该从当前主机哪个网卡发送出来Gateway: 到达非直连的网络,…
暂无图片
编程学习 ·

元宇宙技术基础

请看图&#xff1a; 1、通过AR、VR等交互技术提升游戏的沉浸感 回顾游戏的发展历程&#xff0c;沉浸感的提升一直是技术突破的主要方向。从《愤怒的小鸟》到CSGO,游戏建模方式从2D到3D的提升使游戏中的物体呈现立体感。玩家在游戏中可以只有切换视角&#xff0c;进而提升沉浸…
暂无图片
编程学习 ·

flink的伪分布式搭建

一 flink的伪分布式搭建 1.1 执行架构图 1.Flink程序需要提交给 Job Client2.Job Client将作业提交给 Job Manager3.Job Manager负责协调资源分配和作业执行。 资源分配完成后&#xff0c;任务将提交给相应的 Task Manage。4.Task Manager启动一个线程以开始执行。Task Manage…
暂无图片
编程学习 ·

十进制正整数与二进制字符串的转换(C++)

Function one&#xff1a; //十进制数字转成二进制字符串 string Binary(int x) {string s "";while(x){if(x % 2 0) s 0 s;else s 1 s;x / 2;}return s; } Function two&#xff1a; //二进制字符串变为十进制数字 int Decimal(string s) {int num 0, …
暂无图片
编程学习 ·

[含lw+源码等]微信小程序校园辩论管理平台+后台管理系统[包运行成功]Java毕业设计计算机毕设

项目功能简介: 《微信小程序校园辩论管理平台后台管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序做的辩论管理前台和Java做的后台管理系统&#xff1a; 微信小程序——辩论管理前台涉及技术&#xff1a;WXML 和 WXS…
暂无图片
编程学习 ·

树莓派驱动DHT11温湿度传感器

1&#xff0c;直接使用python库 代码如下 import RPi.GPIO as GPIO import dht11 import time import datetimeGPIO.setwarnings(True) GPIO.setmode(GPIO.BCM)instance dht11.DHT11(pin14)try:while True:result instance.read()if result.is_valid():print(ok)print(&quo…
暂无图片
编程学习 ·

ELK简介

ELK简介 ELK是三个开源软件的缩写&#xff0c;Elasticsearch、Logstash、Kibana。它们都是开源软件。不过现在还新增了一个 Beats&#xff0c;它是一个轻量级的日志收集处理工具(Agent)&#xff0c;Beats 占用资源少&#xff0c;适合于在各个服务器上搜集日志后传输给 Logstas…
暂无图片
编程学习 ·

Linux 基础

通常大数据框架都部署在 Linux 服务器上&#xff0c;所以需要具备一定的 Linux 知识。Linux 书籍当中比较著名的是 《鸟哥私房菜》系列&#xff0c;这个系列很全面也很经典。但如果你希望能够快速地入门&#xff0c;这里推荐《Linux 就该这么学》&#xff0c;其网站上有免费的电…
暂无图片
编程学习 ·

Windows2022 无线网卡装不上驱动

想来 Windows2022 和 windows10/11 的驱动应该差不多通用的&#xff0c;但是死活装不上呢&#xff1f; 搜一下&#xff0c;有人提到 “默认安装时‘无线LAN服务’是关闭的&#xff0c;如果需要开启&#xff0c;只需要在“添加角色和功能”中&#xff0c;选择开启“无线LAN服务…
暂无图片
编程学习 ·

【嵌入式面试宝典】版本控制工具Git常用命令总结

目录 创建仓库 查看信息 版本回退 版本检出 远程库 Git 创建仓库 git initgit add <file> 可反复多次使用&#xff0c;添加多个文件git commit -m <message> 查看信息 git status 仓库当前的状态git diff 差异对比git log 历史记录&#xff0c;提交日志--pret…
暂无图片
编程学习 ·

用Postman生成测试报告

newman newman是一款基于nodejs开发的可以运行postman脚本的工具&#xff0c;使用Newman&#xff0c;可以直接从命令运行和测试postman集合。 安装nodejs 下载地址&#xff1a;https://nodejs.org/en/download/ 选择自己系统相对应的版本内容进行下载&#xff0c;然后傻瓜式安…
暂无图片
编程学习 ·

Java面向对象之多态、向上转型和向下转型

文章目录前言一、多态二、引用类型之间的转换Ⅰ.向上转型Ⅱ.向下转型总结前言 今天继续Java面向对象的学习&#xff0c;学习面向对象的第三大特征&#xff1a;多态&#xff0c;了解多态的意义&#xff0c;以及两种引用类型之间的转换&#xff1a;向上转型、向下转型。  希望能…