教程说明：使用工具：CoronaSDK执行难度：正常运行时间：30分钟到60分钟第一步：应用概述借助Lua和CoronaSDKAPI，我们将使用预先准备好的图片素材来制作一个有趣的小游戏。玩家需要使用设备本身配备的陀螺仪来控制小球避开障碍物，最终到达目的地。您可以通过修改游戏参数来自定义内容。第二步：目标开发平台首先，我们需要选择应用工作所基于的运行平台。确认这一点后，我们就可以选择与设备相匹配的图片显示尺寸了。iOS系统平台具体参数如下：iPad：1024x768分辨率，132ppiiPhone/iPodTouch：320x480分辨率，163ppiiPhone4：960x640分辨率，326ppi由于Android平台的开放性，我们需要面对各种参数设备和分辨率。这里我们选择几款热门产品作为主要参考对象：GoogleNexusOne:480x800resolution,254ppiMotorolaDroidX:854x480resolution,228ppiHTCEvo:480x800resolution,217ppi在这篇攻略文章中，我们主要使用iOS平台——尤其是iPhone/iPod作为图形设计工作的基准。不过下面使用的代码理论上也适用于安卓系统CoronaSDK的开发。第三步：用户界面简单友好的用户界面将帮助我们的应用顺利打开市场。在指南针应用程序中，用户界面的主要元素是背景图案和指针图形。本指南涉及的所有界面图文资源都汇总在一个压缩包中，您可以点击下方链接获取使用。下载链接：https://mobiletuts.s3.amazonaws.com/Corona-SDK_Compass/source.zip第四步：导出图片根据您选择的设备平台，我们需要导出合适PPI和大小的图片资源。这个工作很简单，任何主流的图片编辑工具都可以做，大家可以根据自己的习惯来处理。我个人使用的是MacOSX自带的图片预览应用AdjustSize。导出完成后，请记得给文件取一个清晰准确的名字，并保存在项目文件夹中。第五步：音效为了给玩家带来更愉悦的游戏体验，我们需要为事件设置各种音效。本例涉及的各种音效资源都可以在Soungle.com网站上找到，只需搜索关键字“bell”和“buzz”即可。第六步：应用配置首先创建一个外部文件config.lua，用于保证应用在设备上全屏运行。该文件会清晰展示应用的原始分辨率，并提供一套缩放方案，确保应用在各种设备的独特分辨率下都能正确显示。application={content={width=320,height=480,scale="letterbox"},}第七步：Main.luaOK，准备工作就绪，现在开始写应用程序！启动您最喜欢的Lua编辑器（任何文本编辑工具都可以，但并非都支持Lua语法高亮显示），并准备好开始编写您的汗流浃背的应用程序！请记住，一定要将文件保存在项目文件夹中，并将其命名为Main.lua。第八步：代码结构我们需要以类的形式来构造代码。如果你熟悉ActionScript或者Java，你一定会发现我推荐的结构基本符合两者的结构特点。NecessaryClassesVariablesandConstantsDeclareFunctionscontructor(Mainfunction)classmethods(otherfunctions)callMainfunction第九步：隐藏状态栏display.setStatusBar(display.HiddenStatusBar)这段代码用于隐藏状态栏。状态栏在任何移动系统平台都会出现，一般位于屏幕顶部，主要显示时间、信号强度等提示信息。第十步：导入物理引擎要还原真实的碰撞响应，我们需要在应用程序中使用物理效果库，通过以下代码将该库导入到程序中：localphysics=require('physics')physics.start()physics.setGravity(0,0)第十一步：由于游戏的背景图案是练习的小作品，我们暂且使用上图作为背景图案。以下代码行用于将图像引入应用程序。--Graphics--[Background]localbg=display.newImage('bg.png')第十二步：标题视图上图是标题视图，这是我们进入游戏后面对的第一个交互界面，设置并保存内容根据以下变量。--[TitleView]localtitleBglocalplayBtnlocalcreditsBtnlocaltitleViewStep13:Producerview上图显示了开发者名称和游戏版权归属信息，使用下面的变量保存。--[CreditsView]localcreditsView第14步：游戏视图游戏视图涉及很多元素，包括玩家、障碍物和目的地。使用下面列出的代码完成游戏界面的基本创建。--[GameView]--[Player]localplayer--[BarsTable]localbars={}--[HolesTable]localholes={}--[Goal]localgoal第十五步：声音保存。localbell=audio.loadSound('bell.caf')localbuzz=audio.loadSound('buzz.caf')Step16:CodeReview以下是本教程中提到的所有代码的概要，您可以从宏中查看它们perspective检查工作以确保所有元素都已包含在完成的程序中：--TeeterlikeGame--DevelopedbyCarlosYanez--HideStatusBardisplay.setStatusBar(display.HiddenStatusBar)--Physicslocalphysics=require('physics')physics.start()physics.setGravity(0,0)--Graphics--[Background]localbg=display.newImage('bg.png')--[TitleView]localtitleBglocalplayBtnlocalcreditsBtnlocaltitleView--[Credits]localcreditsView--[Player]localplayer--[BarsTable]localbars={}--[HolesTable]localholes={}--[Goal]localgoal--Soundslocalbell=audio.loadSound('bell.caf')localbuzz=audio.loadSound('buzz.caf')第十七步：函数声明应用程序启动最初声明所有功能的基本状态。localMain={}localstartButtonListeners={}localshowCredits={}localhideCredits={}localshowGameView={}localgameListeners={}localmovePlayer={}localonCollision={}localalert={}localdragPaddle={}第十八步：游戏构造器接下来，我们要创建一套运行逻辑的初始化机制，具体内容如下：functionMain()--code...endStep19:添加titleview现在我们将titleview放置在主界面，调用“monitor”按钮“同时触摸”动作函数。functionMain()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第20步：开始按钮监听这个函数的作用是添加标题视图按钮所需的监听器。functionstartButtonListeners(action)if(action=='add')thenplayBtn:addEventListener('tap',showGameView)creditsBtn:addEventListener('tap',showCredits)elseplayBtn:removeEventListener('tap',showGameView)creditsBtn:removeEventListener('tap',showCredits)endend第21步：显示开发者列表当用户点击相应按钮时，应用程序将显示开发者列表。这时候就应该添加一个额外的监听器，这样当用户再次点击时，程序就会停止显示列表并返回到主界面。函数showCredits:tap(e)playBtn.isVisible=falsecreditsBtn.isVisible=falsecreditsView=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第22步：隐藏演职员表当用户在演职员表显示过程中点击屏幕时，显示会中断动画和返回主页。functionhideCredits:tap(e)playBtn.isVisible=truecreditsBtn.isVisible=truetransition.to(creditsView,{time=300,y=display.contentHeight+creditsView.height,onComplete=function()creditsView:removeEventListener('tap',hideCredits)display.remove(creditsView)creditsView=nilend})end第23步：显示游戏视图当用户点击“播放”按钮时，动画中的标题视图将被移除，游戏视图将被显示。functionshowGameView:tap(e)transition.to(titleView,{time=300,x=-titleView.height,onComplete=function()startButtonListeners('rmv')display.remove(titleView)titleView=nilend})第24步：目的地在这里我们要设置球的目的地。另外，我们还需要给它起个名字，这样当小球碰到目的地的时候，就会顺利的触发一个预定的事件。--Goalgoal=display.newImage('goal.png')goal.x=439goal.y=31goal.name='g'第25步：墙我们需要在游戏界面设置墙，这样才能保证小球总是在预定的比赛场地内移动。--Wallslocalleft=display.newLine(-1,0,-1,display.contentHeight)localright=display.newLine(display.contentWidth+1,0,display.contentWidth+1,display.contentHeight)localtop=display.newLine(0,-3,display.contentWidth,-3)localbottom=display.newLine(0,display.contentHeight,display.contentWidth,display.contentHeight)Step26:Obstacles这些条形障碍物是提升游戏乐趣的关键所在，使用下面的代码在游戏中实现这样的设置。--Barslocalb1=display.newImage('bar.png',92,67)localb2=display.newImage('bar.png',192,-2)localb3=display.newImage('bar.png',287,67)localb4=display.newImage('bar.png',387,-2)第27步：陷阱这些充当陷阱的孔是我们为小球设计的“敌人”。一旦球触及他们，比赛将开始宣告结束。--Holeslocalh1=display.newImage('hole.png',62,76)localh2=display.newImage('hole.png',124,284)localh3=display.newImage('hole.png',223,224)localh4=display.newImage('hole.png',356,114)localh5=display.newImage('hole.png',380,256)--Nameholesforcollisiondetectionh1.name='h'h2.name='h'h3.name='h'h4.name='h'h5.name='h'Step28:Ball(player)接下来我们需要添加游戏中的主角——Ball。借助设备的陀螺仪，球会随着玩家的操作自然滚动。--Playerplayer=display.newImage('player.png')player.x=49player.y=288player:setReferencePoint(display.CenterReferencePoint)第二个预览在本系列教程的最后一部分，我们讨论了如何设计用户界面和基本设置。希望大家继续关注第二部分，届时我们一起学习如何处理应用的逻辑、按钮、操作等细节。下次见！原文链接：http://mobile.tutsplus.com/tutorials/corona/corona-sdk-create-a-teeter-like-game-setup-interface-creation/
