第一章 — 创建项目

脚本编写

Solar2D 使用 Lua 脚本语言。如果您曾经使用任何语言进行过编程，您会发现 Lua 很容易上手。Lua 简介指南提供了 Lua 的概述，或者您可以在 YouTube 上学习 Lua。很快，您就能编写出您梦寐以求的出色应用程序！

如果您是编程新手，Lua 仍然很容易学习，本指南将帮助您入门。

文本编辑器

除了 Solar2D 之外，您还需要一个文本编辑器。有几种编辑器可供选择，选择编辑器就像选择汽车一样——每个人都有自己的喜好，您应该探索哪种编辑器最适合您。

如果您还没有喜欢的文本编辑器，建议使用以下选项

启动项目

在 Solar2D 中创建新项目很容易。只需几个简单的步骤，您就可以制作您的第一个游戏！

1. 打开 Solar2D 模拟器。

2. 从欢迎窗口中单击新建项目，或从文件菜单中选择新建项目…。

3. 对于项目/应用程序名称，键入 BalloonTap 并确保选中空白模板选项。将其他设置保留为默认值，然后单击确定 (Windows) 或下一步 (Mac)。这将在您指定的位置（文件夹）中创建您的第一个游戏的基本文件。这也是您放置所有应用程序文件/资源的文件夹，包括图像、程序文件等。

包含图像

对于此项目，您需要三个图像文件，放置在上面创建的 BalloonTap 项目文件夹中

加载背景

我们需要加载的第一个图像是背景。Solar2D 将屏幕上的所有内容按照从后到前的顺序进行分层放置，因此我们加载的第一个图像将位于之后加载的其他图像的后面。虽然有一些方法可以更改图像的分层顺序并将它们发送到显示堆栈的后面或前面，但我们将保持这个项目的简单性并按逻辑顺序加载它们。

使用您选择的文本编辑器，在您的项目文件夹中找到并打开 `main.lua` 文件。 `main.lua` 文件是基本的“核心程序文件”每个 Solar2D 项目，如果没有它，您就无法创建应用程序。这是每次运行应用程序时应用程序启动的 Lua 文件。

在这个 `main.lua` 文件中，输入高亮显示的命令

-----------------------------------------------------------------------------------------
--
-- main.lua
--
-----------------------------------------------------------------------------------------

local background = display.newImageRect( "background.png", 360, 570 )

此命令涉及几个方面。让我们分解一下

• 第一个单词 `local` 是一个 Lua 命令，表示下一个单词将是一个**变量**。变量，就像您在数学课上学到的那样，用于存储一个值。在本例中，该值将是一个用作背景的图像。

• 第二个单词 `background` 是我们变量的**名称**。任何时候我们想要更改存储在 `background` 中的图像，我们将使用这个变量名。

• `=`（等号）用于将变量 `background` 分配给一个图像。

• `display.newImageRect()`是 Solar2D API 之一。它用于从文件中加载图像，以便您可以在应用程序中使用它。有几种方法可以将图像加载到您的应用程序中，但 `display.newImageRect()` 的特殊之处在于它可以调整/缩放图像的大小（稍后将对此进行解释）。

• 括号内是我们传递给 `display.newImageRect()` 的**参数**，有时也称为**参数**。第一个参数是我们想要加载的图像文件的名称，包括文件扩展名（`.png`）。

背景的最后一步是将其定位在屏幕上的正确位置。紧跟您刚才输入的行，添加两个突出显示的命令

local background = display.newImageRect( "background.png", 360, 570 )
background.x = display.contentCenterX
background.y = display.contentCenterY

默认情况下，Solar2D 会将对象的中心定位在坐标点 `0,0` 处，该坐标点位于屏幕的左上角。但是，通过更改对象的 `x` 和 `y` 属性，我们可以将背景图像移动到新位置。

对于这个项目，我们将把背景放在屏幕的中心——但如果我们不知道哪个坐标值代表中心呢？幸运的是，Solar2D 为此提供了一些方便的快捷方式。当您指定值 `display.contentCenterX` 和 `display.contentCenterY` 时，Solar2D 将屏幕的中心坐标设置为 `background.x` 和 `background.y` 属性。

