抓猫挑战
一、道具效果
当眨眼时,会触发猫咪停止运动,且猫刚好停指定的框内时,会视为抓到猫,显示挑战成功。
二、模板制作步骤
制作思路
在搭建道具交互的思路就如同给拍摄者讲一个故事,整个故事线可以抽象为在什么样的情况下,发生了什么样的事,带来了怎样的影响。
就抓猫挑战来看,整体的拍摄思路即为“在拍摄者眨眼时,猫咪刚好停到了准确的位置,并且成功抓到了猫,点击屏幕继续抓猫”,同时存在的分支为“在拍摄者眨眼时,猫咪没有停到准确的位置,抓猫失败,点击屏幕继续抓猫”,流程如下:
能力模块拆解
根据道具的效果,我们可以将整体的搭建思路进行拆分为以下几个能力模块
- 猫咪的运动控制
猫咪会在屏幕从左到右运动或停止
- 面部动作的识别
可以实时识别拍摄者发生眨眼的面部动作使猫咪运动停止
- 位置的判定
当猫咪停止时,判定其所处的位置与指定位置是否一致
- 元素的显示和隐藏
挑战成功时出现“挑战成功”的结果贴图
- 点击屏幕继续游戏
点击屏幕可以继续进行抓猫
- 元素跟脸进行运动
猫耳朵实时跟随头部运动
工程搭建
- 素材的准备与放置
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: 此时我们发现,在抓猫成功的情况下,点击屏幕虽然会继续游戏,但抓猫成功的贴纸并没有被隐藏,下一步我们在点击屏幕继续的文案提示时,将抓猫成功也进行一次隐藏。 |