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 矩形锚点位置
    通过脚本代码修改节点尺寸和锚点
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.rhkb.cn/news/404962.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用基础项目来理解spring的作用

简介 spring官方的解释过于专业化,初学者可能比较难懂,接下来我将通过一个最基础的Java项目来尽可能的展示spring中的作用及spring的底层是如何来实现的。 项目结构 该项目是一个简单的JavaSE项目,没有maven或者tomcat等其他。只在控制台进…

《黑神话悟空》2024官方配置要求一览

黑神话悟空配置要求 1080P 高画质推荐6650xt和4060以上的显卡高画质 全景光追推荐4060 2k 高画质推荐4060ti/7700x以上的显卡 高画质全景光追推荐4070 4K 高画质推荐4070s起步 高画质全景光追推存4080S 一、官方配置要求一览 1、最低配置: 需要 64 位处理器和操作系…

什么是逃逸分析

如何快速判断是否逃逸就看方法内new的对象实体是否能够被外部方法进行调用 什么是逃逸分析 在java虚拟机中,对象是在java堆中分配内存的,这是一个普遍的常识。但是,有一种特殊情况,那就是如果经过逃逸分析(escape an…

[HDCTF 2023]Welcome To HDCTF 2023

方法一:找个炸弹死掉,flag就出现 方法二:查看页面源码,发现底部assets/js/game.js 复制后访问看到jsfuck编码 复制到控制台查看flag

功能测试与自动化测试详解

🍅 点击文末小卡片,免费获取软件测试全套资料,资料在手,涨薪更快 什么是自动化测试? 自动化测试是指利用软件测试工具自动实现全部或部分测试,它是软件测试的一个重要组成 部分,能完成许多手工测试无法实…

【数据结构入门】二叉树之堆的实现

文章目录 前言一、树1.1 树的概念1.2 树的相关概念 二、二叉树2.1 二叉树的概念2.2 特殊的二叉树2.3 二叉树的性质 三、堆3.1 堆的概念3.2 堆的性质3.3 堆的存储3.4 堆的实现3.4.1 堆的初始化3.4.2 堆的销毁3.4.1 堆向上调整算法3.4.2 堆向下调整算法3.4.3 堆的创建3.4.4 堆的插…

ID3算法详解:构建决策树的利器

目录 引言 ID3算法概述 算法基础 信息熵 ​编辑 信息增益 ID3算法步骤 决策树 概念: 核心: 节点 1. 根节点 2. 非叶子节点 3. 叶子节点 引言 在机器学习领域,决策树是一种非常流行的分类和回归方法。其中,ID3算法作为决策树算法…

尚品汇-网关过滤用户请求、登录流程(三十五)

目录: (1)用户认证与服务网关整合 (2)server-gateway网关配置 (3)在服务网关中判断用户登录状态 (4)登录流程 (1)用户认证与服务网关整合 实…

百度 测试|测试开发 面试真题|面经 汇总

百度测开 开发测试工程师 提前批一二三面面经 事业群:MEG base:北京 一面:2022.8.12 时长:50min 自我介绍 个人项目,我的项目是围绕着学校课程的项目来的,面试官就让我介绍这门课讲了些什么 &#xf…

构建实时数据仓库:流式处理与实时计算技术解析

目录 一、流式处理 请求与响应 批处理 二、实时计算 三、Lambda架构 Lambda架构的缺点 四、Kappa架构 五、实时数据仓库解决方案 近年来随着业务领域的不断拓展,尤其像互联网、无线终端APP等行业应用的激增,产生的数据量呈指数级增长,对海量数…

前端开发攻略---彻底弄懂跨域解决方案

目录 1、浏览器的同源策略 1.1 源 1.2 同源与非同源 1.3 同源请求与非同源请求 2、跨域受到的限制 3、注意点 4、CORS解决Ajax跨域问题 4.1 CORS概述 4.2 CORS解决简单请求跨域 4.3 简单请求与复杂请求 4.4 CORS解决复杂请求跨域 4.5 借助CORS库快速完成配置 5、JS…

计算机毕业设计选什么题目好? springboot java沉浸式戏曲文化体验系统

✍✍计算机毕业编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java、…

【生物特征识别论文分享】基于深度学习的掌纹掌静脉识别

(待更新)基于深度学习的生物特征识别(手掌静脉、手背静脉、手指静脉、掌纹、人脸等)论文模型总结 。具体方法包括:基于特征表征、基于传统网络设计与优化、基于轻量级网络设计与优化、基于Transformer设计与优化、基于…

ES与MySQL数据同步实现方式

1.什么是数据同步: 1.Elasticsearch中的酒店数据来自于mysql数据库,因此mysql数据发生改变时,Elasticsearch也必须跟着改变,这个就是Elasticsearch与mysql之间的数据同步 2.数据同步实现方式: 常见的数据同步方案有三种&#x…

7.2 算法设计与分析

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

Python 办公自动化 处理 Excel 数据 【1】推荐

话说学好办公自动化,走遍天下都不怕!!! 好的,现在开始。 因为是一些办公自动化的应用场景,所以需要电脑支持excel、word和ppt以及python的运行环境。 如果有电脑不支持Excel word ppt的以及python环境下载安装配置可…

交通感知与车路协同系统-计算机毕设Java|springboot实战项目

🍊作者:计算机毕设匠心工作室 🍊简介:毕业后就一直专业从事计算机软件程序开发,至今也有8年工作经验。擅长Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等。 擅长:按照需求定制化开发项目…

QT:事件机制

一、事件机制 qt的核心机制:对象树、信号和槽、事件机制 1.1概念 就是当这件事情发生时,自动执行对应的功能代码。该某块功能代码是虚函数,只需重写该虚函数,即可执行重写的代码。 1.2事件处理简介 1. 什么是事件? (重…

【教学类-76-01】20240820书包01(图案最大化)

背景需求 通义万相生成图片,把图案最大化的方法(切掉白边) 【教学类-75-01】20240817“通义万相图片最大化透明png”的修图流程-CSDN博客文章浏览阅读1.6k次,点赞56次,收藏17次。【教学类-75-01】20240817“通义万相…

【Android 笔记】记移植OpenCV4.8图像人脸识别

前言 因业务需要,使用大屏端摄像头捕获图像,且要识别图像中人脸的数目以及从中随机抽取一人。 业务流程如下,调用摄像头预览、拍照,使用OpenCV库进行人脸识别,将识别到的人脸使用矩形框绘制出来,从识别的人…