> For the complete documentation index, see [llms.txt](https://doc.playturbo.cn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](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).

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

温馨提示：本篇教程主要讲解如何**通过空白制作来做出"抽奖/抽卡"类玩法同时指定抽奖结果 的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>