# 2D playable《多要素展示切换》教程

温馨提示：此案例为不使用"轮播组件"的制作方法；相同玩法可使用"轮播组件"，制作更简单，建议直接跳转查阅此教程：👉[lun-bo-zu-jian-kong-bai-zhi-zuo-jiao-cheng](https://doc.playturbo.cn/playturbo-an-li-jiao-xue-ji-di/ke-wan-zi-you-bian-ji-qi-an-li/lun-bo-zhan-shi-wan-fa-an-li/lun-bo-zu-jian-kong-bai-zhi-zuo-jiao-cheng "mention")

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

* 【制作难度】：⭐⭐
* 【适用产品】：普遍适用
* 【交互方式】：点击
* 【交互次数】：不限
* 【线程】：多线程
* 【核心资产】：静态图片
* 【功能】：动画-缩放缓动、事件-按下跳转指定场景、事件-定时触发

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

| 手机试玩效果最佳                                                                                                                                                                                                                                                   | 竖屏                                                                                                                                                                                                                                                         | 横屏                                                                                                                                                                                                                                                         |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FqFySLnpt3pFweIDCVOHF%2Fimage.png?alt=media&#x26;token=005c4a45-6fa3-4957-b311-193c5f17cca8" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F9ZS8sx0H8LhAkFwQslsX%2Fimage.png?alt=media&#x26;token=06bc3a08-98ec-4a18-b9a3-6ed74fd5f1b2" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FgUhKZEMgIa05RlV2mtzK%2Fimage.png?alt=media&#x26;token=6577af78-dd38-46d8-b4aa-be6cafe7289f" alt="" data-size="original"> |
| 扫码试玩                                                                                                                                                                                                                                                       | [点击试玩](https://tinyurl.com/mr3fmh45)                                                                                                                                                                                                                       | [点击试玩](https://tinyurl.com/mr3fmh45)                                                                                                                                                                                                                       |

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

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

* 进入试玩，展示【美女造型A】和【左右切换按钮】；
* 出现【操作指引】，提示玩家按下【右侧切换按钮】；
* 此时玩家可按下左右任一按钮，玩家第一次按下任一按钮后，播放【换装反馈】；
* 再次出现【操作指引】，提示玩家按下【确认按钮】；
  * 在玩家按下【确认按钮】前，可自由按下左右任一按钮切换造型，无次数限制
* 玩家按下【确认按钮】，跳转商店

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

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

**场景拆分：**&#x6839;据第三部分的玩法梳理，我们可将本案例设置为4个场景来制作。

（场景1-3分别对应1套美女造型；场景4为结束页面）

<table data-full-width="true"><thead><tr><th width="137">场景名称</th><th>场景1-诱导切换</th><th>场景2-诱导点击</th><th>场景3-诱导点击</th><th>场景4-结束页</th></tr></thead><tbody><tr><td><strong>效果图</strong></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F9ZS8sx0H8LhAkFwQslsX%2Fimage.png?alt=media&#x26;token=06bc3a08-98ec-4a18-b9a3-6ed74fd5f1b2" 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%2FXEFhAa6aNfkXt0DvXu2P%2Fimage.png?alt=media&#x26;token=1d1fc429-9428-4459-a280-2cd856828281" 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%2FTrfQBzFMYWslMMCd1e5l%2Fimage.png?alt=media&#x26;token=afbd8819-33e6-4f2e-83fc-1a588b703de7" 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%2FPdZhwNMabPdQCMu1EzcR%2Fimage.png?alt=media&#x26;token=cdfc7347-54b6-4e82-a709-871bb1ad28c6" alt="" data-size="original"></td></tr><tr><td><strong>场景描述</strong></td><td>显示美女造型A，引导玩家点击右侧切换按钮</td><td>显示美女造型B，引导玩家点击确认按钮</td><td>显示美女造型C，引导玩家点击确认按钮</td><td>结束页，引导点击下载按钮</td></tr><tr><td><strong>动画</strong></td><td><p>【美女】：缩放缓动</p><p>【指引手指/箭头】：缩放缓动</p></td><td><p>【美女】：缩放缓动</p><p>【指引手指/箭头】：缩放缓动</p></td><td><p>【美女】：缩放缓动</p><p>【指引手指/箭头】：缩放缓动</p></td><td>【下载按钮】：缩放缓动</td></tr><tr><td><strong>核心事件</strong></td><td><p>触发对象：图层-左右箭头/确认按钮</p><p>触发操作：按下</p><p>响应事件：跳转指定场景</p></td><td><p>触发对象：图层-左右箭头/确认按钮</p><p>触发操作：按下</p><p>响应事件：跳转指定场景</p></td><td><p>触发对象：图层-左右箭头/确认按钮</p><p>触发操作：按下</p><p>响应事件：跳转指定场景</p></td><td><p>触发对象：图层-下载按钮</p><p>触发操作：按下</p><p>响应事件：跳转应用商店</p></td></tr><tr><td><strong>资产清单</strong></td><td><p>【音频】：点击音效、换装音效</p><p>【图片】：美女造型图片、切换箭头图片、确认按钮图片、手指、指引文案背景图、logo、CTA按钮</p><p>【文本】：指引文案、确认按钮文案、下载文案</p><p>【粒子特效】</p></td><td><p>【音频】：点击音效、换装音效</p><p>【图片】：美女造型图片、切换箭头图片、确认按钮图片、手指、指引文案背景图、logo、CTA按钮</p><p>【文本】：指引文案、确认按钮文案、下载文案</p><p>【粒子特效】</p></td><td><p>【音频】：点击音效、换装音效</p><p>【图片】：美女造型图片、切换箭头图片、确认按钮图片、手指、指引文案背景图、logo、CTA按钮</p><p>【文本】：指引文案、确认按钮文案、下载文案</p><p>【粒子特效】</p></td><td><p>【图片】：背景图、logo、CTA按钮</p><p>【文本】：下载文案</p><p>【粒子特效】</p></td></tr></tbody></table>

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

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

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

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FITHmrvpX7Eyp0k958urg%2Fimage.png?alt=media&#x26;token=766c52c6-61e3-492e-ac37-65da36cd1962" alt=""><figcaption></figcaption></figure>

#### **2.全局场景**

1）在【全局场景】中添加常驻信息：logo、CTA按钮

2）调整各资产到合适的位置大小

3）根据资产类型对资产进行编组、排序、命名

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FwjIk4A4SoZaOloipS17a%2Fimage.png?alt=media&#x26;token=da79a82f-e3e5-4851-a261-8a9e060600cc" alt=""><figcaption></figcaption></figure>

**3..场景1-3**

1）在【场景1】中添加音效、美女造型图片、切换箭头、确认按钮、手指、指引文案、粒子特效

2）调整各资产到合适的位置大小

3）根据资产类型对资产进行编组、排序、命名

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fjt6alKuYRoZQ8iUaWItv%2Fimage.png?alt=media&#x26;token=665baa4b-df60-47f6-81e5-c5ea8dbe6507" alt=""><figcaption></figcaption></figure>

注：因三个场景资产分布大体相同（场景1多一组指引手指），因此我们可以通过【复制场景】后微调来实现快速制作。

#### 4.**场景4** <a href="#tpuup" id="tpuup"></a>

1）在【场景4】中添加虚化背景图、LOGO、下载按钮、粒子特效，并打组

2）在右侧场景设置中勾选场景4为【结束场景】；同时场景4【取消启用全局场景】

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F0ujnr3P0zbpELAbhxs1s%2Fimage.png?alt=media&#x26;token=79ff2b05-b37b-4d57-8d30-2f6e0a0611c0" alt=""><figcaption></figcaption></figure>

### Step2 - 动效制作 <a href="#tpuup" id="tpuup"></a>

#### **1.美女呼吸感**

1）在【场景1】左侧图层处选中人物组【role】，将锚点改为（50,100）

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FrDPsNuyVG8oY9FN88YSl%2Fimage.png?alt=media&#x26;token=9e65f96e-520a-4e4b-ae44-07525578d6a4" alt=""><figcaption></figcaption></figure>

2）添加动画-通用-缩放缓动（作为美女进场动画）。参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FI9fmFNe7bSOuhHqpwNhD%2Fimage.png?alt=media&#x26;token=25be7938-1572-477d-a614-fad1ef5846fc" alt=""><figcaption></figcaption></figure>

3）继续添加动画-通用-缩放缓动（作为美女呼吸感动画）。参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FkQl3IUV58G0DytomEVIf%2Fimage.png?alt=media&#x26;token=8da3762d-7194-4055-8aae-b3d3845ca5cf" alt=""><figcaption></figcaption></figure>

注：场景2/场景3的美女动画同理场景1，可通过【复制/粘贴动画】来快速完成制作。

#### **2.下载按钮**

在【场景4】左侧图层处选中下载按钮组【ctat\_download】，添加动画-通用-缩放缓动。参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F3VA8d0F6TgJhp1tWlCqa%2Fimage.png?alt=media&#x26;token=8eee27c8-efa4-430d-a875-f88386e560e0" alt=""><figcaption></figcaption></figure>

### Step3 - 逻辑设置 <a href="#umduz" id="umduz"></a>

因场景2/场景3的事件设置同理场景1，所以在此仅以场景1举例说明，可通过【复制/粘贴事件】来快速完成场景2/场景3的事件设置；

另外，本案例有涉及【全局变量】，理解成本偏高且不影响此案例的教学，所以在此不做说明。

#### **1.场景1：图层事件-箭头**

1）选中右箭头组图层；

2）添加事件-按下；

3）添加响应事件-从头播放点击音效；从头播放右箭头缩放动画；

4）添加响应事件-执行延迟0.2s，跳转指定场景；

5）其他响应事件：设置埋点信息

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FJEZHgdMon17U9oRHRyIU%2Fimage.png?alt=media&#x26;token=1c8fb54f-bf45-4f07-8ec0-3ec75d082d1d" alt=""><figcaption></figcaption></figure>

注：左箭头的事件设置同理右箭头，因此可通过【复制/粘贴事件】来快速完成制作。

#### **2.场景1：图层事件-确认按钮**

1）选中确认按钮组图层；

2）添加事件-按下；

3）添加响应事件-跳转指定场景（结束页）；跳转应用商店；

4）其他响应事件：设置埋点信息

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FmHDOIam9z8nGaOf5O9rA%2Fimage.png?alt=media&#x26;token=c4454e13-2398-418e-8647-b96df5c16330" alt=""><figcaption></figcaption></figure>

#### **3**.**场景1：场景事件**

1）在【场景1】下添加事件【定时触发】，设置执行延迟时间为0s；（即进入场景就生效）

2）添加响应事件-从头播放美女动画；从头播放操作指引动画；显示并播放粒子特效；从头播放粒子音效

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FJ9IDKzY46DTe6xPjZTOt%2Fimage.png?alt=media&#x26;token=4aa5eac1-48ef-423d-9e4a-e4e30063676c" alt=""><figcaption></figcaption></figure>

#### 4.**场景4：场景事件** <a href="#j1kmp" id="j1kmp"></a>

1）在【场景4】下添加事件-按下；

2）添加响应事件-跳转应用商店；设置埋点信息

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FS4hVajtCSBIWEyRZwhp1%2Fimage.png?alt=media&#x26;token=d281f40b-978d-4cda-93d6-05cba5084fd7" alt=""><figcaption></figcaption></figure>

#### **5.全局场景：图层事件-CTA按钮**

选中【全局场景】中的下载按钮组，添加事件-按下，添加响应事件-跳转应用商店

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FYqvY1UxwsYuCq1WWTRzR%2Fimage.png?alt=media&#x26;token=8cb8a418-837a-466c-b8b2-841c323fa136" alt=""><figcaption></figcaption></figure>

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

#### <mark style="color:red;">**1.横屏排版**</mark>

每个场景竖屏制作完成后，均需进行横屏排版（建议多使用“复用竖屏位置尺寸配置”按钮）

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FGD7dUU4iKozt4KLsN1xK%2Fimage.png?alt=media&#x26;token=7aec85b2-1bf8-4e4e-be44-6f6ac26f9d48" alt=""><figcaption></figcaption></figure>

#### <mark style="color:red;">**2.屏幕适配**</mark>

对各机型及其横竖屏进行屏幕适配，并预览适配效果是否合适

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F1RqzAch9l5cPwnkUOnhn%2Fimage.png?alt=media&#x26;token=9109d899-7c15-45d8-943c-57a2282f6c9d" alt=""><figcaption></figcaption></figure>

**3.整体预览**

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FO5YAnrQemFSBWiGJcMcO%2Fimage.png?alt=media&#x26;token=2620694b-5395-4183-b01f-c418cd2d75f5" alt=""><figcaption></figcaption></figure>

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

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

{% file src="<https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fss1PFlKPETbIiYAU5ONi%2F%E5%A4%9A%E8%A6%81%E7%B4%A0%E7%82%B9%E5%87%BB%E5%88%87%E6%8D%A2_%E8%B5%84%E6%BA%90.zip?alt=media&token=c020562d-78df-494a-8116-2bfad4393fe8>" %}