# 《螺丝谜题》空白制作教程 温馨提示：本篇主要为"拔螺丝"玩法可玩素材的**空白制作**教程。因模板《[螺丝谜题](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. 判断木板状态：从而播放相应的动画反馈 **要想实现以上效果，需要结合**[**【全局变量】**](/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.md)**功能来实现。下图是对本案例全局变量用途的梳理，用于辅助理解**
#### 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）全部制作完成后，需对 不同机型/不同语言/横竖屏 进行反复切换预览，确认无误
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://doc.playturbo.cn/playturbo-an-li-jiao-xue-ji-di/ke-wan-zi-you-bian-ji-qi-an-li/qi-ta-yi-zhi-wan-fa-an-li/luo-si-mi-ti-kong-bai-zhi-zuo-jiao-cheng.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.