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

温馨提示：本篇教程以 换装搭配 玩法作为入门案例，详细介绍"[全局变量](https://doc.playturbo.cn/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)"功能的使用思路，建议搭配[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="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FgeTPTtbqZ4eTV8Yrhigo%2Fimage.png?alt=media&#x26;token=fc99a5c5-7e54-4c26-a56a-bf72002c81a4" alt="" data-size="original"></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FL7wMTb1K3mL16slLjxlQ%2FAnimation2.gif?alt=media&#x26;token=db96ad81-69bd-48e0-8c55-dc324af52669" alt="" data-size="original"></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FTLzA7e1FSNfGLdFjWVLS%2FAnimation1.gif?alt=media&#x26;token=d36eb574-31ff-4a1a-bc56-29dc8ad3b4ce" 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="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FV6fdKfia679ApEP1ezXi%2Fimage.png?alt=media&#x26;token=d74b1dc1-27c3-412d-9633-614634b6b273" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FxniNMxoksE4lsyzTQ0Fc%2Fimage.png?alt=media&#x26;token=6afd5761-e84e-4852-93d0-d8f2eba22cb1" alt=""><figcaption></figcaption></figure>

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

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FIUnHEDWHVOdTExYo5MsP%2Fimage.png?alt=media&#x26;token=ce17c6c6-ce84-4bff-b893-e60793f99723" 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="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FkjDpZ18CZDR7WOQevMvj%2Fimage.png?alt=media&#x26;token=d1cdd93c-5438-450b-9a6b-62ec8d98ff75" 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>" %}