使用 Corona SDK 进行混合移动应用开发入门
0/5 (0投票)
引言
我一直对他们如何在移动设备上开发游戏感到好奇。几个月前，我偶然发现了 Corona SDK，浏览了几本电子书，但当时我对它在移动应用开发方面的兴趣远大于游戏方面。我不得不说，这个 SDK 在移动应用开发方面表现出色，因为它易于使用。它是一个平台，您可以编写一次代码，然后就能轻松地生成 iOS 和 Android 应用程序。其核心编程语言是 Lua，我甚至不知道它的存在。
引用Corona SDK 和 Lua - 长久以来的乐趣。
鉴于这只是一个入门文章，不要期望在这次介绍之后就能开发出带有花哨功能的应用程序。好的一点是，您不必具备 Java 知识或 XCode 知识就可以编写一个简单的基本应用程序。我将向您展示如何为 Android 平台编写一个简单的“Hello World”应用程序，以及如何将其编译成 apk。本文的重点将放在 Android 平台。对于 iOS，您可以运行相同的代码，一切都会顺利。一旦我有了 MacBook 或租用了一个，我将撰写一篇关于 iOS 执行的文章。
对于本文，我们将创建一个简单的 Android 应用，其中包含一个屏幕，显示一个带有“Hi Dad”的标签和一个背景图像。这将在 50 行代码以内完成，无需 XCode，无需 Java，只需简单的 Lua。Corona SDK 还有大量插件可供开发者在应用开发中使用。此外，还有 Corona University，人们可以在那里学习更多关于该语言和 SDK 的知识，以开发更强大的应用程序。我在 指南 中发现了大量信息，为我进入这个新世界提供了最初的学习资料。
一些不严谨的假设：您熟悉事件及其侦听器。您有一些计算机编程经验，例如变量定义和作用域。您不熟悉 xcode 并且/或者做过一些 Android 编程，或者有/将会创建密钥文件。
背景
Corona 构建应用程序的方式对我来说很简单，包括 Lua 语言的部分。
1. 您有一个 config.lua 文件，其中存储了有关应用程序配置的重要信息，例如屏幕宽度和高度、使用的方向、每秒帧数等。
2. 其次，您总是需要有一个 main.lua 文件。当 Corona SDK 应用程序启动时，它总是首先查找 main.lua 文件来执行。
3. 对于应用程序中的任何附加屏幕，您可以创建其他的 lua 文件并设置它们以执行您想要的操作。这些文件可以命名为 dad.lua、mom.lua、home.lua 等。
使用代码
要开发 Corona SDK 应用程序，需要满足一些要求。首先，您需要下载 Corona SDK 本身以及 Java SDK 32 位版本。
1. 在 这里 下载 Corona SDK。
2. 有一个文本编辑器，如 NotePad++，您也可以使用 Eclipse 来完成，并在其中设置 Corona SDK 插件。
3. 为了本次练习的目的，我们将使用我创建的工具 Corona.Show，这是一个我创建的 Java 应用程序，用于创建一个简单的入门级移动应用程序。当然，这是一个“作弊”应用程序，因为它是一个 RAD（快速应用程序开发）工具。我只是懒得重新编写所有代码，而是想快速开发，并开始开发这个工具。不过它仍然处于起步阶段。
4. 要将您的应用程序编译成 apk，您需要互联网连接，因为应用程序将由 CoronaLabs 服务器编译并下载到您的文件夹中。
我强烈建议，如果您对 Corona SDK 这个领域感兴趣，可以购买本书 Learning Mobile App & Game Development with Corona。我的表哥及时地帮我买到了，这是一本非常有价值的学习资料。他称之为“商业投资”。我喜欢这个说法。
安装 Corona SDK 后，如果一切正常，您应该会在桌面上看到一个名为“Corona Simulator”的图标。您将使用它来创建您的 Corona SDK 应用程序。
启动应用程序，您应该会看到类似这样的界面。
我们将创建一个新项目，选择“New Project”。有多种项目可供选择，例如标签式应用程序、空白应用程序、多场景应用程序。对于本文的目的是，只需选择“Multiscene Application”。
我将我的应用程序命名为 HelloMash。在“Application Name”中输入您的应用程序名称，然后单击“Ok”。一旦您单击“Ok”，Corona SDK 将在项目文件夹中为您创建一个多场景应用程序并进行模拟。这是我喜欢这个框架的美妙之处。
在 View, View As 中，我选择了 iPhone 6 Plus 并进行了模拟，您可以更改为各种设备模拟器，应用程序将遵循您的命令。
当您单击“Go to Scene2”等按钮时，应用程序将在场景之间来回移动。在 SDK 打开的文件夹结构中，您会注意到各种 png 和 lua 文件，如 main.lua、config.lua、scene1.lua、scene2.lua 和 scene3.lua。让我们详细看看这些文件。
config.lua
如前所述，config.lua 文件存储应用程序配置设置。在最简单的形式下，该文件看起来是这样的。
application =
{
content =
{
width = 320,
height = 480,
scale = "letterBox",
fps = 30,
},
}
这告诉 SDK 应用程序的宽度为 320，高度为 480，缩放方式为 letterBox，每秒帧数为 30。Corona SDK 是一个游戏开发框架，因此有 fps。此文件应与 main.lua 文件放在同一文件夹中。其目的是确保您的应用程序能针对各种不同的可用设备进行正确缩放。缩放可以是 none（无）、letterBox（均匀缩放）、zoomEven（统一屏幕）和 zoomStretch（屏幕上所有内容）。
main.lua
如果您的项目文件夹中没有 main.lua 文件，您的应用程序将无法运行。
-- hide the status bar display.setStatusBar( display.HiddenStatusBar ) -- require the composer library local composer = require "composer" -- load scene1 composer.gotoScene( "scene1" )
从上面的代码中，我们看到以 -- 开头的注释。下一行告诉应用程序隐藏状态栏，然后使用 composer 库。composer 库用于屏幕导航。还有一个 storyboard 库用于此目的，但我们将在以后讨论。之后，应用程序应该会显示 scene1 屏幕。statusbar 参数适用于 iOS，状态栏可以设置为 dark（黑暗）、default（默认）、translucent（半透明）和 hidden（隐藏）。
scene1.lua 和其他文件
local sceneName = ...
local composer = require( "composer" )
-- Load scene with same root filename as this file
local scene = composer.newScene( sceneName )
local nextSceneButton
function scene:create( event )
local sceneGroup = self.view
-- Called when the scene's view does not exist
--
-- INSERT code here to initialize the scene
-- e.g. add display objects to 'sceneGroup', add touch listeners, etc
end
function scene:show( event )
local sceneGroup = self.view
local phase = event.phase
if phase == "will" then
-- Called when the scene is still off screen and is about to move on screen
local title = self:getObjectByName( "Title" )
title.x = display.contentWidth / 2
title.y = display.contentHeight / 2
title.size = display.contentWidth / 10
local goToScene2Btn = self:getObjectByName( "GoToScene2Btn" )
goToScene2Btn.x = display.contentWidth - 95
goToScene2Btn.y = display.contentHeight - 35
local goToScene2Text = self:getObjectByName( "GoToScene2Text" )
goToScene2Text.x = display.contentWidth - 92
goToScene2Text.y = display.contentHeight - 35
elseif phase == "did" then
-- Called when the scene is now on screen
--
-- INSERT code here to make the scene come alive
-- e.g. start timers, begin animation, play audio, etc
-- we obtain the object by id from the scene's object hierarchy
nextSceneButton = self:getObjectByName( "GoToScene2Btn" )
if nextSceneButton then
-- touch listener for the button
function nextSceneButton:touch ( event )
local phase = event.phase
if "ended" == phase then
composer.gotoScene( "scene2", { effect = "fade", time = 300 } )
end
end
-- add the touch event listener to the button
nextSceneButton:addEventListener( "touch", nextSceneButton )
end
end
end
function scene:hide( event )
local sceneGroup = self.view
local phase = event.phase
if event.phase == "will" then
-- Called when the scene is on screen and is about to move off screen
--
-- INSERT code here to pause the scene
-- e.g. stop timers, stop animation, unload sounds, etc.)
elseif phase == "did" then
-- Called when the scene is now off screen
if nextSceneButton then
nextSceneButton:removeEventListener( "touch", nextSceneButton )
end
end
end
function scene:destroy( event )
local sceneGroup = self.view
-- Called prior to the removal of scene's "view" (sceneGroup)
--
-- INSERT code here to cleanup the scene
-- e.g. remove display objects, remove touch listeners, save state, etc
end
-- Listener setup
scene:addEventListener( "create", scene )
scene:addEventListener( "show", scene )
scene:addEventListener( "hide", scene )
scene:addEventListener( "destroy", scene )
return scene
如果您研究上面的 lua 源代码，您会发现代码是自解释的。当屏幕激活时，会发生一些事件。这些事件是 create（创建）、show（显示）、hide（隐藏）和 destroy（销毁）。corona sdk 需要捕获这些事件的发生并执行各种操作，因此需要添加事件侦听器。事件侦听器可以添加到任何类型的控件上，以便为其关联操作。
在 scene create（场景创建）时，创建您希望在屏幕上看到的控件。在 scene show（场景显示）时，向您的控件添加更多功能，例如移动它们等。Scene show 有两个阶段：will（将要）和 did（已完成）。Will 是 show 即将发生时，did 是场景已显示时。Scene hide 也有两个阶段：will 是即将隐藏时，did 是隐藏完成后。在这些阶段，您可以在应用程序中执行各种操作。
对于刚接触的人来说，上面的大部分代码可能看起来令人生畏和复杂，对我来说也是如此。我当时想，“WTF？左、上、宽、高这些我习惯的控件属性在哪里？”。所以，我开始开发 Corona.Show，一个我打算逐步完善的 RAD 工具，以简化 Corona 应用程序的开发过程。
您会注意到 Lua 代码中有“local”这个词。它们与 JavaScript 中的 var 或 Vb 中的 Dim 相同。它们用于声明变量，但 local 在这里指的是变量的作用域。全局变量要么在没有 local 或 global 的情况下定义。有关变量和作用域的更多详细信息，请查阅 Lua 文档。变量中还有 x 和 y 属性。将它们想象成数学中的 x 和 y 坐标。别担心，我对数学不太擅长，所以它们仍然让我困惑，但我通过使用锚点找到了解决方法。
您会注意到项目文件夹中还有一个名为 scene1.ccscene 的文件。这个文件保存了 scene 1 中控件的定义。
{
"metadata": {
"creator": "Corona Composer",
"version": "0.6"
},
"objects": {
"id1": {
"alpha": 1,
"bgColor": {
"b": 0.87843137254902,
"g": 0.72156862745098,
"r": 0.55294117647059
},
"children": [
"id2",
"id3",
"id4",
"id5"
],
"drawMode": "normal",
"gridH": 20,
简要查看此文件，即可了解如何使用 Corona Composer GUI 构建应用程序。在撰写本文时，Composer 仅适用于 MAC 平台。对于像我们这样的 Windows 用户，幸运的是，我正在开发一个 GUI 工具，尽管它仍处于起步阶段，可能还无法与基于 Windows 的 Composer 相提并论，但由于对这个框架的好奇和惊叹，我决定为什么不试试呢？让我们通过 Corona.Show 创建一个简单的应用程序来演示这一点。
将您的应用程序编译为 APK。
1. 确保您有互联网连接。
2. 在您的 Corona Simulator 中，单击 File > Build for Android > Build。
这个 stackoverflow 文章 解释了如何创建密钥文件。
使用 Corona.Show
1. 在您的 C:\ 驱动器中创建一个文件夹，并将 Corona.jar 放在那里。要使用它，您需要 Java SDK，也请下载（见上面的链接）。
2. 如果一切顺利，您应该会看到这个屏幕。
3. 单击 File > New 并输入项目详细信息。让我们将项目指定为 HelloMash 或您喜欢的任何名称。
4. 目前将所有内容保留原样，然后单击 Next。这将显示下一个屏幕，用于您的场景。应用程序已为您创建了一个主场景。它将链接到 main.lua。
5. 将 BG Color（背景颜色）更改为白色，方法是从 ColorPicker 中选择白色。单击 Apply。
现在，让我们为我们的应用程序添加另一个场景，它将显示“Hi Dad!”。
6. 单击 File > New。键入场景名称为 dad，并从您的图片选择中选择一个 BG image（背景图像）。
7. 勾选 Starting Scene（起始场景）。这告诉我们的 RAD（快速应用程序开发工具） dad 将是 main 启动后要打开的起始场景。
8. 勾选 Composer，因为我们将使用它进行屏幕导航。单击 Apply。
让我们最终确定 dad.lua 屏幕。
9. 从左侧的场景列表中选择 dad。
10. 单击 Insert > Text（插入 > 文本）。
11. 将 ID 更改为 lblID，将 Text 更改为 Hi Dad，字体设置为 bold（粗体），字号设置为 24。颜色保持为白色。
12. 单击 Apply。您刚刚在 dad 场景的 left 10 top 50 位置创建了一个标签。
13. 单击 File > Exit，您应该会看到 Project Screen（项目屏幕）。
14. 在项目屏幕中单击 File > Compile。这将打开您的项目文件。
如果 Corona Simulator 未启动，请启动它，然后选择 Open Project（打开项目）。
在您保存 CoronaShow.jar 的文件夹中，找到 Apps 文件夹。
选择您的应用程序名称的文件夹，例如 HelloMash。
选择其中的 main.lua，模拟器应该会运行您的应用程序。如果一切顺利，您应该会看到类似这样的屏幕（带有您自己的背景）。
让我们看看我们版本的应用程序...
HelloMash 项目 - config.lua
--calculate the aspect ratio of the device:
application =
{
showRuntimeErrors = false,
content =
{
width = 320,
height = 480,
scale = "letterBox",
xAlign = "left",
yAlign = "top",
fps = 30,
imageSuffix = {
["@2x"] = 2,
}
},
}
您可以将此 config 与上面的进行比较，唯一的区别是 showRuntimeErrors 属性。
HelloMash 项目 - main.lua
display.setDefault("background", 0,0,0)
-- set the status bar of the app iOS
display.setStatusBar(display.DefaultStatusBar)
local composer = require "composer"
-- useful functions
composer.gotoScene("dad", {effect="fade", time = 400})
- 在这里，我们使用 RGB 值将背景设置为黑色。Corona 使用 RGB 来表示颜色。
- 状态栏设置为默认值。您可以在使用 Corona.Show 开发时更改此设置，如上所述。
- 我们将使用 composer 库进行屏幕导航。
- 当应用程序启动时，应该会显示 dad 屏幕/场景，在 400 毫秒后以淡入效果进行过渡。
HelloMash 项目 - dad.lua
我们的移动应用程序这次是通过 Corona.Show 创建的。您会注意到它与上面讨论的 scene1.lua 文件有相似之处，但我们的文件没有 dad1.ccscene 文件，因为我们没有使用 composer。在我们创建场景时，我们将屏幕控件创建如下。
function scene:create(event)
-- create a group to hold everything in the scene
local sceneGroup = self.view
bgImage = display.newImage("61045423.jpg",0,0)
sceneGroup:insert(bgImage)
lblDad = display.newText("Hi Dad",0,0,100,40,native.systemFontBold,24)
lblDad.anchorX = 0
lblDad.anchorY = 0
lblDad.x = 10
lblDad.y = 50
lblDad:setTextColor(255,255,255)
sceneGroup:insert(lblDad)
end
- 每个场景都有一个 group 对象，它本身就是 self.view。我们可以引用它并向其添加控件。
- 我们定义了我们的场景包含一个背景图像，我们将此图像插入到场景中。
- 我们使用 RAD 工具定义了一个 lblDad 文本标签，并为其设置了一些属性，这些属性已转换为以下内容。我来自一个习惯使用 Left、Top、Width 和 Height 的世界，所以最初我选择了这种方法，并将 x 和 y 设置为 0，然后设置标签左侧和顶部位置的锚点。
- 标签的颜色设置为白色，我使用了 rgb 255 来表示。
上面引用的书遵循这种开发方法。也许将来会发布一本 Corona Composer 的书。您可以在 CoronaLabs 这里 找到有关显示对象的更多信息。
关注点
如前所述，Corona.Show 仍处于起步阶段，随着时间的推移将添加更多控件。它是在需要轻松设计 Corona SDK 应用程序的需求下构思、设计和开发的，目前还没有游戏开发方面的野心。我还有很多关于 Corona SDK 的知识需要学习才能变得足够灵活，但这既是一个充满挑战又令人兴奋的世界。我迫不及待地想从 iOS 的角度测试我创建的应用程序。
CodeProject 的 Peach Pellen 也有一个关于这个 SDK 的有趣采访，她的博客已经被证明是一个宝贵的学习场所。
请继续关注我关于 Corona SDK 移动应用开发经验的更多发展。