第 4 章 — 创建场景

就像电影、电视节目和戏剧通过场景组织讲述故事一样，应用程序也同样如此。在本章中，您将学习 Solar2D 中的场景管理基础知识。

游戏流程
场景管理
菜单场景
章节概念

游戏流程

场景是应用程序的一个独立视图或“页面”，玩家所看到的所有内容都包含在该场景中。当应用程序启动时，通常会显示一个标题/介绍场景。从那里，您可能可以导航到设置场景或开始教程。根据设计目标，游戏中每个级别也可能是专用场景。

这个游戏将有三个核心场景

菜单 — 包含各种选项的标题/介绍场景。
游戏 — 实际游戏场景。
最高分 — 最高分列表。

场景管理

Solar2D 使用称为Composer的系统来处理从一个场景移动到另一个场景。为了简化开发，每个 Composer 场景都是一个独立的 Lua 文件——这有助于保持游戏的井然有序。

在本章中，我们将更改您之前的代码，这将在 Simulator 中暂时创建错误。现在，您可以忽略这些错误或退出 Simulator，直到您准备好查看结果。

让我们修改现有项目以使用 Composer

在您的项目文件夹中，制作main.lua文件的副本并将其重命名为main_original.lua。我们在下一章需要这个原始代码，因此重要的是保留一份供参考。
使用您选择的文本编辑器，打开main.lua文件（不是副本）。在此文件中，擦除所有以前的代码——请记住，您仍然可以使用副本稍后处理。
在其中添加以下命令

local composer = require( "composer" )

-- Hide status bar
display.setStatusBar( display.HiddenStatusBar )

-- Seed the random number generator
math.randomseed( os.time() )

-- Go to the menu screen
composer.gotoScene( "menu" )

让我们更详细地检查这些命令

第一行，local composer = require( "composer" )，创建一个名为composer的局部变量，require()命令告诉 Solar2D 将有关 Composer 场景管理库的所有信息加载到应用程序中。
下一条命令隐藏设备顶部的状态栏。尽管您在上一章的代码中包括了这一行，但在任何启用 Composer应用程序的main.lua中隐藏状态栏是合乎逻辑的，这样它永远不会出现在任何场景中。
接下来，我们设置伪随机数字生成器的“种子”（回想一下，此命令包含在我们最初的项目中）。从本质上讲，如果您在应用程序的任何地方使用 math.random()，则最好在main.lua中调用 math.randomseed()，这样每次运行应用程序时都会重置种子。
再添加最后一条命令，我们就完成了main.lua。 composer.gotoScene( "menu" )使用我们加载应用程序中的“Composer”中的第一行命令。通过这样做，我们现在可以使用这个 composer.gotoScene() 命令来告诉 Solar2D 加载一个不同的场景。正如前面提到的，我们的每个场景都包含在它们自己的 Lua 文件中：menu.lua、game.lua 和 highscores.lua。

对于该命令，您不需要在引号中包含 .lua，因为 Solar2D 本来就期望文件具有 .lua 扩展名。因此，您可以简单地使用 "menu" 来转到包含在 menu.lua 中的场景。

composer.gotoScene( "menu" )

这就是 main.lua 的全部内容 — 记得保存您的更改！不同于之前的项目，这个 main.lua 文件非常短，因为我们只使用它来初始化 Composer、隐藏状态栏、设置随机数生成器和移动到动作开始的菜单场景。

菜单场景

是时候创建我们的第一个场景了！菜单场景将由一个背景、标题图像和两个将作为按钮表现的文本对象组成。

在使用 Composer 进行场景管理时，我们建议您从我们的标准场景模板开始(scene-template.lua)，包含在此章节中源文件中。请在继续之前获得此模板文件。

包括图像

对于这个场景，您需要复制或创建另外一个图像文件并将其放入您的 StarExplorer 项目文件夹中。默认图像可作为此章节中源文件的一部分下载。

