CocosCreator入门学习《FlappyBird》（三）：让小鸟摆脱黑暗的世界

前面的两节，我们的主角小鸟一直生活在黑暗的世界里面，这一节的任务就是给游戏世界添加背景图。

首先，点击Canvas节点，在右侧的属性检查器里面把Canvas的Design Resolution属性改成288和512。

上面这个操作就是把我们游戏的设计分辨率改成288x512，为什么是这个尺寸？因为我们的资源背景图是这个尺寸。

Canvas节点是一个非常重要的节点，大家一定要去官方文档里面搞清楚这个节点有什么作用。

Canvas节点官方介绍链接：https://docs.cocos.com/creator/manual/zh/content-workflow/scene-editing.html

设置完成之后，界面会变成如下图所示：

现在选择Canvas节点，右键-》创建节点-》创建渲染节点-》Sprite，并且重命名为Bg。然后把assest\Texture\img_bg图片拖拽到右侧的Sprite Frame选项内。如下图所示：

操作成功之后就可以在场景编辑器中看到背景图了，但是我们发现小鸟不见了。其实不是不见了，而是被我们的背景图给挡住了。

用官方文档里面的一句话解释：在 层级管理器 中会按照节点排列顺序依次渲染，也就是显示在列表上面的节点会被下面的节点遮盖住。

关于渲染顺序的官方介绍链接：https://docs.cocos.com/creator/manual/zh/content-workflow/node-tree.html

那我们怎么样把小鸟显示在背景图的前面呢？很简单，选中Bg节点往上拖拽到Bird节点上方。

拖拽完成之后，就可以看到小鸟了。

CTRL + S保存之后，点击运行，就可以在浏览器中看到效果了。

OK，本节的任务就完成了