Spark AR —— 用户界面贴片概述

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

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

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

用户界面贴片可以让你添加 UI 功能到效果中。

这些贴片让用户可以在不同的选项之间进行选择,或者通过点击屏幕上的图标或使用屏幕上的滑块来调整属性。

可用的用户界面贴片

Name Description
Picker UI 使用 picker UI 贴片可以从多达 10 个选项中选择,以改变你的效果。
Slider UI 允许人们使用交互式滑块来改变效果中某些东西的值。

Picker UI 贴片

image.png

使用 Picker UI 贴片最多支持输入 10 个未压缩的纹理,并将它们作为图标显示在用户的设备屏幕上。

当用户在屏幕上选择一个选项时,它会触发 Picker UI 贴片中的一个选项更新,并更改效果中的一个元素。

输入

Name Description
Visible 显示或隐藏选项
Start Index 当选择器第一次出现时所选择的选项的索引号
Texture 1-10 纹理选项1-10

输出

Name Description
Selected Option Index 选定选项的索引号
Selected Texture 使用该效果的人所选择的纹理

纹理压缩

Picker UI 贴片只适用于未压缩的纹理。当导入纹理用于 Picker UI 图标时,你需要编辑压缩设置。这样做:

  1. 在资源面板中选择纹理,然后进入检查器的 Compression 部分。
  2. 在每个设备类型(iOS、Android、Older Android)的右侧,在下拉框中选择 None

image.png

例子

在下面的示例中,当用户选择屏幕上的图标时,它会将 Picker UI 中的选项更新为相应的纹理。

在效果中,覆盖眼睛的表情纹理会被更新。

87339265_194169554986529_245009862554025984_n.gif

教程与模板

尝试本教程,自己创造上述效果!

你也可以尝试我们的Color LUTs教程,学习如何使用 Picker UI 贴片在四种不同的颜色渐变外观之间切换。

为了加快准备 Native UI 项目的过程,您还可以使用 Spark AR Welcome 屏幕中提供的一个模板。2D 和 3D 贴纸模板都使用 UI 选择器来控制对象的可见性。

image.png

Slider UI 贴片

image.png

Slider UI 贴片创建了一个滑动条,用户可以与之交互来改变效果中的元素。

例如,将 Slider UI 贴片连接到表示场景中灯光强度属性的贴片上,用户就可以使用屏幕上的滑块来调整灯光。

由 Slider UI 贴片渲染的(屏幕上的)滑块在模拟器中是不可见的。要查看和使用滑块,你需要在 Spark AR Player 中预览你的效果。

输入

Name Description
Visible 显示或隐藏滑块
Start Value 滑动条第一次出现时的值。取值范围:0 ~ 1

输出

Name Description
Slider Value 由使用滑块的人设置该值,连接到您想要更改的属性的贴片。
Selected Texture 使用该效果的人所选择的纹理。

例子

在下面的例子中,覆盖面部的表情纹理的不透明度是在贴片编辑器中调整的。添加了一个 Slider UI 贴片,这样用户就可以通过设备上可见的 Slider 自己调整这个容量。

尝试本教程自己创建效果!

image.png

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享