《组合搭配》空白制作教程
#自由编辑器 #空白制作 #初级难度
最后更新于
#自由编辑器 #空白制作 #初级难度
最后更新于
温馨提示：本篇主要为"装扮"玩法可玩素材的空白制作教程。因模板《》就是根据这个教程 由设计独立制作后设为模板的，没有代码，所以等同于空白制作，因此您可以直接使用模板创建"自由制作"项目来作为空白制作的参考，再结合本篇教程，学习效果更佳哦！
💡虽然原项目是6个装扮选项，但可参考此制作逻辑，自行增加/删减选项，来制作不同的可玩素材哦！
【制作难度】：⭐⭐
【适用产品】：装扮玩法
【交互方式】：按下
【自由度】：全自由
【核心资产】：静帧图片
【核心功能】：按下-隐藏/显示素材
扫码试玩
我们在开始制作之前需要对本案例的玩法逻辑进行简单的梳理：
进入试玩（场景1），展示【待机的角色】和【六个装扮选项】
出现【操作指引】，引导玩家点击任一选项来装扮角色
玩家可自由切换任一选项，按下后角色即播放对应的【装扮反馈】
直到玩家点击按钮【好】后，跳转应用商店，同时进入结束页（场景2）
结束页玩家全屏任意按下，跳转应用商店
核心思想：场景拆分逻辑清晰，图层结构简单，单个场景里的动画和事件尽可能少
场景拆分：根据上一部分的玩法梳理内容，我们可将本案例拆分为 2 个场景来制作，即核心玩法+结束页
效果预览
场景描述
引导玩家自由点击切换任一选项，按下后播放角色装扮反馈
结束页，玩家按下即跳转商店
核心资产
静帧图片：角色图片、装扮选项*6、装扮后图片*6、选项坑位*2、坑位面板、确认按钮、操作指引
粒子特效：星光粒子
音效：点击音效、装扮音效
静帧图片：下一关卡缩略图、下一关卡横幅、CTA按钮
粒子特效：星光粒子
核心动画
手指指引：位移缓动+缩放缓动
选项指引：透明度缓动
角色呼吸感：缩放缓动
跳转按钮：缩放缓动
核心事件
触发对象：装扮选项
触发事件：按下
响应事件：隐藏原始装扮；显示新装扮
触发对象：场景
触发事件：按下
响应事件：跳转应用商店
*核心内容为Step4【事件设置】
建议您在创建项目后，先将所有资产上传进【项目资产】内，方便后续添加使用
在【全局设置】中添加背景音乐、背景图片
1）将相关资产添加进场景1
2）调整各资产到合适的位置大小，根据资产类型对资产进行命名、编组、排序（详细内容可进项目内查看）
⚠️注意：此类玩法的制作逻辑为 "①在同一装扮坑位上，添加所有可能出现的物品；②隐藏除初始展示以外的物品；③通过事件设置来显示选择后的物品，同时隐藏其他不需要展示的物品"，以此来实现目标效果
因此，角色的发型和服装坑位各需要添加4张图片，即初始装扮*1+可能被选择的装扮*3
受图层层级影响，为了让发型与角色脸部更好地融合，每种样式的发型需由前、后两张图片共同组成
3）调整图层初始状态：将可能被选择的所有装扮图片设为"隐藏"状态，后续通过事件来控制这些图层的显示/隐藏
1）将相关资产添加进场景2
2）同样地，调整各资产到合适的位置大小，根据资产类型对资产进行命名、编组、排序（详细内容可进项目内查看）
3）勾选场景2为【结束场景】，以便上报试玩结束
完成所有竖屏的排版后，我们还需对"横屏的排版"以及"横竖屏的屏幕适配方式"进行调整
1）以场景1为例，切换至横屏模式，选中所有最高层级的图层
2）使用【复用竖屏位置尺寸配置】功能一键排版，然后再适当调整各图层的【位置】和【缩放比例】即可，让画面展示出完整的内容
3）场景2同理
若想让素材完美适配各类机型，还可对部分图层的适配方式进行调整
在本案例中，我们想要：①竖屏下的产品信息组始终位于各机型屏幕的顶部，所以我们调整其"屏幕适配方式"为居中贴顶适配；②横屏下的产品信息组贴左上角适配；③横屏/竖屏下的'确认按钮'都始终位于各机型屏幕的底部
（其他图层默认居中适配，无需调整）
👉相关阅读：屏幕适配方式
本案例用到的动画和粒子特效如下，我们依次展开介绍：手指指引动画、装扮选项指引动画、角色呼吸感动画、跳转按钮指引动画、装扮星光粒子特效
选中指引手组图层[group_hand]，添加动画-通用-位移缓动，参数设置如下
继续添加动画-通用-缩放缓动，参数设置如下
两个动画一起播放共同实现二选一指引的效果
注意调整横屏模式下的位移距离
选中服装选项1图片[options_1]，添加动画-通用-透明度缓动，参数设置如下
复制该动画给发型选项1图片[options]，微调曲线样式即可，参数设置如下
两个动画一起播放，搭配手指指引动画共同实现指引效果
选中角色组图层[girl]，将其锚点调整为（50,100）
添加动画-通用-缩放缓动，作为模拟角色呼吸感的动画，参数设置如下
复制上一个缩放动画给场景2的跳转按钮组图层[group_btn]
微调参数，作为按钮的指引动画，参数设置如下
打开公共粒子库，选择并添加合适的粒子特效作为装扮反馈
注意同步调整横屏模式下的粒子位置
完成所有内容的搭建后，我们需要通过设置事件来串联起整个试玩流程
本案例的事件设置比较简单，集中在所有可被点击的图层上（包含六个装扮选项、一个确认按钮、一个常驻下载按钮、结束场景跳转）。接下来，我们按顺序依次讲解
以服装选项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 之间的显示/隐藏状态即可
💡按照以上制作逻辑，您可以自行增加/删减选项，来制作不同的可玩素材
选中确认按钮组图层[group_btn_ok]，添加事件-按下
添加响应事件：
跳转应用商店
跳转到下一场景
设置自定义埋点1，并填入埋点名称如"点击确认按钮"
为常驻下载按钮添加"按下-跳转应用商店"的跳转事件
复制"按下"事件 到场景2
新增一个自定义埋点事件即可
以上，就是本案例用到的全部事件。完成所有事件设置，我们的素材就制作完成了。
1）建议在制作过程中，每完成一部分操作，就及时预览，检查设置是否正确
2）全部制作完成后，可对不同机型/不同语言/横竖屏进行整体预览，确认无误
在教程最后，我们为您提供了本案例所使用到的全部资源，点击压缩包即可下载。您可尝试用此资源跟着教程制作，以便尽快上手使用自由编辑器制作此类素材
👉相关阅读：
调整粒子位置到合适后，先隐藏该粒子图层，不让其自动播放，在后续通过事件设置来播放粒子
