自由画线组件-空白制作教程

#自由编辑器 #空白制作 #初级难度 #自由画线组件

温馨提示：本篇教程主要讲解空白制作如何通过自由画线组件制作出"画线玩法"的可玩素材，建议搭配DEMO和功能介绍文档食用效果更佳哦！

一、特征标签

• 【制作难度】：⭐

• 【适用产品】：画线玩法

• 【交互方式】：开始画线/画线完成

• 【自由度】：固定流程

• 【核心资产】：图片

• 【核心功能】：开始画线-隐藏指引；画线完成-跳转到下一场景

二、效果预览

手机试玩效果最佳	竖屏	横屏
扫码试玩	点击试玩	点击试玩

三、玩法梳理

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

1）进入试玩，展示"一个额头有痘的女孩"和"操作指引"，引导玩家在额头位置画线挤痘痘

2）玩家在额头位置画出任意线条，播放【成功反馈】，然后进入结束页面

3）结束页玩家任意按下，跳转应用商店

四、制作思路

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

场景拆分：根据上一环节的玩法梳理，我们可将本案例拆分为3个场景来制作

场景名称	场景1-核心玩法	场景2-结果反馈	场景3-结束页面
效果图
场景描述	引导玩家在额头位置画线挤痘	玩家画线完成后播放成功反馈	产品信息+跳转按钮
核心资产	静帧图片：痘痘女孩、指引光圈和粉刺针 视听包装：点击音效	静帧图片：无痘女孩、反馈文本 视听包装：成功音效、彩带粒子、星星粒子	静帧图片：产品信息、跳转按钮 视听包装：星星粒子
核心动画	粉刺针：位移缓动 指引文本：位移缓动 指引光圈：透明度缓动	反馈文本：缩小出现	跳转按钮：脉冲向前
核心事件	触发对象：自由画线组件 Draw Lines Component 触发事件：画线完成 响应事件：跳转到下一场景	触发对象：场景2 触发事件：定时触发 响应事件：跳转到下一场景	触发对象：场景3 触发事件：按下 响应事件：跳转应用商店

五、制作指南

*核心内容为Step4【事件设置】

Step1 - 场景搭建

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

1.全局场景

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

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

2.普通场景

2-1）场景1

1）在场景1中添加核心玩法相关资产：痘痘女孩/指引光圈/粉刺针/指引文本/点击音效

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

3）添加组件：点击【玩法模板】，在【组件库】下添加 自由画线组件

4）调整组件参数：可直接 拖拽/拉伸 画布中的绿色矩形，将组件的位置大小调整到额头位置。然后设置画出线条的颜色和粗细即可

2-2）场景2

1）在场景2中添加结果反馈相关资产

2）调整各资产到合适的位置大小

2-3）场景3

1）新建场景3，并添加产品信息相关资产

2）勾选场景3为【结束场景】，以便上报试玩结束

3）取消启用场景3的【全局场景】

Step2 - 横竖屏适配

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

1.调整横屏排版

1）在场景1中切换到横屏模式，选中所有最高层级的图层(包含自由画线组件图层)

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

3）同理，我们再依次切换到场景2、场景3和【全局场景】，使用【复用竖屏位置尺寸配置】功能一键排版，再微调其位置大小

2.调整屏幕适配方式

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

Step3 - 动效设置

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

场景1：粉刺针位移动画、指引文本位移动画、指引光圈闪烁动画

场景2：反馈文本入场动画、彩带粒子、星星粒子

场景3：跳转按钮缩放动画、星星粒子

1.粉刺针：位移缓动

1）选中粉刺针图片[prop]，添加动画-通用-位移缓动，作为横向移动的指引动画

2）复制该位移动画到粉刺针组图层[group_prop]，调整动画参数，作为纵向移动的指引动画

3）两个动画相结合，实现粉刺针的循环指引动画。具体参数设置如下：

2.指引文本：位移缓动

选中指引文本[text_guidelines]，添加动画-通用-位移缓动，参数设置如下：

3.指引光圈：透明度缓动

选中指引光圈图片[flash]，添加动画-通用-透明度缓动，以实现光圈的闪烁效果。参数设置如下：

4.反馈文本：缩小出现

选中场景2的反馈文本[text_welldone]，添加动画-进场动画-缩小出现，参数设置如下：

5.跳转按钮：脉冲向前

选中场景3的跳转按钮组[group_download]，添加动画-强调动画-脉冲向前，作为按钮的循环指引动画。参数设置如下：

6.粒子特效：彩带粒子&星星粒子

1）打开公共粒子库，选择并添加星星粒子，以增强结束页面的画面氛围

2）调整粒子到合适的位置

3）同理，在场景2中添加彩带粒子和星星爆破粒子，以强化成功反馈的视觉效果

4）调整好粒子竖屏的位置，还需切换到横屏进行调整

Step4 - 事件设置

本案例与事件设置相关的内容有：开始画线时隐藏操作指引、画线完成时跳转到下一场景、播放完成功反馈跳转到结束页面、结束页按下即跳转商店。接下来，我们按顺序依次讲解

1.图层: 自由画线组件

1）选中场景1中的自由画线组件图层，点击【添加事件】，选择触发事件为【开始画线】

• 添加响应事件：设置埋点，编辑埋点名称为"第一次有效操作"

• 添加响应事件：隐藏粉刺针组图层、隐藏指引光圈、从头播放1次点击音效

2）继续【添加事件】，选择触发事件为【画线完成】

• 添加响应事件：跳转到下一场景

2.场景2

选中场景2，点击【添加事件】，选择触发事件为【定时触发】

• 设置执行延迟时长为1s

• 添加响应事件：跳转到下一场景

3.场景3

选中场景3，点击【添加事件】，选择触发事件为【按下】

• 添加响应事件：设置埋点，编辑埋点名称为"结束页触发跳转"

• 添加响应事件：跳转应用商店

4.图层: 常驻下载按钮组

选中"全局场景"下的常驻下载按钮组，点击【添加事件】，选择触发事件为【按下】

• 添加响应事件：跳转应用商店

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

Step5 - 整体预览

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

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

六、资源提供

在教程最后，我们为您提供了本案例所使用到的全部资源，点击压缩包即可下载。您可以用此资源跟着教程尝试制作，以便尽快上手使用自由编辑器制作此类素材

1MB

自由画线组件空白制作_资源.zip

archive