Cocos Creator2D游戏开发(14)---CocosCreator常用组件详解

最新推荐文章于 2025-02-12 09:00:00 发布

Fuly1024

最新推荐文章于 2025-02-12 09:00:00 发布

阅读量1.7k

点赞数 10

分类专栏： Cocos Creator 文章标签： CocosCreator

本文链接：https://blog.youkuaiyun.com/xy3233/article/details/141288616

版权

Cocos Creator 专栏收录该内容

15 篇文章

订阅专栏

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）挂载到节点上，来让节点具有各式各样的表现和功能。