CocosCreator3.8研究笔记（十六）CocosCreator 2D对象

CocosCreator 中，不涉及模型的图片渲染体统称为 2D 渲染对象。

所有的 2D渲染对象需在 RenderRoot 节点下（带有 RenderRoot2D 组件的节点）才可以被渲染，由于 Canvas 组件本身继承 RenderRoot2D 组件，所以 Canvas 组件一般作为数据收集的入口。

2D 对象大致可以分为两类，2D 渲染对象 和 用户界面 User-interface（UI）。

区别在于 2D 渲染对象一般只负责将 2D 对象渲染出来，而 UI 则更多的承担着用户交互的能力。

一、2D 渲染组件

本身拥有渲染能力的组件我们称为 2D 渲染组件。

常用的 2D 渲染组件：Sprite 组件、Label 组件、Mask 组件、Graphics 组件、RichText 组件、UIStaticBatch 组件、Spine骨骼动画。

1、Sprite 组件

Sprite（精灵）是 2D 游戏最常见的显示图像的方式，在节点上添加 Sprite 组件，就可以在场景中显示项目资源中的图片。

（1）、Sprite 属性

（2）、渲染模式

• 普通模式（Simple）：根据原始图片资源渲染 Sprite，在这个模式下，我们一般不会手动修改节点的尺寸，保证场景中显示的图像和原始图片比例一致。
  
  
• 九宫格模式（Sliced）：图像将被分割成九宫格，并按照一定规则进行缩放以适应可随意设置的尺寸(size)。通常用于 UI 元素，或将可以无限放大而不影响图像质量的图片制作成九宫格图来节省游戏资源空间。
  
  
• 平铺模式（Tiled）：当 Sprite 的尺寸增大时，图像不会被拉伸，而是会按照原始图片的大小不断重复，就像平铺瓦片一样将原始图片铺满整个 Sprite 规定的大小。
  
  
• 填充模式（Filled）：根据原点和填充模式的设置，按照一定的方向和比例绘制原始图片的一部分。经常用于进度条的动态展示。

填充模式（Filled）

Type 属性选择填充模式后，会出现一组新的属性可供配置：

填充模式注意事项：

• 在 HORIZONTAL 和 VERTICAL 这两种填充类型下，Fill Start 设置的数值将影响填充总量，如果 Fill Start 设为 0.5，那么即使 Fill Range 设为 1.0，实际填充的范围也仍然只有 Sprite 总大小的一半。
  
  
• 而 RADIAL 类型中 Fill Start 只决定开始填充的方向，Fill Start 为 0 时，从 x 轴正方向开始填充。Fill Range 决定填充总量，值为 1 时将填充整个圆形。Fill Range 为正值时逆时针填充，为负值时顺时针填充。
  

2、Label 组件

Label 组件用来显示一段文字，文字可以是系统字体，TrueType 字体、BMFont 字体或艺术数字。

（1）、Label 属性

（2）、Label 排版

3、Mask 遮罩组件

Mask 用于规定子节点可渲染的范围，默认带有 Mask 组件的节点会使用该节点的约束框（也就是 属性检查器 中 Node 组件的 ContentSize 规定的范围）创建一个矩形渲染遮罩，该节点的所有子节点都会依据这个遮罩进行裁剪，遮罩范围外的将不会渲染。

（1）、Mask 属性

（2）、Type 类型

• GRAPHICS_RECT 矩形遮罩

• GRAPHICS_ELLIPSE 圆形遮罩

也可动态设置GRAPHICS_ELLIPSE:

const mask = this.getComponent(Mask);
mask.type = Mask.Type.ELLIPSE;
mask.segments = 32;

• GRAPHICS_STENCIL 自定义图形遮罩

代码动态设置GRAPHICS_ELLIPSE:

const g = this.mask.node.getComponent(Graphics);
g.lineWidth = 10;
g.fillColor.fromHEX('#ff0000');
g.moveTo(-10, 0);
g.lineTo(0, -20);
g.lineTo(30, 0);
g.lineTo(0, 40);
g.close();
g.stroke();
g.fill();

• SPRITE_STENCIL 自定义图片遮罩
  

const mask = this.getComponent(Mask);
mask.type = Mask.Type.SPRITE_STENCIL;
const sprite = this.getComponent(Sprite);
sprite.spriteFrame = this.stencilSprite;
mask.alphaThreshold = 0.1;

（3)、Mask 遮罩使用注意事项

• 节点添加了 Mask 组件之后，所有在该节点下的子节点，在渲染的时候都会受 Mask 影响。
• GRAPHICS_STENCIL 类型在这里没有做任何引擎需要的事，只是放开了对 graphics 操控，用户可以使用 mask 组件里的 graphics 属性来绘制自定义图形，但是节点的点击事件还是根据节点的尺寸来计算。
• SPRITE_STENCIL 类型默认需要一个图片资源，如果没有设置的话，相当于没有遮罩。

4、Graphics 组件

Graphics 组件提供了一系列绘画接口：

（1）、Graphics 组件属性

（2）、绘图方法演示

import { _decorator, Component, Graphics } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('Test')
export class Test extends Component {
    start () {
        const g = this.getComponent(Graphics);
        g.lineWidth = 1;
        g.fillColor.fromHEX('#ff0000');
        g.moveTo(-20, 0);
        g.lineTo(0, -60);
        g.lineTo(20, 0);
        g.lineTo(0, 60);
        g.close();
        g.stroke();
        g.fill();
    }
}