[Cocos Creator 3.5赛车游戏] 第4节 创建汽车节点

在实现汽车节点之前,我们要先熟悉一下少量的基本概念,这样才能让您更快的实现第一个汽车节点。

一、基本概念

1.什么是节点:

在Cocos中,场景是由一系列节点组成的,每个节点下面又可以有子节点,而每个节点都有自己的属性和组件,属性是指位置、大小和旋转等,而组件是指则是对功能的封装,例如给节点添加个刚体组件,这个节点就可以在受到作用力时像真实物体一样运动状态发生改变,再比如给加点加上个精灵(图片)组件,这个节点就可以显示图片了。

您现在可能已经猜到了,我们即将实现的小车将会是一个带有刚体组件和精灵组件的挂在Game场景下的节点。

2.如何控制节点/更改节点属性:

在Coscos中,节点不光可以挂载组件,还可以挂载自定义脚本,自定义脚本主要使用到两个方法,第一个方法是start()方法,start 方法会在组件第一次激活时调用,所以start方法往往回写对节点的初始操作,比如设置起始点坐标、设置角色满血状态等,第二个方法是update(dt:number),update方法在游戏的每一帧都会调用,所以update方法往往用来写对节点状态改变的方法,例如更新角色的最新血量、更新角色位置(如果操作者此时正在按着前进按钮)等。

3.Canvas节点与Camera节点:

在层级管理器中展开Game场景,就会看到他的下面有个Canvas节点,Canvas节点又有一个Camera节点。Canvas节点会把它下面的所有需要渲染的子节点渲染出来,而Camera节点则会将它的视野内的被渲染的组长在屏幕上显示出来。所以Camera节点的视野要保证和Canvas节点的边界对齐


 

以上就是本章将会用到的基本概念,下面,就开始实现小车节点吧

二、实现汽车节点:

1.创建汽车节点

前面的基本概念曾说过:“Canvas节点会把它下面的所有需要渲染的子节点渲染出来”,所以您的小车节点为了能能够渲染出来就需要作为子节点挂在Canvas节点下,现在,请在层级管理器中鼠标右键点击Canvas,选择创建空节点:

名字叫做“Car”,创建完成后,您可以用鼠标左键点击这个节点,在您点击后,场景编辑器会显示这个节点的位置,以及它的形状,目前看是个正方形。右边的属性检查器会显示这个节点的基本属性以及已经挂载的组件。效果如下:

首先我们看它为什么是个正方形,请您观察右侧属性检查器中的UITransform组件,目前您可以认为这个组件用来告诉他的所属Canvas在渲染这个节点的时候在UI界面上的宽和长分别是Content Size的W和H填入的值,如果一个节点没有UITransform组件,那么这个节点将不会被渲染。至于Anchor Point则是组件中心点偏移比例也就是“锚点”的意思,如果您不明白锚点是什么意思,那么请直接在界面中修改他们的值,您会明白什么是锚点了。所以综上,根据UITransform的指示,这个节点是个100*100的正方形,而因为没有能指示如何渲染颜色或者图片的组件(比如精灵也就是图片组件或者单色精灵组件),所以目前这个节点是透明的。

2.导入图片

我们先找一张汽车俯视视角的图片,如果您没有素材的话可以用我的素材:

将以上图片下载到本地后,请先回到您的Cocos Creator 界面,在左下角资源管理器中的assets层级用鼠标右键点击,然后选择创建-文件夹,新建一个叫做image的文件夹,我们以后用到的所有图片资源都将会保存在这里:

然后请鼠标右键image文件夹,选择“在资源管理器中显示”,如果您是Mac,请选择“reval in Finder”,总之,您将会在操作系统自带的文件管理器中看到image文件夹,如下图所示:

进入image文件夹,将刚才下载下来的图片重命名为car-1保存在image文件夹下:

然后,请回到您的Cocos Creator界面,您会发现image文件夹下已经有了car-1,说明已经导入成功,效果如下:

3.让汽车节点显示图片

