# 《翻牌开奖》空白制作教程

温馨提示：本篇教程主要讲解如何**通过空白制作来做出"抽奖/抽卡"类玩法同时指定抽奖结果 的2D可玩素材**，建议搭配[DEMO](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%252F676e978287e8e%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%253A4948725%252C%2522uid%2522%253A109685%252C%2522sct%2522%253A%2522pt_project_ps%2522%252C%2522env%2522%253A%2522p%2522%252C%2522cc%2522%253A%2522SG%2522%257D\&orientation=3\&name=\&language=en)食用效果更佳哦！

💡参照本案例的制作逻辑，您也可以迭代其他同类玩法的素材哦！

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

* 【制作难度】：⭐⭐⭐
* 【适用产品】：通用
* 【交互方式】：按下
* 【自由度】：全自由
* 【核心资产】：静帧图片/序列帧
* 【核心功能】：按下-隐藏/显示素材；全局变量

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

<table><thead><tr><th width="231.33333333333331">手机试玩效果最佳</th><th width="217">竖屏</th><th>横屏</th></tr></thead><tbody><tr><td><img src="/files/kM9zr8Perq9lqOyzmPEm" alt="" data-size="original"></td><td><img src="/files/c60v6OLg86amYahIcCSr" alt="" data-size="original"></td><td><img src="/files/FclU0J2jY4mWs0DdluyA" alt="" data-size="original"></td></tr><tr><td>扫码试玩</td><td><a href="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%252F676e978287e8e%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%253A4948725%252C%2522uid%2522%253A109685%252C%2522sct%2522%253A%2522pt_project_ps%2522%252C%2522env%2522%253A%2522p%2522%252C%2522cc%2522%253A%2522SG%2522%257D&#x26;orientation=3&#x26;name=&#x26;language=en">点击试玩</a></td><td><a href="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%252F676e978287e8e%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%253A4948725%252C%2522uid%2522%253A109685%252C%2522sct%2522%253A%2522pt_project_ps%2522%252C%2522env%2522%253A%2522p%2522%252C%2522cc%2522%253A%2522SG%2522%257D&#x26;orientation=3&#x26;name=&#x26;language=en">点击试玩</a></td></tr></tbody></table>

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

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

1. 进入试玩，展示【初始卡牌】和【六选一指引动画】
2. 玩家可点击打开任一卡牌，点击后，将播放对应的【翻牌反馈】
3. 创意设置：玩家点击第1/2/4次，必定翻出金币；点击第3次，必定翻出松果
4. 当玩家总计翻开4张卡牌(即集齐三个金币)后，播放【奖励反馈】，解锁宝箱
5. 玩家点击宝箱，即跳转应用商店

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

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

**场景拆分：**&#x6839;据上一部分的玩法梳理内容，我们将核心玩法统一做在一个场景里即可

<table data-full-width="false"><thead><tr><th width="170">场景名称</th><th>场景1 - 核心玩法</th></tr></thead><tbody><tr><td><strong>效果预览</strong></td><td><img src="/files/7tnpZrk6WWQyaGaIL4VV" alt="" data-size="original"></td></tr><tr><td><strong>场景描述</strong></td><td>六选一操作指引，当玩家总计翻开四张卡牌后解锁宝箱</td></tr><tr><td><strong>核心资产</strong></td><td><p><strong>静帧图片：</strong>问号卡牌、灰色底牌、常规金币、发光金币、常规松果、发光松果、宝箱、进度条及坑位图、操作指引</p><p><strong>序列帧：</strong>卡牌被翻开</p><p><strong>音效：</strong>点击音效、点亮坑位音效、奖励音效、宝箱解锁音效</p></td></tr><tr><td><strong>核心动画</strong></td><td><p><strong>手指指引</strong>：位移缓动+透明度缓动</p><p><strong>卡牌下的金币/松果露出</strong>：淡入淡出&#x26;缩放缓动</p><p><strong>进度条上的金币/松果被点亮</strong>：淡入淡出</p><p><strong>宝箱弹出</strong>：淡入&#x26;旋转缓动&#x26;缩放缓动&#x26;位移缓动</p><p><strong>结束光圈</strong>：放大出现&#x26;旋转缓动</p></td></tr><tr><td><strong>核心事件</strong></td><td><p><strong>触发对象</strong>：问号卡牌</p><p><strong>触发事件</strong>：按下&#x26;条件判断</p><p><strong>响应事件</strong>：隐藏/显示素材；赋值</p><hr><p><strong>触发对象</strong>：场景</p><p><strong>触发事件</strong>：条件判断</p><p><strong>响应事件</strong>：禁用/启用事件；隐藏/显示素材</p></td></tr></tbody></table>

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

