《纸牌接龙》空白制作教程
#自由编辑器 #空白制作 #进阶难度 #全局变量
最后更新于
#自由编辑器 #空白制作 #进阶难度 #全局变量
最后更新于
温馨提示：本篇教程主要讲解如何通过空白制作来做出"纸牌接龙"玩法的2D可玩素材，建议搭配食用效果更佳哦！
*如需DEMO，可联系您的创意顾问 推到您的Playturbo账号中
【制作难度】：⭐⭐⭐
【适用产品】：纸牌接龙
【交互方式】：拖拽、按下
【自由度】：半自由
【核心资产】：静帧图片
【核心功能】：拖拽到指定位置 - 隐藏拖拽纸牌/显示目标位置纸牌；全局变量
扫码试玩
我们在开始制作之前先对本案例的玩法逻辑进行简单的梳理：
1）进入试玩，扑克布局展示如图。出现【操作指引】，引导玩家拖动红心A到上方坑位；
2）此时，玩家操作的可能性有3种，都可拖动：
拖动红心A到目标坑位，播放【成功反馈】，露出下一张 方片8；
拖动黑桃4到红心5下方，播放【接龙反馈】，露出下一张 黑桃2；
拖动红心7到黑桃8下方，播放【接龙反馈】，露出下一张 梅花A；
3）玩家拖动梅花A到目标坑位，播放【成功反馈】，露出下一张 方片9；
4）此时，玩家操作的可能性有2种，都可拖动：
拖动方片9到梅花10下，播放【接龙反馈】，露出下一张 黑桃3；
再拖动红7黑8到方9花10下，播放【接龙反馈】，露出下一张 方片A；
拖动红7黑8到方片9下，播放【接龙反馈】，露出下一张 方片A；
再拖动7-8-9到梅花10下，播放【接龙反馈】，露出下一张 黑桃3；
5）当玩家成功拖动方片A到目标坑位后，播放【成功反馈】，露出下一张 方片J，并判定试玩结束；
6）诱导跳转：出现【操作指引】，引导玩家拖动梅花10(9-8-7)到方片J下，此时玩家全屏按下，即跳转商店
核心思想：场景拆分逻辑清晰，图层结构简单，单个场景里的动画和事件尽可能少
场景拆分：因本案例都在一种牌型上交互，为了便于理解&操作，我们只用1个场景来制作
效果图
场景描述
玩家根据游戏规则完成纸牌接龙，当成功拖动方片A到目标坑位后，结束试玩
核心资产
静帧图片：各花色扑克牌、扑克牌背面图、花色A坑位图、分数面板、指引手
粒子：星光粒子
音频：翻牌音效、错误音效、正确音效、放置音效
核心动画
入场&结束指引手：位移缓动、透明度缓动、旋转缓动
无操作指引手：淡入、位移缓动
翻牌效果：左右展开
错误反馈：旋转缓动
核心事件
触发对象：可被拖拽的纸牌
触发事件：拖拽到指定位置
响应事件：隐藏拖拽纸牌/显示目标位置纸牌
触发对象：不可被拖拽的纸牌
触发事件：按下
响应事件：播放错误反馈
触发对象：场景
触发事件：条件判断
响应事件：隐藏旧分数/显示新分数
*核心内容为Step1【场景搭建】 & Step4【事件设置】
建议您在创建项目后，先将所有资产上传进【项目资产】内，方便后续添加使用
1）在【全局设置】中添加背景音乐、背景图片
2）在【全局场景】下添加常驻下载按钮、logo等产品信息，并调整位置大小、合理编组
1）在场景1中添加核心玩法相关资产：
图片：各花色扑克牌、扑克牌背面图、花色A坑位图、分数面板、指引手
音频：翻牌音效、错误音效、正确音效、放置音效
2）调整各资产到合适的位置大小，并根据资产类型对资产进行命名、编组、排序
⚠️注意:
a. 此类玩法(指在玩家交互后,物品位置发生改变的玩法)的制作逻辑为 "在物品可能出现的位置上都添加该物品，然后先隐藏放置后的物品，再通过事件设置显示放置后的物品，隐藏原位置的物品"，以此来实现目标效果
因此，对于可拖拽的纸牌，应被添加在各个可能出现的位置上。以纸牌黑桃4为例，除了初始状态位于第三列位置，它还可能被放置于第一列的红心5之下，因此黑桃4就需要添加两次，分别放置于对应的组内
b. 此外在本案例中，我们要实现"被拖拽的纸牌，其层级是在其他所有纸牌之上的"。因图层受前后顺序的层级影响，所以可拖拽的纸牌不能只有一张，还需要额外再添加一张，用来处理层级问题
处理方式：一张作为"可被拖拽的"，另一张作为"不可被拖拽的/仅在原地显示的"，然后将前者编组，层级置于后者的上方
3）调整图层初始状态：显示"初始就要展示"的图层；隐藏"初始不展示 要通过玩家交互后才显示"的图层
完成竖屏的排版后，我们还需对"横屏的排版"以及"横竖屏的屏幕适配方式"进行调整
1）切换到横屏模式，选中所有最高层级的图层
2）使用【复用竖屏位置尺寸配置】功能一键排版，然后再适当调整各图层的【位置】和【缩放比例】即可，让画面展示出完整的内容
3）全局场景同理
若想让素材完美适配各类机型，还可对部分图层的适配方式进行调整
在本案例中，我们想要竖屏下的产品信息组始终位于各机型屏幕的底部，所以我们调整其"屏幕适配方式"为居中贴底适配（其他图层默认居中适配，无需调整）
本案例用到的动画和粒子特效如下，我们依次展开介绍：
手指指引动画、翻牌旋转动画、错误点击旋转动画、成功放置后的星光粒子特效
选中入场指引手图片[gf_hand]，添加动画-通用-旋转缓动
选中入场指引手组图层[gf_begin]，添加动画-通用-位移缓动&透明度缓动
三个动画共同实现入场指引效果(若只需要简单的效果，使用一个位移动画即可)。具体参数设置如下：
因入场指引和结束指引的动画是类似的，分别复制以上两个图层的动画到结束指引手上，微调参数即可
选中通用指引手组图层[gf_common]，添加动画-通用-位移缓动，添加动画-进场动画-淡入，作为无操作时的通用指引动画。参数设置如下：
选中其中一张待翻开的纸牌，添加动画-进场动画-左右展开，作为纸牌出现的翻转动画。参数设置如下：
复制该动画，按住Ctrl键选中其余所有待翻开的纸牌图层，一键粘贴即可
当点击不可拖拽的纸牌时，会触发纸牌晃动的错误反馈
选中其中一张不可拖拽的纸牌，添加动画-通用-旋转缓动。参数设置如下：
同理，复制该动画，按住Ctrl键选中其余所有不可拖拽的纸牌图层，一键粘贴即可
打开公共粒子库，选择并添加合适的粒子特效到[group_set]组内
在本案例中，因前三个坑位都可能出现纸牌A被放置，所以需要再复制两个粒子图层，每个坑位对应一个粒子特效
注意同步调整横屏模式下的粒子位置
调整完毕后，隐藏三个粒子图层，在后续通过触发事件来播放粒子特效
完成所有内容的搭建后，我们需要通过设置事件来串联起整个流程。本案例的事件设置可分为四类：
可被拖拽的其他纸牌：拖拽后未放置到指定位置 & 拖拽后放置到指定位置 分别触发什么效果
可被拖拽的纸牌A：拖拽后未放置到指定位置 & 拖拽后放置到指定位置 分别触发什么效果(事件设置逻辑同上)，且需额外使用【条件判断】 来判定当前目标坑位是否可以放置纸牌A
不可被拖拽的纸牌：按下后播放错误反馈
跳转事件：在所有需要跳转商店的位置设置跳转事件
接下来，我们按顺序依次讲解
因为要实现：
a. 当拖拽纸牌A放置到上方坑位时，需按从左到右的顺序依次放置。如拖拽梅花A时，若坑位1还没有纸牌，则梅花A可以被放置在坑位1；若坑位1已有红心A，则梅花A只能按顺序被放置在坑位2
b. 计算成功接龙的分数：玩家每正确放置一次纸牌，分数+10
要想实现以上效果，就需要使用【全局变量】功能。首先，添加变量
1）点击上方【全局变量】图标，添加变量
2）填写变量名称如"pit1"，为了便于理解，在此可将变量类型设置为"文本"，并命名初始值为"empty">>>代表坑位1的初始状态
3）按照同样的方法，依次添加"pit2"、"pit3"两个变量>>>分别代表坑位2和坑位3的初始状态
4）再添加一个"数值"类型的变量score，将初始值设为"0">>>代表初始的分数值
5）保存以上变量，开始进行事件设置
（💡此类事件设置集中在红色区域图层）
以纸牌黑桃4为例，选中可被拖拽的黑桃4组图层[3_spade4_drag]
1）添加事件-拖拽，选择拖拽范围为"全屏"，拖拽方向为"任意方向"。添加响应事件：
显示素材[spade4]，即组内可被拖拽的黑桃4
隐藏素材[3_spade4]，即初始展示的黑桃4
隐藏素材[gf_begin]&[gf_common]，即入场指引手&无操作指引手
从头播放1次纸牌拖拽音效
2）添加事件-抬起。添加响应事件：
隐藏素材[spade4]，即组内可被拖拽的黑桃4
显示素材[3_spade4]，即初始展示的黑桃4
显示素材[gf_common]，即无操作指引手，并从头播放指引动画
以上两组事件为"拖拽但未放置到指定位置"的效果设置
3）继续添加事件-拖拽到指定位置，编辑拖拽区域为红心5所在位置，选择拖拽范围为"全屏"，拖拽方向为"任意方向"。添加响应事件：
设置埋点1，并填入埋点名称如"成功放置黑桃4或红心7"
赋值，赋值score+10 (对应: 正确放置一次纸牌，分数+10)
禁用[3_spade4_drag]的抬起事件（因为在此事件下，黑桃4已被正确放置，无需再触发抬手事件）
禁用[1_heart5]的按下事件（即不可被拖拽的红心5，按下后会播放错误反馈的事件。后续会设置）
隐藏素材[3_spade4_drag]，即可被拖拽的黑桃4组
显示素材[1_spade4]，即正确放置后的黑桃4
隐藏素材[3_spade2_back]，即黑桃2的纸牌背面
显示素材[3_spade2]，即被翻出的黑桃2（因黑桃2初始状态为"隐藏"，且黑桃2的"左右展开"动画已设为"自动播放"，默认在黑桃2初次显示的时候自动播放其动画，因此无需单独设置播放动画的响应事件）
显示素材[gf_common]，即无操作指引手，并从头播放指引动画
从头播放1次正确音效
以上事件为"拖拽且放置到了指定位置"的效果设置
4）快速复制事件给其他所有"可被拖拽的其他纸牌"
设置完以上事件，点击复制图层[3_spade4_drag]
按住Ctrl键全选所有"可被拖拽的其他纸牌"图层，点击粘贴按钮，选择【仅粘贴图层事件】
这样，所有"可被拖拽的其他纸牌"都有了对应的拖拽与抬起事件
然后微调每个纸牌图层所对应的拖拽区域和响应事件即可
（💡此类事件设置集中在红色区域图层）
以纸牌红心A为例，选中可被拖拽的红心A组图层[6_hearta_drag]
1）可先粘贴以上事件，调整对应的响应对象
2）在【拖拽到指定位置】事件下，先编辑该拖拽区域为坑位1的区域，再调整响应事件：
删除'按下播放错误反馈'的禁用事件
添加响应事件：显示并播放坑位1的粒子特效
3）在【拖拽到指定位置】事件下，添加【条件判断】：当pit1=empty (对应: 坑位1为空)
并添加响应事件：赋值，赋值pit1=hearta (对应: 坑位1不为空，已放置红心A)
4）复制&粘贴两次该【拖拽到指定位置】事件到本图层上，分别编辑拖拽区域并修改条件判断的内容和赋值事件
当pit1≠empty 且pit2=empty (对应: 坑位1不为空且坑位2为空)：赋值pit2=hearta (对应: 坑位2不为空，已放置红心A)
当pit1≠empty 且pit2≠empty (对应: 坑位1和坑位2都不为空)：赋值pit3=hearta (对应: 坑位3不为空，已放置红心A)
5）快速复制事件给其他所有"可被拖拽的纸牌A"
设置完以上事件，点击复制组图层[6_hearta_drag]
按住Ctrl键，全选所有"可被拖拽的纸牌A"图层（即梅花A和方片A）
点击粘贴按钮，选择【仅粘贴图层事件】
然后微调每个图层对应的拖拽区域&条件判断&响应对象即可
⚠️注意：
因方片A没有可能被放置在坑位1，所以只需考虑坑位2和坑位3的状态，所以可删除"坑位1为空"的条件判断事件
在本案例中，我们设定"当玩家成功拖动方片A到目标坑位后，判定试玩结束"，因此在方片A的【拖拽到指定位置】事件下，需额外添加响应事件：
上报试玩结束
显示素材[手势区域]（即试玩最后的跳转事件所在的图层）
6）添加条件判断
计算成功接龙的分数：玩家每正确放置一次纸牌，分数+10
在场景下 添加事件-条件判断
添加条件判断1：当score=10，并勾选【只生效一次】
添加响应事件：隐藏文本0；显示文本10
以此类推，完成所有条件判断的设置
以上事件为"拖拽纸牌A但未放置到指定位置" 和 "拖拽纸牌A并放置到对应坑位"的效果设置
（💡此类事件设置集中在黄色区域图层）
1）以纸牌红心5为例，选中不可被拖拽的红心5图层[1_heart5]
2）添加事件-按下。添加响应事件：
从头播放1次错误音效
从头播放红心5的摇晃动画(旋转缓动)
3）复制该事件给其他所有"不可被拖拽的纸牌"，并微调响应对象
1）结尾跳转：选中手势区域[interactive area]，添加事件 - 按下，添加响应事件 - 设置埋点5"结束页触发跳转" & 跳转应用商店
2）常驻跳转：进入"全局场景"，选中常驻下载按钮组[btn]，添加事件 - 按下，添加响应事件 - 跳转应用商店
以上，就是本案例用到的全部事件。完成所有事件设置，我们的素材就制作完成了。
1）建议在制作过程中，每完成一部分操作，就及时预览，检查设置是否正确
2）全部制作完成后，可对不同机型/不同语言/横竖屏进行整体预览，确认无误
在教程最后，我们为您提供了本案例所使用到的全部资源，点击压缩包即可下载。您可尝试用此资源跟着教程制作，以便尽快上手使用自由编辑器制作此类素材
注意，前两类事件需结合【】来实现完整的效果。但本案例事件设置的难度并不算高，因图层较多会相对繁琐一些，可优先设置好一个图层的事件，再通过事件的复制&粘贴功能快速完成制作
