# 遮罩组件

✨模板自由制作入口：作品预览区>>>遮罩组件按钮 或 图层区>>>Mask Component

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F8vysSmyUU7YH6zuefg4L%2Fimage.png?alt=media&#x26;token=f4b69c0d-c7f0-4d37-bc68-35b53e46edbf" alt=""><figcaption></figcaption></figure>

✨空白制作入口：玩法模板>>>组件库>>>遮罩组件

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F96asBeGeNUxX2mcPjnpe%2Fimage.png?alt=media&#x26;token=9c59712e-c675-4010-8fc3-a4dc58c7eb41" alt="" width="403"><figcaption></figcaption></figure></div>

相关案例教学可查阅 [zhe-zhao-zu-jian-kong-bai-zhi-zuo-jiao-cheng](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 "mention")

####

## <mark style="color:blue;">一、遮罩组件通俗介绍</mark>

* 组件使用底层逻辑：通过「遮罩形状」来控制「被遮罩组」显示的部分，即「被遮罩组」内的图像，在「遮罩形状」覆盖范围内的部分会显示，覆盖范围外的部分会隐藏
* 当前，【**模板自由制作**】和【**空白制作**】都支持使用"遮罩组件"。使用【模板自由制作】，您可以基于原模板的玩法对组件进行调整；使用【空白制作】或新增遮罩组件，最少需完成遮罩组件的 「外观」、「遮罩形状」、「被遮罩组」等参数设置，遮罩组件才可正式生效
* <mark style="color:red;">注意：同个场景仅支持添加一个组件，但可跨场景添加组件或复制组件</mark>

####

## <mark style="color:blue;">二、遮罩组件适用玩法示例</mark>

"遮罩组件"适用于 通过点击/拖拽等交互方式，调整遮罩蒙层，展示目标图片 的玩法

