Step 1:

新建两个2D图片元件，导入猫咪和线框的素材并分别进行挂载，调整两者的位置在屏幕中心完全重合

Step 2:

新建多个2D图片元件，分别增加挑战成功以及点击屏幕重新开始的2D贴纸

Step 3:

下面我们要设置跟头的猫耳朵，新建2D图片元件并挂载好猫耳朵素材；在2D图片组件的跟随属性中设置跟随人脸，将猫耳朵对准头顶位置即可；将挂载右边的猫耳朵的2D图片元件进行复制，将猫耳朵进行翻转后，调整至合适位置，使左右耳基本在同一条水平线上并保持对称

猫咪的运动控制

Step 1:

将猫咪的位置参数通过设置操作（set）添加到可视化创作窗口实现对猫咪位置的设置，添加数值渐变节点，添加开始触发节点，使猫咪在道具使用一开始就发生运动

Step 2:

接下来对数值变换节点的参数至今设置，先将节点切换至vector2保证数据类型同位置设置节点接受的数据类型保持一致，将输出的数据连接至猫咪位置的数据端口上，并将变化期间持续触发连接至位置设置节点的触发端口上，这样可以保证数值渐变的变化数据同位置设置节点之间的位置数据保持时刻同步

Step 3:

接下来进行数值变化节点的参数设置，变化值设置Y值不变，因为猫咪没有上下位置的变化，X坐标从-320变化到320，即从屏幕的最左侧运动到最右侧，设置循环次数9999为无限循环，最后通过调整变化时长来控制猫咪左右移动的速度，越快也就会越难

面部动作的识别

新加一个面部动作检测节点，在表情从无到有触发的控制端口连接至数值渐变节点的暂停运行端口，选择检测的面部动作为眨眼，此时通过预览我们可以看到，当眨眼动作发生时，猫咪会停止运动。

位置的判定模块

在眨眼使猫咪停止运动时，我们同时要去判定当前猫咪是否停止在指定位置

Step 1:

一般来说，为了避免难度过高，我们会给出一个停止范围，当猫咪在停止范围内，即使猫咪没有和线框完全重合，但差不多位置一致，我们也认定为抓猫成功，因此我们新增一个2D图片元件并挂载一张透明的图片，与猫咪之间进行碰撞检测来判定位置信息

透明区域的的最右侧不要超出对齐线框的最右侧，因为我们在后续会对猫咪的位置进行一些修正，会在当猫咪在到达线框位置之前发生碰撞时将猫咪位置设置为重合位置，如果碰撞区域超出了线框的最右侧，会出现猫咪已经明显超过线框位置又被强制拉回的现象，看起来比较不自然

Step 2:

接下来我们搭建猫咪与碰撞区域之间的碰撞检测模块，同样是在眨眼时，去判定猫咪是否运动到了指定的判定区域内，我们新增一个面部动作检测节点，当动作从无到有发生时，进行矩形框碰撞检测，同时通过2D位置获取节点每帧实时获取猫咪和碰撞区域的实时位置。

Step 3:

当猫咪与碰撞检测区域发生碰撞时，我们即判断转猫成功，因此我们要将猫咪和线框进行手动对齐，在先前的素材放置时，我们已经找到了猫咪和线框完全对齐的坐标，只需要将猫咪的坐标再设置为该值即可，所以我们将猫咪的2D位置在可视化创作中进行设置（Set操作）值。为了在猫咪处于碰撞区域时进行对齐，我们将矩形框碰撞检测的碰撞且完全包含的端口连接2D位置的设置端口，此时可以看到预览中的眨眼恰好实现了判断使猫咪和线框实现了了对齐

元素的显示和隐藏

在判定成功时，显示出挑战成功的贴纸

为了使在抓猫成功时才显示挑战成功贴纸，我们先将该贴纸设置为默认隐藏，再将其启用设置添加（Set操作）到可视化创作面板中进行受控，其出现时机与猫咪和线框的对齐时机一致，因此我们可以将其连接在2D位置设置节点之后，并勾选启用

点击屏幕继续游戏

在一轮游戏结束后，拍摄者可能会希望反复尝试，所以我们在这里增加一个点击屏幕继续抓猫的选项

Step 1:

我们先将继续游戏的贴纸设置为默认不可见，将其启用参数添加到可视化创作面板内进行设置（Set操作），在挑战成功或挑战不成功时都出现，因此我们将其连接至挑战成功的节点后，并且将矩形框碰撞检测节点的发生碰撞/未发生碰撞的端口均连接至该触发端口使其可见。

Step 2:

添加点击屏幕触发节点，将 点击屏幕继续 的贴纸再次添加到可视化创作面板进行设置（set操作），与上次不同，这次我们希望在点击屏幕的时候提示文案消失，因此我们不要将启用进行勾选。

当点击屏幕时，使提示文案消失，猫咪继续运动，所以我们将可见性启用的后续触发端口连接至控制猫咪运动的数值渐变节点的开始运行端口，使猫咪重新动起来。

Step 3:

此时我们发现，在抓猫成功的情况下，点击屏幕虽然会继续游戏，但抓猫成功的贴纸并没有被隐藏，下一步我们在点击屏幕继续的文案提示时，将抓猫成功也进行一次隐藏。