你在胡说八道。什么样的无意义的词集？但是，a或欢呼-像那样的人，今天这不是胡说八道，而是现实。这篇文章将讲述我为Instagram编写的一款游戏，其中您的脸被用作控制器，或者不仅是它，甚至有时是整个头部。通过转动和倾斜头部，可以在运动场中四处移动，选择动作的方法是张开嘴巴或双击眼睛（眨眼）。两次眨眼可能是值得的...哦，勇敢的新世界！未来的赶时髦的人可能会开发脚本，以在轻巧的太空舱后面生成美丽的彩色烟雾，或编写着色器，为个人传送的黑门提供有趣的视觉效果，例如飘落的雪花（Web 100.0）或分形雾（WebGL 100.0）或……不，也许我没有足够的想象力，无法想象我们将来可以处理什么样的废话：我尝试过分思考。但是大约30年前，我们当然在任何情况下都没有梦想，甚至可以想到，今天我们将为称为Instagram的社交网络创建蒙版。而且，在这些面具中将会出现完整的游戏。我变得害怕和有趣。总而言之，令人恐惧的有趣。而且，正如您已经了解的那样，我无法抗拒并编写了这样的游戏。当然，要播放它，您必须在Android或iOS上安装带有前置摄像头和已安装Instagram应用程序的智能手机。这场比赛是井字游戏。总的来说，这是我一生中创作的第一批游戏之一，也许甚至是第一部游戏-我现在都不记得了。但是我用Pascal写了回去，然后将那个旧算法拖到了Delphi中。此后，该游戏当然也出现在了我的网站上的网络上：嗯，在您的个人页面上没有您自己的个人井字游戏的地方……现在是时候将这个史诗般的游戏发布到Instagram上了。总的来说，如果我在这个游戏中是匕首或TAC脚趾（可能是脚趾），那么我可以讲述很多我的漫长而有趣的生活...这些是什么样的口罩？
首先-简短的历史题外话。感谢白俄罗斯团队开发了MSQRD自拍应用程序，Instagram上的面具出现了。 Facebook购买了此应用程序后，公司内部的团队继续将其技术集成到Facebook产品中。因此，有一个提供增强现实功能的平台Spark AR。在2019年8月，该平台退出测试版状态，并向所有现在可以为Facebook和Instagram创建增强现实内容的用户使用。面具被认为是一种过滤器，可通过随后在社交网络上放置自拍来给他们的面相带来有趣的效果。至于蒙面游戏，我没有找到太多。有一张“飞扬的面孔”，类似于“飞扬的小鸟”，其中一只小鸟飞过屏幕，您需要防止它撞到障碍物，并在适当的时刻眨眼。我还看到了一个游戏，您需要从上到下捕捉令人垂涎的食物。像Invaders这样的射手。还有一个3D跑步者，角色沿着城市的街道奔跑，并越过障碍物。也许还有更多。总的来说，这个话题是很新的。内容创建过程在Spark AR Studio开发环境中进行，可以免费下载Windows版本。另外，值得下载Spark AR Player应用程序来测试您在Andrioid或iOS移动设备上创建的效果，实际上，这些效果是预期的。至少通过Android手机，通过USB电缆连接到计算机。通过Facebook / sparkarhub组件下载面具并通过审核后，您的面具（或游戏）将可从Internet对所有Instagram用户使用。可以通过直接链接或从其创建者在Instagram上的页面获得该蒙版。了解如何在Spark AR Studio中工作并不困难。我不会对此进行详细介绍，尤其是因为Internet上充斥着有关该主题的课程。我只注意到有两种方法可以开发一个或多或少的交互式应用程序，其中涉及的不仅仅是将某种静态sprite应用于面部：这是创建所谓的补丁程序并编写脚本。第一种方法在视觉上类似于在3D编辑器中处理材料，第二种方法只是使用专用api在Javascript中进行编程。我选择了第二个选项。但是，没有人禁止同时使用这两种方法：从脚本中可以访问修补程序中发生的所有事情。平面艺术
因此，对于初学者来说，最好创建一些将在游戏中使用的图形元素。打开您喜欢的3D建模程序并创建。我正在使用Blender。原则上，您可以创建单独的子画面，然后使用Spark AR而不是3D编辑器询问它们的某些行为逻辑。但是我决定制作大量的十字架和脚趾人物，所以没有这样的编辑者我无法做。首先要做的是创建2D纹理。将所有纹理组合在一起。质地缎现在介绍3D模型。作为游戏3D空间，使用了两个三角形的平面，在该平面上拉伸了场标记（这是来自纹理图集的大网格碎片）。地图集本身带有透明的Alpha通道。将在该字段中插入9个蓝色正方形，每个正方形也包括两个三角形。此外，除了9个蓝色方块外，3D模型还将在相同坐标中包含9个绿色和红色方块，这些方块将在游戏开始时隐藏。含义是，在正常状态下，该字段所有正方形的颜色均为蓝色，绿色和红色分别用作光标来选择要设置十字或零的位置。此外，绿色和红色用于在每个回合结束时突出显示三个单元的获胜行。当然，就足够了使用9个蓝色，仅使用3个绿色和红色方块，但是除了显示/隐藏之外，您还必须为它们设置某种移动逻辑。在我看来，仅隐藏和显示它们而无需对空间中的坐标进行任何操作都将变得更加容易，并且3D模型将对其进行微不足道的加载。比赛场地当然，在游戏中，九组中的每个三个正方形的位置都重合。在这里，我只是将它们垂直分散在一个单元格中，以清楚地展示3D模型整体的组成。请注意，以某种方式为框指定了名称（在右图中）：从b11到b33，从g11到g33以及从r11到r33，其中每个数字在1到3之间变化。换句话说，字母表示颜色，数字是行和列。通过脚本中的名称访问正方形（网格，用3D术语表示）是必要的，以便于隐藏和显示它们。然后，我对十字架和脚趾的图形进行建模，并将它们成对放置在每个单元格中。（为清楚起见，他提出了零值之一。）请不要忽视到目前为止它们的纹理是如此“令人愉快”的事实。我这样做是为了方便进行UV扫描。然后，在纹理图集中，我将图形的纹理替换为较为平静的图形，您可以在游戏本身中看到它们。游戏片段最后，我建模了4个扁平箭头，这些箭头将指示光标在游戏中移动的方向。我对它们的几何体应用了一种纹理：在Sprite表中，这是笔触中的白色三角形箭头。我们将所有3D模型（全部三个，即字段，形状和箭头）导出为FBX格式，这需要Spark AR Studio。导入到Spark AR Studio
首先，启动Spark AR Studio并在那里导入3D模型。它们将显示在左下方的“资产”列表中。同时，我们将为自己创造一个主题面具，上面涂上战争涂料，形式是“纹身”十字架和脸上的脚趾。您可以从全球网络上的数千堂课或平台上的官方文档中了解如何创建纹理化蒙版，我不会在此重点介绍。简而言之：下载“空白”，在您喜欢的图形编辑器中将其打开，在其上方绘制，保存，然后将图像导入Spark AR Studio中，调整材质和纹理参数。将我们的模型从Assets拖到上方的Scene列表中。此外，我们需要以特定顺序渲染它们：首先是字段（field.fbx），然后是图形模型（fieldxo.fbx），最后是箭头（arrows.fbx）。另外，在最底层，还会有带有faceMesh的faceTracker-这是您的脸部遮罩。您可能可以按任何顺序将模型投到舞台上，但是，我打算对所有材料（图形除外）禁用深度排序-深度测试和写入深度缓冲区（在材料属性中），因此让它们按照我手动设置的顺序进行渲染：面具-领域-数字-箭头。在每一层的材质中，设置“混合模式= Alpha”，以使对象在纹理中指定的那些部分中变为透明。我们将设置纹理Filtering = Medium进行平滑。（如果您从左侧的列表中选择一种材质或纹理，则所有可用的属性将显示在窗口的右侧。）最后，将Script元素添加到Assets中（通过单击左下方+ Add Asset）元素。除3D模型外，通过单击脚本的外部文本编辑器，可在列表中显示script.js。当您保存在编辑器中时，您的程序将在Spark AR Studio中重新启动。程式设计
在脚本的开头，连接该项目中需要的模块。这是一个场景，面部跟踪，用于处理时间，声音和动画的模块。const Scene = require('Scene');
const FaceTracking = require('FaceTracking');
const Time = require('Time');
const Audio = require('Audio');
const Animation = require('Animation');
有多种方法可以在Javascript中实现井字游戏。本文不是关于以给定的编程语言来实现该游戏，而是关于在一个人的帮助下进行管理。我将描述特定于与Spark AR系统交互的关键点，以便理解该原理。访问3D模型（网格）的命名片段，例如，访问运动场第一行第二列的蓝色方块：Scene.root.find('b12');
（回想b12-这就是我们在3D编辑器中如何称呼此网格的方法。）在此位置访问十字：Scene.root.find('x12');
隐藏脚趾（o），设置十字（x）并以绿色（g）为字段“ 32”（第三行，第二列）的单元格着色：
Scene.root.find('o32').hidden = true;
Scene.root.find('x32').hidden = false;
Scene.root.find('b32').hidden = true;
Scene.root.find('g32').hidden = false;
Scene.root.find('r32').hidden = true;
在'32'字段中带有绿色背光的绿色十字，订阅头部旋转和倾斜以在该字段中移动的事件。
FaceTracking.face(0).cameraTransform.rotationX.monitor().subscribe(function(event) {
var v = event.newValue;
...
});
FaceTracking.face(0).cameraTransform.rotationY.monitor().subscribe(function(event) {
var v = event.newValue;
...
});
这里的一切都很简单。我们从事件中获取头部旋转或倾斜的值（event.newValue）并检查它们是否在特定范围内。如果是，则沿所需方向可视地移动光标（绿色框）。磁头旋转的负值对应于其向左旋转，正向-右旋转。同样-前后倾斜头部以沿线条移动。整个范围是-1至+1。因此，您可以实现光标移动并...然后它突然降临在我身上
我突然意识到，以我选择的方式控制字段上的光标很不方便：您需要转动头部以移动一个单元格，然后将头部返回其原始位置，然后再次旋转以进行下一步，依此类推。并且为什么不仅仅使用将头部转向侧面并来回倾斜的分数值以立即专注于该领域中所需的细胞呢？即，如何以外观或头的方向向光标指示其位置。然后第一种方法是太难于锻炼颈部。当然，体育教育是好的，但程度不同。自然地，我们将在ap.cur = {x：1，y：1}中记住当前位置，以删除先前位置的光标并保存新位置的坐标，这是随后单击“单击”所需的。顺便说说不再需要用于指示光标移动方向的可视箭头：我们从项目中抛出了一个3D模型（arrows.fbx）。您也可以从纹理中删除箭头图像。两次闪烁？
现在我们进入了最有趣的阶段。双击眼睛。承认这一点，您是想从本文开始了解它的那一刻起就这样做吗？现在，您将告诉您的朋友，鼠标已经过时了，并且单击两次时都闪烁两次！两次眨眼。为什么要加倍？一切都很简单：一个人不定期地自愿做某事，因此，将任何事件挂在眨眼之间都是一种虐待。在Spark AR中，存在事件leftEye.openness和rightEye.openness，通过订阅这些事件，您可以获得event.newValue中每只眼睛的张开值，其范围是0到1。我们将闭眼的值设为小于0.1。我们将调用闪烁处理函数ap.blink1（）（ap是一个名称空间，对我来说更方便）。
FaceTracking.face(0).leftEye.openness.monitor().subscribe(function(event) {
if (event.newValue < 0.1) {
ap.blink1();
};
});
FaceTracking.face(0).rightEye.openness.monitor().subscribe(function(event) {
if (event.newValue < 0.1) {
ap.blink1();
};
});
在眨眼处理功能本身中，我们定义了两次眨眼之间的最小间隔200毫秒，因此该功能在两只眼睛眨眼时不会立即起作用两次，因为它的调用挂在了每只眼睛上。我认为这很清楚。另外，我们定义最大两次眨眼时间-1秒。如果我们适合此范围，则action（）函数将起作用，该函数将在当前位置显示十字。同时，我们将action（）挂在uth.openness事件上，以便玩家选择是在两次眨眼还是张开嘴上放置一个叉。blink1:function () {
var tmNew = Date.now();
if (tmNew - ap.blinkStart > 200) {
ap.blinkCount++;
if (ap.blinkCount > 1) {
if (tmNew - ap.blinkStart < 1000) {
ap.action();
};
ap.blinkCount = 0;
ap.blinkStart = 0;
} else {
ap.blinkStart = tmNew;
};
};
},
action:function() {
if (ap.fProc == false) {
ap.fProc = true;
xo.putx();
};
},
FaceTracking.face(0).mouth.openness.monitor().subscribe(function(event) {
if (event.newValue > 0.2) {
ap.action();
};
});
声音
我在各种音效网站的免版税部分中找到了它们。重要信息：Spark AR需要某种格式的声音文件，即M4A，单声道，44.1 kHz，16位。全球网络中有从wav和mp3到m4a的在线转换器。我在四个事件中添加了声音：移动，赢得匕首，赢得TAC脚趾和抽奖。转换后所有声音的总音量为105 Kb。要在脚本中使用声音，您需要在脚本中连接一个音频模块，通过声音的数量将所需的扬声器数量添加到场景中（我得到Speaker0，Speaker1，Speaker2，Speaker3），将Playback Controllers模块添加到Assets，根据声音数量在其中创建必要的audioPlaybackController子项目。并将声音附加到每个扬声器。之后，您可以按以下方式播放脚本中的声音（例如，咔嗒声）：var audioClick = Audio.getPlaybackController('audioPlaybackControllerClick');
audioClick.reset();
audioClick.setPlaying(true);
最终版本
要为所有受支持的移动设备（Android，iO）创建内部版本，只需单击文件->导出。在我的案例中，具有所有3D模型和纹理的每个移动平台的游戏容量约为1 Mb。然后，您需要通过浏览器访问Facebook / sparkarhub上的Spark AR Hub，然后将导出的文件上传到那里。您还需要填写说明，搜索关键字并下载演示视频。此外，必须通过Instagram相机在手机上拍摄。为此，集线器中有一个“ Preview Camera”部分，其中包含一个链接。可以在移动设备上打开此链接。 Instagram应用程序将启动，您的面具（游戏）将在其中打开。该链接也可以发送给您的所有朋友以进行测试，他们当然必须装有安装了Instagram应用程序的智能手机。在审核过程结束之前，该遮罩将对所有用户不可见，并且只有在该链接可见之前，他们将无法将其添加到其效果列表中。审核过程通常需要几天（可能需要10个工作日）。据我了解，首先要对效果进行机器测试，至少要进行演示视频-当然，因为在发送效果后的第二秒，我收到了一条消息，指出审核没有通过。原因-视频包含文字。通常，由于某些原因，如规则所述，从根本上来说，不欢迎使用遮罩文字。我不得不重新设计游戏界面，以使分数不会像以前一样一直悬在玩家的头上，而只会出现在每个回合结束时。并重新拍摄视频。完成所有更改后，我重新提交了游戏进行审核。三天后，将游戏移至“相机样式”部分后，该游戏获得批准。老实说，我不记得我最初将其放在哪个部分（需要选择该部分，或者换句话说，类别）。这并不明显，因为Instagram没有游戏部分。但是，好的，现在我们知道在哪里放置新游戏了。如果游戏将在未来出现，那么，Instagram可能应该添加一个新部分。总
您可以在Instagram上转到其创建者的个人资料，然后单击下面其蒙版的图标（带有两个加号的表情符号）来尝试蒙版。当然，这也适用于蒙版游戏。以前，在口罩的Beta测试期间，还必须订阅作者。但是现在，该规则已被取消。他们不为制造口罩而付钱，也没有可出售口罩的商店，例如知名商店中的应用程序。另外，您无需支付在个人资料中创建的遮罩的放置费用。只需要等待主持人通过。但是，许多博客作者和公司都要求自己开发品牌口罩。好吧，当然，您可以要求您的订阅者试戴您创建的面具，玩游戏，并将所有内容广播到Instagram故事中。这样的动作会产生所谓的病毒效应，尤其是在游戏有趣的时候。这可以帮助提升您的帐户。但是，现在每个人都不太懒于做口罩。但是Instagram遮罩游戏的想法仍然很新。此外，入门门槛更高，竞争更少，因为不是每个面具制造商都是程序员来编写完整的游戏。