|
|
作为音乐科技的人机交互方向，Unity音乐/声音应用是很重要的组成部分。研究者，从业者试图用科技的方式把生活中的声音元素和人联系在一起，让更多人感受到声音的力量，让音乐和声音在生活的各个方面改善我们的生活。BeyondCode决定以后会出教程系列，来带大家一起做一个交叉学科的小项目，以便大家更好的了解每一个专业的每一个方向。
https://www.zhihu.com/video/1454040828821430272
夏天，必定是雨水充沛的季节，为有洪灾地区感到遗憾并说声加油，但同时也有好的地方：雨水洗去了夏天的炎热，滴滴答答的雨声让我们感到“静心”。研究表明，很多自然界的环境声(例如：雨声，流水声，海浪声，风声，白噪声等可以让我们的心情平静)。日本的Zen Garden就是一个很好的例子，它很好的运用了流水声，鸟叫声，和自然的声音以及沙子，绿植，石头，湖等视觉元素构建了一个视听系统让我们的感官感受到“沉静”。
那么，今天带大家学习用Unity做一个“冥想App”的原型。我们想要加入各种自然声和乐器旋律的组合，来模拟这些“令人沉静”的环境声。今天教程包括原型设计的步骤(Ideation，low-fi design, UI design, interactive Prototype design). 我们主要会注重于Unity简单UI触发，多轨道声音控制，播放/暂停的教学。废话不多说，那就让我们开始吧！
Ideation&low-fi Design
Step 1&2
设计的第一步就是Ideation，我们要想一下这个app的功能是什么，需要有什么元素，有什么亮点等这些比较笼统的大问题。通常小编喜欢拿一张白纸在上面写写画画这些问题。
大家可以多写多画一些你们的想法，这一阶段的目的就是要产生很多想法
UI Design
Step 3
下一步就是按照你的初步构想来画UI图，尺寸方面的话可以参考一下网站同类型的app大小，以及手机尺寸相应的UI设计大小规范。规范存在的意义就是你可以知道这个标准下大众是可以接受的。
第一个界面是主界面，包括了三个音源，然后你可以调节UI Slider来控制每个音源的大小。下方有一个流媒体音乐app通用的播放按钮，然后左右两边分别设计了一个计时器按钮和调节背景颜色的按钮。第二个界面是点击“自由组合”按钮以后出现的弹窗，里面可以选择任意三个环境声的icon作为我们主界面播放的音乐。第三个界面是点击计时器弹出来的窗口，你可以设置你想要循环播放的音乐时间。
Unity Implementation
Step 4
接下来，我们需要先把Figma里面的每一个icon，每一个按钮，每一个图片都export成为png模式。把这些png都导入到Unity的Assets里面，那我们的资产准备就做完啦。现在我们在Unity里面拼接我们的素材，让他们变成和我们在Figma里面一样。
然后我们开始写代码，让我们的资产可以“动起来”(发挥出它的作用)。Unity里的script是面向对象编程，里面的每一个object都是一个对象，我们需要写一个script来控制这个script。Unity编程是一个更加可视化，直接的编程方式，虽然Java，C++等都是面向对象编程，但是它们的class 都还是code，但是在Unity里面大多数对象都是实实在在的对象，比如我们这个app里的播放按钮就是一个对象，我们的slider是一个对象，我们需要写它们各自的代码来让他们运作起来。
1. clickPlay.cs
首先我们要写一个clickPlay.cs的script来控制我们的播放按钮。当然这个命名是随便的，大家只要保证这个name.cs的这个name要和后面 public class name的这个name一样就可以啦，不然的话engine会识别不了的。
我们写了一个 public void click() 的function是用来告诉这个按钮，它被按下去的当下需要做一些什么事情。首先，由于我们需要区分暂停和继续，我们要计数我们按下去的次数，所以每一次按，count++。还有一件事情是如果第一次按下去了，那三个音源就要开始播放了。这边我们用了play.start = true，这个是我们在另一个script里面设置的条件，初始条件是false，直到我们按下了一下，音乐就开始播放。
void Update() 里面需要做的事情是判断我们的程序在每一帧需要做什么事情。那我们需要做的就是当按奇数次的时候，我们更换成播放的icon；按偶数次数的时候，我们更换成暂停的icon。
这边的GetComponent<Image>是为了读取到按钮object里面的Image组件，然后更换sprite，也就是图案。
2. clickPlay.cs
这个script是针对slider写的，我们在Slider里面加一个AudioSource。
AudioSource就像我们生活中的音响一样, 我们需要放好我们的audioClip, 就像生活中的唱片，这样我们的印象才能播放。我们会看到AudioSource里面又个volume的参数，是音量的大小。
我们需要和我们Slider里面的value连在一起。
所以我们在我们的Update()里面写到GetComponent<AudioSource>().volume = = GetComponent<Slider>().value。其次，如果我们的按钮按了偶数下我们就要暂停：GetComponent<AudioSource>().Pause(), 反之就继续。当然要排除第0次和第1次。
Testing & Debug
Step 5
最后我们就可以Test我们的代码啦，通常我们的代码第一次都会有些什么问题，我们就需要好好debug来解决问题啦～或者我们觉得哪里有些可以改进的地方，我们也可以做一些细微的调整。
最后，如果大家想要看完整的视频教程，可以看这里 ：
https://www.bilibili.com/video/BV14b4y1r7Sn
写在最后：
如果你想探寻自己专业和其他专业的碰撞，并想尝试实现自己的想法，选择交叉学科！BeyondCode，致力于为学生提供新的跨学科融合的留学新思路。结合你的所学和兴趣爱好，才能真的让你热爱的事情变得长久。
扫二维码
开启你的新旅程
微信号｜BeCode留学 |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？立即注册
×
|
窥视卡
雷达卡
发表于 2021-12-17 07:06
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2021-12-17 07:14