[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文件的方式让小车能动起来。

 章节源码、答疑和交流移步 https://t.zsxq.com/5JQPx