官方手册

关键词

素材层级构造方块坐标轴人物图片节点场景文件图片素材操作工具

文字记录

场景中添加节点

下边我们来构造一下场景。现在我们得到的主场景main scene是空的，里边还没有任何图片或者是人物。那现在我们希望往里边来构造一些图片。那事先你需要准备一些素材，在这里边我们准备了一个背景，然后准备了两个人物，一个是佩奇，一个是乔治。我们把这三个图片都加进来放到我们的 assets 里边。那为了管理的方便，我们把图片放在texture目录下边，这个目录的名字你可以自己来定义，不过一般的是使用英文的。
image.png
好的，现在我们把这个图片给拖过来，放到 texture 目录下边，可以看一下这个黄色的就是这个目标选中这个黄色的位置，然后松手。那这时候就已经放到了 texture 下边，放大一下给大家看一下。是这个样子的。那有了这个图片之后，我们就想办法怎么样把这个图片素材放到我们这个场景里边，直接拖就可以了。
image.png
但是我们拖的时候也需要来注意。我们拖的时候，比如说我们选中这个背景，拖的时候，我们只需要直接放在这边的层级管理器。在层级管理器里边是一个树状的节点的列表，首先我们的已经默认有了一个根节点 canvas 也就是画布，这是一张画布。然后我们把背景这个图片拖到这个 canvas 的下边，这样就可以了。
image.png
可以看到在这个图片图片已经显示在这个位置。那么你在拖的时候一定要注意一下，这个拖的时候它是放到了 canvas 节点的下边，如果你是并排放的话可能就不是我们想要的结果了，你可以点一下这个来试一下。

如果你折叠之后发现所有的节点都被折叠的话就是对的。那么我们再来展示一下，这样是属于错误的拖拽。如果你这样的话，你再折叠的话你会发现佩奇他并没有在 canvas下边，因为我们在拖的时候没拖对，我们可以先把这个节点给右键点它先删除掉，然后再重新拖一下，这样就可以了。这样我们就把这个三个节点都放了上来。
image.png

选中节点

但是我们又发现，这个乔治和佩奇似乎它重叠在一起了。 我们在这个图片上，在这个场景管理器里边好像是重叠在一起了。怎么样把它移动开呢？我们下边就来说下节点的操作，这个节点的操作我们后边会有一张专门来讲解。那现在我们先把几个常用的操作给练习一下。首先我们看一下怎么样来选中一个节点。我们选中节点的时候，你说我直接在这里边选不就行了吗？好，如果你想直接在场景编辑器中间这个窗口里边选的话不太好，因为它有的节点是重叠的，不好选。

正确的选的姿势是从左边来选，层级管理器，你可以认为是节点管理器，在这里边就能够看到所有的节点。比如说我想选择乔治，那我们就点它就可以了。那这时候右边选择的就是乔治这个节点，我们选的佩奇也是从左边来选。当你选中它的时候，你会发现右边它是以一个实线框把它给框起来。然后会有两个坐标轴，大概就是这个样子。第一步就是选择在层次管理器里边来选择一个节点。
image.png

移动节点

第二步我想移动，怎么样来移动呢？可以看到这里边有四个工具，看一下左上角分别是移动工具、旋转工具，缩放工具，矩形变换工具。那我们使用这个第一个移动工具就可以了，点一下它。
image.png
然后在这里边你会看到这里边有一个小方块，坐标轴的中间有一个小方块，我们把鼠标放在这个小框小方块上面，就可以来移动它了。你要移动其他位置的话是移不了的。再来演示一遍，就是先选择一个节点，然后再拖动这个节点的小方块可以了，就可以移动，那我们也把这个乔治来移动一下，选中乔治节点。然后移动这个小方块。
image.png

层级调整

大概这个样子，现在我们就得到了这样一个界面。那么其实还有一个操作就是层级调整，来给大家看一下。那左边这里边有很多节点，比如说背景，乔治和佩奇，三张图片，三个节点。那每一个节点都是放在我们的根节点canvas 下边的。那么他们的这个顺序是有影响的，谁在前面，谁在后边很重要。我们现在是把这个背景放最上边，然后要把人物放在下边，这时候是正常显示的。但是如果你不小心把这个人物放到了背景的上面，他这时候又发现人物被遮住了。

那为什么呢？因为他在绘制的时候是依次进行绘制的，他先绘制第一张图片，然后再绘制第二张图片，然后再绘制第三张图片。所以我们可以想象一下，最后绘制的是在最上边。所以你要想把这个东西让它显示在上面的话，那么应该把它往下移一些，比如说这个样子就可以了。
image.png
这个是三个基本的操作要求，大家下去一定要自己来练习一下，因为它只是一个可视化的一个操作工具，你不会操作的话，我怎么样来制作这个游戏呢？所以这些基本的操作都是要来练习的。而且我们这个课程是一个渐进式的课程，你看这里边有很多个操作方式，但是我们现在只学了一种移动，其他的你先不用管，我们后边会有专门的课程来逐步进行讲解。

文件引用

好的，那总之，这节课我们就已经把这个游戏的场景给构造的出来，看起来还是蛮漂亮的。好，现在我们来思考一个问题，算是一个深入一点的思考。现在我们构造了一个场景，然后场景里边增加了添加了三个节点。那是不是说我们这个三张图片都已经保存到了这个场景里边呢？可以看一下这个场景具体来说是一个文件来表示的，这个文件我们可以在这个资源浏览器里边来显示一下。你看在这个项目录下边就有一个 mainscene.file 就是.file后缀的表示场景。那么我们可以说我们图片已经保存到了这个 file 文件里边吗？其实并没有这个 file 文件里边只是保存了它的引用而已。
image.png
什么叫引用呢？说这个 file 文件里边并没有这个图片本身，图片是很大的，图片并不会直接存在这个file文件里边。这个file文件里边只是说把这个图片的路径、名字还有它的位置、旋转，把这些参数给存了进来，它并没有存这个图片图片本身。那这个我想各位都是能够理解的。

比如说我把这个文件打开看一下它，那就是用 JSON 表示的东西，显然这里边是不会存储这个图片本身的，他会把这个图片资源的这个名字给记录下来，然后他的大小他的相关的参数给记录下来。那这个图片其实还是放在这个texture下边，也说这些资源文件本身还是放在这里边的。那我们这个我们这个场景文件里边只是记录了一下这些资源所在的位置，还有一些其他的参数而已。
image.png
在练习的时候需要强调一下，有一点大家一定不要搞错了，刚才我们也已经演示了，也就是你在拖拽这样的一个图片节点的时候。那么你不要把它拖歪了哟，你要把它拖在这个节点的下边，你看你展开折叠一下，就能够发现我们这个节点都是放在 canvas 根节点下边的，这是我们一般的写法。好的，我们这节课就演示到这里，大家下去自己来练习一下。