\*核心内容为Step1【场景搭建】 & Step4【事件设置】

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

建议您在创建项目后，先将所有资产上传进【项目资产】内，方便后续添加使用

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

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

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

#### **2.场景1**

1）将核心玩法相关资产添加进场景1

2）调整各资产到合适的位置大小，根据资产类型对资产进行命名、编组、排序（详细内容可进项目内查看）

⚠️**注意：此类玩法的制作逻辑为 "在物品可能出现的位置上都添加该物品，然后隐藏初始状态不会出现的物品，通过事件设置来控制对应物品的显示"，以此来实现目标效果**

<mark style="color:orange;">因玩家点击顺序的不确定性，六张卡牌下都可能出现任一结果，所以要分别在六张卡牌下都添加金币和松果，然后设为隐藏状态</mark>

3）调整其他图层初始状态：将初始画面不需要显示的图层都设为"隐藏"状态，后续通过事件来控制这些图层的显示/隐藏（详细内容可进项目内查看）

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

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

### Step2 - 横竖屏适配 <a href="#tpuup" id="tpuup"></a>

完成所有竖屏的排版后，我们还需对"横屏的排版"以及"横竖屏的屏幕适配方式"进行调整

#### 1.调整横屏排版

1）切换至横屏模式，选中**所有最高层级**的图层

2）使用【**复用竖屏位置尺寸配置**】功能一键排版

3）然后再适当调整各图层的【位置】和【缩放比例】即可，让画面展示出完整的内容

<div align="center"><figure><img src="/files/r8CB6RzCLJg2yh6LxoSc" alt=""><figcaption></figcaption></figure> <figure><img src="/files/CNgYTVuePP7fg84iUIeD" alt=""><figcaption></figcaption></figure></div>

#### 2.调整屏幕适配方式 <a href="#tpuup" id="tpuup"></a>

本案例所有图层都默认居中适配，无需特别调整屏幕适配方式

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

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

本案例用到的动画和序列帧主要有：六选一指引动画、卡牌下的金币/松果露出动画、进度条上的金币/松果被点亮动画、宝箱放大弹出动画、结束光圈旋转动画、卡牌翻开序列帧。我们依次展开介绍

#### <mark style="background-color:yellow;">1.六选一指引：位移缓动+透明度缓动</mark>

💡做非直线的指引动画，制作逻辑是：给手指图片编组，在图片和组图层上分别设置位移动画(一个用来做横向的运动，一个用来做纵向的)，两个动画一起播放来实现效果。因此：

* 选中指引手图片\[gf\_hand]，添加动画-通用-位移缓动（点击指引）
* 选中指引手组图层\[hand\_horizontal]，添加动画-通用-位移缓动（横向运动动画）
* 选中指引手组图层\[hand\_vertical]，添加动画-通用-位移缓动（纵向运动动画）
* 以上动画共同实现六选一指引的效果（为了过渡自然，还可添加透明度动画）。具体参数设置如下：

<div><figure><img src="/files/LWywNot3I7clnUbIVtiZ" alt=""><figcaption><p>点击指引</p></figcaption></figure> <figure><img src="/files/1dbIsyA3RSyf8JOAkCb0" alt=""><figcaption><p>横向运动动画</p></figcaption></figure></div>

<div><figure><img src="/files/3GtcialfZmkaBEGs0ncn" alt=""><figcaption><p>纵向运动动画</p></figcaption></figure> <figure><img src="/files/yWqTDHRxl0heUqCMsxbY" alt=""><figcaption><p>透明度动画</p></figcaption></figure></div>

#### <mark style="background-color:yellow;">2.卡牌翻开序列帧</mark>

每一张卡牌被点击后，会播放对应卡牌被翻起的序列帧动画

因此，要复制六个同样的序列帧到六张卡牌上；然后先隐藏这些图层，后续通过事件设置来控制对应序列帧的显示播放

<div align="center"><figure><img src="/files/DxLRz5XzV9E9DgYLaCuN" alt=""><figcaption></figcaption></figure> <figure><img src="/files/tZaqCNdtG3ZEO2p64WSp" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:yellow;">3.卡牌下的金币/松果露出：淡入淡出&缩放缓动</mark>

