CocosCreator Sprite组件、Label组件、Mask组件 (第十一篇)

一、Sprite 组件

属性面板 :
在这里插入图片描述
Sprite(精灵)是 2D 游戏中最常见的显示图像的方式,在节点上添加 Sprite 组件,就可以在场景中显示项目资源中的图片。

1. Sprite 属性

属性 功能说明
Atlas Sprite 显示图片资源所属的 Atlas 图集资源。
Sprite Frame 渲染 Sprite 使用的 SpriteFrame 图片资源。(Sprite Frame 后面的 编辑 按钮用于编辑图像资源的九宫格切分)
Type 渲染模式,包括普通(Simple)、九宫格(Sliced)、平铺(Tiled)、填充(Filled)和网格(Mesh)渲染五种模式
Size Mode 指定 Sprite 的尺寸
Trimmed 表示会使用原始图片资源裁剪透明像素后的尺寸
Raw 表示会使用原始图片未经裁剪的尺寸
Custom 表示会使用自定义尺寸。当用户手动修改过 Size 属性后, Size Mode 会被自动设置为 Custom ,除非再次指定为前两种尺寸。
Trim 勾选后将在渲染时去除原始图像周围的透明像素区域,该项仅在 Type 设置为 Simple 时生效。
Src Blend Factor 当前图像混合模式
Dst Blend Factor 背景图像混合模式,和上面的属性共同作用,可以将前景和背景 Sprite 用不同的方式混合渲染

2. Sprite 组件支持五种Type渲染模式:

普通模式(Simple) :

按照原始图片资源样子渲染 Sprite,一般在这个模式下我们不会手动修改节点的尺寸,来保证场景中显示的图像和美术人员生产的图片比例一致。

九宫格模式(Sliced) :

图像将被分割成九宫格,并按照一定规则进行缩放以适应可随意设置的尺寸( size )。通常用于 UI 元素,或将可以无限放大而不影响图像质量的图片制作成九宫格图来节省游戏资源空间。

平铺模式(Tiled) :

当 Sprite 的尺寸增大时,图像不会被拉伸,而是会按照原始图片的大小不断重复,就像平铺瓦片一样将原始图片铺满整个 Sprite 规定的大小。
Tiled 模式下的 Sprite 会受到九宫格分割的影响,此时将分别依据 SpriteFrame 资源对象记录的 insetTop 、 insetBottom 、 insetLeft 、 insetRight 属性切割每一张图片。在拉伸时将保持边缘部分的尺寸,且对中心部分平铺。

填充模式(Filled) :

根据原点和填充模式的设置,按照一定的方向和比例绘制原始图片的一部分。经常用于进度条的动态展示。

3. 详解 填充模式(Filled)

属性 功能说明
Fill Type 填充类型选择,有 HORIZONTAL (横向填充)、 VERTICAL (纵向填充)和 RADIAL (扇形填充)三种。
Fill Start 填充起始位置的标准化数值(从 0 ~ 1,表示填充总量的百分比),选择横向填充时, Fill Start 设为 0,就会从图像最左边开始填充
Fill Range 填充范围的标准化数值(同样从 0 ~ 1),设为 1,就会填充最多整个原始图像的范围。
Fill Center 填充中心点,只有选择了 RADIAL 类型才会出现这个属性。决定了扇形填充时会环绕 Sprite 上的哪个点,所用的坐标系和 Anchor 锚点 是一样的。

二、 Label 组件

属性面板:
在这里插入图片描述

1. Label 属性

属性 功能说明
String 文本内容字符串。
Horizontal Align 文本的水平对齐方式。可选值有 LEFT,CENTER 和 RIGHT。
Vertical Align 文本的垂直对齐方式。可选值有 TOP,CENTER 和 BOTTOM。
Font Size 文本字体大小。
Line Height 文本的行高。
SpacingX 文本字符之间的间距。(使用 BMFont 位图字体时生效)
Overflow 文本的排版方式,目前支持 CLAMP,SHRINK 和 RESIZE_HEIGHT。详情见下方的 Label 排版。
Enable Wrap Text 是否开启文本换行。(在排版方式设为 CLAMP、SHRINK 时生效)
Font 指定文本渲染需要的字体文件,如果使用系统字体,则此属性可以为空。
Font Family 文字字体名字。(使用系统字体时生效)
Enable Bold 是否启用黑体。(使用系统字体或 TTF 字体时生效)
Enable Italic 是否启用斜体。(使用系统字体或 TTF 字体时生效)
Enable Underline 是否启用下划线。(使用系统字体或 TTF 字体时生效)
Underline Height 下划线的高度。
Cache Mode 文本缓存类型包括 NONE、BITMAP、CHAR 三种。仅对系统字体或 TTF 字体有效,BMFont 字体无需进行这个优化。详情见下方的 文本缓存类型。
Use System Font 是否使用系统字体。
Materials 材质资源

