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

#自由编辑器 #空白制作 #初级难度

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

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

一、特征标签

【制作难度】：⭐⭐
【适用产品】：装扮玩法
【交互方式】：按下
【自由度】：全自由
【核心资产】：静帧图片
【核心功能】：按下-隐藏/显示素材

二、效果预览

手机试玩效果最佳

竖屏

横屏

扫码试玩

三、玩法梳理

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

进入试玩（场景1），展示【待机的角色】和【六个装扮选项】
出现【操作指引】，引导玩家点击任一选项来装扮角色
玩家可自由切换任一选项，按下后角色即播放对应的【装扮反馈】
直到玩家点击按钮【好】后，跳转应用商店，同时进入结束页（场景2）
结束页玩家全屏任意按下，跳转应用商店

四、制作思路

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

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

场景名称

场景1-核心玩法

场景2-结束页

效果预览

场景描述

引导玩家自由点击切换任一选项，按下后播放角色装扮反馈

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

核心资产

静帧图片：角色图片、装扮选项*6、装扮后图片*6、选项坑位*2、坑位面板、确认按钮、操作指引

粒子特效：星光粒子

音效：点击音效、装扮音效

静帧图片：下一关卡缩略图、下一关卡横幅、CTA按钮

粒子特效：星光粒子

核心动画

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

选项指引：透明度缓动

角色呼吸感：缩放缓动

跳转按钮：缩放缓动

核心事件

触发对象：装扮选项

触发事件：按下

响应事件：隐藏原始装扮；显示新装扮

触发对象：场景

触发事件：按下

响应事件：跳转应用商店

五、制作指南

*核心内容为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次点击音效与装扮反馈音效
- 隐藏指引手组、暂停播放两个指引选项的透明度动画