* [示例1 - 选图滑动上色](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001531%252F13444%252Fpv%252F24%252F08%252F12%252F66b9cfbc1d266%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E9%80%89%E5%9B%BE%E6%BB%91%E5%8A%A8%E4%B8%8A%E8%89%B2\&language=undefined)
* [示例2 - 放大镜谜题](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001595%252F13516%252Fpv%252F24%252F11%252F13%252F673416fe361eb%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E6%94%BE%E5%A4%A7%E9%95%9C%E8%B0%9C%E9%A2%98\&language=undefined)
* [示例3- 点击涂色](https://tinyurl.com/ykrebstj)
* [示例4 - 点击涂色](https://tinyurl.com/2eemxpa9)

####

## <mark style="color:blue;">三、遮罩组件使用说明</mark>

「遮罩组件」可调整的参数分四部分：外观、动画、遮罩设置、事件

### 1.外观

* 组件是否启用：可在「外观」参数下通过调节此开关来启用/禁用遮罩组件（默认启用）
* 其他参数的使用同常规图层一样，在此不作说明。需注意：当调整遮罩组件的外观参数(如位置大小)时，遮罩组件内的所有图层会跟着一起变化

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FQeWSBY90bGUOLJ5XMNgO%2Fimage.png?alt=media&#x26;token=087ff0cc-c55f-49c8-a626-35300ca939c8" alt=""><figcaption></figcaption></figure>

### 2.动画

在此处设置的动画是对整个遮罩组件生效的，具体的使用同常规图层一样，在此不作说明

### 3.遮罩设置

一个「遮罩组件」最少包含一个「遮罩组」。遮罩组(遮罩设置)包含三部分：遮罩形状、被遮罩组、自定义分组（选做）

<mark style="color:red;">注意：「遮罩设置」为遮罩组件最核心的参数，请务必将各部分设置完成</mark>

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FFiShb4qn9YclSCglcM1y%2Fimage.png?alt=media&#x26;token=76569f8b-fcc0-4584-8f18-4487e91ef4ee" alt=""><figcaption></figcaption></figure></div>

#### 3.1 遮罩组

新增：支持新增遮罩组，点击后输入新遮罩组名称即可创建遮罩组

添加动画：可为遮罩组添加动画，添加后动画对组内所有元素生效

显示/隐藏：可调整遮罩组的显示/隐藏，对组内所有元素生效（默认显示）

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FfTZs9NJFW0Vv6nv10aTs%2Fimage.png?alt=media&#x26;token=bb60dedf-d13c-4537-a473-de28ad0f8ad6" alt=""><figcaption></figcaption></figure></div>

#### 3.2 遮罩形状

<mark style="background-color:red;">**形状**</mark>：「遮罩形状」覆盖到「被遮罩组」的部分会显示，未覆盖到的部分会隐藏

* 形状支持设置「矩形」或「圆形」，并可调整其「外观」、「动画」、「事件」参数
  * 外观：可调整该形状的位置尺寸、缩放比例、旋转角度
  * 动画：可对该形状设置动画
  * 事件：可对遮罩形状设置事件(可设置「拖拽」事件，使遮罩在实际试玩中可拖动)
* 可点击「预览遮罩效果」，在画布内预览当前遮罩形状的位置大小

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F2HbYRzJL3TGcmQmzXIqE%2Fimage.png?alt=media&#x26;token=a0c0c4e1-cd44-479a-ad5a-41b2c1d6203f" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:red;">**跟随元素**</mark>（非必须添加）：设置跟随元素后，需为形状添加「拖拽」事件。设置完成后，跟随元素将会跟随形状的拖拽同步移动

* 支持添加多个跟随元素，点击右侧"+"按钮即可从资产库中添加
* 点击可调整「跟随元素」的「外观」、「动画」、「事件」参数（使用同常规图层一样）

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FYAHVL8yord1aLFG3KPCk%2Fimage.png?alt=media&#x26;token=d07be2d7-0fd0-41cf-be61-59ef5098521e" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:red;">3.3 被遮罩组</mark>

「被遮罩组」内的图像，在「遮罩形状」覆盖范围内的部分会显示，覆盖范围外的部分会隐藏

* 支持添加多个 被遮罩元素，点击右侧"+"按钮即可从资产库中添加
* 点击可调整「被遮罩元素」的「外观」、「动画」、「事件」参数（使用同常规图层一样）

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FaYTn9IiTJ2NYwKiJLJhS%2Fimage.png?alt=media&#x26;token=9382b8d1-c016-462c-bf1d-77231f44d0cf" alt=""><figcaption></figcaption></figure></div>

#### 3.4 自定义分组

<mark style="color:red;">「自定义分组」</mark>作为遮罩组件的一部分，可随着遮罩组件一起缩放和调整位置，但<mark style="color:red;">不受遮罩的影响，不会被遮罩</mark> （如下图所示，将"被遮罩组"对应的黑白底图加入到自定义分组中，当"遮罩形状"覆盖"被遮罩组"时，展示"被遮罩组"的彩色图片，其他部分则展示该黑白底片）

**用户可根据自身创意，决定是否要添加「自定义分组」**

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F8xaVWphzKKWiQed6FSdk%2Fimage.png?alt=media&#x26;token=65163876-0696-4a98-8e57-4248581ed42c" alt=""><figcaption></figcaption></figure></div>

### 4.事件

「遮罩组件」独特的**响应事件**包含：启用/禁用遮罩组件、启用/禁用遮罩组、显示/隐藏遮罩组、显示/隐藏遮罩分组、启用/禁用遮罩效果

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FaX3Wxqvgfe5HyosKBTWN%2Fimage.png?alt=media&#x26;token=2eaefe17-240c-462e-b7ad-0cfb3f65c1c4" alt=""><figcaption></figcaption></figure></div>

#### 4.1 启用/禁用遮罩组件

需选择启用/禁用

若被禁用，等同于禁用所有的遮罩组。遮罩组下的所有遮罩层、被遮罩层事件将不再生效

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FiOtNqROgs84i0qyWMSpP%2Fimage.png?alt=media&#x26;token=46babfb9-852a-44d7-b77c-743cd339fcea" alt="的" width="314"><figcaption></figcaption></figure></div>

#### 4.2 启用/禁用遮罩组

需选择启用/禁用和某个遮罩组

若被禁用，遮罩组下的所有遮罩层、被遮罩层事件将不再生效

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FxsUbFQUqhzOz2IGD1QHs%2Fimage.png?alt=media&#x26;token=0f95365c-835c-4e9f-9182-a2fc617afd7b" alt=""><figcaption></figcaption></figure></div>

#### 4.3 显示/隐藏遮罩组

需选择显示/隐藏和某个遮罩组

选择后，将显示/隐藏某个遮罩组内的所有元素

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FzHfET1OZJh30i0F1ywjk%2Fimage.png?alt=media&#x26;token=b5a05d27-5728-4e4e-aa65-af26043bc95c" alt=""><figcaption></figcaption></figure></div>

#### 4.4 显示/隐藏遮罩分组

需选择显示/隐藏和某个遮罩分组

选择后，将显示/隐藏某个遮罩分组内的所有元素

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FzImrschBEAlYmpK8Nja5%2Fimage.png?alt=media&#x26;token=1c841bde-d55a-4b7a-86d0-27c1b6d1fbdf" alt=""><figcaption></figcaption></figure></div>

#### 4.5 启用/禁用遮罩效果

需选择启用/禁用和某个遮罩组

若启用，则「被遮罩组」会受「遮罩形状」的影响而展示；若禁用，则「被遮罩组」不受「遮罩形状」影响，直接展示

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F7NdolqHzRewoY3Ew8Rnx%2Fimage.png?alt=media&#x26;token=fceec248-29cb-478b-af75-2c15be92faec" alt=""><figcaption></figcaption></figure></div>