前面的两节,我们的主角小鸟一直生活在黑暗的世界里面,这一节的任务就是给游戏世界添加背景图。
首先,点击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,本节的任务就完成了