# 《Skip-Bo》空白制作教程

👉[案例预览](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%252Fps%252Fpreview%252F24%252F12%252F27%252F676e649f2ebe2%252Findex.html%253Floading%253D1%2526preview%253Dtrue%2526lang%253Dzh-cn%2526preview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526loading%253D1%26mw_test%3D0%26is_browser_tips%3D1%26ptloading%3D1%26track_data%3D%257B%2522pid%2522%253A2136076%252C%2522uid%2522%253A109685%252C%2522sct%2522%253A%2522pt_project_ps%2522%252C%2522env%2522%253A%2522p%2522%252C%2522cc%2522%253A%2522CN%2522%257D\&orientation=3\&name=\&language=en)

复杂玩法的制作流程通常分为<mark style="color:red;">**4个步骤**</mark>，其中(1)和(2)是动手制作前的准备工作：

(1) 玩法逻辑梳理

(2) 玩法流程拆分

(3) 资源准备和搭建

(4) 逻辑设置步骤详解

## <mark style="background-color:orange;">STEP1 玩法逻辑梳理</mark>

我们在制作之前需要将玩法和流程进行简单的梳理

### **1. 出牌顺序**

玩家>>>对手>>>

* 玩家错误操作>>>对手>>>玩家失败
* 玩家正确操作>>>玩家胜利

### **2. 初始牌面**

对手牌库：1/3/4/5/6

对手手牌：5/12/随便/随便/随便

我的牌库：3/4/8/9/10

我的手牌：1/2/7/7/7

### **3. 交互操作**

玩家点击普通卡牌，进行出牌或弃牌

玩家拖动skipbo到出牌区进行出牌（自由拖动两叠区域）

### **4. 具体流程内容**

<table><thead><tr><th width="120">场景</th><th>流程内容</th></tr></thead><tbody><tr><td>场景1</td><td><p><strong>1）操作指引A</strong></p><p>出现点击指引，引导玩家点击手牌中的1，玩家正确操作后，操作指引A消失</p><p>注意：此时点击其他卡牌，会有错误操作反馈</p><p><strong>2）操作指引B</strong></p><p>出现点击指引，引导玩家点击手牌中的2，玩家正确操作后，操作指引B消失</p><p>注意：此时点击其他卡牌，会有错误操作反馈</p><p><strong>3）操作指引C</strong></p><p>出现点击指引，引导玩家点击牌库中的3，玩家正确操作后，操作指引C消失</p><p>注意：此时点击其他卡牌，会有错误操作反馈</p><p><strong>4）操作指引D</strong></p><p>出现点击指引，引导玩家点击牌库中的4，玩家正确操作后，操作指引D消失</p><p>注意：此时点击其他卡牌，会有错误操作反馈</p><p><strong>5）弃牌操作指引E</strong></p><p>突出弃牌区，出现点击指引，引导玩家点击手牌中的7，玩家正确操作后，操作指引E消失</p><p>注意：此时玩家手上3张7，都可以点</p><p><strong>6）对手操作</strong></p><p>对手出牌库的1，放在出牌区另一叠位置（牌库下一张牌是3）</p><p>对手出牌5，放在第一叠牌上方，刚好接龙4</p><p>对手弃牌12，结束回合</p><p><strong>7）玩家抽牌</strong></p><p>抽牌，抽到三张：skipbo/4/12</p><p><strong>8）skipbo拖牌指引</strong></p><p>出现拖动操作指引，引导玩家拖动skipbo到5上面，拖动时消失，松手时出现，skipbo被使用后指引彻底消失。</p><p><strong>9-1）玩家正确操作流程</strong></p><p>正确操作触发条件：拖动skipbo去了5那里，变成了6</p><p>正确操作：skipbo变成6-7-8-9-10（牌库=0，胜利）</p><p>进入场景2</p><p><strong>9-2）玩家错误操作流程</strong></p><p>正确操作触发条件：拖动skipbo去了1/其他，变成了2</p><p>-出现弃牌操作指引E，突出弃牌区，出现点击指引，引导玩家点击手牌中的任意牌</p><p>-对手牌库3-4-5-6获得胜利</p><p>进入场景3</p></td></tr><tr><td>场景2</td><td><p><strong>胜利结束页面：</strong></p><p>logo+胜利反馈+下载按钮(Install)</p></td></tr><tr><td>场景3</td><td><p><strong>失败结束页面：</strong></p><p>logo+失败反馈+下载按钮(Install)</p></td></tr></tbody></table>

