《三消装扮》空白制作教程
#自由编辑器 #空白制作 #进阶难度 #全局变量
最后更新于
#自由编辑器 #空白制作 #进阶难度 #全局变量
最后更新于
温馨提示：本篇教程主要讲解如何通过空白制作来做出"三消+装扮"玩法结合的2D可玩素材。因模板《》就是根据这个教程 由设计独立制作后设为模板的，没有代码，所以等同于空白制作，因此您可以直接使用模板创建"自由制作"项目来作为空白制作的参考，再结合本篇教程，学习效果更佳哦！
💡参照此种形式，您也可以制作其他多种玩法相结合的可玩素材！
【制作难度】：⭐⭐⭐⭐
【适用产品】：消除 & 消除结合其他玩法 的产品
【交互方式】：按下
【自由度】：全自由
【核心资产】：静帧图片、序列帧
【核心功能】：按下-隐藏/显示素材；全局变量
扫码试玩
我们在开始制作之前需要对本案例的玩法逻辑进行简单的梳理：
进入试玩（场景1），展示【美女待机序列帧】和【两个服装选项】
出现【操作指引】，引导玩家选择任一选项
玩家按下任一选项，进入消除环节（场景2）
出现【三消初始画面】和【操作指引】，玩家可按下任一方块，按下后该方块即显示在【消除坑位】
当【消除坑位】出现三个相同图案的方块时，播放【消除成功反馈】
玩家成功完成所有消除，播放【胜利反馈】，然后进入结束页（场景3）
假关卡结束页：玩家全屏任意按下，跳转应用商店
核心思想：场景拆分逻辑清晰，图层结构简单，单个场景里的动画和事件尽可能少
场景拆分：根据上一部分的玩法梳理内容，我们可将本案例拆分为 3 个场景来制作，即选择环节+核心玩法+假关卡结束页
效果预览
场景描述
二选一选择指引
方块三消：玩家可点击任意方块，满足消除条件即原地消除；消除所有方块后，播放胜利反馈并进入结束页面
假关卡结束页，玩家按下即跳转商店
核心资产
静帧图片：服装选项*2、背景图、操作指引
序列帧：美女待机序列帧
音效：点击音效
静帧图片：服装方块、消除坑位、遮罩
粒子特效：星光粒子
音效：点击音效、消除音效
静帧图片：假关卡
序列帧：美女脱衣序列帧
粒子特效：爱心粒子、烟雾粒子
音效：点击音效、换装音效、美女尖叫音效
核心动画
手指指引：位移缓动+透明度缓动
服装选项：弹性放大入场+位移缓动
指引组：淡出
消除组：淡入
手指指引：位移缓动+淡出
遮罩：淡出
美女待机序列帧：淡出
美女脱衣序列帧：淡入+缩放缓动
假关卡组：淡入
核心事件
触发对象：服装选项
触发事件：按下
响应事件：跳转到下一场景
触发对象：服装方块
触发事件：按下
响应事件：隐藏原方块；显示坑位上的方块；赋值(全局变量)
触发对象：场景2
触发事件：条件判断
响应事件：隐藏坑位上的方块；赋值(全局变量)
触发对象：手势区域
触发事件：按下
响应事件：跳转应用商店
*核心内容为Step1【场景搭建】 & Step4【事件设置】
建议您在创建项目后，先将所有资产上传进【项目资产】内，方便后续添加使用
1）在【全局设置】中添加背景音乐
2）在【全局场景】下添加常驻下载按钮、logo等产品信息，并调整位置大小、合理编组
1）将相关资产添加进场景1
2）调整各资产到合适的位置大小，根据资产类型对资产进行命名、编组、排序
1）复制场景1 作为场景2，并删除两个不需要的指引手指组
2）将其他核心玩法相关资产添加进场景2
3）调整各资产到合适的位置大小，根据资产类型对资产进行命名、编组、排序（详细内容可进项目内查看）
⚠️注意：此类玩法(指在玩家交互后,物品位置发生改变的玩法)的制作逻辑为 "在物品可能出现的位置上都添加该物品，然后先隐藏初始状态不会出现的物品，再通过事件设置来显示消除坑位上的物品，同时隐藏原位置的物品"，以此来实现目标效果
因此，除了初始界面要展示的方块棋盘外(红色区域)，每个消除坑位上都应添加所有可能出现的结果，也就是 2张不同服装的方块*5个坑位(绿色区域)
4）调整图层初始状态：将消除坑位上的所有方块图片设为"隐藏"状态，后续通过事件来控制这些图层的显示/隐藏
1）新建场景3，并添加相关资产
2）同样地，调整各资产到合适的位置大小，根据资产类型对资产进行命名、编组、排序（详细内容可进项目内查看）
3）调整图层初始状态：将假关卡组先设为"隐藏"状态，后续通过定时事件来控制图层的显示，使过渡效果更自然
4）勾选场景3为【结束场景】，以便上报试玩结束
完成所有竖屏的排版后，我们还需对"横屏的排版"以及"横竖屏的屏幕适配方式"进行调整
1）以场景1为例，切换至横屏模式，选中所有最高层级的图层
2）使用【复用竖屏位置尺寸配置】功能一键排版，然后再适当调整各图层的【位置】和【缩放比例】即可，让画面展示出完整的内容
3）场景2、场景3、全局场景同理
若想让素材完美适配各类机型，还可对部分图层的适配方式进行调整
在本案例中，我们想要竖屏下的产品信息组始终位于各机型屏幕的顶部，所以我们调整其"屏幕适配方式"为居中贴顶适配；横屏模式为贴左上角适配（其他图层默认居中适配，无需调整）
本案例用到的动画和粒子特效如下，我们依次展开介绍：
场景1：手指指引动画、服装选项指引动画
场景2：指引组退场动画、消除组入场动画、手指指引动画、星光粒子消除特效
场景3：遮罩退场动画、美女待机序列帧退场动画、美女脱衣序列帧入场动画、假关卡组入场动画、烟雾粒子&爱心粒子换装特效
选中指引手1图片[gf_hand]，添加动画-通用-位移缓动
选中指引手1组图层[gf_hand1]，添加动画-通用-透明度缓动
依次复制两个动画给指引手2图片及组图层，并微调透明度动画的曲线
以上动画共同实现手指交替指引的效果(若只需要简单的二选一效果，使用一个手指图片做来回位移动画即可)
选中服装选项1图片[bubble1]，添加动画-进场动画-弹性放大入场。参数设置如下
继续添加动画-通用-位移缓动，作为选项动态指引动画。参数设置如下
复制两个动画给服装选项2图片[bubble2]即可
选中初始指引组[admission]，添加动画-退场动画-淡出，参数设置如下：
选中核心消除组[group_match_lv1]，添加动画-进场动画-淡入，参数设置如下：
复制场景1指引手的位移动画，给场景2的指引手[gf_hand]，作为指引动画
选中指引手组图层[gf_hand3]，添加动画-退场动画-淡出，并关闭自动播放，在后续通过事件设置控制动画的播放
打开公共粒子库，选择并添加合适的粒子特效到[blockchose]组内
在本案例中，因五个消除坑位都可能出现方块，所以需要再复制四个粒子图层，每个坑位对应一个
注意同步调整横屏模式下的粒子位置
调整完毕后，先隐藏这些粒子图层，在后续通过事件设置来播放粒子特效
复制场景2初始指引组的淡出动画，给场景3的遮罩图片[mask]，作为退场动画
继续复制动画给美女待机序列帧[animation_idle_1]，作为退场动画，并微调参数
选中美女脱衣序列帧[animation_idle_2]，添加动画-进场动画-淡入，参数设置如下
选做：继续添加动画-通用-缩放缓动，作为入场强调动画，参数设置如下
复制淡入动画给假关卡组[group_match_lv2]，并微调参数
在公共粒子库选择并添加合适的粒子特效到[group_dressup]组内，并调整位置
注意同步调整横屏模式下的粒子位置
完成所有内容的搭建后，我们需要通过设置事件来串联起整个流程
接下来，我们按顺序依次讲解
选中服装选项1图层[bubble1]，添加事件-按下
添加响应事件：
设置埋点2，并填入埋点名称如"玩家按下选项1"
从头播放初始指引组的淡出动画
从头播放一次点击音效
跳转到下一场景
复制该事件给服装选项2图层[bubble2]即可（同时修改埋点参数）
因为要实现：
a. 放置坑位显示：判断玩家所有操作的可能性，来显示对应的结果
b. 交互开关：消除中禁止点击方块，同时清空消除坑位
c. 计算成功消除次数：玩家需消除所有方块（四组）后，进入结束页面
1）首先，点击上方【全局变量】图标，添加变量
2）填写变量名称，如blockchose1，并设置变量类型与初始值，保存
3）按照同样的操作方法，依次添加其他类型的变量
以其中一个方块为例，选中图层[block2_1]，添加事件-按下
因消除坑位共有5个，我们需要给每个方块设置5个条件判断 来决定方块该出现在哪个坑位
1）添加条件判断1：blockchose1=0 且 eliminate=false (对应: 当方块可点击且坑位1为空时)
添加响应事件：
赋值，赋值blockchose1=2(对应: 坑位1已放置方块2)
隐藏原位置方块2；显示坑位1上的方块2
从头播放1次按下音效
2）继续添加条件判断2：blockchose1≠0 且 blockchose2=0 且 eliminate=false (对应: 当方块可点击，且坑位1已有方块，坑位2为空时)
同理，添加响应事件：
赋值，赋值blockchose2=2 (对应: 坑位2已放置方块2)
隐藏原位置方块2；显示坑位2上的方块2
从头播放1次按下音效
3）同理，依次完成条件判断3、条件判断4、条件判断5的设置及其响应事件
条件判断3对应：当方块可点击，且坑位1&坑位2都已有方块，坑位3为空时
条件判断4对应: 当方块可点击，且坑位1&坑位2&坑位3都已有方块，坑位4为空时
条件判断5对应: 当方块可点击，且坑位1&坑位2&坑位3&坑位4都已有方块，坑位5为空时
在本案例中，每个方块的事件设置都是相同的逻辑，所以按照以上步骤完成一个方块的事件设置后：
1）我们点击"复制"按钮复制整个"按下"事件
2）按住Ctrl键，全选其他所有方块图层
3）点击上方"粘贴"按钮，选择【仅粘贴图层事件】。这样，所有方块都有了相同一套逻辑的事件与条件判断
4）然后逐一将每个方块的响应事件 对应的响应对象 进行微调即可（详细内容可进项目内查看）
以上，我们就完成了所有方块的"按下"事件。接下来，我们通过场景上的条件判断来完成后续效果的实现。
选中场景2 - 添加事件 - 条件判断
1）条件判断1-5：消除中禁止点击方块，同时清空消除坑位
编辑条件判断1为：blockchose1=0 且 eliminate=true (对应: 当方块不可点击且坑位1为空时，即消除中)
添加响应事件：隐藏坑位1上 可能出现的两种方块
条件判断2/3/4/5同理：
条件判断2：当方块不可点击，且坑位2为空时
条件判断3：当方块不可点击，且坑位3为空时
条件判断4：当方块不可点击，且坑位4为空时
条件判断5：当方块不可点击，且坑位5为空时
2）条件判断6-15：消除结果与对应反馈
编辑条件判断6：blockchose1≠0 且 blockchose1=blockchose2 且 blockchose1=blockchose3 (对应: 坑位1已有方块X，且坑位2&坑位3的方块图案与坑位1相同时)
添加响应事件：
赋值，赋值elimination_time+1 (对应: 已完成一组消除)
赋值，赋值blockchose1/blockchose2/blockchose3=0、eliminate=true (对应: 方块不可点击，同时清空前三个坑位)
显示并播放前三个坑位的消除粒子特效、从头播放1次消除音效
执行延迟0.5s后，赋值，eliminate=false (对应: 方块变为可点击状态）因消除清空的逻辑和点击放置的逻辑同时判断可能会出错，所以需要做个时间差(即延迟0.5s)在禁用点击的同时控制已消除的元素清空
按照同样的逻辑，需要为所有消除的可能性设置条件判断。可能性共包含10种，依次为： "1-2-3"、 "1-2-4"、"1-2-5"、"1-3-4"、"1-3-5"、"1-4-5"、"2-3-4"、"2-3-5"、"2-4-5"、"3-4-5"
理清所有可能性后，依次设置条件判断7-条件判断15（详细内容可进项目内查看）
3）条件判断16：第一次有效操作
编辑条件判断16为：blockchose1≠0 (对应: 坑位1已有方块，即玩家第一次有效操作)
添加响应事件：
设置埋点4，编辑埋点名称为"玩家按下第一个方块"
从头播放指引手组的淡出动画
4）条件判断17-18：消除次数及对应反馈
编辑条件判断17为：elimination_time=1 (对应: 完成一组消除)
添加响应事件：设置埋点5，编辑埋点名称为"成功消除一组方块"
编辑条件判断18为：elimination_time=4 (对应: 完成四组消除)
添加响应事件：
设置埋点6，编辑埋点名称为"成功消除所有方块"
执行延迟0.5s后，跳转到下一场景（即结束页面）
在场景3上添加事件 - 定时触发
添加响应事件：
执行延迟0.4s后，播放1次美女尖叫音效
执行延迟1.6s后，显示假关卡组、显示指引手、播放指引动画
在覆盖全屏的手势区域上添加事件 - 按下
添加响应事件：
设置埋点7，编辑埋点名称为"结束页触发跳转"
从头播放1次点击音效
跳转应用商店
因手势区域放置于假关卡组内，当上一部分定时触发事件播完后，才会显示当前手势区域，"按下"事件才可被触发
进入全局场景，给常驻跳转按钮组添加事件 - 按下
添加响应事件：跳转应用商店
以上，就是本案例用到的全部事件。完成所有事件设置，我们的素材就制作完成了。
1）建议在制作过程中，每完成一部分操作，就及时预览，检查设置是否正确
2）全部制作完成后，可对不同机型/不同语言/横竖屏进行整体预览，确认无误
在教程最后，我们为您提供了本案例所使用到的全部资源，点击压缩包即可下载。您可尝试用此资源跟着教程制作，以便尽快上手使用自由编辑器制作此类素材
⚠️注意：本案例核心的事件设置集中在"所有可被点击的方块图片"以及"场景2"上，这部分事件需结合【】功能来实现。因图层较多制作会相对繁琐一些，可优先设置好一个图层的事件，再通过事件的复制&粘贴功能快速完成制作！
要想实现以上效果，就需要使用。以下是对本案例全局变量用途的梳理，我们将以其中一个方块为例，展开介绍
