# 遮罩组件-空白制作教程

温馨提示：本篇教程主要讲解如何**通过遮罩组件制作出此类玩法（通过点击/拖拽等交互方式，来展示目标图片）的可玩素材，**建议搭配[DEMO](https://tinyurl.com/4j5t5z3u)和[功能介绍文档](/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/te-shu-gong-neng-zu-jian-ku-kuai-jie-pai-ban/zhe-zhao-zu-jian.md)食用效果更佳哦！

## <mark style="color:blue;">一、特征标签</mark> <a href="#nubzy" id="nubzy"></a>

* 【制作难度】：⭐⭐
* 【适用产品】：通用
* 【交互方式】：拖拽到指定位置
* 【自由度】：固定流程
* 【核心资产】：图片
* 【核心功能】：遮罩形状、被遮罩组、拖拽事件

## <mark style="color:blue;">二、效果预览</mark> <a href="#dlwsv" id="dlwsv"></a>

<table><thead><tr><th width="205.33333333333331">手机试玩效果最佳</th><th>竖屏</th><th>横屏</th></tr></thead><tbody><tr><td><img src="/files/Yi11Wa4KG8XO5eNgsiBl" alt="" data-size="original"></td><td><img src="/files/ok0QZrgUwbXtRAuHskDS" alt="" data-size="original"></td><td><img src="/files/lyMSRthUt2FtxO7V0UKk" alt="" data-size="original"></td></tr><tr><td>扫码试玩</td><td><a href="https://tinyurl.com/4j5t5z3u">点击试玩</a></td><td><a href="https://tinyurl.com/4j5t5z3u">点击试玩</a></td></tr></tbody></table>

## <mark style="color:blue;">三、玩法梳理</mark> <a href="#nbhek" id="nbhek"></a>

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

* 进入试玩，展示【黑白底图】和【操作指引】，引导玩家滑动进行涂色；
* 玩家拖动彩虹条
  * 若未拖拽到指定位置，彩虹条返回原位；
  * 若拖拽到指定位置，则涂色成功 跳转结束场景；
* 结束场景 玩家按下按钮跳转商店

<div align="left"><figure><img src="/files/NMSIfdANEP5TXcgFy5GT" alt="" width="504"><figcaption></figcaption></figure></div>

## <mark style="color:blue;">四、制作思路</mark> <a href="#agjmh" id="agjmh"></a>

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

**场景拆分：**&#x6839;据上一环节的玩法梳理，我们可将本案例拆分为2个场景来制作

<table data-full-width="false"><thead><tr><th width="133">场景名称</th><th width="279">场景1-核心玩法</th><th>场景2-结束场景</th></tr></thead><tbody><tr><td><strong>效果图</strong></td><td><img src="/files/hBPZ53fxuZlruc8r1E8U" alt="" data-size="original"></td><td><img src="/files/Q50amQCV5qHfbQEK6GfQ" alt="" data-size="original"></td></tr><tr><td><strong>场景描述</strong></td><td>玩家拖动彩虹条，对图片进行涂色</td><td>成功反馈+跳转按钮</td></tr><tr><td><strong>核心资产</strong></td><td><p><strong>静帧图片：</strong><mark style="color:red;">彩色图片(被遮罩组)</mark>、<mark style="color:red;">彩虹条(跟随元素）</mark>、黑白底图、指引手指</p><p><strong>视听包装：</strong>彩虹粒子特效条(跟随元素）、点击音效</p></td><td><p><strong>静帧图片：</strong>彩色图片、跳转按钮</p><p><strong>视听包装：</strong>星星粒子特效、成功音效</p></td></tr><tr><td><strong>核心动画</strong></td><td><p><strong>指引手指：</strong>位移缓动</p><p><strong>指引文本：</strong>闪烁</p></td><td><p><strong>反馈文本&#x26;跳转按钮：</strong>脉冲向前</p><p><strong>背景光：</strong>旋转缓动</p></td></tr><tr><td><strong>核心事件</strong></td><td><p><strong>触发对象：</strong>遮罩形状</p><p><strong>触发事件：</strong>拖拽到指定位置</p><p><strong>响应事件：</strong>跳转到下一场景</p></td><td><p><strong>触发对象：</strong>跳转按钮</p><p><strong>触发事件：</strong>按下</p><p><strong>响应事件：</strong>跳转应用商店</p></td></tr></tbody></table>

## <mark style="color:blue;">五、制作指南</mark> <a href="#cria2" id="cria2"></a>

\*核心内容为**Step2【组件参数设置】**&#x548C;**Step5【事件设置】**

### Step1 - 场景搭建 <a href="#wepzn" id="wepzn"></a>

建议您在创建项目后，先将所有资产上传进<mark style="color:red;">【项目资产】</mark>内，方便后续添加使用

#### **1. 全局场景**

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

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

<figure><img src="/files/Yjw61yuF4tku0buVOPRr" alt=""><figcaption></figcaption></figure>

#### **2. 普通场景**

1）添加遮罩组件：在场景1中点击【玩法模板】，选择【组件库】下的遮罩组件并添加

<div align="left"><figure><img src="/files/jfKskNkB3fWM18uaXMKu" alt="" width="404"><figcaption></figcaption></figure></div>

2）添加指引手指、指引文案、点击音效，并调整各资产的位置大小

<div align="left"><figure><img src="/files/rNKxPE3GGXOy2jVodklp" alt=""><figcaption></figcaption></figure></div>

3）在场景2中添加相应反馈资产，并调整各资产的位置大小（可将所有资产编进一个组内，方面后续做横屏适配）

4）将反馈音效的参数设为"入场自动播放1次"

<div align="left"><figure><img src="/files/vxGWIkPGAWtRJG1Gh0Sd" alt=""><figcaption></figcaption></figure></div>

5）勾选场景2为【结束场景】

<figure><img src="/files/sKrj8LZ4mbuX2AfroDSt" alt=""><figcaption></figcaption></figure>

### <mark style="color:red;">Step2 - 组件参数设置</mark> <a href="#tpuup" id="tpuup"></a>

#### 1.外观

选中遮罩组件Mask Component，在外观参数下将其尺寸调整到合适

<figure><img src="/files/dBb37fuurn6yxagZ7Fh2" alt=""><figcaption></figcaption></figure>

#### 2.遮罩设置

<mark style="color:red;">**2.1 被遮罩组**</mark>

【被遮罩组】是【遮罩形状】所覆盖范围内，会显示出的内容

首先，将最后需要展示的图片（彩色图）添加进【被遮罩组】

<figure><img src="/files/6xBZ5sCSbv53mH89p8fJ" alt=""><figcaption></figcaption></figure>

<mark style="color:red;">**2.2 自定义分组**</mark>

1）添加遮罩分组1（命名为background\_image），将初始展示的图片（黑白图）添加进分组，并拖动调整其层级至最低

<figure><img src="/files/0HaxZtTeDPP3K3VXPzO8" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/pGyooOYpvXpsYb2WQuOw" alt=""><figcaption></figcaption></figure>

2）添加遮罩分组2（命名为outer\_frame），将画框图片添加进分组，并拖动调整其层级至最高（装饰图片，需要始终置顶）

<figure><img src="/files/SapCJyAfoLvBRVhnaOQN" alt=""><figcaption></figcaption></figure>

<mark style="color:red;">**2.3 遮罩形状**</mark>

1）在本案例中，我们选择遮罩形状为矩形

2）点击【矩形】调起参数弹窗，将遮罩形状的尺寸调整为能够遮住最后展示图片的大小

3）将遮罩形状移动至右侧（不覆盖被遮罩组即可）

<figure><img src="/files/UtUJ2AXag9dG7zSPMKQK" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/6LpunlWTg7uZFvQzPflC" alt=""><figcaption><p>点击【预览遮罩效果】可查看实际效果</p></figcaption></figure>

<mark style="color:red;">**2.4 跟随元素**</mark>

在【跟随元素】下添加彩虹条和彩虹粒子，并调整其位置大小到合适

<div align="left"><figure><img src="/files/CHhyGA7KuS47pvnuFGF6" alt=""><figcaption></figcaption></figure></div>

完成以上，我们遮罩组件的参数就设置好了。

### Step3 - 横竖屏适配 <a href="#tpuup" id="tpuup"></a>

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

#### **1.调整横屏排版**

1）在场景1中切换到横屏模式，选中所有最高层级的图层(包含遮罩组件)，使用【复用竖屏位置尺寸配置】功能一键排版

<figure><img src="/files/eT8MWRf7Rp2rlZUBivXO" alt=""><figcaption></figcaption></figure>

2）再分别调整各图层的【位置】和【缩放比例】，让画面展示出完整的核心玩法相关内容

<figure><img src="/files/NPkRWRpIW6cPyxyulXlD" alt=""><figcaption></figcaption></figure>

3）同理，我们再依次切换到【场景2】和【全局场景】，完成横屏的排版

<figure><img src="/files/8DtTYAWsuII2h2YNkw32" alt=""><figcaption></figcaption></figure>

#### 2.调整屏幕适配方式 <a href="#tpuup" id="tpuup"></a>

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

<figure><img src="/files/oaEUoWfDSJAce9Zx1In2" alt=""><figcaption></figcaption></figure>

### Step4 - 动效设置 <a href="#tpuup" id="tpuup"></a>

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

**场景1：**&#x6307;引手指位移动画、指引文案闪烁动画

**场景2：**&#x53CD;馈文本&跳转按钮缩放动画、背景光旋转动画、星星粒子

#### **1.指引手指：**&#x4F4D;移缓动

选中手指图片\[gf\_hand]，添加动画-通用-位移缓动，作为循环指引动画。参数设置如下：

<figure><img src="/files/5xHgwqTCxT118qoOi88f" alt=""><figcaption></figcaption></figure>

#### **2.指引文本：**&#x95EA;烁

选中指引文本\[text\_guide]，添加动画-强调动画-闪烁，作为循环指引动画。参数设置如下：

<figure><img src="/files/bupgJDBIANXMVJZATjV3" alt=""><figcaption></figcaption></figure>

#### 3.跳转按钮&反馈文本：脉冲向前

1）选中跳转按钮组\[btn\_end]，添加动画-强调动画-脉冲向前，作为循环指引动画。参数设置如下：

<figure><img src="/files/clszRW83VXPIYSgSKWAM" alt=""><figcaption></figcaption></figure>

2）复制该动画到反馈文本\[text\_feedback]，微调参数，作为循环展示动画。参数设置如下：

<figure><img src="/files/D0QQwaHQlvVrwRKppzeE" alt=""><figcaption></figcaption></figure>

#### 4.背景光：旋转缓动

选中背景光图片\[light]，添加动画-通用-旋转缓动，作为效果补充动画。参数设置如下：

<figure><img src="/files/hP4sxIhkfeJOzBTOoSUv" alt=""><figcaption></figcaption></figure>

#### 5.粒子特效

1）打开公共粒子库，选择并添加合适的粒子特效(如星星粒子)，用来丰富画面效果

2）调整粒子到合适的位置（注意横竖屏都要调整）

<figure><img src="/files/iXUmwvJrwHWG5O886i6H" alt=""><figcaption></figcaption></figure>

### <mark style="color:red;">Step5 - 事件设置</mark> <a href="#umduz" id="umduz"></a>

完成所有动效的设置，我们对试玩的逻辑 也就是"事件"进行设置

本案例与事件设置相关的内容有：按下遮罩形状时隐藏操作指引；拖拽遮罩形状到指定位置后跳转结束场景；按下跳转按钮后跳转应用商店

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

#### <mark style="color:red;">1.图层: 遮罩形状</mark>

1）选中\[矩形]，**添加事件 - 按下**，依次添加响应事件：

* 设置埋点。选择埋点id1，并编辑埋点名称为"玩家首次按下"
* 隐藏操作指引
* 从头播放1次点击音效

<div align="left"><figure><img src="/files/dhtGw08rXPn2hEqkYxk8" alt=""><figcaption></figcaption></figure></div>

2）**添加事件 - 拖拽到指定位置**，并依次编辑【指定区域】和【自定义拖拽范围】，选择拖拽方向为【水平方向】

<div align="left"><figure><img src="/files/3Uqmork1oGkddHzV8yas" alt=""><figcaption></figcaption></figure></div>

*（若选择"全屏"范围内拖拽，可能会出现拖拽距离过远，露出黑白底图的情况）*

<figure><img src="/files/j1ZW4alF2OrZMksEjAXo" alt=""><figcaption></figcaption></figure>

3）依次添加响应事件：

* 设置埋点。选择埋点id2，并编辑埋点名称为"成功完成涂色"
* 跳转到下一场景

<div align="left"><figure><img src="/files/aCJb5zGcCB0xOx9Bszog" alt=""><figcaption></figcaption></figure></div>

#### 2.图层: 跳转按钮组

选中跳转按钮组\[btn\_end]，**添加事件 - 按下**，依次添加响应事件：

* 设置埋点。选择埋点id3，并编辑埋点名称为"结束页触发跳转"
* 跳转应用商店

<div align="left"><figure><img src="/files/1B9pOaGaQSl70ChbQiC1" alt=""><figcaption></figcaption></figure></div>

#### 3.图层: 常驻下载按钮组

选中常驻下载按钮组\[group\_ctat]，**添加事件 - 按下**，添加响应事件 - 跳转应用商店

<div align="left"><figure><img src="/files/bmaM8q3M0CrPwyMQqFrs" alt=""><figcaption></figcaption></figure></div>

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

### Step6 - 整体预览 <a href="#j1kmp" id="j1kmp"></a>

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

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

<figure><img src="/files/3h4RWJxt6DFYWkD6Q3CA" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">六、资源提供</mark>

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

{% file src="/files/BjEik3lXugPPb4aJFFsT" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.playturbo.cn/playturbo-an-li-jiao-xue-ji-di/ke-wan-zi-you-bian-ji-qi-an-li/hui-zhi-wan-fa-an-li/zhe-zhao-zu-jian-kong-bai-zhi-zuo-jiao-cheng.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.