【CocosCreator入门】CocosCreator组件 | Canvas(画布)组件

news2024/12/25 9:04:09

       Cocos Creator 是一款流行的游戏开发引擎,具有丰富的组件和工具,其中的Canvas能够将游戏物体渲染到屏幕上。


目录

一、组件介绍

二、渲染模式

三、组件属性

四、组件使用

五、脚本示例


一、组件介绍

       Canvas组件是Cocos Creator中重要的组件之一。在Cocos Creator中,场景中所有UI和游戏物体的显示都是由Canvas组件实现的。Canvas组件是一种可视化的渲染框架,它能够将游戏物体渲染到屏幕上,同时也提供了一些非常实用的功能,如层级管理、渲染顺序、渲染模式等等。

二、渲染模式

       Canvas组件有两种渲染模式,分别是“屏幕空间”和“世界空间”。屏幕空间模式下,Canvas组件会将所有的游戏物体渲染到屏幕上。这种模式下,Canvas组件可以直接控制UI的显示层级,并且支持一些UI元素的变形和动画效果。世界空间模式下,Canvas组件能够支持更为复杂的场景,支持多层的渲染和深度排序,可以将大量游戏物体渲染到同一个Canvas中,大大减少了渲染开销。

三、组件属性

属性说明
Design Resolution设计分辨率(内容生产者在制作场景时使用的分辨率蓝本)
Fit Height适配高度(设计分辨率的高度自动撑满屏幕高度)
Fit Width适配宽度(设计分辨率的宽度自动撑满屏幕宽度)
  1. Design Resolution:设计分辨率,用于设计UI界面,通常与屏幕分辨率不同,根据游戏的需要可以自行定义。

  2. Fit Width/Height:屏幕适配模式,适用于适应不同分辨率的设备,获得最佳的视觉效果。

四、组件使用

①创建子节点

       在Canvas节点下创建子节点也非常简单,只需要在层级管理器中右键点击Canvas节点,选择Create,然后选择想要创建的节点类型即可。Canvas节点的子节点可以是任何Cocoscreator所支持的节点类型,例如:Sprite、Label、Button、ProgressBar等。

②节点的层级

       在开发游戏时,所有节点都有一个优先级。如果某个节点的优先级高,那么它就会在其他节点的上面绘制。我们可以通过修改节点在层级管理器中的位置来调整优先级。

③节点的坐标系

       在Cocoscreator中,Canvas的坐标系是以左下角为原点的,x轴向右,y轴向上。我们可以在节点的属性检查器中调整节点的位置、大小等属性,也可以通过代码来修改节点的坐标,以实现游戏场景的布局。

五、脚本示例

       在游戏启动时,Canvas会默认初始化一些设置,例如设置触摸、鼠标等事件的响应,设置界面尺寸等。但是,我们也可以通过代码来自定义Canvas的初始化操作。

       例如,我们可以在Canvas节点上添加一个脚本组件,然后在脚本中重载start函数,在函数中设置自定义初始化操作,如下所示:

start: function () {
    cc.view.setDesignResolutionSize(480, 800, cc.ResolutionPolicy.SHOW_ALL);
}

        在上面的代码中,我们使用cc.view.setDesignResolutionSize函数来设置游戏设计分辨率为480x800,然后使用cc.ResolutionPolicy.SHOW_ALL来设置屏幕适配模式为全屏显示所有内容。


       总之,在Cocoscreator中,Canvas组件是游戏开发中非常重要的组件之一。它的主要作用是控制游戏场景的显示和交互,我们可以通过Canvas节点的子节点来添加游戏所需的UI元素、精灵、动画等等,通过代码来控制游戏场景的初始化和逻辑。掌握Canvas组件的使用方法对于开发者来说是非常必要的,它将帮助我们更快速、高效地完成游戏开发任务。 

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

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

相关文章

【Socket】之TCP数据报套接字

