- Canvas
RenderRoot2D 组件所在的节点是 2D 渲染组件数据收集的入口,而 Canvas(画布) 组件继承自 RenderRoot2D 组件,所以 Canvas 组件也是数据收集入口。所有 2D 渲染元素都必须作为 RenderRoot2D 的子节点才能被渲染。
Canvas还作为屏幕适配的重要组件:
主要就是适配屏幕宽度和适配屏幕高度:适配宽度: 宽度保留,高度截取;适配高度,高度保留,款截取
属性检查器:
位置(Position):
修改节点的 Position 属性设定的节点位置是该节点相对于父节点的 本地坐标系,而非世界坐标系。
旋转(Rotation): 左加右减
缩放(Scale) 按长宽进行缩放
Mobility: 节点的可移动性,不同的可移动性会导致节点在光照上有不同的特性和表现
Static 静态光源:会烘焙直接光与间接光,烘焙完运行时不参与计算
Stationary 固定光源:只烘焙间接光,只在运行时计算直接光
Movable 可移动光源:不参与烘焙,只在运行时计算直接光
Layer: 节点的 Layer 属性是全局且唯一的,但是不同的节点可以设置相同的 Layer 属性,使其被同一个相机所观察
Visibility 属性用于设置哪些层级(Layer)的节点应该被相机观察到,可同时选择多个 Layer。
当开发者在 Visibility 属性中勾选了多个 Layer 时,Visibility 属性值便是通过将多个 Layer 的属性值执行
cc.UITransform
ContentSize UI 矩形内容尺寸
AnchorPoint UI 矩形锚点位置
通过脚本代码修改节点尺寸和锚点
import { _decorator, Component, Node, UITransform } from 'cc';
const { ccclass, property } = _decorator;@ccclass('Example')
export class Example extends Component {start () {const uiTransform = this.getComponent(UITransform);// 方法一uiTransform.setContentSize(200, 120);uiTransform.setAnchorPoint(0, 0.5);// 方法二uiTransform.width = 200;uiTransform.height = 120;uiTransform.anchorX = 0;uiTransform.anchorY = 0.5;}
}
参考: https://docs.cocos.com/creator/3.8/manual/zh/ui-system/components/editor/ui-transform.html
cc.Canvas
CameraComponent: 关联的相机,此相机不一定会渲染 Canvas 下内容,可以与 AlignCanvasWithScreen 属性配合自动改变 Camera 的一些参数使其与 Canvas 对齐
AlignCanvasWithScreen: Canvas 关联的相机是否要与 Canvas 对齐,如果想要自己控制相机位置请勿勾选此选项(卷轴游戏等)
cc.widget
对齐策略: 跟屏幕适配有关的
-
Camera组件
cc.camera
Priority: 相机的渲染优先级,值越小越优先渲染
Visibility: 声明在当前相机中可见的节点层级集合,跟Layer配套使用
相机组件其他参数: https://docs.cocos.com/creator/3.8/manual/zh/editor/components/camera-component.html -
Sprite组件
cc.Sprite:
CustomMaterial: 自定义材质,其使用方法与其他内置材质并无不同,将要使用的材质拖拽到 CustomMaterial 属性框中即可。
Color: 图片颜色
Sprite Atlas: Sprite 显示图片资源所属的图集
SpriteFrame: 精灵帧(图片资源中讲解)
Grayscale: 灰度模式, 开启后Sprite会使用灰度渲染模式
Size Mode: 指定 Sprite 的尺寸
Trimmed 表示会使用原始图片资源裁剪透明像素后的尺寸
Raw 表示会使用原始图片未经裁剪的尺寸
Custom 表示会使用自定义尺寸。当用户手动修改过 Size 属性后,Size Mode 会被自动设置为 Custom,除非再次指定为前两种尺寸。
Type: 染模式,包括普通(Simple)、九宫格(Sliced)、平铺(Tiled)和填充(Filled)四种模式
-
图像资源:
Type(类型): 用于设置图像资源的类型,包括 raw、texture(默认)、normal map、sprite-frame、texture cube
raw:原始图片类型,无作用,用户不需要关心。
texture: 图像资源类型,也是导入的图像资源的默认类型,texture: 类型便是 Texture2D 纹理资源
normal map:法线贴图类型,常用于渲染 3D 模型
sprite-frame:精灵帧资源,用于 2D/UI 制作上
texture cube:立方贴图类型,使用在全景图上
精灵帧资源(SpriteFrame): 在 属性检查器 中将图像资源的类型设置为 sprite-frame,并点击右上角的绿色打钩按钮保存:
Trim Type: 裁剪类型1. Auto(自动) Custom(自定义), None(无)
Trim Threshold: 透明阈值, 默认以,取值0-1,会将透明度再设定值一下的像素裁剪掉,当TrimType为Auto时有效;
Trim X、Y、Width、Height: 裁剪矩形框; TrimType设置为Custom时有效
Border Top、Bottom、Left、Right: 设置九宫格边距 -
场景(Scene)
场景(Scene)是游戏开发时组织游戏内容的中心,也是呈现给玩家所有游戏内容的载体。而场景文件本身也作为游戏资源存在,并保存了游戏的大部分信息,也是创作的基础。
场景属性:
Auto Release Assets: 自动释放场景(可节约内存,资源都会被释放,小心使用) -
节点(Node) 是承载组件的实体,我们通过将具有各种功能的 组件(Component) 挂载到节点上,来让节点具有各式各样的表现和功能。