EN

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

#自由编辑器 #空白制作 #进阶难度 #全局变量

温馨提示：本篇教程主要讲解如何通过空白制作来做出"抽奖/抽卡"类玩法同时指定抽奖结果 的2D可玩素材，建议搭配DEMO食用效果更佳哦！

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

一、特征标签

  • 【制作难度】：⭐⭐⭐

  • 【适用产品】：通用

  • 【交互方式】：按下

  • 【自由度】：全自由

  • 【核心资产】：静帧图片/序列帧

  • 【核心功能】：按下-隐藏/显示素材；全局变量

二、效果预览

手机试玩效果最佳
竖屏
横屏

扫码试玩

点击试玩

点击试玩

三、玩法梳理

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

  1. 进入试玩，展示【初始卡牌】和【六选一指引动画】

  2. 玩家可点击打开任一卡牌，点击后，将播放对应的【翻牌反馈】

  3. 创意设置：玩家点击第1/2/4次，必定翻出金币；点击第3次，必定翻出松果

  4. 当玩家总计翻开4张卡牌(即集齐三个金币)后，播放【奖励反馈】，解锁宝箱

  5. 玩家点击宝箱，即跳转应用商店

四、制作思路

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

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

场景名称
场景1 - 核心玩法

效果预览

场景描述

六选一操作指引，当玩家总计翻开四张卡牌后解锁宝箱

核心资产

静帧图片：问号卡牌、灰色底牌、常规金币、发光金币、常规松果、发光松果、宝箱、进度条及坑位图、操作指引

序列帧：卡牌被翻开

音效：点击音效、点亮坑位音效、奖励音效、宝箱解锁音效

核心动画

手指指引：位移缓动+透明度缓动

卡牌下的金币/松果露出：淡入淡出&缩放缓动

进度条上的金币/松果被点亮：淡入淡出

宝箱弹出：淡入&旋转缓动&缩放缓动&位移缓动

结束光圈：放大出现&旋转缓动

核心事件

触发对象：问号卡牌

触发事件：按下&条件判断

响应事件：隐藏/显示素材；赋值

触发对象：场景

触发事件：条件判断

响应事件：禁用/启用事件；隐藏/显示素材

五、制作指南

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

Step1 - 场景搭建

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

1.全局设置

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

2.场景1

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

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

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

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

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

Step2 - 横竖屏适配

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

1.调整横屏排版

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

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

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

2.调整屏幕适配方式

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

Step3 - 动效设置

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

1.六选一指引：位移缓动+透明度缓动

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

  • 选中指引手图片[gf_hand]，添加动画-通用-位移缓动（点击指引）

  • 选中指引手组图层[hand_horizontal]，添加动画-通用-位移缓动（横向运动动画）

  • 选中指引手组图层[hand_vertical]，添加动画-通用-位移缓动（纵向运动动画）

  • 以上动画共同实现六选一指引的效果（为了过渡自然，还可添加透明度动画）。具体参数设置如下：

2.卡牌翻开序列帧

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

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

3.卡牌下的金币/松果露出：淡入淡出&缩放缓动

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

  • 以卡牌1下的金币为例，选中图层[Coin exposure_2]，添加退场动画-淡入淡出

  • 选择组图层[coin1]，添加通用动画-缩放缓动

  • 两个动画一起播放，实现物品露出突出的效果。具体参数设置如下

  • 依次复制两个动画，到卡牌1下的松果图层[Pinecones exposure_2]和[pinecones1]，这样卡牌1下两个可能出现的物品的露出动画就制作完成了

  • 同理，复制动画依次到卡牌2-卡牌6下对应的金币和松果图层上

4.进度条上的金币/松果被点亮：淡入淡出

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

  • 以第一个金币为例，选中图层[light up_2]，添加退场动画-淡入淡出，具体参数设置如下

  • 复制该动画，到第二个金币、第三个金币和第一个松果对应的图层上，快速完成制作

5.宝箱放大弹出：淡入&旋转缓动&缩放缓动&位移缓动

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

  • 选中宝箱图层[end_chest]，依次添加进场动画-淡入，和通用动画-旋转缓动&缩放缓动&位移缓动

  • 多个动画一起播放，共同实现宝箱弹出的系列效果。具体参数设置如下：

6.结束光圈：放大出现&旋转缓动

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

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

Step4 - 事件设置

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

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

🌟因为要实现：

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

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

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

要想实现以上效果，需要结合【全局变量】功能来实现。下图是对本案例全局变量用途的梳理，用于辅助理解

1.添加全局变量

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

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

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

2.为其中一张卡牌添加事件与条件判断

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

以卡牌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 (对应: 此时允许玩家点击下一卡牌)

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

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

3.快速复制事件给其他所有卡牌

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

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

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

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

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

4.在"场景1"添加条件判断与响应事件

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

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

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

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

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后：显示结束指引手指

5.结束画面跳转事件

  • 选中宝箱图层[end_chest]，添加事件-按下

  • 依次添加响应事件：上报试玩结束；跳转应用商店；从头播放一次点击音效

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

Step5 - 整体预览

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

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

最后更新于