官方文档

关键词

组件鼠标属性单击动作右键图片节点图片素材显示图片图片资源

文字记录

大家好，下边我们继续来学习 cocos 游戏开发入门教程，这章里边我们还是来学习节点。好，这节课我们先说下图片节点，节点在我们的 cocos 里边的术语叫 node ，那么图片节点就很简单了，就是有一个节点它能够显示图片而已。

添加图片节点

那么怎么样来添加一个图片节点呢？第一种方式我们已经会了，直接将我们的图片素材拖到我们的 canvas 节点下边，这样的话就能够直接创建一个节点，而这个节点正好就显示这张图片。

第一种方式

我们现在来演示一下我们的第一种方式，也是我们已经会的方式，我们已经创建了一个新的项目 。目前来说这个创建了一个主场景，在这里边没有东西，他们现在就把一个图片素材比如说佩奇拖拽到这个位置。那么你可以直接把拖到这个 canvas 这个节点的上方，然后落下。

这时候我们发现下边创建了一个新的节点佩奇，然后它的显示刚好就是佩奇这张图片。这是我们第一种方式，也是我们非常熟悉的一种方式。

那这时候我们要观察一下，我们点中佩奇这个节点，然后看一下右边的这个属性检查器面板里边，在这里边其实有两部分内容，第一部分 node 表示的这个节点本身的一些参数属性，那么还有第二个节点sprite，这个是我们现在需要注意的。

第二个称之为 sprite ,而我们把它称之为组件，也就是说一个节点里边可以添加很多个组件。

那默认情况下，我们现在已经看到了一个组件，组件的名字就叫做 sprite ，然后看一下组件里边的一个属性叫做 sprite frame 图片帧。

好，它这里面显示的就是佩奇这个图片帧，大概意思就是说我们创建了一个这个节点，这个节点能够显示这一张图片而已。那么这个节点的名字是不要紧的，比如说我们可以改成123，也是可以的。

创建了一个123节点，123节点能够显示一张图片，它显示的是佩奇这个图片，是这样的一个关系，这是我们的第一种方式。

sprite

那这时候接触到一个术语叫 sprite 那么在游戏开发里边 sprite 是一个专有术语，你以后用 unity 的时候也是这样的一个说法。 sprite 在游戏开发里边表示图片的意思。

第二种方式

下边我们再来使用第二种方式来添加图片节点，

在这canvas下边我们想添加一个新的节点，那就是右键创建节点，我们选择创建渲染节点，然后里边选择 sprite 精灵这一项。这时候我们就得到了一个新的节点，我们把它改名叫456，叫什么都没有关系。

那么这个 456 这个节点好像什么也没有显示，因为我们现在还没有给他指定图片。在右边我们仍然是把这个 node 这个折叠起来。

然后看一下sprite里边它现在其实只是显示了一个默认的小图片。那我们希望让它显示乔治这张图片，也就是我们需要把乔治这个图片指定到这个位置，怎么指定呢？我们采用的是拖拽的方式。接下来请大家仔细观察一下我的操作，我们要把乔治素材拖到这个位置，松手就可以了。

然后你可以看到这个节点当前显示的就是乔治这个图片了，我想演示到这里，大家应该明白什么意思了。那所谓的这个图片节点 sprite 其实就是在这里边有一个 sprite 的组件，这个组件能够显示这张图片而已。好的，那这时候就给大家演示了两种方式来添加这个图片。节点看起来很简单，但是我想大家下去操作的时候很可能会发生问题，因为这个拖拽实际上是一个精细操作。

我先在这里边创建节点，创建渲染节点，选择 sprite 精灵

然后我想让它显示佩奇或者是乔治。那么怎么样拖呢？这个拖拽动作并不好完成。比如说有同学说我点一下乔治，然后再拖，发现右边没有东西了，这个真糟糕，我们希望是把它拖到那个节点，但是你要这么操作的话就有问题。

所以我们在拖拽的时候，第一步点中这个节点，让它显示这里。

然后第二步我们是直接拖拽，你不要有这个点击的动作。大家要区分这个所谓的单击和拖拽，这是两个动作，你不要单击它。单击的意思就是说点下去之后鼠标就松开

我们现在鼠标点下去，然后就拖，鼠标是不松开的，一直拖到这个位置松开为止。这样的话就能够把这个图片资源拖到这个属性里边来完成一个选择动作。

好的，这个就是我们这节课要讲的内容，大家下去自己来试一下，如果有问题的话可以到我们的群里边来讨论一下。我们的群在我们的最开始的时候已经介绍过了，在我们的官网上会提供一个 QQ 群。好的，我们这节课就讲这么多，下节课再见。