《三消装扮》空白制作教程

#自由编辑器 #空白制作 #进阶难度 #全局变量

温馨提示：本篇教程主要讲解如何通过空白制作来做出"三消+装扮"玩法结合的2D可玩素材。因模板《三消装扮》就是根据这个教程由设计独立制作后设为模板的，没有代码，所以等同于空白制作，因此您可以直接使用模板创建"自由制作"项目来作为空白制作的参考，再结合本篇教程，学习效果更佳哦！

💡参照此种形式，您也可以制作其他多种玩法相结合的可玩素材！

一、特征标签

【制作难度】：⭐⭐⭐⭐
【适用产品】：消除 & 消除结合其他玩法的产品
【交互方式】：按下
【自由度】：全自由
【核心资产】：静帧图片、序列帧
【核心功能】：按下-隐藏/显示素材；全局变量

二、效果预览

手机试玩效果最佳

竖屏

横屏

扫码试玩

点击试玩

三、玩法梳理

我们在开始制作之前需要对本案例的玩法逻辑进行简单的梳理：

进入试玩（场景1），展示【美女待机序列帧】和【两个服装选项】
出现【操作指引】，引导玩家选择任一选项
玩家按下任一选项，进入消除环节（场景2）
出现【三消初始画面】和【操作指引】，玩家可按下任一方块，按下后该方块即显示在【消除坑位】
当【消除坑位】出现三个相同图案的方块时，播放【消除成功反馈】
玩家成功完成所有消除，播放【胜利反馈】，然后进入结束页（场景3）
假关卡结束页：玩家全屏任意按下，跳转应用商店

四、制作思路

核心思想：场景拆分逻辑清晰，图层结构简单，单个场景里的动画和事件尽可能少

场景拆分：根据上一部分的玩法梳理内容，我们可将本案例拆分为 3 个场景来制作，即选择环节+核心玩法+假关卡结束页

场景名称

场景1-选择环节

场景2-核心玩法

场景3-假关卡结束页

效果预览

场景描述

二选一选择指引

方块三消：玩家可点击任意方块，满足消除条件即原地消除；消除所有方块后，播放胜利反馈并进入结束页面

假关卡结束页，玩家按下即跳转商店

核心资产

静帧图片：服装选项*2、背景图、操作指引

序列帧：美女待机序列帧

音效：点击音效

静帧图片：服装方块、消除坑位、遮罩

粒子特效：星光粒子

音效：点击音效、消除音效

静帧图片：假关卡

序列帧：美女脱衣序列帧

粒子特效：爱心粒子、烟雾粒子

音效：点击音效、换装音效、美女尖叫音效

核心动画

手指指引：位移缓动+透明度缓动

服装选项：弹性放大入场+位移缓动

指引组：淡出

消除组：淡入

手指指引：位移缓动+淡出

遮罩：淡出

美女待机序列帧：淡出

美女脱衣序列帧：淡入+缩放缓动

假关卡组：淡入

核心事件

触发对象：服装选项

触发事件：按下

响应事件：跳转到下一场景

触发对象：服装方块

触发事件：按下

响应事件：隐藏原方块；显示坑位上的方块；赋值(全局变量)

触发对象：场景2

触发事件：条件判断

响应事件：隐藏坑位上的方块；赋值(全局变量)

触发对象：手势区域

触发事件：按下

响应事件：跳转应用商店

五、制作指南

*核心内容为Step1【场景搭建】 & Step4【事件设置】

Step1 - 场景搭建

建议您在创建项目后，先将所有资产上传进【项目资产】内，方便后续添加使用

1.全局设置

1）在【全局设置】中添加背景音乐

2）在【全局场景】下添加常驻下载按钮、logo等产品信息，并调整位置大小、合理编组

2.场景1：选择环节

1）将相关资产添加进场景1

2）调整各资产到合适的位置大小，根据资产类型对资产进行命名、编组、排序

3.场景2：核心玩法

1）复制场景1 作为场景2，并删除两个不需要的指引手指组

2）将其他核心玩法相关资产添加进场景2

3）调整各资产到合适的位置大小，根据资产类型对资产进行命名、编组、排序（详细内容可进项目内查看）

⚠️注意：此类玩法(指在玩家交互后,物品位置发生改变的玩法)的制作逻辑为 "在物品可能出现的位置上都添加该物品，然后先隐藏初始状态不会出现的物品，再通过事件设置来显示消除坑位上的物品，同时隐藏原位置的物品"，以此来实现目标效果

因此，除了初始界面要展示的方块棋盘外(红色区域)，每个消除坑位上都应添加所有可能出现的结果，也就是 2张不同服装的方块*5个坑位(绿色区域)

4）调整图层初始状态：将消除坑位上的所有方块图片设为"隐藏"状态，后续通过事件来控制这些图层的显示/隐藏

4.场景3：假关卡结束页

1）新建场景3，并添加相关资产

2）同样地，调整各资产到合适的位置大小，根据资产类型对资产进行命名、编组、排序（详细内容可进项目内查看）

3）调整图层初始状态：将假关卡组先设为"隐藏"状态，后续通过定时事件来控制图层的显示，使过渡效果更自然

4）勾选场景3为【结束场景】，以便上报试玩结束

Step2 - 横竖屏适配

完成所有竖屏的排版后，我们还需对"横屏的排版"以及"横竖屏的屏幕适配方式"进行调整

1.调整横屏排版

1）以场景1为例，切换至横屏模式，选中所有最高层级的图层

2）使用【复用竖屏位置尺寸配置】功能一键排版，然后再适当调整各图层的【位置】和【缩放比例】即可，让画面展示出完整的内容

