《螺丝谜题》空白制作教程
#自由编辑器 #空白制作 #高阶难度 #全局变量
最后更新于
#自由编辑器 #空白制作 #高阶难度 #全局变量
最后更新于
温馨提示：本篇主要为"拔螺丝"玩法可玩素材的空白制作教程。因模板《》就是根据这个教程 由设计独立制作后设为模板的，没有代码，所以等同于空白制作，因此您可以直接使用模板创建"自由制作"项目来作为空白制作的参考，再结合本篇教程，学习效果更佳哦！
💡虽然原项目是4颗螺丝6个孔位，但您可参考此制作逻辑，自行增加/删减螺丝&孔位，来制作不同难度和样式的可玩素材哦！
【制作难度】：⭐⭐⭐⭐⭐
【适用产品】：通用，尤其是拔螺丝玩法
【交互方式】：按下
【自由度】：全自由
【核心资产】：静帧图片
【核心功能】：按下-隐藏/显示素材；全局变量
扫码试玩
我们在开始制作之前需要对本案例的玩法逻辑进行简单的梳理：
进入试玩，展示【初始螺丝布局】和【点击指引动画】
玩家可点击拔起 2/4/5/6 任意一颗螺丝，点击后出现【放置指引动画】
此时玩家可将螺丝放进 1/3 任一孔位，放置后播放相应动画反馈
直到玩家将四颗螺丝都拔起并放置于空的孔位(即两块木板被拆出)，播放【胜利反馈】，然后进入结束页
细节补充：若螺丝放置于不为空的孔位，则无反馈；已放置的螺丝不能被再次拔起
假关卡结束页：玩家全屏任意按下，跳转应用商店
核心思想：场景拆分逻辑清晰，图层结构简单，单个场景里的动画和事件尽可能少
场景拆分：根据上一部分的玩法梳理内容，我们可将本案例拆分为 2 个场景来制作，即核心玩法+结束页
效果预览
场景描述
引导玩家拔起并放置螺丝，拆出木板
假关卡诱导玩家点击下载
核心资产
静帧图片：带孔背景板、木板*2、螺丝帽、螺丝钉、操作指引
音效：点击、正确放置、木板撞击、木板掉落、胜利音效
静帧图片：假关卡
音效：新关卡出现音效
核心动画
木板运动：位移缓动+旋转缓动
假关卡图片：透明度缓动+缩放缓动
核心事件
触发对象：1-6六个孔位(含螺丝)
触发事件：按下&条件判断
响应事件：隐藏/显示素材；赋值
触发对象：场景
触发事件：条件判断
响应事件：播放动画；赋值
触发对象：场景
触发事件：按下
响应事件：跳转应用商店
*核心内容为Step1【场景搭建】 & Step4【事件设置】
建议您在创建项目后，先将所有资产上传进【项目资产】内，方便后续添加使用
1）在【全局设置】下添加背景音乐、背景图片
2）在【全局场景】中添加常驻信息，如产品logo、下载按钮等
1）将核心玩法相关资产添加进场景1
2）调整各资产到合适的位置大小，根据资产类型对资产进行命名、编组、排序（详细内容可进项目内查看）
⚠️注意：此类玩法(交互后物品样式/位置发生改变)的制作逻辑为 "在物品可能出现的位置上都添加该物品，然后隐藏初始状态不会出现的物品，通过事件设置来控制对应物品的显示"，以此来实现目标效果
因有四颗螺丝可能被拔起，所以在 2/4/5/6 孔位需分别添加螺丝钉、螺丝帽。此外因玩家操作顺序的不确定性，六个孔位都可能被放置螺丝，所以要分别在六个孔位下再各添加一个螺丝帽，然后设为隐藏状态（仅显示木板上初始的四个螺丝帽）
3）调整其他图层初始状态：将初始画面不需要显示的图层都设为"隐藏"状态，后续通过事件来控制这些图层的显示/隐藏（详细内容可进项目内查看）
1）将结束页面相关资产添加进场景2
2）调整各资产到合适的位置大小，根据资产类型对资产进行命名、编组、排序（详细内容可进项目内查看）
3）勾选场景2为【结束场景】，以便上报试玩结束
完成所有竖屏的排版后，我们还需对"横屏的排版"以及"横竖屏的屏幕适配方式"进行调整
1）切换至横屏模式，选中所有最高层级的图层
2）使用【复用竖屏位置尺寸配置】功能一键排版
3）然后再适当调整各图层的【位置】和【缩放比例】即可，让画面展示出完整的内容
本案例所有图层都默认居中适配，无需特别调整屏幕适配方式
本案例的核心动画主要是横竖两个木板 旋转和掉落的效果，在正式制作之前，建议先对两个木板所有可能出现的动画进行梳理。
竖木板
垂直掉落
以孔位2为原点，向右轻微旋转
以孔位6为原点，向左旋转
以孔位6为原点，向左旋转后掉落
横木板
以孔位4为原点，向左旋转
旋转后向右掉落
以孔位5为原点，向右旋转
旋转后向左掉落
垂直掉落
接下来，我们依次展开说明
（Tips：制作物品围绕某一原点旋转的效果，需给物品套上组，并将组的位置和大小调整到原点 即螺丝的位置）
选中竖木板组[WoodV]，添加动画-通用-位移缓动。具体参数设置如下：
选中竖木板组[lock1_1]，添加动画-通用-旋转缓动。具体参数设置如下：
继续在竖木板组[lock1_1]上添加动画-通用-位移缓动&旋转缓动。具体参数设置如下：
选中竖木板组[lock1_2]，添加动画-通用-旋转缓动。具体参数设置如下：
选中横木板组[lock2_1]，添加动画-通用-旋转缓动。具体参数设置如下
复制该动画到[lock2_2]，微调结束状态的参数即可
在[lock2_1]上继续添加动画-通用-位移缓动。具体参数设置如下
选中横木板组[WoodH]，添加动画-通用-旋转缓动。具体参数设置如下
依次复制以上两个动画到对应组上，微调 结束状态 和 offset-x 的参数即可
在横木板组[WoodH]上，继续添加动画-通用-位移缓动。具体参数设置如下
完成所有内容的搭建后，我们需要通过设置事件来串联起整个试玩流程
本案例核心的事件集中在"六个孔位(含四个螺丝)"以及"场景1"上：
图层事件：用来串联按下每个螺丝后的反馈及判断木板孔是否已被解锁
场景事件：用来串联横木板与竖木板的动画反馈
接下来，我们按顺序依次讲解。
🌟因为要实现：
a. 判断木板孔的状态：有无螺丝以及螺丝是否被拔起
b. 判断木板孔是否解锁：2/4/5/6 四个孔位的螺丝是否被拔走
c. 判断木板状态：从而播放相应的动画反馈
1.1 我们需要先添加6个全局变量，来分别代表6个木板孔及螺丝钉的状态
点击【全局变量】-【添加变量】
输入变量名称（如screw1）- 选择变量类型为【数值】- 将screw1的初始值设为0 - 保存
按照以上步骤，依次添加screw2/3/4/5/6的全局变量
注：因6个木板孔的初始状态不同（孔1和孔3初始状态为空，其余孔位的状态为螺丝已放入），我们要设置对应的初始值也不同，即screw1/3的初始值为0，screw2/4/5/6的初始值为1
1.2 接下来，我们再添加4个全局变量，来分别代表4个螺丝孔是否已被解锁
依旧点击【全局变量】-【添加变量】
输入变量名称（如lock2）- 选择变量类型为【布尔值】- 将lock2的初始值设为false - 保存
按照以上步骤，依次添加lock4/5/6的全局变量
注：因本案例共有4个螺丝孔需要解锁，所以我们一共设置4个变量。false代表螺丝孔未解锁，true代表螺丝孔已解锁（为空），因此4个变量的初始值都为false
1.3 最后，我们再添加4个全局变量，来分别代表横木板和竖木板的状态
点击【添加变量】，先添加2个类型为【布尔值】的变量，来分别代表横木板和竖木板是否已掉落
将[wooddrop_V]和[wooddrop_H]的初始值都设为true - 保存
再添加2个类型为【文本】的变量，来分别标记横木板和竖木板的掉落方向
将[V_path]和[H_path]的初始值都设为D(Down) - 保存
注：在这类变量中，true代表木板还在画面中，false代表木板已完全掉落；D(Down)代表木板默认掉落方向为垂直向下掉落
以孔位1 为例：
1）选中组图层[screw1]，添加事件 - 按下
2）添加条件判断1：【screw1=0】且【screw2=2】 (对应: 当拔起螺丝2，放进木板孔1时，会触发什么结果)
3）添加响应事件：
【赋值】，赋值screw1=1，screw2=0（也就是当螺丝2被放进木板孔1后，孔1的状态就变为了螺丝已被按下，孔2的状态就变为了木板孔为空）
【赋值】，赋值lock2=true（lock2的初始值为false，在当前操作下，木板孔2将被解锁，因此我们将lock2赋值为true，代表木板孔2已被解锁）
显示螺丝帽1；同时隐藏螺丝钉2
隐藏操作指引；同时播放相关粒子和音效反馈
4）条件判断2/3/4 都同理条件判断1。因此，直接复制并粘贴以上事件，再微调条件判断和screw2/lock2相关的响应对象即可
5）当设置好四个条件判断，[screw1]的全部事件就设置完成了。
因木板孔1与木板孔3的初始状态相同，我们可以直接复制[screw1]的全部事件到[screw3]，然后将[screw1]相关的条件判断和响应事件改为[screw3]即可
同样的，因孔位2/4/5/6的初始状态相同，我们仅需先设置其中一个图层的事件，然后再复制-粘贴到其他图层，微调参数即可
以孔位2为例：
1）选中组图层[screw2]，添加事件 - 按下
2）添加条件判断1：【screw2=1】且【screw4≠2】且【screw5≠2】且【screw6≠2】 (对应: 当螺丝2是被按下的状态，其余螺丝不是被拔起的状态时，按下螺丝2会触发什么结果)
3）添加响应事件：
【赋值】，赋值screw2=2
显示螺丝钉2；同时隐藏螺丝帽2
隐藏操作指引1；显示操作指引2；播放点击音效反馈
4）继续添加条件判断2：【screw2=2】 (对应: 当螺丝2是被拔起的状态时，按下螺丝2会触发什么结果)
5）添加响应事件：
【赋值】，赋值screw2=1
显示螺丝帽2；同时隐藏螺丝钉2
🌟通过以上两个条件判断可以看出：这两种情况分别代表螺丝2被拔起&螺丝2在原位置被按下的反馈。这也是孔位【2/4/5/6】对比孔位【1/3】有区别的地方。接下来的条件判断3-8就同理孔位【1/3】了
6）条件判断3-条件判断5
以条件判断3为例，【screw2=0】且【screw4=2】 (对应: 当拔起螺丝4，放进空的木板孔2时，会触发什么结果)
添加响应事件：
【赋值】，赋值screw2=1，screw4=0
显示螺丝帽2；同时隐藏螺丝钉4
【赋值】，赋值lock4=true
播放相关粒子和音效反馈
【禁用事件】，禁用图层2的按下事件（螺丝换位置后只能被"按下"一次，禁止被再次拔起。后续出现的【禁用事件】同理）
7）条件判断6-条件判断8
以条件判断6为例，【screw2=1】且【screw4=2】 (对应: 当拔起螺丝4，放进不为空的木板孔2时，会触发什么结果)
添加响应事件：
【赋值】，赋值screw2=2，screw4=1
显示螺丝钉2；同时隐藏螺丝帽2
显示螺丝帽4；同时隐藏螺丝钉4
🌟以上，我们就完成了所有孔位的"按下"事件。若后续想制作不同关卡的素材，可套用同一个逻辑：
孔位【1/3】：初始状态“木板孔为空”，所需条件判断共4个，分别为场上所有螺丝2/4/5/6被放进该木板孔的情况（若想制作的关卡有6个螺丝，则需设置6个条件判断）
孔位【2/4/5/6】：初始状态“螺丝被按下”，所需条件判断共8个，其中2个为该螺丝在原位置被拔起/被按下的情况，3个为该螺丝被放进其他为空的木板孔的情况，3个为该螺丝被放进其他不为空的木板孔的情况（若想制作的关卡有6个螺丝，则需设置2+5+5=12个条件判断）
接下来，我们通过场景上的条件判断来完成后续动画效果的实现。
选中场景1 - 添加事件 - 条件判断
4.1 条件判断1-4&13(竖木板相关)
1）编辑条件判断1：【lock2=true】且【lock4=false】且【lock6=false】且【wooddrop_V=true】 (对应: 当孔2已解锁，孔4和孔6未解锁，竖木板还在画面中时，会触发什么结果)
添加响应事件：
播放竖木板向左的【旋转缓动】动画；执行延迟0.2s后暂停播放该动画（这两个响应事件实现的效果为：竖木板逆时针旋转一定角度后被螺丝4卡住）
【赋值】，赋值V_path=R(Right)（代表将竖木板的方向设置成了“向右”）
播放一次木板撞击音效
2）编辑条件判断2：【lock2=true】且【lock4=false】且【lock6=true】且【wooddrop_V=true】且【V_path=R】 (对应: 当孔2已解锁、孔4未解锁、竖木板方向为向右、竖木板还在画面中、解锁孔6，会触发什么结果)
添加响应事件：
播放竖木板向下+向右掉落的【位移缓动】动画+【旋转缓动】动画
【赋值】，赋值wooddrop_V=false （代表竖木板已完全掉落，不在画面内）
播放一次木板掉落音效
3）编辑条件判断3：【lock2=true】且【lock6=true】且【wooddrop_V=true】 (对应: 当孔6已解锁、竖木板还在画面中、解锁孔2，会触发什么结果)
添加响应事件：
播放竖木板向下垂直掉落的【位移缓动】动画
【赋值】，赋值wooddrop_V=false
播放一次木板掉落音效
4）编辑条件判断4：【lock2=true】且【lock4=true】且【lock6=false】且【wooddrop_V=true】 (对应: 当孔4已解锁、孔6未解锁、竖木板还在画面中、解锁孔2，会触发什么结果)
添加响应事件：
【取消执行延迟】，选择取消条件判断1下的定时器0，即取消0.2s后暂停播放旋转动画的事件
继续播完竖木板向左的旋转动画
5）编辑条件判断13：【lock2=false】且【lock6=true】且【wooddrop_V=true】 (对应: 当孔2未解锁、竖木板还在画面中、解锁孔6，会触发什么结果)
添加响应事件：
播放竖木板向右轻微旋转的动画
4.2 条件判断5-11(横木板相关)
1）编辑条件判断5：【lock4=true】且【lock5=false】且【lock6=false】且【wooddrop_H=true】 (对应: 当孔4已解锁，孔5和孔6未解锁，横木板还在画面中时，会触发什么结果)
添加响应事件：
播放横木板向右下的【旋转缓动】动画；执行延迟0.2s后暂停播放该动画 （这两个响应事件实现的效果为：横木板逆时针旋转一定角度后被螺丝6卡住）
【赋值】，赋值H_path=L(Left) （代表将横木板的方向设置成了“向左”）
播放一次木板撞击音效
2）编辑条件判断6：【lock4=true】且【lock5=false】且【lock6=true】且【wooddrop_H=true】 (对应: 当孔6已解锁、孔5未解锁、横木板还在画面中、解锁孔4，会触发什么结果)
添加响应事件：
【取消执行延迟】，选择取消条件判断5下的定时器1，即取消0.2s后暂停播放旋转动画的事件
播放横木板向右下方的【旋转缓动】动画
3）编辑条件判断7：【lock4=true】且【lock5=true】且【lock6=false】且【wooddrop_H=true】且【H_path=L】 (对应: 当孔4已解锁、孔6未解锁、横木板方向为向左、横木板还在画面中、解锁孔5，会触发什么结果)
添加响应事件：
播放横木板向下+向左掉落的【位移缓动】动画+【旋转缓动】动画 （三个响应事件实现的效果为：横木板向左下方运动掉落出画面外）
【赋值】，赋值wooddrop_H=false （代表横木板已完全掉落，不在画面内）
播放一次木板掉落音效
4）编辑条件判断8：【lock4=true】且【lock5=true】且【lock6=true】且【wooddrop_H=true】 (对应: 当孔6已解锁、横木板还在画面中、解锁孔4或孔5会触发什么结果（图示两种情况可共用同一个位移动画，都为垂直向下掉落)
添加响应事件：
播放横木板向下垂直掉落的【位移缓动】动画
【赋值】，赋值wooddrop_H=false
播放一次木板掉落音效
5）编辑条件判断9：【lock4=false】且【lock5=true】且【lock6=false】且【wooddrop_H=true】 (对应: 当孔4和孔6未解锁，横木板还在画面中，解锁孔5，会触发什么结果)
添加响应事件：
播放横木板向左下的【旋转缓动】动画；执行延迟0.2s后暂停播放该动画 （这两个响应事件实现的效果为：横木板顺时针旋转一定角度后被螺丝6卡住）
【赋值】，赋值H_path=R(Right)
播放一次木板撞击音效
6）编辑条件判断10：【lock4=false】且【lock5=false】且【lock6=true】且【wooddrop_H=true】 (对应: 当孔6已解锁、孔4未解锁、横木板还在画面中、解锁孔5，会触发什么结果)
添加响应事件：
【取消执行延迟】，选择取消条件判断9下的定时器2，即取消0.2s后暂停播放旋转动画的事件
继续播放横木板向左下方的【旋转缓动】动画
7）编辑条件判断11：【lock4=true】且【lock5=true】且【lock6=false】且【wooddrop_H=true】且【H_path=R】 (对应: 当孔5已解锁、孔6未解锁、横木板方向为向右、横木板还在画面中、解锁孔4，会触发什么结果)
添加响应事件：
播放横木板向下+向右掉落的【位移缓动】动画+【旋转缓动】动画 （这三个响应事件实现的效果为：横木板向右下方运动掉落出画面外）
【赋值】，赋值wooddrop_H=false
播放一次木板掉落音效
至此，关于横竖两个木板可能出现的所有动画情况，我们就设置完成了。
4.3 条件判断12 (胜利判定)
编辑条件判断12：【lock2=true】且【lock4=true】且【lock5=true】且【lock6=true】 (对应: 四个螺丝所在的孔位都已解锁)
添加响应事件：
播放粒子和胜利音效反馈
执行延迟1s后，播放操作指引相关的淡出动画
执行延迟0.2s后，跳转到下一场景（结束页）
选中场景2，添加事件-按下
依次添加响应事件：设置埋点；跳转应用商店
以上，就是本案例用到的全部事件。完成所有事件设置，我们的素材就制作完成了。
1）建议在制作过程中，每完成一部分操作，就及时预览，检查设置是否正确
2）如有多语言翻译的需要，可在【全局设置】 - 【默认语言】处进行添加/修改
3）全部制作完成后，需对 不同机型/不同语言/横竖屏 进行反复切换预览，确认无误
要想实现以上效果，需要结合功能来实现。下图是对本案例全局变量用途的梳理，用于辅助理解
