# 《螺丝谜题》空白制作教程 温馨提示：本篇主要为"拔螺丝"玩法可玩素材的**空白制作**教程。因模板《[螺丝谜题](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001522%252F13429%252Fpv%252F24%252F12%252F02%252F674da23bf3baf%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E8%9E%BA%E4%B8%9D%E8%B0%9C%E9%A2%98\&language=undefined)》就是根据这个教程 由设计独立制作后设为模板的，没有代码，所以等同于空白制作，因此您可以直接使用模板创建"自由制作"项目来作为空白制作的参考，再结合本篇教程，学习效果更佳哦！ *💡虽然原项目是4颗螺丝6个孔位，但您可参考此制作逻辑，自行增加/删减螺丝&孔位，来制作不同难度和样式的可玩素材哦！* ## 一、特征标签 * 【制作难度】：⭐⭐⭐⭐⭐ * 【适用产品】：通用，尤其是拔螺丝玩法 * 【交互方式】：按下 * 【自由度】：全自由 * 【核心资产】：静帧图片 * 【核心功能】：按下-隐藏/显示素材；全局变量 ## 二、效果预览
手机试玩效果最佳竖屏横屏
扫码试玩点击试玩点击试玩
## 三、玩法梳理 **我们在开始制作之前需要对本案例的玩法逻辑进行简单的梳理：** 1. 进入试玩，展示【初始螺丝布局】和【点击指引动画】 2. 玩家可点击拔起 2/4/5/6 任意一颗螺丝，点击后出现【放置指引动画】 3. 此时玩家可将螺丝放进 1/3 任一孔位，放置后播放相应动画反馈 4. 直到玩家将四颗螺丝都拔起并放置于空的孔位(即两块木板被拆出)，播放【胜利反馈】，然后进入结束页 5. 细节补充：若螺丝放置于不为空的孔位，则无反馈；已放置的螺丝不能被再次拔起 6. 假关卡结束页：玩家全屏任意按下，跳转应用商店
## 四、制作思路 **核心思想：**场景拆分逻辑清晰，图层结构简单，单个场景里的动画和事件尽可能少 **场景拆分：**根据上一部分的玩法梳理内容，我们可将本案例拆分为 2 个场景来制作，即核心玩法+结束页
场景名称场景1 - 核心玩法场景2-结束页
效果预览
场景描述引导玩家拔起并放置螺丝，拆出木板假关卡诱导玩家点击下载
核心资产

静帧图片：带孔背景板、木板*2、螺丝帽、螺丝钉、操作指引

音效：点击、正确放置、木板撞击、木板掉落、胜利音效

静帧图片：假关卡

音效：新关卡出现音效

核心动画木板运动：位移缓动+旋转缓动假关卡图片：透明度缓动+缩放缓动
核心事件

触发对象：1-6六个孔位(含螺丝)

触发事件：按下&条件判断

响应事件：隐藏/显示素材；赋值

触发对象：场景

触发事件：条件判断

响应事件：播放动画；赋值

触发对象：场景

触发事件：按下

响应事件：跳转应用商店

## 五、制作指南 **\*核心内容为Step1【场景搭建】 & Step4【事件设置】** ### Step1 - 场景搭建 建议您在创建项目后，先将所有资产上传进【项目资产】内，方便后续添加使用 #### **1.全局设置** 1）在【全局设置】下添加背景音乐、背景图片 2）在【全局场景】中添加常驻信息，如产品logo、下载按钮等
#### **2.场景1** 1）将核心玩法相关资产添加进场景1 2）调整各资产到合适的位置大小，根据资产类型对资产进行命名、编组、排序（详细内容可进项目内查看） ⚠️**注意：此类玩法(交互后物品样式/位置发生改变)的制作逻辑为 "在物品可能出现的位置上都添加该物品，然后隐藏初始状态不会出现的物品，通过事件设置来控制对应物品的显示"，以此来实现目标效果** 因有四颗螺丝可能被拔起，所以在 2/4/5/6 孔位需分别添加螺丝钉、螺丝帽。此外因玩家操作顺序的不确定性，六个孔位都可能被放置螺丝，所以要分别在六个孔位下再各添加一个螺丝帽，然后设为隐藏状态（仅显示木板上初始的四个螺丝帽）
3）调整其他图层初始状态：将初始画面不需要显示的图层都设为"隐藏"状态，后续通过事件来控制这些图层的显示/隐藏（详细内容可进项目内查看）
#### **3.场景2** 1）将结束页面相关资产添加进场景2 2）调整各资产到合适的位置大小，根据资产类型对资产进行命名、编组、排序（详细内容可进项目内查看） 3）勾选场景2为【结束场景】，以便上报试玩结束
#### ### Step2 - 横竖屏适配 完成所有竖屏的排版后，我们还需对"横屏的排版"以及"横竖屏的屏幕适配方式"进行调整 #### 1.调整横屏排版 1）切换至横屏模式，选中**所有最高层级**的图层 2）使用【**复用竖屏位置尺寸配置**】功能一键排版 3）然后再适当调整各图层的【位置】和【缩放比例】即可，让画面展示出完整的内容
#### 2.调整屏幕适配方式 本案例所有图层都默认居中适配，无需特别调整屏幕适配方式 #### ### Step3 - 动画设置 本案例的核心动画主要是横竖两个木板 旋转和掉落的效果，在正式制作之前，建议先对两个木板所有可能出现的动画进行梳理。
竖木板
  1. 垂直掉落
  2. 以孔位2为原点，向右轻微旋转
  3. 以孔位6为原点，向左旋转
  4. 以孔位6为原点，向左旋转后掉落