文件	大小 (w×h)	用法
`title.png`	500 × 80	游戏标题图像；将覆盖我们现有的星星背景。

场景设置

在您获得scene-template.lua文件后，对其进行复制。将这个副本重命名为 menu.lua 并将其放入您的 StarExplorer 项目文件夹中。使用文本编辑器，打开此 menu.lua 文件并对其进行简要检查。它可能看起来很复杂，但不用担心，我们将共同完成这些步骤。

首先，检查这两个初始命令

local composer = require( "composer" )

local scene = composer.newScene()

第一行，local composer = require( "composer" )，告诉 Solar2D 在该 Lua 文件中利用 Composer 库。必须在每个 Composer 场景中包含此行。

第二行local scene = composer.newScene()，基本创建一个名为 scene 的新变量来保存 Composer 场景对象。此变量 (scene) 稍后将变得重要，您很快就能看到。

可访问代码

接下来，您将看到一个注释块，讲述关于场景事件函数的执行，其后是几行空白行。通常您应在此编写与场景行为有关的函数，声明场景必须始终可以访问的变量等。现在先不要过多担心这一点 — 随着我们继续，您将了解到它是如何工作的。

对于这个菜单屏幕，我们仅需两个简单函数

gotoGame() 函数用于告诉 Composer 移动到游戏场景（我们将在下一章中创建这个场景）。
gotoHighScores() 函数用于显示最高分场景（我们将在之后的章节中创建这个场景）。

让我们在此可访问场景的空间中编写这些函数

-- -----------------------------------------------------------------------------------
-- Code outside of the scene event functions below will only be executed ONCE unless
-- the scene is removed entirely (not recycled) via "composer.removeScene()"
-- -----------------------------------------------------------------------------------

local function gotoGame()
    composer.gotoScene( "game" )
end

local function gotoHighScores()
    composer.gotoScene( "highscores" )
end

这些函数极其基本 — 每个函数仅包含一个命令composer.gotoScene()，您会从前面了解到这是用于更改场景的 Composer 命令。

场景事件

在此之后，您将看到一个专门为场景事件函数预留的部分。Composer 场景可以使用四 (4) 个生命周期事件，每个事件在场景生命中的不同时间触发

场景事件	生命周期点
create	在场景最初创建但尚未出现在屏幕上时发生。
show	发生两次，一次立即在场景出现在屏幕之前，另一次立即在场景出现在屏幕之后。
hide	发生两次，一次立即在场景退出屏幕之前，另一次立即在场景退出屏幕之后。
destroy	如果场景被销毁时发生。

我们的标准模板可以处理这四个事件，但重点介绍创建事件。向下滚动文件，检查以下高亮显示代码

-- -----------------------------------------------------------------------------------
-- Scene event functions
-- -----------------------------------------------------------------------------------

-- create()
function scene:create( event )

    local sceneGroup = self.view
    -- Code here runs when the scene is first created but has not yet appeared on screen

end

回想一下，关键字function告诉 Solar2D 此代码块是一个函数。然而，此声明略有不同 - 代替在function之前加上local关键字，我们使用在第一章中讨论的 Lua 对象方法将此函数与在顶部文件创建的scene变量相关联(local scene = composer.newScene()).

基本上，:create( event )表示此函数将与 Composer 创建场景事件关联，并且我们将使用event引用的数据表传递给函数。

场景创建

scene:create()函数已经为您设置，但它实际上还没有执行任何操作。让我们开始修改它以创建实际场景。

首先，检查函数内已有的初始行，local sceneGroup = self.view

function scene:create( event )

    local sceneGroup = self.view
    -- Code here runs when the scene is first created but has not yet appeared on screen

end

此重要行创建一个局部引用到场景的视图组，该组由 Composer 自动创建，其中应包含场景中使用的所有显示对象。基本上，应作为场景一部分的任何显示对象必须插入到场景的视图组中，并且每个模板的默认scene:函数都会通过sceneGroup引用该组。

