UIMask 蒙版组件

概述

UIMask 是基础的蒙版组件,用于构建蒙版区域,进行渲染内容正向或反向的裁剪

组件概要

UIMask -> Component -> Object

蒙版区域

在当前节点存在渲染元素时,会根据当前节点的 可渲染元素大小 来设定蒙版区域

默认情况下,reversefalse,蒙版正向裁剪,蒙版区域外的子节点渲染区域不进行渲染。

reversetrue 时,蒙版反向裁剪,蒙版区域内的子节点渲染区域不进行渲染。

多个正向和反向的蒙版区域允许相互叠加,效果为多个蒙版效果叠加。

注意

  1. UIMask 必须配合渲染元素(如UIGraphic)使用。

属性描述

属性名 类型 默认值 说明
reverse boolean false UIMask是否反向裁剪

使用流程

image.png

/* UIMaskOut */
// 最外层的一层蒙版
const uimaskOutEntity = game.createEntity2D('UIMaskOut');
uimaskOutEntity.transform2D.size.x = 1200;
uimaskOutEntity.transform2D.size.y = 600;
const uimaskOut = uimaskOutEntity.addComponent(engine.UIMask);
const uimaskOutGraphic = uimaskOutEntity.addComponent(engine.UIGraphic);
uiRoot.addChild(uimaskOutEntity.transform2D);

// UIMaskOut 添加一层很大的蓝色底色
const uimaskOutGraphicEntity = game.createEntity2D('UIMaskOutGraphic');
uimaskOutGraphicEntity.transform2D.size.x = 2000;
uimaskOutGraphicEntity.transform2D.size.y = 1000;
const uimaskOutGraphicGraphic = uimaskOutGraphicEntity.addComponent(engine.UIGraphic);
uimaskOutGraphicGraphic.color = new engine.Color(23, 123, 210);
uimaskOutEntity.transform2D.addChild(uimaskOutGraphicEntity.transform2D);

/* UIMask1 */
// 左边的标准正向蒙版,会裁剪内部的白色色块
const uimask1Entity = game.createEntity2D('UIMask1');
uimask1Entity.transform2D.position.x = -300;
uimask1Entity.transform2D.size.x = 200;
uimask1Entity.transform2D.size.y = 200;
const uimask1 = uimask1Entity.addComponent(engine.UIMask);
const uimask1Graphic = uimask1Entity.addComponent(engine.UIGraphic);
uimaskOutEntity.transform2D.addChild(uimask1Entity.transform2D);

// UIMask1 内部的白色色块
const uimask1ChildGraphicEntity = game.createEntity2D('uimask1Graphic');
uimask1ChildGraphicEntity.transform2D.size.x = 300;
uimask1ChildGraphicEntity.transform2D.size.y = 400;
const uimask1ChildGraphic = uimask1ChildGraphicEntity.addComponent(engine.UIGraphic);
uimask1Entity.transform2D.addChild(uimask1ChildGraphicEntity.transform2D);

/* UIMask2 */
// 右边的正向蒙版
const uimask2Entity = game.createEntity2D('UIMask2');
uimask2Entity.transform2D.position.x = 300;
uimask2Entity.transform2D.size.x = 500;
uimask2Entity.transform2D.size.y = 500;
const uimask2 = uimask2Entity.addComponent(engine.UIMask);
const uimask2Graphic = uimask2Entity.addComponent(engine.UIGraphic);
uimaskOutEntity.transform2D.addChild(uimask2Entity.transform2D);

// 右边的正向蒙版UIMask2 添加子反向蒙版UIMaskReverse
const uiMaskReverseEntity =  game.createEntity2D('UIMaskReverse');
const uiMaskReverse = uiMaskReverseEntity.addComponent(engine.UIMask);
// 使用反向蒙版
uiMaskReverse.reverse = true;
const uiMaskReverseGraphic = uiMaskReverseEntity.addComponent(engine.UIGraphic);
// 蒙版使用的渲染区域修改为圆形
uiMaskReverseGraphic.shape = engine.UIGraphic.Shape.Circle;
// 蒙版使用的渲染区域圆形半径为150
uiMaskReverseGraphic.radius = 150;
uimask2Entity.transform2D.addChild(uiMaskReverseEntity.transform2D);

// UIMaskReverse 添加一个红色子渲染节点
const uiMaskReverseGraphicEntity = game.createEntity2D('UIMaskReverseGraphic');
uiMaskReverseGraphicEntity.transform2D.size.x = 500;
uiMaskReverseGraphicEntity.transform2D.size.y = 500;
const uiMaskReverseGraphicGraphic = uiMaskReverseGraphicEntity.addComponent(engine.UIGraphic);
uiMaskReverseGraphicGraphic.color = new engine.Color(180, 40, 100);
uiMaskReverseEntity.transform2D.addChild(uiMaskReverseGraphicEntity.transform2D);