当前位置: 首页 > news >正文

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

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • webm格式怎么转换成mp4?7个有效方法将webm转mp4
  • 【网络】UDP和TCP之间的差别和回显服务器
  • 嵌入式day31
  • C++ 模板进阶知识
  • Java学习Day31:HTML 第一章:观音禅院
  • 低代码开发:机遇与挑战
  • python 可迭代,迭代器,生成器,装饰器
  • SpringBoot+Echarts实现可视化图表(Thymeleaf,Vue3.0两种实现)
  • Json-类型映射使用TypeFactory或者TypeReference
  • 多视点抓取(Multi-View Grasping)
  • STM32f407 网络接收 fpga 的 bin 文件并更新到 fpga series7(3)
  • 智慧社区新视界:EasyCVR视频汇聚平台下的数字化治理实践
  • 【Solidity】合约交互基础
  • google浏览器chrome用户数据(拓展程序,书签等)丢失问题
  • 多线程(4)——单例模式、阻塞队列、线程池、定时器
  • 【108天】Java——《Head First Java》笔记(第1-4章)
  • 【前端学习】-粗谈选择器
  • 2017-09-12 前端日报
  • CentOS6 编译安装 redis-3.2.3
  • CentOS7简单部署NFS
  • Docker下部署自己的LNMP工作环境
  • gcc介绍及安装
  • isset在php5.6-和php7.0+的一些差异
  • JavaScript设计模式与开发实践系列之策略模式
  • java小心机(3)| 浅析finalize()
  • LeetCode算法系列_0891_子序列宽度之和
  • Octave 入门
  • Phpstorm怎样批量删除空行?
  • Python十分钟制作属于你自己的个性logo
  • Python学习之路16-使用API
  • Redis字符串类型内部编码剖析
  • SAP云平台里Global Account和Sub Account的关系
  • vue--为什么data属性必须是一个函数
  • 第三十一到第三十三天:我是精明的小卖家(一)
  • 关于Java中分层中遇到的一些问题
  • 互联网大裁员:Java程序员失工作,焉知不能进ali?
  • 排序(1):冒泡排序
  • 批量截取pdf文件
  • 如何正确配置 Ubuntu 14.04 服务器?
  • 突破自己的技术思维
  • 微信如何实现自动跳转到用其他浏览器打开指定页面下载APP
  • 我看到的前端
  • 优秀架构师必须掌握的架构思维
  • ‌前端列表展示1000条大量数据时,后端通常需要进行一定的处理。‌
  • #AngularJS#$sce.trustAsResourceUrl
  • (html转换)StringEscapeUtils类的转义与反转义方法
  • (PWM呼吸灯)合泰开发板HT66F2390-----点灯大师
  • (亲测)设​置​m​y​e​c​l​i​p​s​e​打​开​默​认​工​作​空​间...
  • (十三)MipMap
  • (四) Graphivz 颜色选择
  • (未解决)jmeter报错之“请在微信客户端打开链接”
  • (五十)第 7 章 图(有向图的十字链表存储)
  • (一)基于IDEA的JAVA基础10
  • (原)记一次CentOS7 磁盘空间大小异常的解决过程
  • .NET MVC之AOP