Spark AR ——带有音频的世界对象(二)【贴片】

476 阅读6分钟

Spark AR 是 Facebook 免费创作 AR 作品的平台,使用户能够为 Facebook 和 Instagram 创建交互式增强现实体验,超过 40 万名创作者,190个国家/地区,使用 Spark AR 来创作自己的AR作品

由于该软件无需任何编码知识即可使用,因此任何人现在都可以在 AR 世界中几乎没有经验地制作下一个疯狂式传播的 Instagram AR 特效,引领世界潮流。

专门的 AR 滤镜设计师单价甚至可达到 1000 美元到 3 万美元不等。

添加循环音频

首先将 3 个音频文件添加到场景中。它们在资产面板中被列示为:

  • arl_mus_SleepTalk_lpl_01.m4a
  • arl_mus_SleepTalk_lpl_02.m4a
  • arl_mus_SleepTalk_lpl_03.m4a

你可以通过将它们交换为不同的文件来自定义这个效果——在 AR 库中有很多免费的、授权的音频文件可供选择。

添加扬声器

一个叫做扬声器的物体在效果中渲染音频。你需要添加 3 个,每个音频文件一个。添加扬声器作为 placer 空对象的子对象:

  1. 在场景面板中,右键单击 placer
  2. 选择 Add
  3. 选择 Speaker
  4. 增加 2 个扬声器 —— 你可以使用键盘快捷键来复制和粘贴你已经添加的扬声器。

重新命名扬声器是值得的,这样可以帮助你在构建效果时跟踪。重命名如下:

  1. speaker0 —— speakerMusicLoop
  2. speaker1 —— speakerMusicLoop2
  3. speaker2 —— speakerMusicLoop3

下面是场景面板的样子,突出显示了3个新的扬声器:

image.png

设置音频回放

您将使用一个代表每个音频文件的贴片,Single-Clip ControllerAudio Player 贴片来实现这一点。当效果打开时,一个 Pulse 贴片将被检测到,并向图的其余部分发送一个信号,触发回放。在图的最后,一个代表每个扬声器 Audio 属性的贴片将渲染场景中的声音。创建该贴片。

  1. 在场景面板中,选择所有 3 个扬声器。您可以使用键盘快捷键同时选择它们。
  2. 在检查器中,单击 Audio 右边的箭头符号。

三个黄色贴片将被添加到贴片编辑器中:

image.png

要创建其他贴片,在贴片编辑器中右键单击以打开菜单。添加以下贴片:

3 个 Single-Clip Controller 贴片 3 个 Audio Player 贴片 3 个 Pulse 贴片—— 当效果已被打开,该贴片将检测到并发送一个信号到图告诉音频要播放了。

最后一个贴片来代表每个音频文件:

  1. 在 Assets 面板中选择一个音频文件。
  2. 将它拖到贴片编辑器中。
  3. 对剩下的 2 个音频文件重复以上步骤 —— 你会在贴片编辑器中看到 3 个橙色补丁。

image.png

您将构建 3 个小图,分别对应于每个音频文件。要做到这一点,链接以下端口:

  1. Single-Clip Controller 贴片中,每个 Pulse 贴片的输出到 Loop 输入。
  2. 每个 Single Clip Controller 贴片的输出到 Audio Player 贴片中的 Controller 输入。
  3. Audio Player 贴片的输出到扬声器贴片中的 Audio 输入。
  4. 表示音频剪辑的贴片的输出到 Audio Player 贴片中的 Audio Clip 输入。

以下是贴片编辑器中的 3 张图表:

image.png

如果你点击工具栏中的 Reset 按钮,你会发现所有 3 个剪辑同时播放! 在你设置好循环图层(loop layers)之前,最好把电脑的音量调低。

设置音频循环层

对于循环层,我们将为每个(总共 3 个)扬声器添加一个音量值到 Option Picker 贴片。在每个 Option Picker 中,一个扬声器将被设置为播放 50% 的音量,而其他的将被设置为 0 。

连接到 Counter 贴片的交互贴片将通过每个 Option Picker 贴片进行计数。因此,每次点击 boombox 时,不同的扬声器将逐渐达到 50% 的音量,而其他扬声器将逐渐下降到 0%

添加交互贴片

添加交互贴片,其将检测设备屏幕上对 boombox 对象的点击:

  1. 在场景面板中,选择 boombox_animated
  2. 转到检查器上。
  3. Interactions 下单击 Create
  4. 选择 Object Tap 菜单。

一个 Object Tap 贴片(连接到 场景中代表 boombox 对象的贴片) 将被添加到贴片编辑器中:

image.png

添加计数器和选项选择器贴片

要创建贴片,在贴片编辑器中右键单击并添加:

  1. 1 个 Counter 贴片
  2. 3 个 Option Picker 贴片

image.png

接下来创建贴片来表示扬声器的 Volume 属性。像以前一样,在场景面板中选择扬声器。这一次,点击检查器中 Volume 旁边的箭头符号。3 个黄色贴片将被添加到贴片编辑器中:

image.png

链接贴片

现在在以下之间建立链接:

  1. Object Tap Patch 的输出和 Counter 贴片的 Increase 输入。
  2. Counter 贴片的输出和在每个(一共 3 个)Option Picker 贴片中的 Option 输入。
  3. 每个 Option Picker 贴片的输出到代表扬声器 Volume 的贴片。

下图是这样的:

image.png

编辑贴片

因为有 3 个选项需要计数,所以将 Counter 贴片中的 Maximum Count 值更改为 3 。

在每个 Option Picker 贴片中,添加一个值来控制音量:

  1. 在图顶部的 Option Picker 中,将第一个输入值设置为 0.5
  2. 在图中间的 Option Picker 中,将第二个输入值设置为 0.5
  3. 在图底部的 Option Picker 中,将第三个输入值设置为 0.5

现在每次点击屏幕,计数器状态将被推进。因此,只有一个音频剪辑可以听到。

增加指数平滑法

指数平滑贴片将完成这部分图。在每个 Option Picker 和扬声器贴片之间添加这个贴片将在屏幕被轻击时逐渐改变音量,创建交叉淡入效果。使用贴片编辑器中的菜单创建这个贴片。

完成后的图应该是这样的:

image.png

编辑动画

所以动画会随着音频剪辑的时间移动,对你之前创建的动画贴片做最后的调整。

音频剪辑正在以每分钟 85 拍的速度播放。您将使用一个 Divide 贴片来输出每个节拍之间的秒数。这个信号将驱动扬声器底座的动画。你将以两倍于底座的速度来动画化扬声器,使用另一个 Divide 贴片将第一个 Divide 贴片输出的数字减半。

在贴片编辑器的菜单中,选择 2 个Divide 贴片。连接:

  1. 其中一个 Divide 贴片的输出到另一个 Divide 贴片的输入,以及 Loop Animation 贴片的 Duration 输入驱动 base_jnt 的动画。

  2. 另一个 Divide 贴片的输出与另一个 Loop Animation 贴片的 Duration 输入。

设置第二个 Divide 贴片的底部值为 2

下面是完整的图:

image.png

操作录音机

这种效果使用交互贴片来改变 boombox 的尺寸、位置和旋转。

我们将在空对象 placer 中调整这些属性。这是因为 boombox 对象的缩放、旋转和位置已经由动画控制:

  1. 在场景面板中选择 placer
  2. 在检查器中单击 ScalePosition 和 Rotation 旁边的圆圈,创建代表这些属性的贴片。