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

  1. 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 矩形锚点位置
    通过脚本代码修改节点尺寸和锚点
csharp 复制代码
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

对齐策略: 跟屏幕适配有关的

  1. Camera组件

    cc.camera

    Priority: 相机的渲染优先级,值越小越优先渲染

    Visibility: 声明在当前相机中可见的节点层级集合,跟Layer配套使用

    相机组件其他参数: https://docs.cocos.com/creator/3.8/manual/zh/editor/components/camera-component.html

  2. 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)四种模式

  1. 图像资源:

    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: 设置九宫格边距

  2. 场景(Scene)

    场景(Scene)是游戏开发时组织游戏内容的中心,也是呈现给玩家所有游戏内容的载体。而场景文件本身也作为游戏资源存在,并保存了游戏的大部分信息,也是创作的基础。

    场景属性:

    Auto Release Assets: 自动释放场景(可节约内存,资源都会被释放,小心使用)

  3. 节点(Node) 是承载组件的实体,我们通过将具有各种功能的 组件(Component) 挂载到节点上,来让节点具有各式各样的表现和功能。

相关推荐
爱你的魔6 天前
cocosCreator视频web模式播放踩坑解决
cocoscreator
爱你的魔1 个月前
cocosCreator Tab内容布局组件(支持编辑器环节使用)
cocoscreator
w风雨无阻w3 个月前
CocosCreator3.8 IOS 构建插屏无法去除的解决方案
ios·cocoscreator·cocoscreator3.8·插屏
w风雨无阻w3 个月前
CocosCreator 3.8 IOS 热更新失败问题解决方案
android·ios·cocoscreator·热更新·cocoscreator3.8
椰子糖莫莫3 个月前
游戏引擎详解——图片
游戏引擎·cocoscreator
天马流星27193 个月前
cocosCreator3.X android 真机wifi 调试远程死活无效的问题
android·android studio·cocoscreator
Fuly10244 个月前
Cocos Creator2D游戏开发(5)-飞机大战(3)-手指操作玩家飞机移动
cocoscreator
Fuly10244 个月前
Cocos Creator2D游戏开发(4)-飞机大战(2)-编辑器界面
cocoscreator
平淡风云8 个月前
cocos creator 3.7.2使用shader实现图片扫光特效
前端·typescript·cocoscreator·游戏开发·shader·玩游戏·扫光