# 《换装搭配》空白制作教程

温馨提示：本篇教程以 换装搭配 玩法作为入门案例，详细介绍"[全局变量](/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/ding-bu-zi-chan-ku/quan-ju-bian-liang.md)"功能的使用思路，建议搭配[DEMO](https://playable-portal.mintegral.com/viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fmindworks-interactive-ads.html%253Furl%253Dhttps%25253A%25252F%25252Fmmp-cdn.rayjump.com%25252Fps%25252Fpreview%25252F24%25252F06%25252F28%25252F667e30885b67a%25252Findex.html%25253Floading%25253D1%252526preview%25253Dtrue%252526lang%25253Dzh-cn%2526mw_test%253D0%2526is_browser_tips%253D1%2526track_data%253D%25257B%252522pid%252522%25253A2283845%25252C%252522uid%252522%25253A109685%25252C%252522sct%252522%25253A%252522pt_project_ps%252522%25252C%252522env%252522%25253A%252522p%252522%25252C%252522cc%252522%25253A%252522CN%252522%25257D%2526preview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526loading%253D1%26mw_test%3D0\&orientation=3\&name=\&language=en)食用效果更佳哦！

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

* 【制作难度】：⭐⭐⭐
* 【适用产品】：通用
* 【交互方式】：点击/按下
* 【自由度】：全自由
* 【核心资产】：静帧图片
* 【核心功能】：全局变量（赋值&条件判断）

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

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

<table><thead><tr><th width="210.33333333333331">手机试玩效果最佳</th><th width="245">竖屏</th><th>横屏</th></tr></thead><tbody><tr><td><img src="/files/1DtGjUi9UzuZfXjWhJLC" alt="" data-size="original"></td><td><img src="/files/qoAAFIZ3JRzY9lup9qYV" alt="" data-size="original"></td><td><img src="/files/mgpxKShZojzA6w86CYt1" alt="" data-size="original"></td></tr><tr><td>扫码试玩</td><td><a href="http://playable-portal.mintegral.com/viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fmindworks-interactive-ads.html%253Furl%253Dhttps%25253A%25252F%25252Fmmp-cdn.rayjump.com%25252Fps%25252Fpreview%25252F24%25252F06%25252F28%25252F667e30885b67a%25252Findex.html%25253Floading%25253D1%252526preview%25253Dtrue%252526lang%25253Dzh-cn%2526mw_test%253D0%2526is_browser_tips%253D1%2526track_data%253D%25257B%252522pid%252522%25253A2283845%25252C%252522uid%252522%25253A109685%25252C%252522sct%252522%25253A%252522pt_project_ps%252522%25252C%252522env%252522%25253A%252522p%252522%25252C%252522cc%252522%25253A%252522CN%252522%25257D%2526preview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526loading%253D1%26mw_test%3D0&#x26;orientation=3&#x26;name=&#x26;language=en">点击试玩</a></td><td><a href="https://playable-portal.mintegral.com/viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fmindworks-interactive-ads.html%253Furl%253Dhttps%25253A%25252F%25252Fmmp-cdn.rayjump.com%25252Fps%25252Fpreview%25252F24%25252F06%25252F28%25252F667e30885b67a%25252Findex.html%25253Floading%25253D1%252526preview%25253Dtrue%252526lang%25253Dzh-cn%2526mw_test%253D0%2526is_browser_tips%253D1%2526track_data%253D%25257B%252522pid%252522%25253A2283845%25252C%252522uid%252522%25253A109685%25252C%252522sct%252522%25253A%252522pt_project_ps%252522%25252C%252522env%252522%25253A%252522p%252522%25252C%252522cc%252522%25253A%252522CN%252522%25257D%2526preview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526loading%253D1%26mw_test%3D0&#x26;orientation=3&#x26;name=&#x26;language=en">点击试玩</a></td></tr></tbody></table>

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

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

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

1）进入试玩，展示三选一操作指引

2）玩家可点击任一服装选项，完成换装

* 若玩家点击选项A，则跳转至下一场景，并展示服装A
* 若玩家点击选项B，则跳转至下一场景，并展示服装B
* 若玩家点击选项C，则跳转至下一场景，并展示服装C

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

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

\*场景搭建、横竖屏适配、动效设置等可直接进入DEMO项目查看，这里重点讲解"事件设置"。

### 1.添加全局变量

* 在场景1中添加变量
* 填写变量名称如"ClothType"
* 为了便于理解，在此可将变量类型设置为"数值"
* 可将初始值设为"0"，代表初始画面玩家未做出选择

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

### 2.设置事件并赋值

* 选中选项A组图层
* 添加事件：点击
* 添加响应事件：
  * 赋值。赋值ClothType=1（即 <mark style="color:red;">对于"玩家点击选项A"这一操作，我们将其赋值为"1"</mark>）
  * 跳转到下一场景

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

* 选项B、选项C的事件设置也同理。复制该事件，分别调整 赋值ClothType=2、ClothType=3 即可

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

### 3.添加条件判断

* 进入场景2，在场景上依次添加事件：条件判断
  * 条件1：<mark style="color:red;">当ClothType=1，显示服装A</mark>
  * 条件2：当ClothType=2，显示服装B
  * 条件3：当ClothType=3，显示服装C

⚠️在场景搭建阶段，需将服装A/B/C的初始状态都设为"隐藏"。在玩家做出选择后，再显示对应服装

<figure><img src="/files/4dMewrH6kUf2qIhE0XHc" alt=""><figcaption></figcaption></figure>

以上，就是本案例用到的全部事件。<mark style="color:orange;">若想制作</mark><mark style="color:orange;">**多次选择装扮**</mark><mark style="color:orange;">的玩法，可按照以上制作思路 继续在场景2中设置事件并赋值</mark>等等

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

## <mark style="color:blue;">五、演示录屏</mark> <a href="#agjmh" id="agjmh"></a>

{% embed url="<https://mmp-cdn.rayjump.com/res_store/1863758/646dd95fc8ac1.mp4>" %}


---

# 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/huan-zhuang-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.