现在您已经有了一个汽车节点,也已经将汽车图片导入了进来,现在您需要在“Car”这个节点下增加一个带有精灵(图片)组件的子节点。所以现在请您鼠标右键点击Car节点,选择“创建-2D对象-Sprite(精灵)”,Cocos Creator就会给您创建出一个名为“CarSprite”并自带精灵(图片)组件的节点。效果如下:

您可能会疑惑,所谓“2D对象-Sprite(精灵)”不就是个带Sprite组件的节点吗,我自己手动创建个空节点然后往上挂一个Sprite组件不也一样吗?您这么想是没错的,这种操作和上面的效果等同。

接下来,我们点击CarSprite节点,在右侧属性检查器下找到Sprite组件,找到SpriteFrame属性,把目前的“default_sprite”给叉掉, 选择我们刚刚导入的car-1,就会显示汽车了,效果如下:

4.运行

现在,在视觉上汽车节点没问题了,您可以在Windows上点击Ctrl+S键或者在Mac上点击Command+S键来保存您的成果,然后点击屏幕上方的运行按钮来看下您的效果:

在您点击完运行后,您的浏览器将会自动运行并打开预览效果:

这一章就到此结束了,您将会在下一章中学到如何通过自定义脚本也就是挂载typescript文件的方式让小车能动起来。

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

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

相关文章

Axure RP 9 for Mac:强大的原型设计利器

Axure RP 9 for Mac是一款功能强大的原型设计工具,专为Mac用户打造。它支持高保真度的应用程序和网站原型设计,帮助用户快速创建高质量的产品原型。软件内置丰富的交互效果和动画设计选项,设计师可以通过简单的操作,为原型添加各种…

php获得淘宝商品评论 API

要获得淘宝商品评论的API,您可以使用淘宝开放平台的接口。以下是获取淘宝商品评论的一种方法: 注册成为淘宝开放平台的开发者。登录淘宝开放平台,创建应用,获取到App Key和App Secret。或者使用第三方App Key和App Secret生成签名…

Eclipse下WEB-INF/classes目录下没生成编译最新class文件

右击项目 >> Properties >>Deployment Assembly >>Source 把/src/main/java 的Deploy Path 改为 WEB-INF/classes

MYSQL之binlog详解优缺点

MYSQL之binlog详解 一、什么是binlog? binlog,即二进制日志,它记录了数据库上的所有改变,并以二进制的形式保存在磁盘中它可以用来查看数据库的变更历史、数据库增量备份和恢复、Mysql的复制(主从数据库的复制)二、binlog模式 …

大模型平台后端开发(xiaomi)

文章目录 算法题 算法题 1 三数之和 (注意去重的边界条件,过几天再刷几次) 2 长度最小的子数组 (代码随想录题目,滑动窗口) 3 用链表实现栈 package mainimport ("errors""fmt" )// Node 定义链表节点 type…

记录计全支付切换到RabbitMQ时启动报错的问题

记录计全支付切换到RabbitMQ时启动报错的问题 首先在application.yml中切换到RabbitMQ配置安装RabbitMQ、Erlang、延时插件 rabbitmq_delayed_message_exchange,延迟插件必装 首先在application.yml中切换到RabbitMQ配置 # 第一处rabbitmq:addresses: 127.0.0.1:56…

java安全可控、安可、国产信创、国产化有哪些替代品【完整版本】100%兼容测试

安全可控、安可、 国产信创、国产化 java安全可控、安可、国产信创、国产化有哪些替代品【完整版本】100%兼容测试 系统、芯片、CPU、缓存、数据库、中间件、负载均衡、WEB服务器、防火墙、消息队列 开发 角色: 前端☑ 后端☑ 测试□ 数据库☑ 产品✅ UI设计□ 是否熟悉国产…

python 合并 pdf

from pypdf import PdfMergerpdfs [file1.pdf, file2.pdf, file3.pdf, file4.pdf]merger PdfMerger()for pdf in pdfs:merger.append(pdf)merger.write("result.pdf") merger.close()参考 https://stackoverflow.com/questions/3444645/merge-pdf-files

Winform自定义控件 —— 开关

在开始阅读本文之前,如果您有学习创建自定义控件库并在其他项目中引用的需求,请参考:在Visual Studio中创建自定义Winform控件库并在其他解决方案中引用https://blog.csdn.net/YMGogre/article/details/126508042 0、引言 由于 Winform 框架并…