加载平台

来查看它。是时候加载平台了。这与加载背景非常相似。在您已经输入的三行代码之后，输入以下突出显示的命令

local background = display.newImageRect( "background.png", 360, 570 )
background.x = display.contentCenterX
background.y = display.contentCenterY

local platform = display.newImageRect( "platform.png", 300, 50 )
platform.x = display.contentCenterX
platform.y = display.contentHeight-25

您可能已经注意到，与背景相比有一个细微的变化：我们没有将平台定位在垂直中心，而是希望它靠近屏幕底部。通过使用命令 `display.contentHeight`，我们知道内容区域的高度。但请记住，`platform.y` 将对象的**中心**放置在指定位置。因此，由于此对象的高度为 50 像素，我们从该值中减去 25 像素，确保整个平台都可以在屏幕上看到。

保存您的 `main.lua` 文件并重新启动模拟器以查看平台图形。

加载气球

要加载气球，我们将遵循相同的过程。在前面的命令下方，键入以下几行

local balloon = display.newImageRect( "balloon.png", 112, 112 )
balloon.x = display.contentCenterX
balloon.y = display.contentCenterY

此外，为了使气球略微透明，我们将稍微降低对象的不透明度（alpha）。在下一行，将气球的 `alpha` 属性设置为 80%（`0.8`）

local balloon = display.newImageRect( "balloon.png", 112, 112 )
balloon.x = display.contentCenterX
balloon.y = display.contentCenterY
balloon.alpha = 0.8

保存您的 `main.lua` 文件并重新启动模拟器。现在屏幕中央应该有一个气球。

添加物理效果

是时候进入物理学了！Box2D 是包含的物理引擎，可用于构建应用程序和游戏。虽然制作游戏不需要使用物理学，但它可以更轻松地处理许多游戏情况。

包含物理学非常简单。在前面的行下方，添加以下命令

local physics = require( "physics" )
physics.start()

让我们更详细地解释这两行

• 命令`local physics = require( "physics" )`将 Box2D 物理引擎加载到您的应用程序中，并将其与局部变量 `physics` 关联以供以后参考。这使您可以使用 `physics` 命名空间变量调用物理库中的其他命令，稍后您将看到。

• physics.start() 正如你所想，它会启动物理引擎。

如果你保存并重新启动，你不会看到任何区别在你的游戏中……暂时还不会。这是因为我们还没有给物理引擎任何任务。为了让物理引擎工作，我们需要将创建的图像/对象转换为物理对象。这可以通过命令 physics.addBody 来完成。

local physics = require( "physics" )
physics.start()

physics.addBody( platform, "static" )

这告诉物理引擎将一个物理**“物体”**添加到存储在 platform 中的图像上。此外，第二个参数告诉 Solar2D 将其视为**静态**物理对象。这意味着什么？基本上，静态物理对象不受重力或其他物理力的影响，所以任何时候你有一个不应该移动的对象，将其类型设置为 "static"。

现在，为气球添加一个物理物体。

local physics = require( "physics" )
physics.start()

physics.addBody( platform, "static" )
physics.addBody( balloon, "dynamic", { radius=50, bounce=0.3 } )

physics.addBody 命令的最后一部分用于调整气球的物体属性——在本例中，我们将赋予它一个圆形形状并调整其弹跳/恢复值。参数必须放在花括号 ({}) 中（在 Lua 编程语言中称为**表**）。

• 因为气球是一个圆形物体，所以我们为它分配一个值为 50 的 radius（半径）属性。这个值基本上与我们的气球图像的大小相匹配，但如果你创建了自己的气球图像，你可能需要稍微调整它。

• bounce（弹跳）值可以是任何非负的十进制或整数值。值为 0 表示气球没有弹跳，而值为 1 将使其以 100% 的碰撞能量反弹。如上所示，值为 0.3 将使其以 30% 的能量反弹。

函数

此时，我们有一个气球落在平台上并轻微弹跳。这并不是很有趣，所以让我们把它变成一个游戏！为了让我们的气球点击游戏能够运行，我们需要能够在每次点击气球时向上推动它一点。

