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

news2025/2/5 10:51:13
  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 矩形锚点位置
    通过脚本代码修改节点尺寸和锚点
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) 挂载到节点上,来让节点具有各式各样的表现和功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2056752.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Web基础、http协议、源码编译构建LAMP

目录 一、DNS与域名 1.1域名概述 1.2域名小结 1.3DNS域名解析 1.4域名 二、网页的概念 1.网页的基本概念 三、web 1.1web概述 1.2渲染过程 1.3web1.0和web2.0 1.4静态页面和动态页面 四、http协议 1.http协议简介 2.cookie和session 2.1cookie 2.2session 3.c…

React学习笔记(一)——react基础

1. React 介绍 1.1 React是什么 React由Meta公司研发,是一个用于 构建Web和原生交互界面的库 1.2 React的优势 相较于传统基于DOM开发的优势: 组件化的开发方式不错的性能 相较于其它前端框架的优势: 丰富的生态跨平台支持 1.3 React的市场…

国内知名电器集团售后服务系统被黑!损失1.2亿!

两款软件入侵 近期,一款名为“A助手”的软件和另一款“B配置工具”被揭露存在严重的非法活动。 这两款软件被不法分子利用,并成功侵入了某知名企业的电器售后服务系统。通过技术手段,伪造了电器安装服务的工单,并以此骗取了大量的…

24年银行从业资格考试报名照规格要求

24年银行从业资格考试报名照规格要求 #银行从业 #银行从业资格证 #银行从业考试 #银行从业资格考试 #银行从业资格证报名照片 #银从

Unity 波函数坍缩算法随机地图生成

Unity 波函数坍缩算法随机地图生成 波函数波函数基本概念位置空间波函数动量空间波函数两种波函数之间的关系波函数的本征值和本征态波函数坍缩 熵是什么熵作为状态函数时间之箭 实现原理举个例子:2D迷宫地图生成 Unity 如何实现前期准备单元格代码瓦片地图代码波函…

使用亮数据爬虫工具解锁复杂爬虫场景

在当今数据驱动型时代,数据采集和分析能力算是个人和企业的核心竞争力。然而,手动采集数据耗时费力且效率低下,而且容易被网站封禁。 我之前使用过一个爬虫工具,亮数据(Bright Data) ,是一款低…

PCIe学习笔记(25)

数据完整性 PCI Express的基本数据可靠性机制包含在数据链路层(data Link Layer)中,它使用32位的LCRC (CRC)码逐链路检测TLP中的错误,并采用逐链路重传机制进行错误恢复。TLP是一个数据和事务控制单元,由位于PCI Express域“边缘”的数据源(…

重大发现!看Apache与nginx工作模型,享web服务幸福人生

文章目录 文章相关连接如下: Web 服务基础介绍ApacheApache prefork 模型 Apache worker 模型Apache event模型 Nginx-高性能的 Web 服务端nginx源码安装平滑升级和回滚平滑升级步骤:回滚步骤 nginx启动文件 文章相关连接如下: 如果想更多了…

【GH】【EXCEL】P4: Chart

文章目录 data and chartdonut chart (radial chart)Radial Chart bar chartBar Chart line chartLine Chart Scatter ChartScatter Chart Surface ChartSurface Chart Chart DecoratorsChart Decorators Chart GraphicsChart Graphics data and chart donut chart (radial cha…

《面板变系数模型及 Stata 具体操作步骤》

目录 一、文献综述 二、理论原理 三、实证模型 四、稳健性检验 五、程序代码及解释 六、代码运行结果 一、文献综述 在经济和社会科学研究领域,面板数据模型因其能够同时考虑个体和时间维度的信息而被广泛应用。传统的面板数据模型通常假设系数是固定的&#…

1.初识redis

文章目录 1.认识redis1.1 mysql和redis 对比1.2分布式系统1.2.1单机架构与分布式架构1.2.2数据库分离(应用服务器和存储服务器分离)与负载均衡1.2.3负载均衡器1.2.4 数据库读写分离1.2.5 数据库服务器引入缓存1.2.6数据库分库分表1.2.7 引入微服务 2.常见概念解释2.1 应用(Appl…

GoModule

GOPATH 最早的就是GOPATH构建模式, go get下载的包都在path中的src目录下 src目录是源代码存放目录。 package mainimport ("net/http""github.com/gorilla/mux" )func main() {r : mux.NewRouter()r.HandleFunc("/hello", func(w h…

iptables流量走向图

关联教学 https://www.bilibili.com/video/BV1dw411J7Qk/?spm_id_from333.337.search-card.all.click

7.2 算法设计与分析

分治法(考的概率较低) 回溯法(考的概率较低) 动态规划法(考的概率较高) 1

第四届机电一体化、自动化与智能控制国际学术会议(MAIC 2024)

目录 大会官网 会议简介 组织机构 大会主席 程序委员会主席 主讲嘉宾 征稿主题 参会说明 大会官网 http://www.icmaic.org 会议简介 第四届机电一体化、自动化与智能控制国际学术会议(MAIC 2024)将于2024年9月27-29日在中国成都召开。MAIC 20…

高性能MySQL04_操作系统和硬件优化

1. 从软件本身和它运行的典型工作负载来看,MySQL通常也更适合运行在廉价硬件上 2. 基本资源 2.1. CPU 2.2. 内存 2.3. 磁盘 2.4. 瓶颈 2.5. 网络资源 3. CPU 3.1. 最常见的瓶颈是CPU耗尽 3.2. 检查CPU使用率来确定工作负载是否受CPU限制 3.3. 低延迟&…

机器人学——正向运动学(机械臂)

Manipulator Forward Kinematics 机械臂基础概念 Joint and Link 连杆长度、连杆夹角 连杆偏距与关节角 移动关节看距离、旋转关节看角度 如何在杆上建立坐标系 地杆(link0)坐标系的建立 末端杆件坐标系的建立 DH表达法 如何计算出两杆之间的变换矩阵…

Qt鼠标键盘事件监听

普通的程序中. 鼠标事件监听 要监听鼠标事件,你可以使用QMouseEvent类,它提供了多种类型的鼠标事件,如QMouseEvent::MouseButtonPress、QMouseEvent::MouseButtonRelease、QMouseEvent::MouseMove等。 但是离开程序后就很难监听到&#xff0c…

机器学习第十一章--特征选择与稀疏学习

一、子集搜索与评价 我们将属性称为 “特征”(feature),对当前学习任务有用的属性称为 “相关特征”(relevant feature)、没什么用的属性称为 “无关特征”(irrelevant feature).从给定的特征集合中选择出相关特征子集的过程&…

单位订餐小程序开发:便捷高效,重塑职场餐饮新体验

随着移动互联网技术的飞速发展,各行各业都在积极探索数字化转型之路,以提升工作效率与用户体验。在单位日常运营中,餐饮管理作为保障员工基本生活需求的重要环节,其便捷性、高效性直接关系到员工的工作满意度与整体氛围。因此&…