教程说明：
- 使用工具: 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)
次回预告
在本系列指南教程的***部分，我们共同探讨了如何为游戏设计用户界面及基本设置。希望大家继续关注第二部分，届时我们将一道学习如何处理应用程序的逻辑、按钮、操作等细节。咱们下期再见！
原文链接：