2. Label 排版 (Overflow)

属性 功能说明
CLAMP 文字尺寸不会根据 Bounding Box 的大小进行缩放,Wrap Text 关闭的情况下,按照正常文字排列,超出 Bounding Box 的部分将不会显示。Wrap Text 开启的情况下,会试图将本行超出范围的文字换行到下一行。如果纵向空间也不够时,也会隐藏无法完整显示的文字。
SHRINK 文字尺寸会根据 Bounding Box 大小进行自动缩放(不会自动放大,最大显示 Font Size 规定的尺寸)。
Wrap Text 开启时,当宽度不足时会优先将文字换到下一行,如果换行后还无法完整显示,则会将文字进行自动适配 Bounding Box 的大小。
Wrap Text 关闭时,则直接按照当前文字进行排版,如果超出边界则会进行自动缩放。

注意:这个模式在文本刷新的时候可能会占用较多 CPU 资源。
RESIZE_HEIGHT 文本的 Bounding Box 会根据文字排版进行适配,这个状态下用户无法手动修改文本的高度,文本的高度由内部算法自动计算出来。

3. 文本缓存类型(Cache Mode)

NONE
默认值,Label 中的整段文本将生成一张位图。

BITMAP
选择后,Label 中的整段文本仍将生成一张位图,但是会尽量参与 动态合图。只要满足动态合图的要求,就会和动态合图中的其它 Sprite 或者 Label 合并 Draw Call。由于动态合图会占用更多内存,该模式只能用于文本不常更新的 Label。补充:和 NONE 模式一样,BITMAP 模式会强制给每个 Label 组件生成一张位图,不论文本内容是否等同。如果场景中有大量相同文本的 Label,建议使用 CHAR 模式以复用内存空间。

CHAR
原理类似 BMFont,Label 将以“字”为单位将文本缓存到全局共享的位图中,相同字体样式和字号的每个字符将在全局共享一份缓存。能支持文本的频繁修改,对性能和内存最友好。
不过目前该模式还存在如下限制,我们将在后续的版本中进行优化:
1、该模式只能用于字体样式和字号固定(通过记录字体的 fontSize、fontFamily、color、outline 为关键信息,以此进行字符的重复使用,其他有使用特殊自定义文本格式的需要注意),并且不会频繁出现巨量未使用过的字符的 Label。这是为了节约缓存,因为全局共享的位图尺寸为 2048*2048,只有场景切换时才会清除,一旦位图被占满后新出现的字符将无法渲染。
2、不能参与动态合图(同样启用 CHAR 模式的多个 Label 在渲染顺序不被打断的情况下仍然能合并 Draw Call)


三、 LabelOutline 组件

LabelOutline 组件将为所在节点上的 Label 组件添加描边效果,只能用于系统字体或者 TTF 字体。
属性功能:Color 描边的颜色 ,Width 描边的宽度

扫描二维码关注公众号,回复: 9568778 查看本文章

四、 LabelShadow 组件

LabelShadow 组件可以为 Label 组件添加阴影效果,但只能用于系统字体或者 TTF 字体。且当 Label 组件的 Cache Mode 属性设置为 CHAR 时不生效。
属性:

  • Color 阴影的颜色
  • Offset 字体与阴影的偏移
  • Blur 阴影的模糊程度

五、 Mask(遮罩)组件

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

Mask 属性

属性 功能说明
Type 遮罩类型。包括 RECT、ELLIPSE、IMAGE_STENCIL 三种类型
Inverted 布尔值,反向遮罩
Alpha Threshold Alpha 阈值,该属性为浮点类型,仅在 Type 设为 IMAGE_STENCIL 时才生效。只有当模板像素的 alpha 值大于该值时,才会绘制内容。该属性的取值范围是 0 ~ 1,1 表示完全禁用。
Sprite Frame 遮罩所需要的贴图,只在遮罩类型设为 IMAGE_STENCIL 时生效
Segements 椭圆遮罩的曲线细分数,只在遮罩类型设为 ELLIPSE 时生效

不忧虑潦倒的现在,不畏惧未知的未来,坦然前行,努力奋斗,去迎接那一场春暖花开的盛宴,待那时,即使青春不再,容颜已逝,站在人生的顶峰,你依然美丽。

发布了39 篇原创文章 · 获赞 48 · 访问量 9220

猜你喜欢

转载自blog.csdn.net/qq_45021180/article/details/104544865