## <mark style="background-color:orange;">STEP2 玩法流程拆分</mark>

在制作之前，我们可以判断一下，目前的具体流程可以怎么拆分整理

简单来看，流程可以分为以下四部分：

<table data-header-hidden><thead><tr><th width="329"></th><th></th></tr></thead><tbody><tr><td>第一部分：简单出牌</td><td>对应具体流程内容1-4</td></tr><tr><td>第二部分：简单弃牌和对手出牌</td><td>对应具体流程内容5-7</td></tr><tr><td>第三部分：skipbo双线程延伸固定结果</td><td>对应具体流程内容8-9</td></tr><tr><td>第四部分：结束</td><td>对应胜利结束页面/失败结束页面</td></tr></tbody></table>

## <mark style="background-color:orange;">STEP3 资源准备和搭建</mark>

### **1. 资源导入**

### **2. 全局设置**

背景音乐、背景图片、语言

### **3. 场景搭建**

场景1：核心玩法

场景2：胜利结束页面

场景3：失败结束页面

### **4. 动效制作（动画&特效）**

### **5. 音频添加（bgm&音效）**

\*本案例主要针对全局变量功能，动画、特效等均不展开细说

## <mark style="background-color:orange;">STEP4 逻辑设置-步骤详解</mark>

### **1. 简单出牌（流程内容1-4）**

#### **1）内容**

* 出现点击指引，引导玩家点击卡牌1： ①玩家正确操作后，操作指引A消失；②玩家点击其他卡牌，错误操作反馈
* 卡牌2、卡牌3、卡牌4同理
* 每种卡牌预设三种状态：可点击、不可点击、置于出牌区，通过事件将其串联起来

#### **2）操作步骤详解（以卡牌2为例）**

2-1）<mark style="color:red;">图层2\_off</mark>（不可点击的状态/有错误反馈动画）：

* 为卡牌2添加事件【按下】，设置响应事件为【从头播放音效】，设置响应事件为【从头播放全部动画】。即当卡牌2不可点击时，出现错误操作反馈。

![](/files/ZS1ysquB6wdDkdZwuwFV)

2-2）<mark style="color:red;">图层2\_on</mark>（可点击状态/有位移动画）：

* 禁用卡牌2按下的事件——保证玩家有效点击卡牌2一次，禁止反复点击，保证试玩体验
* 播放卡牌2移动到出牌区的音效和动画，播放手指淡出的动画，延迟0.2s（卡牌2移动到出牌区的时间）后，播放正确操作的粒子效果和音效——玩家正确操作后，操作指引B消失，出现正确操作反馈
* 延迟0.3s（卡牌2成功置于出牌区）后，隐藏2\_on，显示2和3\_on，同时隐藏3\_off，显示下一个操作指引C动画——玩家正确操作后，隐藏可点击状态下的卡牌2，显示出牌区的无动画无事件卡牌2，同时显示可点击状态下的卡牌3，隐藏不可点击状态下的卡牌3，并显示操作指引动画C

![](/files/bmHsljoljIsvQ0kHISfc)

2-3）<mark style="color:red;">图层2</mark>（置于出牌区的状态/无动画）：

无动画无事件

![](/files/32cok1G9LwjPXKjvXjiL)

### **2. 简单弃牌和对手出牌（流程内容5-7）：**

#### **1）内容**

* 突出弃牌区，出现点击指引E，引导玩家点击手牌中的7 - 玩家正确操作后，操作指引E消失（注意：此时玩家手上3张7，都可以点）- 对手操作 - 玩家抽到三张牌

#### **2）**<mark style="color:red;">**难点**</mark>

**2-1）玩家无论弃掉哪张7，都会导向同一个结果——对手操作，玩家抽到三张牌 →&#x20;**<mark style="color:red;">**全局变量>1**</mark>

**2-2）点击玩家手上不同的7，在抽牌环节所展现的动画效果是不一样的 →&#x20;**<mark style="color:red;">**全局变量>2**</mark>

#### **3）操作步骤详解**

3-1）<mark style="color:red;">全局变量>1</mark> 原理说明：玩家无论选择哪张7，要发生的结果都是同一个，所以为了节省响应事件量，避免重复制作，可以使用全局变量。为每张“7”赋值，添加一个【条件判断】即可

