官方文档

关键词

组件文本鼠标按钮右键齿轮文本节点图片节点显示图片图片资源轮子车轮

文字记录

大家好，我是邵发，这节课我们说一下节点和组件的关系。前面其实我们已经添加了一些节点，比如说图片节点或者是文本节点，来我们观察一下。比如说在这里边我们创建了一个图片节点，能够显示一个图片，然后又添加了一个文本节点，可以显示文本。

组件

我们观察一下属性检查器里边的属性，在右边我们知道有一个东西叫做组件，比如说对一个这个文本节点来说，它的右边就有一个名字叫做 label 的组件，那对于图片这个节点来说，它右边会加挂一个叫做 sprite 的组件，这个就是我们这节课要讲的两个概念，节点对应的术语叫 node ，组件叫 component

组件什么意思呢？就是一个功能的意思，比如说我们刚才看到的sprite 组件用于显示一个图片，label组件的功能则是用来显示一个文本。我们用另外一种角度来看待这个问题，看一下我的演示，比如说我要显示一张图片，那么我可以使用这种方式，首先右键创建节点，添加一个空节点

然后在右边的属性检查器里边，你可以发现当前这个节点它下边并没有任何组件。所以当前这个节点看起来就是一个空的，什么也不能显示，什么功能也没有。

那我们现在希望它显示张图片，那显示图片用什么功能组件，用的是 sprite 组件，所以我们在右边只需要添加组件，然后在这个渲染类组件里边选择我们所需要的，比如说下边有一个 sprite， 组件就可以来显示一张图片，所以我们选择它就可以了。

那么这时候有几个属性需要我们来填写一下，那最重要的属性就是sprite frame ，你需要把一个图片资源在这里面来指定一下，那怎么样指定，先选中它

然后左边鼠标左键按下去，拖过来松开，那这样的话就给它指定了这个图片资源。

还有我们可以发现这种方式似乎也可以来添加一个图片组件，这是我们的第二步，最神奇的是第三步。好，它虽然是一个图片组件，但是我们也可以改变主意，比如说我把这个给删掉，注意看一下我的操作，右边齿轮这个按钮点一下，有一个remove，表示删除这个组件

我们再点添加组件，然后在渲染类组件里边选择 label，然后给他设置一下这个 string 这个属性。

这时你发现同样的一个节点，当我们加挂 label 这个组件之后，它就变成了文本节点，好，通过这个演示，大家应该已经明白了什么叫节点，什么叫组件，节点本身是没有类型的，节点就是一个节点，至于这个节点是什么功能？是由它下边加挂的这个组件来决定的，那你加挂一个sprite组件就来显示图片，如果你要加挂一个 label 组件的话就能够显示文本，所以说这个组件你可以用它全称就是功能组件。

那现在我们说两点。第一个就是节点本身没有类型，刚才已经说了起作用的实际上是组件，组件才是一个真正的功能。比如说你要显示一个图片节点，其实就是先加载一个空节点，然后在节点上加挂一个 sprite 组件就可以了，那然后这个组件数量其实是很多的，那一个节点可以加挂多个组件，比如说在这里边你已经有了一个 label 组件，然后我还可以继续添加，比如说在 UI 组件里边我再添加一个 button 组件，那么它既有 label 的特点，也有 button 这个功能了

我们稍微来设置一下，那比如说它现在就变成了这个样子，上面一个 label 下面一个 button ，那么这个节点就同时具有 label 和 button 的特点。

label 用来显示一个文本，button 它目前提供的是几种颜色的转化，比如说普通状态，然后鼠标移上来的状态，鼠标移上来状态我把它设置为蓝色，好，然后我们现在可以来试一下，你看现在我们把鼠标移上来之后，它就变成了一个颜色，那这个功能是谁提供的，是 button 这个组件提供的，也就说它现在是有两个组件在一起作用。

第一个组件是 label 组件， lab 组件用来显示这个文本，那第二个组件是 button 组件， button 组件是用来实现鼠标移上来的时候换色，当然了并不是要求大家来掌握这个button 组件，只是通过这个例子给大家来说明一下，一个节点其实是可以加挂多个组件的，每一个组件各自承担自己的功能，那最终的效果就是各个组件功能的叠加和综合，好的，那我们这节课就讲这么多，如果大家不明白的话，可以到我们的这个群里边来询问一下，谢谢。