# 《拉环》空白制作教程

温馨提示：本案例以拉环玩法为例，讲解**“多种操作顺序，触发多种结果”**的全局变量制作方法，但实际也适用于同类操作逻辑的其他玩法哦！

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

* 【制作难度】：⭐⭐⭐⭐
* 【适用产品】：普遍适用
* 【交互方式】：点击
* 【线程】：多线程
* 【核心资产】：序列帧
* 【功能】：全局变量；响应事件禁用事件

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

| 手机试玩效果最佳                                                            | 竖屏                                                                  | 横屏                                                                  |
| ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- |
| <img src="/files/7GxfpjDvQuDGvczPLUmZ" alt="" data-size="original"> | <img src="/files/qo2a12Te65gPPg0QCB72" alt="" data-size="original"> | <img src="/files/UPFmxM3V2Maj5wWlIlQI" alt="" data-size="original"> |
| 扫码试玩                                                                | [点击试玩](http://tinyurl.com/26ffjzyf)                                 | [点击试玩](http://tinyurl.com/26ffjzyf)                                 |

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

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

1）进入试玩，展示【拉环待机画面】和【奖励金额文本】

2）玩家按下任一拉环，播放相应反馈

* 我们将拉环分别标记为a b c，玩家操作顺序可能性分6种，对应反馈如下：
  * a - b - c （火-水-金币，操作正确）
  * a - c - b （火-金币-水+金币，操作错误）
  * b - a - c （拉不动）
  * b - c - a （拉不动）
  * c - a - b （金币-火-水+金币，操作错误）
  * c - b - a （金币-拉不动）

3）当三根拉环全部被拉出，根据最终【奖励金额】跳转对应结束页面

* 当金额为100：跳转成功结束页面
* 当金额不变依旧为0：跳转失败结束页面

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

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

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

**场景拆分：**&#x6839;据上一部分的玩法梳理，我们可以将本案例拆分为3个场景来制作

* 场景1：核心玩法-拉环（重点讲解）
* 场景2：成功结束页面
* 场景3：失败结束页面

<table data-full-width="false"><thead><tr><th width="120">场景名称</th><th width="296">场景1-拉环玩法</th><th width="165">场景2-成功结束页面</th><th>场景3-失败结束页面</th></tr></thead><tbody><tr><td><strong>效果图</strong></td><td><img src="/files/qo2a12Te65gPPg0QCB72" alt="" data-size="original"></td><td><img src="/files/8NyWaYQf9PENKWIbTQ52" alt="" data-size="original"></td><td><img src="/files/FawaoLPDND1ACyPuVvrw" alt="" data-size="original"></td></tr><tr><td><strong>场景描述</strong></td><td><p>玩家拉动拉环，触发相应反馈；</p><p>存在多种操作顺序，触发多种结果</p></td><td>成功结束页面</td><td>失败结束页面</td></tr><tr><td><strong>核心资产</strong></td><td><p><strong>静帧图片：</strong>背景图、拉环、石头</p><p><strong>序列帧：</strong></p><ul><li>火：下落*1组</li><li>水：下落*1组</li><li>金币：下落*3组（①从头落到底、②从头落到中间、③从中间落到底）</li><li>金额：数字滚动*1组</li></ul></td><td>-</td><td>-</td></tr><tr><td><strong>核心动画</strong></td><td><p>拉环：位移缓动+透明度缓动</p><p>石头：淡入</p></td><td>-</td><td>-</td></tr><tr><td><strong>核心事件</strong></td><td><p>全局变量：布尔值类型</p><p>触发对象：图层-拉环a/拉环b/拉环c</p><p>触发事件：按下+条件判断</p><p>响应事件：赋值/禁用事件/播放动画&#x26;序列帧</p></td><td>-</td><td>-</td></tr></tbody></table>

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

\*重点讲解Step3【逻辑设置】

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

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

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

2）在【全局场景】下添加常驻下载按钮、logo等产品信息

#### **2.场景1-3**

1）分别在场景1、场景2、场景3内添加相应资产

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

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

4）调整横屏排版及屏幕适配方式

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

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

#### **1.**&#x62C9;环a/b/c

依次为拉环a/b/c添加动画-通用-位移缓动+透明度缓动，模拟拉环被拉出后的路径。参数设置如下：

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

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

#### **2.石头**

为石头添加动画-进场动画-淡入。参数设置如下：

<figure><img src="/files/9LWETXXITT6nPgAIYVVb" alt=""><figcaption></figcaption></figure>

#### 3.**序列帧**

将水/火/金币/金额所有序列帧的参数调整为【关闭入场自动播放】【关闭无限循环】，并隐藏金币②和③的序列帧图层

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

### <mark style="color:red;background-color:red;">Step3 - 逻辑设置</mark> <a href="#umduz" id="umduz"></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/ding-bu-zi-chan-ku/quan-ju-bian-liang.md)

#### **1.添加全局变量**

我们共添加3个全局变量，来分别代表拉环a/拉环b/拉环c

1）点击【全局变量】-【添加变量】

2）输入变量名称（如key\_a\_switch）- 选择变量类型为【布尔值】 - 选择初始值为【false】 - 保存

3）按照以上步骤，再依次添加拉环b/拉环c的全局变量

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

#### **2.设置触发与响应事件**

上一步，我们将变量拉环a/b/c的初始值设为了【false】，在后续的事件设置中，我们会一直用到响应事件【赋值】，根据不同的操作，通过【赋值】来调整三个变量的【false或true】。

*<mark style="background-color:yellow;">如为拉环a添加事件【按下】并【赋值=true】，那么这就意味着：【true】=按了拉环a；【false】=没按拉环a。由此通过【true/false】来判断某根拉环是否已被拉出。</mark>*

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

<mark style="background-color:orange;">**Part1：拉环a**</mark>

根据三根拉环的摆放位置，我们可以看出，无论是哪种操作顺序，拉动拉环a的结果只有一种（即序列帧火落下），不受拉环b与拉环c的影响，因此拉环a的事件设置比较简单。

1）选中拉环a图层-添加事件-按下

2）添加响应事件-赋值，为【按下拉环a】赋值【true】

3）继续添加响应事件-禁用事件，选择禁用【拉环a的按下事件】，也就是当前触发事件

*<mark style="background-color:yellow;">注：【禁用事件】的设置我们可以通俗理解为：仅允许拉环a被拉动一次。即拉动一次以后该事件会被禁止使用，避免出现玩家可以无限次拉动拉环a的情况。</mark>*

4）继续添加响应事件-从头播放拉环a的全部动画（位移缓动+透明度缓动）-显示并播放序列帧火落下-隐藏操作指引

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

<mark style="background-color:orange;">**Part2：拉环b**</mark>

拉环b受操作顺序的影响，需要分不同情况来设置事件，因此需要添加【条件判断】，来判断当前是哪种操作顺序。

首先选中拉环b图层-添加事件-按下

<mark style="color:red;">**条件判断1**</mark>

<div align="left"><figure><img src="/files/ESbeX0o3upJbC8SooRkr" alt=""><figcaption><p>【a-b-c】为正确操作顺序</p></figcaption></figure></div>

1）添加条件判断【拉环a=true】、【拉环c=false】

*<mark style="background-color:yellow;">注：也就是当拉环a已被按下，拉环c没被按下，即操作顺序为【a-b-c】时，按下拉环b会触发什么反馈</mark>*

2）同样，添加响应事件-赋值，为【按下拉环b】赋值【true】；添加禁用事件，选择禁用【拉环b的按下事件】

3）继续添加响应事件-从头播放拉环b的全部动画-显示并播放序列帧水落下-隐藏操作指引

4）添加响应事件-执行延迟，设置0.6s后从头播放石头的淡入动画

*<mark style="background-color:yellow;">注：0.6s即序列帧水落下的时长</mark>*

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

<mark style="color:red;">**条件判断2**</mark>

<div align="left"><figure><img src="/files/TDhOZ8ftANhLTfSHVhAB" alt=""><figcaption><p>【a-c-b】【c-a-b】都为错误操作顺序</p></figcaption></figure></div>

1）添加条件判断【拉环a=true】、【拉环c=true】

*<mark style="background-color:yellow;">注：也就是当拉环a和拉环c都被按下，即操作顺序为【a-c-b】或【c-a-b】时，按下拉环b会触发什么反馈</mark>*

2）同样添加响应事件-赋值，为【按下拉环b】赋值【true】；添加禁用事件，选择禁用【拉环b的按下事件】

3）继续添加响应事件 - 从头播放拉环b的全部动画- 显示并播放序列帧水落下-显示并播放序列帧金币③ - 隐藏序列帧金币② - 隐藏操作指引

4）添加响应事件-执行延迟，设置0.6s后从头播放石头的淡入动画 - 隐藏序列帧金币③

5）添加响应事件-执行延迟，设置1s后跳转到指定场景3，即失败结束页面

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

<mark style="color:red;">**条件判断3**</mark>

1）添加条件判断【拉环a=false】

*<mark style="background-color:yellow;">注：也就是当拉环a没有被按下时，按下拉环b会触发什么反馈（不受拉环c影响）</mark>*

2）添加响应事件 - 从头播放错误音效 - 播放震屏反馈<br>

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

<mark style="background-color:orange;">**Part3：拉环c**</mark>

拉环c受操作顺序的影响，需要分不同情况来设置事件，因此需要添加【条件判断】，来判断当前是哪种操作顺序。

首先选中拉环c图层-添加事件-按下

<mark style="color:red;">**条件判断1**</mark>

<div align="left"><figure><img src="/files/Xc1FTjg2iOX464Awk8pF" alt=""><figcaption><p>【a-b-c】为正确操作顺序</p></figcaption></figure></div>

1）添加条件判断【拉环b=true】

*<mark style="background-color:yellow;">注：因拉环b只有在拉环a已被拉出后才可拉动，所以我们只需要添加一个【拉环b=true】的条件判断，就可以代表拉环a和拉环b都已被按下。也就是当操作顺序为【a-b-c】时，按下拉环c会触发什么反馈</mark>*

2）同样添加响应事件-赋值，为【按下拉环c】赋值【true】；添加禁用事件，选择禁用【拉环c的按下事件】

3）继续添加响应事件 - 从头播放拉环c的全部动画 - 显示并播放序列帧金币① - 隐藏操作指引

4）添加响应事件-执行延迟，设置0.6s后显示并播放序列帧奖励金额

5）添加响应事件-执行延迟，设置1s后跳转到指定场景2，即成功结束页面

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

<mark style="color:red;">**条件判断2**</mark>

<div align="left"><figure><img src="/files/zyXHVCyLxJKFue0JfkDA" alt=""><figcaption><p>【a-c-b】【c-a-b】都为错误操作顺序</p></figcaption></figure></div>

1）添加条件判断【拉环b=false】

*<mark style="background-color:yellow;">注：也就是当拉环b没有被按下，操作顺序为【a-c-b】或【c-a-b】时，按下拉环c会触发什么反馈（实际不受拉环a影响）</mark>*

2）同样添加响应事件-赋值，为【按下拉环c】赋值【true】；添加禁用事件，选择禁用【拉环c的按下事件】

3）继续添加响应事件 - 从头播放拉环c的全部动画 - 显示并播放序列帧金币② - 隐藏序列帧金币① - 隐藏操作指引

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

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

1）全部制作完成后，建议将拉环操作顺序的6种可能性都一一试玩一遍，检查有无问题

2）还可对不同机型/不同语言/横竖屏进行整体预览

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

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

注：本视频为以上图文教程的**演示录屏**，仅有画面内容，未添加配音；

视频详细记录了本案例空白制作的操作过程，演示速度基本没有调整，方便您查看学习（如果您已能对某一步骤熟悉操作，可酌情跳过）

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

{% embed url="<https://mmp-cdn.rayjump.com/res_store/2042921/659649194b0d7.mp4>" %}

{% file src="/files/PcjltirzRxoNjHy2Vxsy" %}


---

# 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/qi-ta-yi-zhi-wan-fa-an-li/la-huan-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.