<table><thead><tr><th width="392">图示</th><th>步骤</th></tr></thead><tbody><tr><td><img src="/files/7Q4YIoaaXEvcDVudfHWn" alt=""></td><td><ul><li>【添加变量】，填写变量名称Opponents_Turn，选择变量类型为【布尔值】，选择初始值为【false】，点击保存</li></ul></td></tr><tr><td><img src="/files/4BN9Vwjf5BGvRFL2hTZI" alt=""></td><td><ul><li>为图层7_1_on添加事件【按下】，设置响应事件为【执行延迟0.5s】（卡牌7移动到弃牌区的时间），设置响应事件为【赋值】，选择全局变量，运算方法“=”，布尔值选择【true】，保存——即将卡牌7_1_on设为与初始值相反的值</li><li>同理，我们为图层7_2_on、7_3_on添加同样的赋值</li></ul></td></tr><tr><td><img src="/files/5f1gVbRFHHGxraKuQhJO" alt=""></td><td><ul><li>在场景1下添加事件【条件判断1】，添加条件为当全局变量Opponents_Turn=true</li></ul></td></tr><tr><td><img src="/files/fHYCKXXc7Uh9D11ewcve" alt=""><img src="/files/47crIfHeX7KgPdgihYHn" alt=""></td><td><ul><li>设置响应事件为从头播放1的动画和音效，隐藏文本数字05，显示文本数字04——对手卡牌1移动到出牌区，对手牌库中的牌由05张变为04张</li></ul></td></tr><tr><td><img src="/files/OuqOmEzxpH3c9TJFVLn1" alt=""><img src="/files/noI1ZEeaToRm677rU4Ng" alt=""></td><td><ul><li>设置执行延迟0.5s后，隐藏对手有动画的卡牌1，显示对手无动画的卡牌1，然后显示并播放对手手牌card1与卡牌5的动画（card1即对手卡牌5的背面），播放对手手牌区card1消失的动画——对手手牌区的5移动到出牌区</li></ul></td></tr><tr><td><img src="/files/mFKfZOCLAhpaenygheCH" alt=""><img src="/files/UFro0HpPpgeGTAsZNwqv" alt=""></td><td><ul><li>再设置执行延迟0.5s后，隐藏对手手牌区card1，显示置于出牌区的卡牌5，然后显示并播放对手手牌card2与卡牌12的动画（card2即对手卡牌12的背面）——对手手牌区的12移动到弃牌区。对手出牌结束</li></ul></td></tr><tr><td><img src="/files/8sdKmJgig7JaqDJZ3PlQ" alt=""></td><td><ul><li>为了减少同一条件判断下的事件量，方便我们更清晰地理解事件，所以为“玩家抽到三张牌”单独设置了全局变量（无实质意义，仅为方便参考事件）</li><li>【添加变量】，填写变量名称player_draw，选择变量类型为【布尔值】，选择初始值为【false】，点击保存</li></ul></td></tr><tr><td><img src="/files/wzRzd8tMXP9uktn5L66a" alt=""></td><td><ul><li>继续在条件判断1下设置响应事件，再执行延迟0.5s后（对手出牌结束后），设置响应事件为【赋值】，选择全局变量，运算方法“=”，布尔值选择【true】，保存——即将条件判断1设为与初始值相反的值</li></ul></td></tr><tr><td><img src="/files/EY04YRI7FDqzxzlElemq" alt=""></td><td><ul><li>继续在场景1下添加【条件判断2】，添加条件为当全局变量player_draw=true</li></ul></td></tr><tr><td><img src="/files/dPJXp7a1ZkjUhPl6xRSl" alt=""><img src="/files/dQGxJVPLfIbFL5OYCYiQ" alt=""></td><td><ul><li>设置响应事件，隐藏三张可点击状态下的卡牌7，依次显示手牌skipbo、手牌4、手牌12，同时隐藏手牌区可移动的卡牌7与第一张不可点击状态下的卡牌7，显示不可点击状态下的其余卡牌7</li></ul></td></tr><tr><td><img src="/files/7fXMIPEBCOgCP32ip6Iw" alt=""></td><td><ul><li>设置执行延迟0.5s后，隐藏公共牌库下的三张卡牌（卡牌skipbo、卡牌4、卡牌12），显示手牌（卡牌skipbo、卡牌4、卡牌12）及手指指引，禁用除skipbo卡牌外其余四张卡牌按下的事件</li></ul></td></tr></tbody></table>

