> For the complete documentation index, see [llms.txt](https://doc.playturbo.cn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.playturbo.cn/playturbo-an-li-jiao-xue-ji-di/ke-wan-zi-you-bian-ji-qi-an-li/zhuang-ban-wan-fa-an-li/zu-he-da-pei-kong-bai-zhi-zuo-jiao-cheng.md).

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

温馨提示：本篇主要为"装扮"玩法可玩素材的**空白制作**教程。因模板《[组合搭配](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001678%252F13628%252Fpv%252F24%252F12%252F02%252F674d7f845fed9%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E7%BB%84%E5%90%88%E6%90%AD%E9%85%8D\&language=undefined)》就是根据这个教程 由设计独立制作后设为模板的，没有代码，所以等同于空白制作，因此您可以直接使用模板创建"自由制作"项目来作为空白制作的参考，再结合本篇教程，学习效果更佳哦！

*<mark style="color:red;">💡虽然原项目是6个装扮选项，但可参考此制作逻辑，自行增加/删减选项，来制作不同的可玩素材哦！</mark>*

## <mark style="color:blue;">一、特征标签</mark> <a href="#nubzy" id="nubzy"></a>

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

## <mark style="color:blue;">二、效果预览</mark> <a href="#dlwsv" id="dlwsv"></a>

<table><thead><tr><th width="221.33333333333331">手机试玩效果最佳</th><th width="235">竖屏</th><th>横屏</th></tr></thead><tbody><tr><td><img src="/files/Wj3LEzEk5Vw4CgT2Bxmx" alt="" data-size="original"></td><td><img src="/files/2x5JN6gf6RHRXoRdFzz2" alt="" data-size="original"></td><td><img src="/files/17VhrG4m9s5ywQEhJeCn" alt="" data-size="original"></td></tr><tr><td>扫码试玩</td><td><a href="https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001678%252F13628%252Fpv%252F24%252F12%252F02%252F674d7f845fed9%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0&#x26;orientation=undefined&#x26;name=%E7%BB%84%E5%90%88%E6%90%AD%E9%85%8D&#x26;language=undefined">点击试玩</a></td><td><a href="https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001678%252F13628%252Fpv%252F24%252F12%252F02%252F674d7f845fed9%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0&#x26;orientation=undefined&#x26;name=%E7%BB%84%E5%90%88%E6%90%AD%E9%85%8D&#x26;language=undefined">点击试玩</a></td></tr></tbody></table>

## <mark style="color:blue;">三、玩法梳理</mark> <a href="#nbhek" id="nbhek"></a>

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

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

## <mark style="color:blue;">四、制作思路</mark> <a href="#agjmh" id="agjmh"></a>

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

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

<table data-full-width="false"><thead><tr><th width="142">场景名称</th><th width="282">场景1-核心玩法</th><th>场景2-结束页</th></tr></thead><tbody><tr><td><strong>效果预览</strong></td><td><img src="/files/gQdQcZeKjJ5u3YgH0Ztl" alt="" data-size="original"></td><td><img src="/files/Qz6DYPN9v5fKqNF6CM3W" alt="" data-size="original"></td></tr><tr><td><strong>场景描述</strong></td><td>引导玩家自由点击切换任一选项，按下后播放角色装扮反馈</td><td>结束页，玩家按下即跳转商店</td></tr><tr><td><strong>核心资产</strong></td><td><p><strong>静帧图片：</strong>角色图片、装扮选项*6、装扮后图片*6、选项坑位*2、坑位面板、确认按钮、操作指引</p><p><strong>粒子特效：</strong>星光粒子</p><p><strong>音效：</strong>点击音效、装扮音效</p></td><td><p><strong>静帧图片：</strong>下一关卡缩略图、下一关卡横幅、CTA按钮</p><p><strong>粒子特效：</strong>星光粒子</p></td></tr><tr><td><strong>核心动画</strong></td><td><p><strong>手指指引</strong>：位移缓动+缩放缓动</p><p><strong>选项指引</strong>：透明度缓动</p><p><strong>角色呼吸感</strong>：缩放缓动</p></td><td><strong>跳转按钮</strong>：缩放缓动</td></tr><tr><td><strong>核心事件</strong></td><td><p><strong>触发对象</strong>：装扮选项</p><p><strong>触发事件</strong>：按下</p><p><strong>响应事件</strong>：隐藏原始装扮；显示新装扮</p></td><td><p><strong>触发对象</strong>：场景</p><p><strong>触发事件</strong>：按下</p><p><strong>响应事件</strong>：跳转应用商店</p></td></tr></tbody></table>

## <mark style="color:blue;">五、制作指南</mark> <a href="#cria2" id="cria2"></a>

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

### Step1 - 场景搭建 <a href="#wepzn" id="wepzn"></a>

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

#### **1.全局设置**

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

<figure><img src="/files/zr2Hy6CwIkB2mLiNH1hM" alt=""><figcaption></figcaption></figure>

#### **2.场景1：核心玩法**

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

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

<div align="left"><figure><img src="/files/DtYLt8fCCfsOWsRuEy7S" alt=""><figcaption></figcaption></figure></div>

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

<mark style="color:orange;">因此，角色的发型和服装坑位各需要添加4张图片，即初始装扮\*1+可能被选择的装扮\*3</mark>

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

<div align="left"><figure><img src="/files/rh8cg7tdv9lqDQ1kdJZ9" alt=""><figcaption></figcaption></figure></div>

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

<figure><img src="/files/OIiCKnDVhHqWXQ27BeDQ" alt=""><figcaption></figcaption></figure>

#### **3.场景2：结束页**

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

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

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

👉相关阅读：[作品制作-重要提示⚠️](/ke-wan-gong-ju-zi-you-bian-ji-qi/zuo-pin-zhi-zuo-zhong-yao-ti-shi.md#shang-bao-shi-wan-jie-shu)

<div align="left"><figure><img src="/files/JtyQEJMm7emHCm8Zp7tz" alt=""><figcaption></figcaption></figure></div>

#### &#x20;<a href="#tpuup" id="tpuup"></a>

### Step2 - 横竖屏适配 <a href="#tpuup" id="tpuup"></a>

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

#### 1.调整横屏排版

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

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

3）场景2同理

<div align="left"><figure><img src="/files/Q8OiP1cVFSvWH9FhOx2S" alt=""><figcaption></figcaption></figure> <figure><img src="/files/4mwVk0Z7mqMuVMQBvS6t" alt=""><figcaption></figcaption></figure></div>

#### 2.调整屏幕适配方式 <a href="#tpuup" id="tpuup"></a>

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

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

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

👉相关阅读：[屏幕适配方式](/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/bian-ji-ye-mian-fen-qu-jie-shao/can-shu-she-zhi-qu/ping-mu-shi-pei-fang-shi.md)

<div><figure><img src="/files/UW2kakVR5cZLVVNqfYly" alt=""><figcaption><p>①</p></figcaption></figure> <figure><img src="/files/1UuYIEM3HLY1mzDKbabp" alt=""><figcaption><p>②</p></figcaption></figure> <figure><img src="/files/PBH2gq6DMUH5SWmziGbZ" alt=""><figcaption><p>③</p></figcaption></figure></div>

#### &#x20;<a href="#tpuup" id="tpuup"></a>

### Step3 - 动效设置 <a href="#tpuup" id="tpuup"></a>

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

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

* 选中指引手组图层\[group\_hand]，添加动画-通用-位移缓动，参数设置如下
* 继续添加动画-通用-缩放缓动，参数设置如下
* 两个动画一起播放共同实现二选一指引的效果
* **注意调整横屏模式下的位移距离**

<div><figure><img src="/files/hEwaJIxV96rvqEY364nY" alt=""><figcaption></figcaption></figure> <figure><img src="/files/XS2X2pyqxfmsdQQGkl2Q" alt=""><figcaption></figcaption></figure></div>

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

* 选中服装选项1图片\[options\_1]，添加动画-通用-透明度缓动，参数设置如下
* 复制该动画给发型选项1图片\[options]，微调曲线样式即可，参数设置如下
* 两个动画一起播放，搭配手指指引动画共同实现指引效果

<div align="left"><figure><img src="/files/ftvyvzBvroWgfTkNoVrr" alt=""><figcaption></figcaption></figure> <figure><img src="/files/f9gVCLbGJygIuyRNQVKp" alt=""><figcaption></figcaption></figure></div>

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

* 选中角色组图层\[girl]，将其锚点调整为（50,100）
* 添加动画-通用-缩放缓动，作为模拟角色呼吸感的动画，参数设置如下

<div align="left"><figure><img src="/files/oCr3T5tNtmWaTxGQYji8" alt=""><figcaption></figcaption></figure> <figure><img src="/files/YOpG2mAfHnEcsS7fIVV8" alt=""><figcaption></figcaption></figure></div>

#### 4.跳转按钮：缩放缓动

* 复制上一个缩放动画给场景2的跳转按钮组图层\[group\_btn]
* 微调参数，作为按钮的指引动画，参数设置如下

<figure><img src="/files/W1ye9cUgGyS45z6mNaLD" alt=""><figcaption></figcaption></figure>

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

* 打开公共粒子库，选择并添加合适的粒子特效作为装扮反馈
* 调整粒子位置到合适后，先隐藏该粒子图层，不让其自动播放，在后续通过事件设置来播放粒子![](/files/kUISTDYLrJHpCeKXaP8R)
* 注意同步调整横屏模式下的粒子位置

<figure><img src="/files/1Yy4Q0AWODLdPtNepr2R" alt=""><figcaption></figcaption></figure>

#### &#x20;<a href="#umduz" id="umduz"></a>

### <mark style="background-color:red;">Step4 - 事件设置</mark> <a href="#umduz" id="umduz"></a>

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

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

#### <mark style="color:red;">1.装扮选项</mark>

以服装选项1\[clothing1\_icon]为例，选中图层

* 添加事件-按下
* 添加响应事件：
  * 显示并播放装扮反馈（星光粒子特效）
  * 隐藏初始服装、显示装扮后服装1、同时隐藏装扮后服装2&装扮后服装3
  * 显示高亮服装选项1、同时隐藏高亮服装选项2&高亮服装选项3
  * 隐藏常规服装选项1 、同时显示常规服装选项2&常规服装选项3 (因常规选项图片的图层位于高亮图片上方，所以当隐藏常规图片后，高亮图片才会展示出来；同理，当显示常规图片后，高亮图片将被遮挡不会展示)
  * &#x20;隐藏角色初始表情、显示角色开心表情
  * 从头播放1次点击音效与装扮反馈音效
  * 隐藏指引手组、暂停播放两个指引选项的透明度动画

<div align="left"><figure><img src="/files/Iu2FK8afVVLAndnKiYK9" alt=""><figcaption></figcaption></figure></div>

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

* 复制该"按下"事件 到服装选项2组图层\[clothing2\_icon] 和服装选项3组图层\[clothing3\_icon]
* 根据玩法逻辑，微调 选项1与选项2、选项1与选项3 之间的显示/隐藏状态即可

<div><figure><img src="/files/dBOtizy3wsofUnqvidLG" alt=""><figcaption><p>服装选项2</p></figcaption></figure> <figure><img src="/files/Q4F09hC8LdjBqUmyAS9l" alt=""><figcaption><p>服装选项3</p></figcaption></figure></div>

* 同理，复制该"按下"事件 到发型选项1组图层\[hair1\_icon]&#x20;
* 微调并新增响应事件（黄色部分）：因发型由前后两部分组成，所以控制图层显示/隐藏的响应事件 需要多加一组

<figure><img src="/files/mnzoYmZnfckg5DLe6zTQ" alt=""><figcaption></figcaption></figure>

* 发型选项1的事件设置完成后，复制该"按下"事件 到发型选项2组图层\[clothing2\_icon] 和发型选项3组图层\[clothing3\_icon]
* 同理，微调 选项1与选项2、选项1与选项3 之间的显示/隐藏状态即可

<div><figure><img src="/files/YIKihlLTDnjRF4cB8hH5" alt=""><figcaption><p>发型选项2</p></figcaption></figure> <figure><img src="/files/FBEfZurjxEjQeAPxUJMi" alt=""><figcaption><p>发型选项3</p></figcaption></figure></div>

<mark style="color:red;">💡按照以上制作逻辑，您可以自行增加/删减选项，来制作不同的可玩素材</mark>

#### 2.确认按钮

* 选中确认按钮组图层\[group\_btn\_ok]，添加事件-按下
* 添加响应事件：
  * 跳转应用商店
  * 跳转到下一场景
  * 设置自定义埋点1，并填入埋点名称如"点击确认按钮"

<figure><img src="/files/lbyiBlyh8oQNwaNOBHuz" alt=""><figcaption></figcaption></figure>

#### 3.常驻下载按钮

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

<div align="left"><figure><img src="/files/71MgkvfyY5n9Du6YhyQs" alt=""><figcaption></figcaption></figure></div>

#### 4.场景2全局跳转

* 复制"按下"事件 到场景2
* 新增一个自定义埋点事件即可

<figure><img src="/files/hjUJhWS3dBYn8AEZG5OM" alt=""><figcaption></figcaption></figure>

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

#### &#x20;<a href="#j1kmp" id="j1kmp"></a>

### Step5 - 整体预览 <a href="#j1kmp" id="j1kmp"></a>

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

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

<figure><img src="/files/C3ZZ0mxfT20BHIzLKIBe" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">六、资源提供</mark>

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

{% file src="/files/8qRRaUwv5rxhXIK3sbqS" %}