为了实现这种功能，编程语言使用所谓的**函数**。函数是简短的（通常）代码段，只有在我们告诉它们运行时才会运行，例如当玩家点击气球时。

让我们创建我们的第一个函数。

local function pushBalloon()

end

很好，我们现在有了一个函数！然而，它目前是一个空函数，所以如果我们运行它，它实际上不会做任何事情。让我们通过在函数**内部**，在我们声明函数的地方（它的开头行）和结束关键字 end 之间添加以下代码行来解决这个问题。

local function pushBalloon()
    balloon:applyLinearImpulse( 0, -0.75, balloon.x, balloon.y )
end

balloon:applyLinearImpulse 是一个非常酷的命令。当应用于像气球这样的动态物理对象时，它会在任何方向上对对象施加一个“推力”。我们传递的参数告诉物理引擎施加多大的力（水平和垂直方向），以及在对象的哪个位置施加力。

前两个参数 0 和 -0.75 表示方向力的量。第一个数字是水平方向或**x** 方向，第二个数字是垂直方向或**y** 方向。因为我们只想向上推动气球（而不是向左或向右），我们使用 0 作为第一个参数。对于第二个参数，值为 -0.75，我们告诉物理引擎将气球向上推一点。这个数字的值决定了施加的力的大小：数字越大，力越大。

第三个和第四个参数，balloon.x 和 balloon.y，告诉物理引擎在哪里施加力，相对于气球本身。如果在气球中心以外的位置施加力，可能会导致气球向意想不到的方向移动或旋转。对于这个游戏，我们将使力集中在气球的中心。

就是这样！如果需要，我们可以在 pushBalloon() 函数中添加其他命令，但对于这个简单的游戏，我们只需要用少量力向上推动气球即可。

事件

事件是创造交互性的关键，在很多方面，Solar2D 是一个基于事件的框架，其中信息在特定事件期间被分派到**事件侦听器**。无论该事件是用户触摸对象/按钮、点击屏幕，还是（在本游戏中）点击气球，Solar2D 都可以通过触发事件来做出反应。

添加事件侦听器很容易——现在就按照函数进行操作

local function pushBalloon()
    balloon:applyLinearImpulse( 0, -0.75, balloon.x, balloon.y )
end

balloon:addEventListener( "tap", pushBalloon )

让我们检查一下这个新命令的结构

• 首先，我们必须告诉 Solar2D 哪个对象参与了事件侦听器。对于这个游戏，我们想检测与 balloon 对象直接相关的事件。

• 紧接着，添加一个冒号 (:)，然后是 addEventListener。在 Lua 中，这被称为**对象方法**。本质上，冒号后面的 addEventListener 告诉 Solar2D 我们想要向冒号前面的 balloon 添加一个事件侦听器。

• 括号内是完成命令的两个参数。第一个参数是 Solar2D 将侦听的**事件类型**，在本例中为 "tap"（点击）。第二个参数是在事件发生时应该运行（调用）的**函数**，在本例中是我们上一节编写的 pushBalloon() 函数。本质上，我们告诉 Solar2D 每当用户点击气球时就运行 pushBalloon() 函数。

这是完整的程序，以防你遗漏了什么

-----------------------------------------------------------------------------------------
--
-- main.lua
--
-----------------------------------------------------------------------------------------

local background = display.newImageRect( "background.png", 360, 570 )
background.x = display.contentCenterX
background.y = display.contentCenterY

local platform = display.newImageRect( "platform.png", 300, 50 )
platform.x = display.contentCenterX
platform.y = display.contentHeight-25

local balloon = display.newImageRect( "balloon.png", 112, 112 )
balloon.x = display.contentCenterX
balloon.y = display.contentCenterY
balloon.alpha = 0.8

local physics = require( "physics" )
physics.start()

physics.addBody( platform, "static" )
physics.addBody( balloon, "dynamic", { radius=50, bounce=0.3 } )

local function pushBalloon()
    balloon:applyLinearImpulse( 0, -0.75, balloon.x, balloon.y )
end

balloon:addEventListener( "tap", pushBalloon )