每一张卡牌被点击翻起后，会显示并播放该卡牌下物品的露出动画

* 以卡牌1下的金币为例，选中图层\[Coin exposure\_2]，添加退场动画-淡入淡出
* 选择组图层\[coin1]，添加通用动画-缩放缓动
* 两个动画一起播放，实现物品露出突出的效果。具体参数设置如下
* 依次复制两个动画，到卡牌1下的松果图层\[Pinecones exposure\_2]和\[pinecones1]，这样卡牌1下两个可能出现的物品的露出动画就制作完成了
* 同理，复制动画依次到卡牌2-卡牌6下对应的金币和松果图层上

<div align="center"><figure><img src="/files/lAKGBdd469mOusl3EsG7" alt=""><figcaption></figcaption></figure> <figure><img src="/files/8R0DDifA5hLxMmpgY0ZB" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:yellow;">4.进度条上的金币/松果被点亮：淡入淡出</mark>

每一张卡牌被点击翻起后，进度条位置会播放对应物品亮起的动画

* 以第一个金币为例，选中图层\[light up\_2]，添加退场动画-淡入淡出，具体参数设置如下
* 复制该动画，到第二个金币、第三个金币和第一个松果对应的图层上，快速完成制作

<div align="center"><figure><img src="/files/qP53rmnXuxmieEje99sb" alt=""><figcaption></figcaption></figure> <figure><img src="/files/44yHdFq90czdj5bKoGke" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:yellow;">5.宝箱放大弹出：淡入&旋转缓动&缩放缓动&位移缓动</mark>

当翻开四张卡牌解锁宝箱后，会播放宝箱放大弹出的一系列动画（选做；可只做一个放大出现的动画）

* 选中宝箱图层\[end\_chest]，依次添加进场动画-淡入，和通用动画-旋转缓动&缩放缓动&位移缓动
* 多个动画一起播放，共同实现宝箱弹出的系列效果。具体参数设置如下：

<div align="center"><figure><img src="/files/9lc9szYCE9wBY9xHxy2O" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:yellow;">6.结束光圈：放大出现&旋转缓动</mark>

当宝箱弹出后，会伴随光圈闪动的效果（选做）

* 选中光圈图层\[light]，依次添加进场动画-放大出现和通用动画-旋转缓动。具体参数设置如下：

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

####

### <mark style="background-color:red;">Step4 - 事件设置</mark> <a href="#umduz" id="umduz"></a>

完成所有内容的搭建后，我们需要通过设置事件来串联起整个试玩流程

本案例核心的事件设置集中在"所有可被点击的卡牌图片"以及"场景1"上。接下来，我们按顺序依次讲解。

🌟因为要实现：

a. 计算点击次数：判断玩家的点击次数，从而播放对应的反馈（卡牌）

b. 交互开关：在播放翻牌反馈的过程中禁止玩家点击下一张卡牌，待反馈播放完毕再允许玩家点击（做个时间差）

c. 计算奖励数量：判断出现的奖励数量，从而播放对应的反馈（进度条）

**要想实现以上效果，需要结合**[**【全局变量】**](/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)**功能来实现。下图是对本案例全局变量用途的梳理，用于辅助理解**

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

#### <mark style="color:red;">1</mark><mark style="color:red;">**.添加全局变量**</mark>

1）首先，点击上方【全局变量】图标，添加变量

2）填写变量名称如times，并设置变量类型与初始值，保存，留作后续使用

3）按照同样的操作方法，依次添加其他类型的变量

<div align="center"><figure><img src="/files/1flyLqAaFNuz9uh1plYy" alt="" width="283"><figcaption></figcaption></figure> <figure><img src="/files/6T2EEn1xingFWI7ezesA" alt=""><figcaption></figcaption></figure></div>

#### <mark style="color:red;">2.为其中一张卡牌添加事件与条件判断</mark>

<mark style="color:orange;">根据玩法流程可知，六张卡牌的事件设置逻辑都是相同的，因此可先集中设置好一张卡牌的事件，再通过事件的复制&粘贴功能快速完成剩余五张卡牌的制作！</mark>

以卡牌1 为例：

1）选中图层\[yellowcard1]，添加事件-按下