在local sceneGroup = self.view命令后面，输入以下高亮显示的行，将背景图像添加到场景中。对于此项目，我们将简单使用我们在上一章中针对实际游戏的同一背景图像 (background.png)，不过您可以自由使用不同的图像。

function scene:create( event )

    local sceneGroup = self.view
    -- Code here runs when the scene is first created but has not yet appeared on screen

    local background = display.newImageRect( sceneGroup, "background.png", 800, 1400 )
    background.x = display.contentCenterX
    background.y = display.contentCenterY
end

直接针对以上重要提示，我们将此背景图像插入到sceneGroup中，以便由 Composer 自动管理为此场景的一部分。

接下来，让我们使用以下命令将标题图像添加到场景中

    local background = display.newImageRect( sceneGroup, "background.png", 800, 1400 )
    background.x = display.contentCenterX
    background.y = display.contentCenterY

    local title = display.newImageRect( sceneGroup, "title.png", 500, 80 )
    title.x = display.contentCenterX
    title.y = 200
end

最后，我们创建两个对象，它们将成为玩家的菜单选项。一个会提示玩家开始游戏，另一个将加载高分场景。在这一点上，为了简单起见，我们将使用文本对象代替图形按钮

    local title = display.newImageRect( sceneGroup, "title.png", 500, 80 )
    title.x = display.contentCenterX
    title.y = 200
    
    local playButton = display.newText( sceneGroup, "Play", display.contentCenterX, 700, native.systemFont, 44 )
    playButton:setFillColor( 0.82, 0.86, 1 )

    local highScoresButton = display.newText( sceneGroup, "High Scores", display.contentCenterX, 810, native.systemFont, 44 )
    highScoresButton:setFillColor( 0.75, 0.78, 1 )
end

让我们检查到目前为止的代码结果。保存您修改的menu.lua文件，然后重新启动模拟器。如果一切顺利，应该会显示菜单背景和文本按钮。

最后，既然我们已经设置了视觉对象，那么我们就把场景功能联系起来。这与我们让气球检测玩家水龙头的前一个项目类似。每个文本对象将有自己的水龙头处理程序，该处理程序将分别调用gotoGame()和gotoHighScores()函数。

在前面命令之后，添加以下高亮显示的行

    local playButton = display.newText( sceneGroup, "Play", display.contentCenterX, 700, native.systemFont, 44 )
    playButton:setFillColor( 0.82, 0.86, 1 )

    local highScoresButton = display.newText( sceneGroup, "High Scores", display.contentCenterX, 810, native.systemFont, 44 )
    highScoresButton:setFillColor( 0.75, 0.78, 1 )

    playButton:addEventListener( "tap", gotoGame )
    highScoresButton:addEventListener( "tap", gotoHighScores )
end

这是清晰的 - 每个命令只是向相应文本对象添加一个"tap"事件监听器。通过使用它们，我们之前编写的gotoGame()函数将在玩家轻触playButton文本中的任何位置时被调用，同样，当轻触highScoresButton文本时，gotoHighScores()函数也会被调用。

现在轻触任意一个按钮都会导致错误，因为我们尚未创建目标场景。在下一章中，我们将把之前的游戏代码转换为game.luaComposer 场景，然后再创建highscores.lua场景。

如果您的代码未按预期工作，请将它与本章的源文件中捆绑的 menu.lua 文件进行比较。幸运的是，由于我们仅需考虑其 scene:create() 函数，因此此场景相对容易。

章节概念

在本教程中，我们仅引入了更多概念，两者都与 Composer 相关

命令/属性	说明
composer.newScene()	创建一个新的场景对象，该对象可与 Composer 库一起使用。
composer.gotoScene()	过渡到特定的 Composer 场景。

⟨ 第 3 章——赋予其生命 | 第 5 章——将游戏转换为 Composer ⟩