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

温馨提示：本篇主要为"装扮"玩法可玩素材的**空白制作**教程。因模板《[组合搭配](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" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET 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?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.