2）**添加条件判断1**：times≠3 且 times≤4 (对应: 当玩家第1/2/4次点击卡牌1时)

3）添加响应事件：

* 隐藏黄色卡牌1；显示并播放卡牌1翻起的序列帧；显示灰色底牌1；显示金币1（默认同时播放金币的露出动画）；从头播放1次按下音效
* 赋值，赋值times+1 (对应: 玩家点击了1次)
* 赋值，赋值tap=false (对应: 此时禁止玩家点击下一卡牌)
* 执行延迟0.5s后，赋值，赋值reward+1 (对应: 点亮1个奖励)
* 执行延迟0.5s后，赋值，赋值tap=true (对应: 此时允许玩家点击下一卡牌)

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

4）可复制并粘贴以上事件，并**修改条件判断2**：times=3 (对应: 当玩家第3次点击卡牌1时)

5）<mark style="color:orange;">因两个条件判断主要是用来区分玩家的点击次数，从而显示对应的物品，因此响应事件几乎是一样的，只需将显示对象由"金币"修改为"松果"即可，其他无需更改</mark>

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

#### <mark style="color:red;">3.快速复制事件给其他所有卡牌</mark>

1）前面有提到六张卡牌的制作逻辑是相同的，因此，我们点击"**复制**"按钮复制卡牌1的整个"按下"事件

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

2）按住Ctrl键，全选其他所有卡牌图层

3）点击上方"粘贴"按钮，选择【**仅粘贴图层事件**】。这样，所有卡牌都有了一套相同逻辑的事件与条件判断

4）然后逐一微调每张卡牌对应的响应对象即可

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

以上，我们就完成了所有卡牌的"按下"事件。接下来，我们通过场景上的条件判断来完成后续效果的实现。

#### <mark style="color:red;">4.在"场景1"添加条件判断与响应事件</mark>

选中场景1 - 添加事件 - 条件判断

**4.1 条件判断1-2：是否允许玩家点击**

1）编辑条件判断1：tap=true (对应: 允许玩家点击下一卡牌)；依次添加响应事件：启用卡牌1-6的按下事件

2）编辑条件判断2：tap=false (对应: 禁止玩家点击下一卡牌)；依次添加响应事件：禁用卡牌1-6的按下事件；并隐藏手指指引

<div align="center"><figure><img src="/files/4Caf1PwyzgvocXIeT7DV" alt=""><figcaption></figcaption></figure> <figure><img src="/files/hLo1YzCTxdwznjS1gMaW" alt=""><figcaption></figcaption></figure></div>

**4.2 条件判断3-6：判断出现的奖励数量，播放对应反馈**

1）编辑条件判断3：reward=1 (对应: 点亮1个奖励)；依次添加响应事件：隐藏第一个置灰金币，显示第一个高亮金币，从头播放一次反馈音效

2）同理，编辑条件判断4：reward=2 (对应: 点亮2个奖励)；依次添加响应事件：隐藏第二个置灰金币，显示第二个高亮金币，从头播放一次反馈音效

3）编辑条件判断5：reward=3 (对应: 点亮3个奖励)；依次添加响应事件：显示第一个高亮松果，从头播放一次反馈音效

4）编辑条件判断6：reward=4 (对应: 点亮4个奖励)；依次添加响应事件：

* 隐藏第三个置灰金币，显示第三个高亮金币，从头播放一次反馈音效
* 执行延迟0.5s后：隐藏黑色宝箱图标，显示宝箱并从头播放宝箱弹出动画，从头播放一次胜利和正确反馈音效
* 执行延迟0.6s后：显示遮罩；显示光圈
* 执行延迟0.6s后：显示结束指引手指

<div align="center"><figure><img src="/files/mWFRuWdUX58EkeOUE8Kx" alt=""><figcaption></figcaption></figure> <figure><img src="/files/8NT74GrrGL3TQTXM3huE" alt=""><figcaption></figcaption></figure></div>

#### 5.结束画面跳转事件

* 选中宝箱图层\[end\_chest]，添加事件-按下
* 依次添加响应事件：上报试玩结束；跳转应用商店；从头播放一次点击音效

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

以上，就是本案例用到的全部事件。完成所有事件设置，我们的素材就制作完成了。

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

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

1）建议在制作过程中，每完成一部分操作，就及时预览，检查设置是否正确

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

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


---

# 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/chou-jiang-wan-fa-an-li/fan-pai-kai-jiang-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.