在本系列指导教程中，我们共同来学习如何创建一款平衡球类游戏。这款游戏的目标是保持小球平衡、避开各种障碍物并最终到达终点。简单的小游戏，咱们马上进 入正题！
教程说明：
使用工具: Corona SDK
执行难度: 普通
操作时间: 30分钟到60分钟
步骤一: 应用程序概述
在Lua与Corona SDK API的帮助下，我们将利用预先准备好的图像素材制作出一款有趣的小游戏。
玩家需要利用设备自身配备的陀螺仪操控小球避开障碍物，并最终到达目的地。大家可以通过修改游戏参数对内容进行自定义。
步骤二: 目标开发平台
首先，我们要选择应用程序作品所依托的运行平台，确定了这一点后我们才能选择与设备相匹配的图像显示尺寸。
iOS系统平台具体参数如下：
iPad: 1024x768分辨率, 132ppi
iPhone/iPodTouch: 320x480分辨率, 163 ppi
iPhone4: 960x640分辨率, 326 ppi
由于Android平台的开放特性，我们需要面对各种各样不同参数的设备及分辨率。这里我们选择几款人气产品作为主要参考对象：
谷歌 NexusOne: 480x800分辨率, 254 ppi
摩托罗拉 DroidX: 854x480分辨率, 228 ppi
HTC Evo: 480x800分辨率, 217 ppi
在这篇指南文章中，我们主要以iOS平台尤其是iPhone/iPod为基准进行图像设计工作。不过下文中所使用的代码理论上也同样适用于 Android系统上的Corona SDK开发。
步骤三: 用户界面
一款简洁而友好的用户界面会帮助我们的应用作品顺利打开市场，而在指南针应用中，用户界面的构成元素主要有背景图案及指针图形。
本指南中所涉及的一切界面图形资源都汇总在压缩包内，大家可以点击以下链接获取并使用。
下载链接：https://mobiletuts.s3.amazonaws.com/Corona-SDK_Compass/source.zip
步骤四: 导出图像
根据大家所选择的设备平台，我们需要将图像资源以合适的PPI及尺寸进行导出。这项工作非常简单，任何一款主流图像编辑工具都能实现，大家根据自己 的习惯处理即可。我个人使用AdjustSize，这是一款Mac OS X系统自带的图像预览应用。导出完成后，请记得给文件起一个清晰准确的名称，并保存在项目文件夹当中。
步骤五: 声音
为了给玩家带来更愉悦的游戏体验，我们需要为事件设定各种音效。在本实例中涉及到的各种音效资源都能够在Soungle.com网站中找到，搜索关键字 bell 及 buzz 即可。
步骤六: 应用程序配置
首先创建一个外部文件config.lua，它的作用是保证应用程序在设备上以全屏方式运行。这个文件中会明确出现应用程序的原始分辨率，并提供一 套缩放方案，保证应用能够在各种不同设备的独特分辨率下正确显示。
application =
{
content =
{
width = 320,
height = 480,
scale = "letterbox"
},
}
步骤七: Main.lua
好，准备工作就绪，现在我们开始编写应用！
打开大家最喜爱的Lua编辑器（任何一款文本编辑工具都能胜任，不过并不是每种都支持Lua语法高亮显示功能），准备着手编写满载自己汗水的应用 吧！请记住，一定把文件保存在项目文件夹中，并命名为Main.lua。
步骤八: 代码结构
我们要将代码以类的形式进行结构整理。如果大家熟悉ActionScript或者Java，肯定会发现我所推荐的这套结构基本上符合二者的构造特 点。
Necessary Classes
Variables and Constants
Declare Functions
contructor (Main function)
class methods (other functions)
call Main function
步骤九: 隐藏状态栏
display.setStatusBar(display.HiddenStatusBar)
这条代码的作用是隐藏状态栏。状态栏在任何一款移动系统平台上都会出现，一般位于屏幕上方，主要显示时间、信号强度等提示信息。
步骤十: 导入物理引擎
要还原真实的碰撞反应，我们需要在应用中使用物理效果库，通过以下代码将库导入程序：
local physics = require('physics')
physics.start()
physics.setGravity(0, 0)
步骤十一: 游戏背景图案
既然是练手用的小作品，我们就姑且使用上面这幅图片作为背景图案。以下几行代码用于将图片引入应用程序。
-- Graphics
-- [Background]
local bg = display.newImage('bg.png')
步骤十二: 标题视图
上图所示即为标题视图，它是我们进入游戏后所面对的第一个互动界面，按照下列变量将内容设定并保存。
-- [Title View]
local titleBg
local playBtn
local creditsBtn
local titleView
步骤十三: 制作人员视图
上图所示为开发者姓名及游戏版权归属信息，利用以下变量对其加以保存。
-- [CreditsView]
local creditsView
步骤十四: 游戏视图
游戏视图所涉及的要素较多，包括玩家、障碍物及目的地。利用下面列出的代码完成游戏界面的基本创建。
-- [Game View]
-- [Player]
local player
-- [Bars Table]
local bars = {}
-- [Holes Table]
local holes = {}
-- [Goal]
local goal
步骤十五: 声音
以下代码将游戏中用到的声音加以保存。
local bell = audio.loadSound('bell.caf')
local buzz = audio.loadSound('buzz.caf')
步骤十六: 代码审查
以下列出的是本教程所提到全部代码纲要，大家可以从宏观角度对作品进行核查，确定所有要素都已经包含在程序成品当中：
-- Teeter like Game
-- Developed by Carlos Yanez
-- Hide Status Bar
display.setStatusBar(display.HiddenStatusBar)
-- Physics
local physics = require('physics')
physics.start()
physics.setGravity(0, 0)
-- Graphics
-- [Background]
local bg = display.newImage('bg.png')
-- [Title View]
local titleBg
local playBtn
local creditsBtn
local titleView
-- [Credits]
local creditsView
-- [Player]
local player
-- [Bars Table]
local bars = {}
-- [Holes Table]
local holes = {}
-- [Goal]
local goal
-- Sounds
local bell = audio.loadSound('bell.caf')
local buzz = audio.loadSound('buzz.caf')
步骤十七: 函数声明
应用启动之初声明所有函数的基本状态。
local Main = {}
local startButtonListeners = {}
local showCredits = {}
local hideCredits = {}
local showGameView = {}
local gameListeners = {}
local movePlayer = {}
local onCollision = {}
local alert = {}
local dragPaddle = {}
步骤十八: 游戏构造函数
接下来，我们要创建一套运行逻辑的初始化机制，具体内容如下：
function Main()
-- code...
end
步骤十九: 添加标题视图
现在我们将标题视图放置在主界面中，同时调用用于监听按钮 触摸 动作的函数。
function Main()
titleBg = display.newImage('titleBg.png')
playBtn = display.newImage('playBtn.png', display.contentCenterX - 35.5, display.contentCenterY + 10)
creditsBtn = display.newImage('creditsBtn.png', display.contentCenterX - 50.5, display.contentCenterY + 65)
titleView = display.newGroup(titleBg, playBtn, creditsBtn)
startButtonListeners('add')
end
步骤二十: 开始按钮监听
此函数的作用是为标题视图按钮添加所需的监听器。
function startButtonListeners(action)
if(action == 'add') then
playBtn:addEventListener('tap', showGameView)
creditsBtn:addEventListener('tap', showCredits)
else
playBtn:removeEventListener('tap', showGameView)
creditsBtn:removeEventListener('tap', showCredits)
end
end
步骤二十一: 显示开发人员名单
当用户点击对应按钮时，应用会显示开发人员名单。此时要额外添加一个监听器，这样用户再次点击时程序将中止名单显示并返回主界面。
function showCredits:tap(e)
playBtn.isVisible = false
creditsBtn.isVisible = false
creditsView = display.newImage('credits.png', 0, display.contentHeight+40)
transition.to(creditsView, {time = 300, y = display.contentHeight-20, onComplete = function() creditsView:addEventListener('tap', hideCredits) end})
end
步骤二十二: 隐藏开发人员名单
当用户在开发人员名单显示过程中点击屏幕，显示将以动画形式中断并返回主界面。
function hideCredits:tap(e)
playBtn.isVisible = true
creditsBtn.isVisible = true
transition.to(creditsView, {time = 300, y = display.contentHeight+creditsView.height, onComplete = function() creditsView:removeEventListener('tap', hideCredits) display.remove(creditsView) creditsView = nil end})
end
步骤二十三: 显示游戏视图
当用户点击 开始游戏 （Play）按钮时，标题视图将以动画形式消去并显示游戏视图。
function showGameView:tap(e)
transition.to(titleView, {time = 300, x = -titleView.height, onComplete = function() startButtonListeners('rmv') display.remove(titleView) titleView = nil end})
步骤二十四: 目的地
在这里我们要为小球设定目的地。另外，我们还要为其设定名称，以便小球触碰到目的地时顺利触发预定事件。
-- Goal
goal = display.newImage('goal.png')
goal.x = 439
goal.y = 31
goal.name = 'g'
步骤二十五: 墙体
我们要在游戏界面中设置墙体，这样才能保证小球始终在预定的游戏场地内活动。
-- Walls
local left = display.newLine(-1, 0, -1, display.contentHeight)
local right = display.newLine(display.contentWidth+1, 0, display.contentWidth+1, display.contentHeight)
local top = display.newLine(0, -3, display.contentWidth, -3)
local bottom = display.newLine(0, display.contentHeight, display.contentWidth, display.contentHeight)
步骤二十六: 障碍物
这些条形障碍物是提升游戏乐趣的关键所在，利用以下代码在游戏中实现此类设置。
-- Bars
local b1 = display.newImage('bar.png', 92, 67)
local b2 = display.newImage('bar.png', 192, -2)
local b3 = display.newImage('bar.png', 287, 67)
local b4 = display.newImage('bar.png', 387, -2)
步骤二十七: 陷阱
这些充当陷阱的洞是我们为小球设计的 敌人 ，一旦小球触碰到它们，游戏即宣告结束。
-- Holes
local h1 = display.newImage('hole.png', 62, 76)
local h2 = display.newImage('hole.png', 124, 284)
local h3 = display.newImage('hole.png', 223, 224)
local h4 = display.newImage('hole.png', 356, 114)
local h5 = display.newImage('hole.png', 380, 256)
-- Name holes for collision detection
h1.name = 'h'
h2.name = 'h'
h3.name = 'h'
h4.name = 'h'
h5.name = 'h'
步骤二十八: 小球（玩家）
接下来我们要在游戏中添加主角小球。在设备陀螺仪的帮助下，小球会随着玩家的操作而自然滚动。
-- Player
player = display.newImage('player.png')
player.x = 49
player.y = 288
player:setReferencePoint(display.CenterReferencePoint)
次回预告
在本系列指南教程的第一部分，我们共同探讨了如何为游戏设计用户界面及基本设置。希望大家继续关注第二部分，届时我们将一道学习如何处理应用程序的 逻辑、按钮、操作等细节。
