《组合搭配》空白制作教程

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

💡虽然原项目是6个装扮选项，但可参考此制作逻辑，自行增加/删减选项，来制作不同的可玩素材哦！

一、特征标签

• 【制作难度】：⭐⭐

• 【适用产品】：装扮玩法

• 【交互方式】：按下

• 【自由度】：全自由

• 【核心资产】：静帧图片

• 【核心功能】：按下-隐藏/显示素材

二、效果预览

三、玩法梳理

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

1. 进入试玩（场景1），展示【待机的角色】和【六个装扮选项】

2. 出现【操作指引】，引导玩家点击任一选项来装扮角色

3. 玩家可自由切换任一选项，按下后角色即播放对应的【装扮反馈】

4. 直到玩家点击按钮【好】后，跳转应用商店，同时进入结束页（场景2）

5. 结束页玩家全屏任意按下，跳转应用商店

四、制作思路

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

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

五、制作指南

*核心内容为Step4【事件设置】

Step1 - 场景搭建

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

1.全局设置

在【全局设置】中添加背景音乐、背景图片

2.场景1：核心玩法

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

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

⚠️注意：此类玩法的制作逻辑为 "①在同一装扮坑位上，添加所有可能出现的物品；②隐藏除初始展示以外的物品；③通过事件设置来显示选择后的物品，同时隐藏其他不需要展示的物品"，以此来实现目标效果

因此，角色的发型和服装坑位各需要添加4张图片，即初始装扮*1+可能被选择的装扮*3

受图层层级影响，为了让发型与角色脸部更好地融合，每种样式的发型需由前、后两张图片共同组成

3）调整图层初始状态：将可能被选择的所有装扮图片设为"隐藏"状态，后续通过事件来控制这些图层的显示/隐藏

3.场景2：结束页

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

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

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

👉相关阅读：⭐上报试玩结束

Step2 - 横竖屏适配

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

1.调整横屏排版

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

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

3）场景2同理

2.调整屏幕适配方式

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

在本案例中，我们想要：①竖屏下的产品信息组始终位于各机型屏幕的顶部，所以我们调整其"屏幕适配方式"为居中贴顶适配；②横屏下的产品信息组贴左上角适配；③横屏/竖屏下的'确认按钮'都始终位于各机型屏幕的底部

（其他图层默认居中适配，无需调整）

👉相关阅读：屏幕适配方式

Step3 - 动效设置

本案例用到的动画和粒子特效如下，我们依次展开介绍：手指指引动画、装扮选项指引动画、角色呼吸感动画、跳转按钮指引动画、装扮星光粒子特效

1.指引手：位移缓动+缩放缓动

• 选中指引手组图层[group_hand]，添加动画-通用-位移缓动，参数设置如下

• 继续添加动画-通用-缩放缓动，参数设置如下

• 两个动画一起播放共同实现二选一指引的效果

• 注意调整横屏模式下的位移距离

2.指引选项：透明度缓动

• 选中服装选项1图片[options_1]，添加动画-通用-透明度缓动，参数设置如下

• 复制该动画给发型选项1图片[options]，微调曲线样式即可，参数设置如下

• 两个动画一起播放，搭配手指指引动画共同实现指引效果

3.角色呼吸感：缩放缓动

• 选中角色组图层[girl]，将其锚点调整为（50,100）

• 添加动画-通用-缩放缓动，作为模拟角色呼吸感的动画，参数设置如下

4.跳转按钮：缩放缓动

• 复制上一个缩放动画给场景2的跳转按钮组图层[group_btn]

• 微调参数，作为按钮的指引动画，参数设置如下

5.粒子特效：装扮反馈星光粒子

• 打开公共粒子库，选择并添加合适的粒子特效作为装扮反馈

• 调整粒子位置到合适后，先隐藏该粒子图层，不让其自动播放，在后续通过事件设置来播放粒子

• 注意同步调整横屏模式下的粒子位置

Step4 - 事件设置

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

本案例的事件设置比较简单，集中在所有可被点击的图层上（包含六个装扮选项、一个确认按钮、一个常驻下载按钮、结束场景跳转）。接下来，我们按顺序依次讲解

1.装扮选项

以服装选项1[clothing1_icon]为例，选中图层

• 添加事件-按下

• 添加响应事件：

  • 显示并播放装扮反馈（星光粒子特效）

  • 隐藏初始服装、显示装扮后服装1、同时隐藏装扮后服装2&装扮后服装3

  • 显示高亮服装选项1、同时隐藏高亮服装选项2&高亮服装选项3

  • 隐藏常规服装选项1 、同时显示常规服装选项2&常规服装选项3 (因常规选项图片的图层位于高亮图片上方，所以当隐藏常规图片后，高亮图片才会展示出来；同理，当显示常规图片后，高亮图片将被遮挡不会展示)

  • 隐藏角色初始表情、显示角色开心表情

  • 从头播放1次点击音效与装扮反馈音效

  • 隐藏指引手组、暂停播放两个指引选项的透明度动画

💡因每个装扮选项的事件设置都是相同的逻辑，我们可以通过事件的"复制&粘贴"功能快速完成制作

• 复制该"按下"事件 到服装选项2组图层[clothing2_icon] 和服装选项3组图层[clothing3_icon]

• 根据玩法逻辑，微调 选项1与选项2、选项1与选项3 之间的显示/隐藏状态即可

• 同理，复制该"按下"事件 到发型选项1组图层[hair1_icon]

• 微调并新增响应事件（黄色部分）：因发型由前后两部分组成，所以控制图层显示/隐藏的响应事件 需要多加一组

• 发型选项1的事件设置完成后，复制该"按下"事件 到发型选项2组图层[clothing2_icon] 和发型选项3组图层[clothing3_icon]

• 同理，微调 选项1与选项2、选项1与选项3 之间的显示/隐藏状态即可

💡按照以上制作逻辑，您可以自行增加/删减选项，来制作不同的可玩素材

2.确认按钮

• 选中确认按钮组图层[group_btn_ok]，添加事件-按下

• 添加响应事件：

  • 跳转应用商店

  • 跳转到下一场景

  • 设置自定义埋点1，并填入埋点名称如"点击确认按钮"

3.常驻下载按钮

为常驻下载按钮添加"按下-跳转应用商店"的跳转事件

4.场景2全局跳转

• 复制"按下"事件 到场景2

• 新增一个自定义埋点事件即可

以上，就是本案例用到的全部事件。完成所有事件设置，我们的素材就制作完成了。

Step5 - 整体预览

1）建议在制作过程中，每完成一部分操作，就及时预览，检查设置是否正确

2）全部制作完成后，可对不同机型/不同语言/横竖屏进行整体预览，确认无误

六、资源提供

在教程最后，我们为您提供了本案例所使用到的全部资源，点击压缩包即可下载。您可尝试用此资源跟着教程制作，以便尽快上手使用自由编辑器制作此类素材