《纸牌接龙》空白制作教程

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

温馨提示：本篇教程主要讲解如何通过空白制作来做出"纸牌接龙"玩法的2D可玩素材，建议搭配DEMO食用效果更佳哦！

*如需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个场景来制作

场景名称

场景1-核心玩法

效果图

场景描述

玩家根据游戏规则完成纸牌接龙，当成功拖动方片A到目标坑位后，结束试玩

核心资产

静帧图片：各花色扑克牌、扑克牌背面图、花色A坑位图、分数面板、指引手

粒子：星光粒子

音频：翻牌音效、错误音效、正确音效、放置音效

核心动画

入场&结束指引手：位移缓动、透明度缓动、旋转缓动

无操作指引手：淡入、位移缓动

翻牌效果：左右展开

错误反馈：旋转缓动

核心事件

触发对象：可被拖拽的纸牌

触发事件：拖拽到指定位置

响应事件：隐藏拖拽纸牌/显示目标位置纸牌

触发对象：不可被拖拽的纸牌

触发事件：按下

响应事件：播放错误反馈

触发对象：场景

触发事件：条件判断

响应事件：隐藏旧分数/显示新分数

五、制作指南

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

Step1 - 场景搭建

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

1.全局设置

1）在【全局设置】中添加背景音乐、背景图片

2）在【全局场景】下添加常驻下载按钮、logo等产品信息，并调整位置大小、合理编组

2.场景1

1）在场景1中添加核心玩法相关资产：

图片：各花色扑克牌、扑克牌背面图、花色A坑位图、分数面板、指引手
音频：翻牌音效、错误音效、正确音效、放置音效

2）调整各资产到合适的位置大小，并根据资产类型对资产进行命名、编组、排序

⚠️注意:

a. 此类玩法(指在玩家交互后,物品位置发生改变的玩法)的制作逻辑为 "在物品可能出现的位置上都添加该物品，然后先隐藏放置后的物品，再通过事件设置显示放置后的物品，隐藏原位置的物品"，以此来实现目标效果

因此，对于可拖拽的纸牌，应被添加在各个可能出现的位置上。以纸牌黑桃4为例，除了初始状态位于第三列位置，它还可能被放置于第一列的红心5之下，因此黑桃4就需要添加两次，分别放置于对应的组内

b. 此外在本案例中，我们要实现"被拖拽的纸牌，其层级是在其他所有纸牌之上的"。因图层受前后顺序的层级影响，所以可拖拽的纸牌不能只有一张，还需要额外再添加一张，用来处理层级问题

处理方式：一张作为"可被拖拽的"，另一张作为"不可被拖拽的/仅在原地显示的"，然后将前者编组，层级置于后者的上方

3）调整图层初始状态：显示"初始就要展示"的图层；隐藏"初始不展示要通过玩家交互后才显示"的图层

Step2 - 横竖屏适配

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

1.调整横屏排版

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

2）使用【复用竖屏位置尺寸配置】功能一键排版，然后再适当调整各图层的【位置】和【缩放比例】即可，让画面展示出完整的内容

3）全局场景同理

2.调整屏幕适配方式

若想让素材完美适配各类机型，还可对部分图层的适配方式进行调整

在本案例中，我们想要竖屏下的产品信息组始终位于各机型屏幕的底部，所以我们调整其"屏幕适配方式"为居中贴底适配（其他图层默认居中适配，无需调整）

Step3 - 动效设置

本案例用到的动画和粒子特效如下，我们依次展开介绍：

手指指引动画、翻牌旋转动画、错误点击旋转动画、成功放置后的星光粒子特效

1.入场&结束指引手：位移缓动&透明度缓动&旋转缓动

选中入场指引手图片[gf_hand]，添加动画-通用-旋转缓动
选中入场指引手组图层[gf_begin]，添加动画-通用-位移缓动&透明度缓动
三个动画共同实现入场指引效果(若只需要简单的效果，使用一个位移动画即可)。具体参数设置如下：

因入场指引和结束指引的动画是类似的，分别复制以上两个图层的动画到结束指引手上，微调参数即可

2.无操作指引手：淡入&位移缓动

选中通用指引手组图层[gf_common]，添加动画-通用-位移缓动，添加动画-进场动画-淡入，作为无操作时的通用指引动画。参数设置如下：

3.翻牌效果：左右展开

选中其中一张待翻开的纸牌，添加动画-进场动画-左右展开，作为纸牌出现的翻转动画。参数设置如下：
复制该动画，按住Ctrl键选中其余所有待翻开的纸牌图层，一键粘贴即可

4.错误反馈：旋转缓动

当点击不可拖拽的纸牌时，会触发纸牌晃动的错误反馈

选中其中一张不可拖拽的纸牌，添加动画-通用-旋转缓动。参数设置如下：
同理，复制该动画，按住Ctrl键选中其余所有不可拖拽的纸牌图层，一键粘贴即可

5.星光粒子特效

打开公共粒子库，选择并添加合适的粒子特效到[group_set]组内
在本案例中，因前三个坑位都可能出现纸牌A被放置，所以需要再复制两个粒子图层，每个坑位对应一个粒子特效
注意同步调整横屏模式下的粒子位置
调整完毕后，隐藏三个粒子图层，在后续通过触发事件来播放粒子特效

Step4 - 事件设置

完成所有内容的搭建后，我们需要通过设置事件来串联起整个流程。本案例的事件设置可分为四类：

可被拖拽的其他纸牌：拖拽后未放置到指定位置 & 拖拽后放置到指定位置分别触发什么效果
可被拖拽的纸牌A：拖拽后未放置到指定位置 & 拖拽后放置到指定位置分别触发什么效果(事件设置逻辑同上)，且需额外使用【条件判断】来判定当前目标坑位是否可以放置纸牌A
不可被拖拽的纸牌：按下后播放错误反馈
跳转事件：在所有需要跳转商店的位置设置跳转事件

注意，前两类事件需结合【全局变量】来实现完整的效果。但本案例事件设置的难度并不算高，因图层较多会相对繁琐一些，可优先设置好一个图层的事件，再通过事件的复制&粘贴功能快速完成制作

接下来，我们按顺序依次讲解

1.添加全局变量

因为要实现：

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）保存以上变量，开始进行事件设置

2.为所有"可被拖拽的其他纸牌"添加触发事件与响应事件

（💡此类事件设置集中在红色区域图层）

以纸牌黑桃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键全选所有"可被拖拽的其他纸牌"图层，点击粘贴按钮，选择【仅粘贴图层事件】
这样，所有"可被拖拽的其他纸牌"都有了对应的拖拽与抬起事件
然后微调每个纸牌图层所对应的拖拽区域和响应事件即可

3.为所有"可被拖拽的纸牌A"添加触发事件与响应事件

（💡此类事件设置集中在红色区域图层）

以纸牌红心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的【拖拽到指定位置】事件下，需额外添加响应事件：
- 上报试玩结束
- 显示素材[手势区域]（即试玩最后的跳转事件所在的图层）