Spark AR —— 2D 纹理动画(一)

853 阅读3分钟

本文已参与掘金创作者训练营第三期「高产更文」赛道,详情查看:掘力计划|创作者训练营第三期正在进行,「写」出个人影响力

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

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

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

在 Spark AR Studio 中,你可以使用 2D 纹理来创建动画。

你可以:

  • 添加你自己的纹理,使用 Animation Sequence 将它们转换成动画,然后将动画添加到对象中。
  • 使用快速导入和优化方法,Spark AR 将自动添加纹理到Animation Sequence,并将它们分配给 plane 对象( gif 文件必须使用快速方法来导入)。

可以导入的纹理

你可以导入:

  1. 一系列单独的纹理文件,创建一个序列;
  2. 子画面表单;
  3. 纹理图集;
  4. 动画 gif

一个纹理图集将创造出最有效和通常最好的质量效果。序列产生的效果最差。

创建纹理

你可以使用 TexturePacker 创建子画面表单和纹理图集。

准备纹理

命名纹理

如果你要导入一系列的纹理文件,在导入之前要给它们命名。例如: name.frameNumber.fileExtension。

子画面表单的 JSON 数据

如果 JSON 文件和你导入的纹理在同一个文件夹中,JSON 数据将被添加到项目中。否则你可以通过在 Spark AR Studio 中编辑纹理的属性来手动添加它。

导入纹理

导入、优化和添加纹理序列或动画GIF的最快方法是使用下面描述的快速导入和优化方法。

快速导入和优化的方法

快速导入纹理序列或 GIF:

  • 单击资产面板底部的 Add Asset
  • 选择Import,然后选择 Texture Animation
  • 选择Choose Files,选择一个 GIF 或多个文件组成一个纹理序列。

image.png

一、优化

一旦你添加了纹理序列或 GIF,你可以在Import Texture Animation window中通过减少文件的总大小来优化它。纹理文件不能超过最大效果的大小(4MB),我们建议保持在这个数字以下。该窗口有许多设置,您可以通过选择每个设置右边的框进行编辑。

image.png

二、纹理缩减

这个设置可以配置纹理序列的大小、透明度和质量。Spark AR 支持不超过 1024 x 1024 像素的纹理。作为一般规则,尽量使用最小的纹理大小。

如果你导入了 GIF 或 PNG 文件,但你的纹理序列不包含透明度,你可以取消勾选透明度复选框。

文件的质量(0 - 100)控制压缩级别。低质量意味着更多的压缩和更小的文件大小。

三、帧缩减

使用此设置可以减少用于(从纹理序列衍生的) 2D 动画的帧数。Quantity(Low, Medium, High)设置了将从动画中删除的帧数。

四、导入选项

当您对优化结果感到满意时,可以选择如何将序列添加到项目中。将它添加到 plane 和Animation Sequence中:

  • 勾选Add To Plane右侧的复选框。
  • 点击Import

您的动画将直接播放!

如果是要简单地将序列添加到Animation Sequence,请单击Import。然后,你需要按照本文添加动画到一个对象上该节下的说明,让你的动画在场景中播放。