横木板
  1. 以孔位4为原点，向左旋转
  2. 旋转后向右掉落
  3. 以孔位5为原点，向右旋转
  4. 旋转后向左掉落
  5. 垂直掉落
接下来，我们依次展开说明 *（Tips：制作物品围绕某一原点旋转的效果，需给物品套上组，并将组的位置和大小调整到原点 即螺丝的位置）* #### 1-1.竖木板垂直掉落 * 选中竖木板组\[WoodV]，添加动画-通用-位移缓动。具体参数设置如下：
#### 1-2.竖木板向右轻微旋转 * 选中竖木板组\[lock1\_1]，添加动画-通用-旋转缓动。具体参数设置如下：
#### 1-3.竖木板旋转后掉落 * 继续在竖木板组\[lock1\_1]上添加动画-通用-位移缓动&旋转缓动。具体参数设置如下：
#### 1-4.竖木板向左旋转 * 选中竖木板组\[lock1\_2]，添加动画-通用-旋转缓动。具体参数设置如下：
#### 2-1.横木板向左/向右旋转 * 选中横木板组\[lock2\_1]，添加动画-通用-旋转缓动。具体参数设置如下 * 复制该动画到\[lock2\_2]，微调结束状态的参数即可
#### 2-2. 横木板旋转后向右掉落 * 在\[lock2\_1]上继续添加动画-通用-位移缓动。具体参数设置如下 * 选中横木板组\[WoodH]，添加动画-通用-旋转缓动。具体参数设置如下
#### 2-3. 横木板旋转后向左掉落 * 依次复制以上两个动画到对应组上，微调 结束状态 和 offset-x 的参数即可
#### 2-4.横木板垂直掉落 * 在横木板组\[WoodH]上，继续添加动画-通用-位移缓动。具体参数设置如下
### Step4 - 事件设置 完成所有内容的搭建后，我们需要通过设置事件来串联起整个试玩流程 **本案例核心的事件集中在"六个孔位(含四个螺丝)"以及"场景1"上：** * 图层事件：用来串联按下每个螺丝后的反馈及判断木板孔是否已被解锁 * 场景事件：用来串联横木板与竖木板的动画反馈 接下来，我们按顺序依次讲解。 🌟因为要实现： a. 判断木板孔的状态：有无螺丝以及螺丝是否被拔起 b. 判断木板孔是否解锁：2/4/5/6 四个孔位的螺丝是否被拔走 c. 判断木板状态：从而播放相应的动画反馈 **要想实现以上效果，需要结合**[**【全局变量】**](https://doc.playturbo.cn/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/bian-ji-ye-mian-fen-qu-jie-shao/ding-bu-zi-chan-ku/quan-ju-bian-liang)**功能来实现。下图是对本案例全局变量用途的梳理，用于辅助理解**
#### 1**.添加全局变量** 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)代表木板默认掉落方向为垂直向下掉落*
#### 2.为孔位1&孔位3 添加事件与条件判断 以孔位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]即可
#### 3.为孔位2&孔位4&孔位5&孔位6 添加事件与条件判断 同样的，因孔位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个条件判断） 接下来，我们通过场景上的条件判断来完成后续动画效果的实现。 #### 4.在"场景1"添加条件判断与响应事件 选中场景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后，跳转到下一场景（结束页）
#### 5.结束场景跳转事件 * 选中场景2，添加事件-按下 * 依次添加响应事件：设置埋点；跳转应用商店
以上，就是本案例用到的全部事件。完成所有事件设置，我们的素材就制作完成了。 #### ### Step5 - 整体预览 1）建议在制作过程中，每完成一部分操作，就及时预览，检查设置是否正确 2）如有多语言翻译的需要，可在【全局设置】 - 【默认语言】处进行添加/修改 3）全部制作完成后，需对 不同机型/不同语言/横竖屏 进行反复切换预览，确认无误