遮罩组件-空白制作教程
#自由编辑器 #空白制作 #遮罩组件 #初级难度
最后更新于
#自由编辑器 #空白制作 #遮罩组件 #初级难度
最后更新于
温馨提示：本篇教程主要讲解如何通过遮罩组件制作出此类玩法（通过点击/拖拽等交互方式，来展示目标图片）的可玩素材，建议搭配DEMO和功能介绍文档食用效果更佳哦！
【制作难度】：⭐⭐
【适用产品】：通用
【交互方式】：拖拽到指定位置
【自由度】：固定流程
【核心资产】：图片
【核心功能】：遮罩形状、被遮罩组、拖拽事件
| 手机试玩效果最佳 | 竖屏 | 横屏 |
|---|---|---|
我们在开始制作之前先对本案例的玩法逻辑进行简单的梳理：
进入试玩，展示【黑白底图】和【操作指引】，引导玩家滑动进行涂色；
玩家拖动彩虹条
若未拖拽到指定位置，彩虹条返回原位；
若拖拽到指定位置，则涂色成功 跳转结束场景；
结束场景 玩家按下按钮跳转商店
核心思想：场景拆分逻辑清晰，图层结构简单，单个场景里的动画和事件尽可能少
场景拆分：根据上一环节的玩法梳理，我们可将本案例拆分为2个场景来制作
*核心内容为Step2【组件参数设置】和Step5【事件设置】
建议您在创建项目后，先将所有资产上传进【项目资产】内，方便后续添加使用
1）在【全局设置】中添加背景音乐、背景图片
2）在【全局场景】下添加常驻下载按钮、logo等产品信息，并调整各资产的位置大小，对资产进行合理编组、排序
1）添加遮罩组件：在场景1中点击【玩法模板】，选择【组件库】下的遮罩组件并添加
2）添加指引手指、指引文案、点击音效，并调整各资产的位置大小
3）在场景2中添加相应反馈资产，并调整各资产的位置大小（可将所有资产编进一个组内，方面后续做横屏适配）
4）将反馈音效的参数设为"入场自动播放1次"
5）勾选场景2为【结束场景】
选中遮罩组件Mask Component，在外观参数下将其尺寸调整到合适
2.1 被遮罩组
【被遮罩组】是【遮罩形状】所覆盖范围内，会显示出的内容
首先，将最后需要展示的图片（彩色图）添加进【被遮罩组】
2.2 自定义分组
1）添加遮罩分组1（命名为background_image），将初始展示的图片（黑白图）添加进分组，并拖动调整其层级至最低
2）添加遮罩分组2（命名为outer_frame），将画框图片添加进分组，并拖动调整其层级至最高（装饰图片，需要始终置顶）
2.3 遮罩形状
1）在本案例中，我们选择遮罩形状为矩形
2）点击【矩形】调起参数弹窗，将遮罩形状的尺寸调整为能够遮住最后展示图片的大小
3）将遮罩形状移动至右侧（不覆盖被遮罩组即可）
2.4 跟随元素
在【跟随元素】下添加彩虹条和彩虹粒子，并调整其位置大小到合适
完成以上，我们遮罩组件的参数就设置好了。
完成竖屏的排版后，我们还需对"横屏的排版"以及"横竖屏的屏幕适配方式"进行调整
1）在场景1中切换到横屏模式，选中所有最高层级的图层(包含遮罩组件)，使用【复用竖屏位置尺寸配置】功能一键排版
2）再分别调整各图层的【位置】和【缩放比例】，让画面展示出完整的核心玩法相关内容
3）同理，我们再依次切换到【场景2】和【全局场景】，完成横屏的排版
在本案例中，我们想要竖屏下的产品信息组[group_icon]始终位于各机型屏幕的顶部，所以我们调整其"屏幕适配方式"为贴顶适配（其他图层默认居中适配，无需调整）
在本案例中，用到的动画和粒子特效如下，我们依次展开介绍
场景1：指引手指位移动画、指引文案闪烁动画
场景2：反馈文本&跳转按钮缩放动画、背景光旋转动画、星星粒子
选中手指图片[gf_hand]，添加动画-通用-位移缓动，作为循环指引动画。参数设置如下：
选中指引文本[text_guide]，添加动画-强调动画-闪烁，作为循环指引动画。参数设置如下：
1）选中跳转按钮组[btn_end]，添加动画-强调动画-脉冲向前，作为循环指引动画。参数设置如下：
2）复制该动画到反馈文本[text_feedback]，微调参数，作为循环展示动画。参数设置如下：
选中背景光图片[light]，添加动画-通用-旋转缓动，作为效果补充动画。参数设置如下：
1）打开公共粒子库，选择并添加合适的粒子特效(如星星粒子)，用来丰富画面效果
2）调整粒子到合适的位置（注意横竖屏都要调整）
完成所有动效的设置，我们对试玩的逻辑 也就是"事件"进行设置
本案例与事件设置相关的内容有：按下遮罩形状时隐藏操作指引；拖拽遮罩形状到指定位置后跳转结束场景；按下跳转按钮后跳转应用商店
接下来，我们按顺序依次讲解
1）选中[矩形]，添加事件 - 按下，依次添加响应事件：
设置埋点。选择埋点id1，并编辑埋点名称为"玩家首次按下"
隐藏操作指引
从头播放1次点击音效
2）添加事件 - 拖拽到指定位置，并依次编辑【指定区域】和【自定义拖拽范围】，选择拖拽方向为【水平方向】
（若选择"全屏"范围内拖拽，可能会出现拖拽距离过远，露出黑白底图的情况）
3）依次添加响应事件：
设置埋点。选择埋点id2，并编辑埋点名称为"成功完成涂色"
跳转到下一场景
选中跳转按钮组[btn_end]，添加事件 - 按下，依次添加响应事件：
设置埋点。选择埋点id3，并编辑埋点名称为"结束页触发跳转"
跳转应用商店
选中常驻下载按钮组[group_ctat]，添加事件 - 按下，添加响应事件 - 跳转应用商店
以上，就是本案例用到的全部事件。完成所有事件设置，我们的素材就制作完成了。
1）建议在制作过程中，每完成一部分操作，就及时预览，检查设置是否正确
2）全部制作完成后，可对不同机型/不同语言/横竖屏进行整体预览，确认无误
在教程最后，我们为您提供了本案例所使用到的全部资源，点击压缩包即可下载。您可以用此资源跟着教程尝试制作，以便尽快上手使用自由编辑器和【遮罩组件】制作此类素材
| 场景名称 | 场景1-核心玩法 | 场景2-结束场景 |
|---|---|---|
扫码试玩
效果图
场景描述
玩家拖动彩虹条，对图片进行涂色
成功反馈+跳转按钮
核心资产
静帧图片：彩色图片(被遮罩组)、彩虹条(跟随元素）、黑白底图、指引手指
视听包装：彩虹粒子特效条(跟随元素）、点击音效
静帧图片：彩色图片、跳转按钮
视听包装：星星粒子特效、成功音效
核心动画
指引手指：位移缓动
指引文本：闪烁
反馈文本&跳转按钮：脉冲向前
背景光：旋转缓动
核心事件
触发对象：遮罩形状
触发事件：拖拽到指定位置
响应事件：跳转到下一场景
触发对象：跳转按钮
触发事件：按下
响应事件：跳转应用商店
