上一章我们介绍了开发中会用到的辅助工具，并创建了 GameScene 场景，接下来这章我们将继续 GameScene 的传（bai)奇(bi）。不过在开始编写 GameScene 场景的代码之前，我们还是先来明确一下游戏的功能和实现方法。这样可以帮我们更好的理解并设计逻辑。下面是总结出的结论：
- 在 GameScene 场景中，我们将创建一个飞行的娃娃角色，这个角色是游戏的唯一主角。游戏初始状态下，这个角色有满满的生命值，但随着时间的推移，生命值会不断的减少。这里生命值我们可以以进度条的形式来展示它的多少和增减。
- 游戏 GameScene 场景有不止一层的滚动背景，每层的背景滚动速率不一，这样可以产生立体的滚动效果。娃娃位置不动，让背景不停的滚动，可以产生娃娃在向前飞行的视觉感受。
- 在滚动过程中屏幕上会时不时的出现一些障碍物和可以增加生命值的奖励品，当娃娃碰到障碍物时，生命值减少；碰到奖励品时，生命值增加。
- 当触碰屏幕时，娃娃将向上升至一定的高度；当不触碰屏幕时，它将向下掉落。掉落到地板时会扣除相应的生命值。所以玩家必须在按与不按之间保持一定的平衡，一方面躲避障碍物并避免触碰地板，另一方面争取多吃一点奖励品，这样才能让娃娃顺利地到达终点。
- 本场景我们将用物理引擎来模拟整个飞行世界，这样游戏主角的飞行问题（漂浮状态），以及它与障碍物／奖励品之间的碰撞检测就很容易实现了。
GameScene 的背景
为了产生立体的滚动视觉效果，我们决定用四层不同的背景来实现这一效果（怕累死的，可以偷懒）。当然，这里层的概念不同于引擎中的层（cc.Layer），它只是一个普通的副词而已。
- 首先，最底层是一张固定不动的布幕背景；
- 其次，我将在布幕背景的上层添加一层远景背景，该背景将会以较慢的速度向左滚动；
- 然后，在远景背景的上层我们又会添加一层近景背景，该背景将会以较快的速度向左滚动；
- 最后，在最上层，我们将放置一层以更快速度向左滚动的背景，游戏的障碍物和奖励品都会在该层背景上。所以这层背景我们将用 TliedMap 编辑器来制作，也就是用 TMX 文件来创建。
乱入一个知识点：游戏中元素的层级关系由 z-order 属性来决定，我们可以通过设置元素的z-order值来控制元素之间的渲染顺序。默认情况下，所有元素的 z-order 为0，所以当游戏元素没有指定z-order值时，游戏中的元素将按添加顺序来显示。故此，我们在添加游戏背景或其他元素时，应该要注意下它们的添加顺序或 z-order 值，不要出现遮挡的现象。
创建BackgroundLayer背景层
为了让代码结构更加清晰，接下来我们将为 GameScene 场景创建一个背景层，然后把以上的四层背景图都添加到该层上。
所以，我们在 src/app 目录下新建了一个layers 文件夹，然后再新建了一个 BackgroundLayer.lua 文件，并把它保存到 src/app/layers 目录下。
以下是创建空白 BackgroundLayer 层的代码：
|
1
2
3
4
5
6
7
8
|
BackgroundLayer =
class
(
"BackgroundLayer"
,function()
return
display.newLayer()
end)
function BackgroundLayer:ctor()
end
return
BackgroundLayer
|
display.newLayer()方法能创建并返回一个 cc.Layer 层对象。
注意：因为我们将在其他（GameScene.lua）文件中调用 BackgroundLayer 类，所以在创建 BackgroundLayer 类时，我们并没有像创建 GameScene 一样把它定义为 local 局部型的类。
把背景层添加到GameScene场景
BackgroundLayer.lua 文件是个单独的模块文件，如果我们想要引用它，那我们需要把它加载到项目中来。
通常，载入文件到 Quick 项目可以使用以下的两种方式：
这里，我们载入 BackgroundLayer 模块用 require 方法。在 MyApp.lua 中加入如下的函数:
require(
"app.layers.BackgroundLayer"
)
|
这样就把我们定义的 BackgroundLayer 类引入到了quick项目中，之后，我们就可以在任何地方引用这个 BackgroundLayer 模块了。
接下来我们来把 BackgroundLayer 层加入到 GameScene 场景中。
function GameScene:ctor()
self.backgroundLayer = BackgroundLayer.
new
()
:addTo(self)
end
|
这里调用BackgroundLayer.new()方法实例化了一个 BackgroundLayer 对象，并把它加入到场景。这样 GameScene 场景中就有一层空白的 BackgroundLayer 层了。
框架整好以后，下面我们来向层容器里面塞东西。
添加背景
布幕背景
回到 BackgroundLayer 文件，下面我们添加如下的一段函数来为 BackgroundLayer 层添加最底层的布幕背景，这里添加固定不动的布幕背景就如添加普通精灵。
function BackgroundLayer:createBackgrounds()
-- 创建布幕背景
local bg = display.newSprite(
"image/bj1.jpg"
)
:pos(display.cx,display.cy)
:addTo(self,-4)
end
|
addTo方法中可以指定游戏元素的 z-order 值，本教程中，我们把布幕背景的z-order设置为-4，确保它位于场景的最下层（当然，这要确保该层中不能有比布幕背景的 z-order 值还小的元素）。
循环滚动的远/近景背景
远景背景和近景背景有着共同的特征，它们都会以一定的速度向左循环移动。所以这里我们以远景背景为例，说明下它们的实现过程。
首先，我们添加两张首尾可以拼接的图片来表示滚动的远景背景图。
在BackgroundLayer:createBackgrounds()方法中加入如下的代码来添加远景背景图：
-- 创建远景背景
local bg1 = display.newSprite(
"image/b2.png"
)
:align(display.BOTTOM_LEFT,display.left,display.bottom + 10)
:addTo(self,-3)
local bg2 = display.newSprite(
"image/b2.png"
)
:align(display.BOTTOM_LEFT,display.left + bg1:getContentSize().width,display.bottom + 10)
:addTo(self,-3)
table.insert(self.distanceBg,bg1) -- 把创建的bg1插入到了 self.distanceBg 中
table.insert(self.distanceBg,bg2) -- 把创建的bg2插入到了 self.distanceBg 中
|
其中 self.distanceBg 是一个 table 类型的值，它的定义我们放在 ctor 函数中。