1. 介绍下API 1.1 ServerSocket API 这是创建TCP服务端Socket的API。 构造方法方法说明ServerSocket(int port)创建一个服务端流套接字Socket,并绑定到指定端口 普通方法方法说明ServerSocket.accept()开始监听指定端口(创建时绑定的端口&#xff09…

Spring学习——Nginx

Nginx概述 Nginx介绍 Nginx是一款轻量级的web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服务器中表现较好,中国大陆使用nginx的网…

Python学习之DateTime

文章目录 前言一、pandas是什么?二、使用步骤1.引入库2.使用date.today()打印日期3.Python当前日期和时间:now() today()总结 4.如何使用 Strftime()格式化日期和时间输出1. 首先,我们将看到一个简单的如何格式化年份的步骤。通过一个例子来理…

【微服务笔记18】微服务组件之Gateway实现服务限流(计数器算法、漏桶算法、令牌桶算法)

这篇文章,主要介绍微服务组件之Gateway实现服务限流(计数器算法、漏桶算法、令牌桶算法)。 目录 一、服务限流 1.1、几种限流算法 (1)计数器算法 (2)漏桶算法 (3)令…

叮咚,你的耳鼻喉专科医院营销策略快来查收

进入后疫情时代以来,人们对健康意识的不断提高,医疗行业也开始卷起来了,通过各种渠道来宣传和推广医院,吸引更多的患者。那么今天就以耳鼻喉专科医院为主,聊聊这类医院该怎么在Z时代做好营销。 医院营销可以分为线上和…

【行为型模式】观察者模式

文章目录 1、概述2、结构3、实现方式3.1、案例引入3.2、结构分析3.3、具体实现 4、观察者模式优缺点5、应用场景 1、概述 观察者模式(Observer)是一种行为设计模式,它定义了对象之间的一对多依赖关系,当一个对象的状态发生改变时,其他所有依…

【C++】二叉搜索树的应用

前言 二叉搜索树本质也是二叉树,但因为其数据存储的特殊 — 左子树的值都更小,右子树的值都更大,所以在大部分情况下,查找更为高效。本篇博客将讲述二叉搜索树两个应用搜索的场景 那么话不多说,马上开始今天的学习。 文…

linux运维必了解的日志文件系统

目录 一、inode与block1.1inode和block概述1.1.1inode和block的关系 1.2inode的内容1.2.1inode包含文件的元信息1.2.2linux文件系统的三个时间戳1.2.3目录文件结构 1.3inode的号码1.3.1 硬盘分区后的结构 1.4inode的大小1.5恢复误删除的xfs文件1.6EXT类型文件恢复误删除 二、分…

亿发软件:玩具批发行业需要怎样的进销存开单软件

中国玩具市场的发展潜力十分巨大,近五年来中国玩具行业的批发零售企业都保持着良好的发展态势。近年来,在数字化转型的时代浪潮下,玩具批发零售市场想实现进一步的高质量发展,充分满足客户多元化的供货需求,需要向数据…

Qt5 和 OpenCV4 计算机视觉项目:6~9

原文:Qt 5 and OpenCV 4 Computer Vision Projects 协议:CC BY-NC-SA 4.0 译者:飞龙 本文来自【ApacheCN 计算机视觉 译文集】,采用译后编辑(MTPE)流程来尽可能提升效率。 当别人说你没有底线的时候&#x…

OpenCV 图像处理学习手册:6~7

原文:Learning Image Processing with OpenCV 协议:CC BY-NC-SA 4.0 译者:飞龙 本文来自【ApacheCN 计算机视觉 译文集】,采用译后编辑(MTPE)流程来尽可能提升效率。 当别人说你没有底线的时候,…

javascript之数组

创建 有以下几种方式 1.构造函数 在使用构造函数时,可以不带new 创建空数组 let color new Array() 或者let color Array() 创建指定个数元素的数组 let color new Array(2) 或者let color Array(2) 创建指定元素的数组 let color new Array("bl…

atio函数和宏offset的介绍

目录 前言atoi函数宏offsetof总结 前言 本章带大家一起认识一些在我们C语言标准库中的函数 atoi函数 int atio(const char* str);头文件&#xff1a; #include<stdlib.h>参数&#xff1a; str指向常量字符串起始位置的指针 函数介绍&#xff1a; ①解析C语言字符串str,…

2023软件测试工程师必备技能?要卷,谁还不会了......

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 软件测试岗位是怎…

FPGA基于Tri Mode Ethernet MAC实现UDP通信 提供3套工程源码和技术支持

目录 1、前言2、我这里已有的UDP方案3、米联客UDP协议栈4、详细设计方案5、Tri Mode Ethernet MAC的使用6、vivado工程1详解7、vivado工程2详解8、vivado工程3详解9、上板调试验证并演示10、福利&#xff1a;工程代码的获取 1、前言 目前网上的fpga实现udp基本生态如下&#x…

Spring Security实战(五)—— 密码加密

一、密码加密的演进 MD5 (Message-Digest Algorithm 5) 和 SHA (Secure Hash Algorithm) 是两种常见的消息摘要算法&#xff0c;它们都被用于加密和数据完整性验证等领域。 MD5 是一种 128 位的哈希函数&#xff0c;常用于数据完整性校验和数字签名等方面。它将任意长度的信息…

WebServer项目(四)->(基于Proactor的c++)Web服务器简介及简单实现

基于Proactor的cWeb服务器项目 WebServer项目(四)-&#xff1e;(基于Proactor的c)Web服务器简介及简单实现1.Web Server&#xff08;网页服务器&#xff09;2.HTTP协议(应用层的协议)3.HTTP 请求报文格式4.HTTP响应报文格式5.HTTP请求方法6.HTTP状态码7.服务器编程基本框架8.两…

分布式搜索技术elasticsearch概念篇

文章目录 一、分布式搜索技术二、elasticsearch2.1 初识elasticsearch2.2 正向索引和倒排索引2.2.1 介绍2.2.2 优缺点 2.3 elasticsearch和mysql的对比 一、分布式搜索技术 分布式搜索技术是一种基于分布式计算的搜索引擎技术&#xff0c;它使用多台计算机协同工作来处理大规模…

ElementUI登陆表单中常用的标签属性

ElementUI官网 为登陆框添加一个边角弧度 <style> .className{/*设置div边边框角的弧度*/border-radius: 10px; } </style><el–input>标签常用属性 <!--使用prefix属性添加一个前缀图标--> <el-input prefix-icon"el-icon-user-solid"&g…

深度学习第J6周:ResNeXt-50实战解析

目录 一、模型结构介绍 二、前期准备 三、模型 三、训练运行 3.1训练 3.2指定图片进行预测 &#x1f368; 本文为[&#x1f517;365天深度学习训练营]内部限免文章&#xff08;版权归 *K同学啊* 所有&#xff09; &#x1f356; 作者&#xff1a;[K同学啊] &#x1f4cc; …