深入探索Jetpack Compose:大前端式客户端开发实战

💂 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】🤟 一站式轻松构建小程序、Web网站、移动应用:👉注册地址🤟 基于Web端打造的:👉轻量化工具创作平台💅 想寻找共同学习交…

(二)Jetpack Compose 布局模型

前文回顾 (一)Jetpack Compose 从入门到会写-CSDN博客 首先让我们回顾一下上一篇文章中里提到过几个问题: ComposeView的层级关系,互相嵌套存在的问题? 为什么Compose可以实现只测量一次? ComposeView和…

还拿B端设计经验,设计政务类系统,驴唇不对马嘴啦。

一、什么是政务类系统,涉及哪些领域 政务类系统是指用于政府机构或政府部门进行管理和运营的信息化系统。政务类系统的目的是提高政府工作效率、优化公共服务、加强政府与公民之间的互动和沟通。 政务类系统通常涵盖了各个方面的政府工作,包括但不限于以…

Media Encoder 2024 for Mac:专业的音视频编码神器

Media Encoder 2024 for Mac,作为Mac用户的专业音视频编码工具,凭借其强大的功能和用户友好的界面,深受专业人士的喜爱。它支持将各种格式的音视频素材转换为多种流行格式,如MP4、MOV、AVI等,满足不同的播放和发布需求…

计算机网络-DHCPv6基础

前面我们学习了IPv6地址可以通过手动配置、无状态自动配置、DHCPv6配置,这里简单学习下DHCPv6的知识点。 一、DHCPv6概述 DHCPv6 (Dynamic Host Configuration Protocol for IPv6) 是一种网络协议,设计用于IPv6网络环境中自动为网络设备分配必要的配置信…

NIOS II实现LED流水灯以及串口输出(DE2-115开发板)

NIOS II实现LED流水灯以及串口输出(DE2-115开发板) 前言什么是Qsys?什么是NIOSII?注意事项1、管脚配置2、配置NIOSII时的连接3、注意中断配置好后是这样的4、注意名称的配置5、设置双功能引脚 NIOS II的报错代码以及效果演示流水灯输出到电脑串口助手 …

笔记本电脑忘记开机密码怎么办?不需重装系统,重置开机密码

笔记本电脑忘记开机密码,重置开机密码方法 这里记录个方法,亲测有效。我的电脑版本是Windows11,21H2。 步骤1:打开疑难解答界面 方式1:按住Shift键,然后重启电脑。我电脑使用这个方法无效。 方式2&#…

盘点2024年自动猫砂盆品牌,哪个牌子自动猫砂盆比较好?

养猫之路漫漫,无论是新手还是老手,都需要细心照料猫咪的每一个需求。特别是在选择自动猫砂盆这个问题上,更是让人头疼不已。因为每只猫咪的喜好和习惯都不同,如果猫砂盆选得不对,猫咪可能会拒绝使用,导致家…

计算机视觉全系列实战教程:(一)概述

1.图像基本概念 (1)数字图像 在计算机视觉中,一般是以数字图像作为基础,所谓数字图像,就是一种以二维数组形式表示的图像,本质就是一个二维数组。 (2)图形 用数学规则产生的或具…

复制即用!纯htmlcss写的炫酷input输入框

一般我们写css样式都要用样式库,但是嫌麻烦,如果能找到现成的内容复制上去就很香了,下文是笔者觉得好看的纯html&css写的样式,可以直接复制到Vue等内,十分方便。 input组件 1) 下面这个很推荐&#…

南京中科微Si24R2E:低功耗2.4GHz有源RFID SoC单发射芯片+7dBm可调输出功率,节省应用成本

Si24R2E是针对有源RFID市场设计的低功耗、高性能的2.4GHz标签系统的SoC单芯片,集成嵌入式2.4GHz无线射频发射器模块、128次可编程NVM存储器模块以及自动发射控制器模块等。 Si24R2E芯片主要特性: 工作在2.4GHz ISM频段 内置128次可编程NVM存储器 具有…