全局变量1（玩家弃掉一张7 - 对手操作 - 玩家抽到三张牌）的操作步骤到此结束

3-2）<mark style="color:red;">全局变量>2</mark> 原理说明：点击玩家手上不同的7，出现的动画效果是不同的，即不同的操作有不同的结果。所以针对此类多线程的事件，可以使用全局变量。依旧为每张“7”赋值，添加一个【条件判断】即可

| 图示                               | 步骤                                                                                                                                                                                                   |
| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/T89MHaBVH6plnYUP9Dka) | <ul><li>说明：手牌3张7，若玩家选择弃掉左边的7（手牌7\_1\_on），则在抽牌环节无动画发生；</li><li>若玩家选择弃掉中间的7（手牌7\_2\_on），则在抽牌环节会出现左边7向右移动到原始中间7的位置上；</li><li>若玩家选择弃掉右边的7（手牌7\_3\_on），则在抽牌环节会出现左边7与中间7一同向右移动，最终定在原始中间7与右边7的位置上</li></ul> |
| ![](/files/aBax7PJ4SNlMQ1yh4avd) | <ul><li>【添加变量】，填写变量名称choose7，选择变量类型为【数值】，选择初始值为【0】，点击保存</li></ul>                                                                                                                                    |
| ![](/files/K1ARFYReyOdmH8xGZwnr) | <ul><li>为图层7\_1\_on设置响应事件为【赋值】，选择全局变量，运算方法“=”，数值选择【1】，保存——即卡牌7\_1\_on代表数字1</li><li>同理，我们为图层7\_2\_on、7\_3\_on添加同样的赋值，让卡牌7\_2\_on代表数字2，卡牌7\_3\_on代表数字3</li></ul>                                       |
| ![](/files/UwGqyGx18tqF5rt1nfmt) | <ul><li>在场景1下添加【条件判断6】，添加条件为当全局变量player\_draw=true并且choose7=1</li><li>即当玩家选择弃掉左边的7时</li><li>显示不可点击状态下的中间7与右边7</li></ul>                                                                              |
| ![](/files/SxmUDR1ezNtXhIpV115M) | <ul><li>在场景1下添加【条件判断3】，添加条件为当全局变量player\_draw=true并且choose7=2</li><li>即当玩家选择弃掉中间的7时</li><li>显示左边7与右边7，同时播放左边7向右移动的动画</li></ul>                                                                       |
| ![](/files/p4oAnrrB9UkU5CyQiQXP) | <ul><li>在场景1下添加【条件判断4】，添加条件为当全局变量player\_draw=true并且choose7=3</li><li>即当玩家选择弃掉右边的7时</li><li>显示左边7与中间7，同时播放左边7与中间7一同向右移动的动画</li></ul>                                                                 |

全局变量2（玩家弃掉一张7 - 出现相应动画）的操作步骤到此结束

### **3. skipbo双线程延伸固定结果（流程内容8-9）**

#### **1）内容**

* 出现拖动操作指引，引导玩家拖动skipbo到5上面：①玩家拖到5上面，正确操作，胜利，进入场景2；②玩家拖到1上面，错误操作，失败，进入场景3
* 操作相对简单，因此单独设置事件即可

#### **2）操作步骤详解**

2-1）玩家拖动skipbo到5上面，变成了6，指引玩家继续点击7-8-9-10，牌库=0，胜利

| 图示                               | 步骤                                                                                                                                                                                                                                                     |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](/files/6JNa4SvDM5KFSQFoQ6hZ) | <ul><li>选中图层skipon\_on</li><li>添加事件【拖拽到指定位置】</li><li>编辑拖拽区域为出牌区左侧第一张卡牌的位置，即卡牌5所在的位置</li><li>拖拽方向设置为【任意方向】</li></ul>                                                                                                                                    |
| ![](/files/vdglj1uWYpHrdY9W5gjL) | <ul><li>设置响应事件，当玩家成功拖动skipbo到5上面，开始播放成功的音效与粒子特效</li><li>同时隐藏卡牌skipbo，显示卡牌6</li><li>隐藏不可点击状态下的卡牌7，显示两张新的可点击状态下的7</li><li>启用设置好的【按下】事件，并显示手指指引</li><li>隐藏第二回合弃牌环节的手牌（因为玩家已选择正确，所以未触发第二回合）</li><li>玩家点击两张手牌中任意一张7，然后根据操作指引，继续点击8-9-10，完成操作，获得胜利</li></ul> |