3）场景2、场景3、全局场景同理

2.调整屏幕适配方式

若想让素材完美适配各类机型，还可对部分图层的适配方式进行调整

在本案例中，我们想要竖屏下的产品信息组始终位于各机型屏幕的顶部，所以我们调整其"屏幕适配方式"为居中贴顶适配；横屏模式为贴左上角适配（其他图层默认居中适配，无需调整）

Step3 - 动效设置

本案例用到的动画和粒子特效如下，我们依次展开介绍：

场景1：手指指引动画、服装选项指引动画
场景2：指引组退场动画、消除组入场动画、手指指引动画、星光粒子消除特效
场景3：遮罩退场动画、美女待机序列帧退场动画、美女脱衣序列帧入场动画、假关卡组入场动画、烟雾粒子&爱心粒子换装特效

1.场景1-指引手：位移缓动&透明度缓动

选中指引手1图片[gf_hand]，添加动画-通用-位移缓动
选中指引手1组图层[gf_hand1]，添加动画-通用-透明度缓动

依次复制两个动画给指引手2图片及组图层，并微调透明度动画的曲线
以上动画共同实现手指交替指引的效果(若只需要简单的二选一效果，使用一个手指图片做来回位移动画即可)

2.场景1-服装选项：弹性放大入场+位移缓动

选中服装选项1图片[bubble1]，添加动画-进场动画-弹性放大入场。参数设置如下
继续添加动画-通用-位移缓动，作为选项动态指引动画。参数设置如下
复制两个动画给服装选项2图片[bubble2]即可

3.场景2-指引组：淡出

选中初始指引组[admission]，添加动画-退场动画-淡出，参数设置如下：

4.场景2-消除组：淡入

选中核心消除组[group_match_lv1]，添加动画-进场动画-淡入，参数设置如下：

5.场景2-指引手：位移缓动+淡出

复制场景1指引手的位移动画，给场景2的指引手[gf_hand]，作为指引动画
选中指引手组图层[gf_hand3]，添加动画-退场动画-淡出，并关闭自动播放，在后续通过事件设置控制动画的播放

6.场景2-消除特效：星光粒子

打开公共粒子库，选择并添加合适的粒子特效到[blockchose]组内
在本案例中，因五个消除坑位都可能出现方块，所以需要再复制四个粒子图层，每个坑位对应一个
注意同步调整横屏模式下的粒子位置
调整完毕后，先隐藏这些粒子图层，在后续通过事件设置来播放粒子特效

7.场景3-遮罩：淡出

复制场景2初始指引组的淡出动画，给场景3的遮罩图片[mask]，作为退场动画

8.场景3-美女待机序列帧：淡出

继续复制动画给美女待机序列帧[animation_idle_1]，作为退场动画，并微调参数

9.场景3-美女脱衣序列帧：淡入+缩放缓动

选中美女脱衣序列帧[animation_idle_2]，添加动画-进场动画-淡入，参数设置如下
选做：继续添加动画-通用-缩放缓动，作为入场强调动画，参数设置如下

10.场景3-假关卡组：淡入

复制淡入动画给假关卡组[group_match_lv2]，并微调参数

11.场景3-换装特效：烟雾粒子&爱心粒子

在公共粒子库选择并添加合适的粒子特效到[group_dressup]组内，并调整位置
注意同步调整横屏模式下的粒子位置

Step4 - 事件设置

完成所有内容的搭建后，我们需要通过设置事件来串联起整个流程

⚠️注意：本案例核心的事件设置集中在"所有可被点击的方块图片"以及"场景2"上，这部分事件需结合【全局变量】功能来实现。因图层较多制作会相对繁琐一些，可优先设置好一个图层的事件，再通过事件的复制&粘贴功能快速完成制作！

接下来，我们按顺序依次讲解

1.场景1：服装选项

选中服装选项1图层[bubble1]，添加事件-按下
添加响应事件：
- 设置埋点2，并填入埋点名称如"玩家按下选项1"
- 从头播放初始指引组的淡出动画
- 从头播放一次点击音效
- 跳转到下一场景
复制该事件给服装选项2图层[bubble2]即可（同时修改埋点参数）

🌟2.添加全局变量

因为要实现：

a. 放置坑位显示：判断玩家所有操作的可能性，来显示对应的结果

b. 交互开关：消除中禁止点击方块，同时清空消除坑位

c. 计算成功消除次数：玩家需消除所有方块（四组）后，进入结束页面

要想实现以上效果，就需要使用【全局变量】。以下是对本案例全局变量用途的梳理，我们将以其中一个方块为例，展开介绍

1）首先，点击上方【全局变量】图标，添加变量

2）填写变量名称，如blockchose1，并设置变量类型与初始值，保存

3）按照同样的操作方法，依次添加其他类型的变量

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为空时

4.快速复制事件给其他所有方块

在本案例中，每个方块的事件设置都是相同的逻辑，所以按照以上步骤完成一个方块的事件设置后：

1）我们点击"复制"按钮复制整个"按下"事件

2）按住Ctrl键，全选其他所有方块图层

3）点击上方"粘贴"按钮，选择【仅粘贴图层事件】。这样，所有方块都有了相同一套逻辑的事件与条件判断

4）然后逐一将每个方块的响应事件 对应的响应对象 进行微调即可（详细内容可进项目内查看）

以上，我们就完成了所有方块的"按下"事件。接下来，我们通过场景上的条件判断来完成后续效果的实现。

5.在"场景2"添加条件判断与响应事件

选中场景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（详细内容可进项目内查看）