Spark AR —— Visual Studio 代码的 Spark AR 扩展（一）【脚本】

ShaderJoy
933 阅读3分钟

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

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

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

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

image.png

Spark AR Studio 扩展是 Visual Studio Code 可用的扩展，它提供了许多特性，让使用脚本更容易开发 Spark AR 效果。这些特性包括:

  • 代码语法高亮显示和自动完成；
  • Javascript 和 Typescript 调试；
  • SparkSL 语法支持和自动完成；
  • 映射 Spark AR Studio 调试控制台；
  • 通过映射的监视视图来监视和调试响应式信号；
  • 用于实时代码执行观察（execution observation）的响应式图（graph）可视化器。

准备开始

确保安装了最新版本的 Spark AR Studio。 如果你还没有安装Visual Studio Code，则需要安装 1.47 或更高版本。

安装扩展

扩展可以从 Visual Studio 代码市场网站，或从 Visual Studio 代码本身安装。 要从 Visual Studio Code 安装，打开 Extensions 选项卡，并在搜索栏中输入 Spark AR Studio。

image.png

选择如下所示的选项以打开扩展页面并单击 Install 选项。

image.png

使用扩展

首先在 Spark AR Studio 中打开一个项目或创建一个新项目。

如果您的项目不包含任何脚本，或者如果您已经创建了一个新项目，请通过单击 add Asset ，然后在 Assets 面板中单击 script 来添加脚本。

image.png

JavaScript 和 TypeScript 文件都扩展都支持。

在 Visual Studio Code 中打开你的脚本。如果你已经创建了一个新的脚本，并且没有重新命名它，默认情况下它将被称为 script.js。

当仍然在 Visual Studio Code 中，点击在窗口底部找到的 Spark AR Studio 选项来激活扩展。

image.png

这也可以作为连接状态指示器，显示项目是否成功连接到扩展。

激活扩展将在 Visual Studio Code 中创建一个新的工作空间，其结构反映了同步的 Spark AR Studio 项目的项目结构。

这允许您轻松切换和编辑项目中的多个脚本，以及可视化纹理和其他图像文件。

image.png

如果检测到 Spark AR Studio 项目结构的任何更改，工作区将自动更新。

映射控制台

通过 DiagnosticsModule API 记录到 Spark AR Studio 控制台的消息会被映射到 Visual Studio 代码中。 在现有的脚本中，或者在前面步骤中添加的 script.js 文件中，添加以下代码:

const Diagnostics = require('Diagnostics');
Diagnostics.log("Hello from Spark!");

如果你使用的是 TypeScript，将第一行替换为:

import Diagnostics from 'Diagnostics';

激活扩展后，您将在 Visual Studio Code 中看到（扩展 UI 面板旁边的） Spark AR Studio 控制台输出。

你还会看到控制台中映射的错误:

image.png

调试

用下面的代码片段替换前面脚本中的代码:

const FaceTracking = require('FaceTracking');
const Diagnostics = require('Diagnostics');

FaceTracking.face(0).mouth.openness.monitor().subscribe((event) => {
    Diagnostics.log(event);        
});

如果你使用的是 TypeScript，将前两行替换为:

import FaceTracking from 'FaceTracking';
import Diagnostics from 'Diagnostics';

在第 5 行放置一个断点

image.png

在调试面板中，选择 Run and debug，然后在下拉框中选择 Spark AR Studio 。

image.png

调试会话将启动，然后在指定的断点处停止。将鼠标悬停在调试模式下的变量上，将显示关于它们状态的更多信息:

image.png

了解有关在 Visual Studio Code 中调试的更多信息。

avatar
文章
阅读
粉丝