2-2）玩家拖动skipbo到1上面，变成了2，指引玩家点击手牌中的任意牌弃掉，对手出牌，对手牌库=0，失败

| 图示                               | 步骤                                                                                                                                                                                                                                                                                                                                                          |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/Sc5zKK5oYZLh1YHS1j6e) | <ul><li>选中图层skipon\_on</li><li>添加事件【拖拽到指定位置】</li><li>编辑拖拽区域为出牌区左侧第二张卡牌的位置，即卡牌1所在的位置</li><li>拖拽方向设置为【任意方向】</li></ul>                                                                                                                                                                                                                                         |
| ![](/files/jCN95RGRZfBT8w0926If) | <ul><li>设置响应事件，当玩家成功拖动skipbo到1上面，开始播放成功的音效与粒子特效</li><li>同时隐藏卡牌skipbo，显示卡牌2</li><li>显示第二回合弃牌环节的手牌（手牌4、手牌12、手牌7、手牌7）</li><li>隐藏第一回合、第二回合所有素材</li><li>隐藏放置成功的粒子特效与卡牌6</li><li><mark style="color:red;">显示新的手指操作指引，引导玩家从四张手牌中弃掉任意一张：玩家无论弃掉哪张牌，都会导向同一个结果——对手操作获得胜利，玩家失败 → 全局变量>3</mark></li><li><mark style="color:red;">内在逻辑同全局变量1一样，因此不再做步骤详解</mark></li></ul> |

### **4. 结束（胜利结束页面/失败结束页面）**

#### **1）胜利结束页面（场景2）**

玩家正确操作后，在场景1下的最后一步操作是点击牌库中的最后一张牌，即卡牌10。因此，我们要给卡牌10设置事件，并将响应事件设为【跳转到下一场景】，进入胜利结束页面

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

#### **2）失败结束页面（场景3）**

玩家错误操作后，面对第二回合的弃牌环节，玩家点击四张手牌中的任意一张，都会导致对手获得胜利（前面有提到，此处用到了全局变量Opponents\_win）

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

因此，在场景1下添加【条件判断5】，添加条件为当全局变量Opponents\_win=true，并将响应事件设为【跳转指定场景3】，进入失败结束页面

&#x20;![](/files/LP4TNKWZ45F7wpATuje3)     ![](/files/skZtNrzWhoLRgI58Dptm)

#### **3）操作步骤详解**

* 当玩家正确操作后，在点击卡牌7时，三张7都是可点击的状态：无论玩家点击哪张7，在胜利结束页面都要空出对应的位置，涉及跨场景控制事件，因此，此处也需要用到<mark style="color:red;">全局变量>4</mark>

![](/files/qPzCN2krEXkXFnFcHpSD)      ![](/files/39iPHUlBF3C0as9EkrJQ)

&#x20;

| 图示                               | 步骤                                                                                                                                                                                                          |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/RZHhJFysIWXtLvVHp3pm) | <ul><li>【添加变量】，填写变量名称choose7\_round2，选择变量类型为【数值】，选择初始值为【0】，点击保存</li></ul>                                                                                                                                   |
| ![](/files/ckbvcDGKdxbJbNdS00Wk) | <ul><li>分别为图层7\_2\_new（中间7）、7\_2\_new（右边7）、7（弃牌区7）赋值</li><li>7\_2\_new=1</li><li>7\_2\_new=2</li><li>7=3</li></ul>                                                                                          |
| ![](/files/Tudus7j8FXFvEP348rOL) | <ul><li>在场景2下添加【条件判断】</li><li>条件判断1：添加条件为当全局变量choose7\_round2=1，隐藏素材7\_2，即隐藏中间7</li><li>条件判断2：添加条件为当全局变量choose7\_round2=2，隐藏素材7\_3，即隐藏右边7</li><li>条件判断3：添加条件为当全局变量choose7\_round2=3，隐藏素材7，即隐藏弃牌区7</li></ul> |

* 同理，当玩家错误操作后，面对第二回合的弃牌环节：无论玩家弃掉四张手牌中的哪一张，在失败结束页面都要空出对应的位置，涉及跨场景控制事件，因此，此处也需要用到<mark style="color:red;">全局变量>5</mark>
* 内在逻辑同全局变量>4一样，因此不再做步骤详解


---

# 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-pai-wan-fa-an-li/skipbo-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.