Corona SDK游戏开发实例（一）：创建用户界面-unity net code服务器应用开发

[[89782]]教程说明：

使用工具: Corona SDK
执行难度: 普通
操作时间: 30分钟到60分钟

步骤一: 应用程序概述

[[89783]]

在Lua与Corona SDK API的帮助下，我们将利用预先准备好的图像素材制作出一款有趣的小游戏。

玩家需要利用设备自身配备的陀螺仪操控小球避开障碍物，并最终到达目的地。大家可以通过修改游戏参数对内容进行自定义。

步骤二: 目标开发平台

[[89784]]

首先，我们要选择应用程序作品所依托的运行平台，确定了这一点后我们才能选择与设备相匹配的图像显示尺寸。

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开发。

步骤三: 用户界面

[[89785]]

一款简洁而友好的用户界面会帮助我们的应用作品顺利打开市场，而在指南针应用中，用户界面的构成元素主要有背景图案及指针图形。

本指南中所涉及的一切界面图形资源都汇总在压缩包内，大家可以点击以下链接获取并使用。

下载链接：https://mobiletuts.s3.amazonaws.com/Corona-SDK_Compass/source.zip

步骤四: 导出图像

根据大家所选择的设备平台，我们需要将图像资源以合适的PPI及尺寸进行导出。这项工作非常简单，任何一款主流图像编辑工具都能实现，大家根据自己的习惯处理即可。我个人使用AdjustSize，这是一款Mac OS X系统自带的图像预览应用。导出完成后，请记得给文件起一个清晰准确的名称，并保存在项目文件夹当中。

步骤五: 声音

[[89786]]

为了给玩家带来更愉悦的游戏体验，我们需要为事件设定各种音效。在本实例中涉及到的各种音效资源都能够在Soungle.com网站中找到，搜索关键字“bell”及“buzz”即可。

步骤六: 应用程序配置

首先创建一个外部文件config.lua，它的作用是保证应用程序在设备上以全屏方式运行。这个文件中会明确出现应用程序的原始分辨率，并提供一套缩放方案，保证应用能够在各种不同设备的独特分辨率下正确显示。

application = 
{ 
    content = 
    { 
        width = 320, 
        height = 480, 
        scale = "letterbox" 
    }, 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.

步骤七: 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  
1.
2.
3.
4.
5.
6.

步骤九: 隐藏状态栏

display.setStatusBar(display.HiddenStatusBar) 
1.

这条代码的作用是隐藏状态栏。状态栏在任何一款移动系统平台上都会出现，一般位于屏幕上方，主要显示时间、信号强度等提示信息。

步骤十: 导入物理引擎

要还原真实的碰撞反应，我们需要在应用中使用物理效果库，通过以下代码将库导入程序：

local physics = require('physics') 
physics.start() 
physics.setGravity(0, 0) 
1.
2.
3.

步骤十一: 游戏背景图案

[[89787]]

既然是练手用的小作品，我们就姑且使用上面这幅图片作为背景图案。以下几行代码用于将图片引入应用程序。

-- Graphics 
-- [Background] 
local bg = display.newImage('bg.png') 
1.
2.
3.

步骤十二: 标题视图

[[89788]]

上图所示即为标题视图，它是我们进入游戏后所面对的***个互动界面，按照下列变量将内容设定并保存。

-- [Title View] 
local titleBg 
local playBtn 
local creditsBtn 
local titleView 
1.
2.
3.
4.
5.

步骤十三: 制作人员视图

[[89789]]

上图所示为开发者姓名及游戏版权归属信息，利用以下变量对其加以保存。

-- [CreditsView] 
local creditsView 
1.
2.

步骤十四: 游戏视图

[[89790]]

游戏视图所涉及的要素较多，包括玩家、障碍物及目的地。利用下面列出的代码完成游戏界面的基本创建。

-- [Game View] 
-- [Player] 
local player 
-- [Bars Table] 
local bars = {} 
-- [Holes Table] 
local holes = {} 
-- [Goal] 
local goal 
1.
2.
3.
4.
5.
6.
7.
8.
9.

步骤十五: 声音

以下代码将游戏中用到的声音加以保存。

[[89791]]

local bell = audio.loadSound('bell.caf') 
local buzz = audio.loadSound('buzz.caf') 
1.
2.

步骤十六: 代码审查

以下列出的是本教程所提到全部代码纲要，大家可以从宏观角度对作品进行核查，确定所有要素都已经包含在程序成品当中：

-- 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') 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.

步骤十七: 函数声明

应用启动之初声明所有函数的基本状态。

local Main = {} 
local startButtonListeners = {} 
local showCredits = {} 
local hideCredits = {} 
local showGameView = {} 
local gameListeners = {} 
local movePlayer = {} 
local onCollision = {} 
local alert = {} 
local dragPaddle = {} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

步骤十八: 游戏构造函数

接下来，我们要创建一套运行逻辑的初始化机制，具体内容如下：

function Main() 
    -- code... 
end 
1.
2.
3.

步骤十九: 添加标题视图

现在我们将标题视图放置在主界面中，同时调用用于监听按钮“触摸”动作的函数。

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 
1.
2.
3.
4.
5.
6.
7.
8.

步骤二十: 开始按钮监听

此函数的作用是为标题视图按钮添加所需的监听器。

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 
1.
2.
3.
4.
5.
6.
7.
8.
9.

步骤二十一: 显示开发人员名单

当用户点击对应按钮时，应用会显示开发人员名单。此时要额外添加一个监听器，这样用户再次点击时程序将中止名单显示并返回主界面。

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 
1.
2.
3.
4.
5.
6.

步骤二十二: 隐藏开发人员名单

当用户在开发人员名单显示过程中点击屏幕，显示将以动画形式中断并返回主界面。

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 
1.
2.
3.
4.
5.

步骤二十三: 显示游戏视图

当用户点击“开始游戏”（Play）按钮时，标题视图将以动画形式消去并显示游戏视图。

function showGameView:tap(e) 
    transition.to(titleView, {time = 300, x = -titleView.height, onComplete = function() startButtonListeners('rmv') display.remove(titleView) titleView = nil end}) 
1.
2.

步骤二十四: 目的地

在这里我们要为小球设定目的地。另外，我们还要为其设定名称，以便小球触碰到目的地时顺利触发预定事件。

-- Goal 
  
goal = display.newImage('goal.png') 
goal.x = 439 
goal.y = 31 
goal.name = 'g' 
1.
2.
3.
4.
5.
6.

步骤二十五: 墙体

我们要在游戏界面中设置墙体，这样才能保证小球始终在预定的游戏场地内活动。

-- 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) 
1.
2.
3.
4.
5.
6.

步骤二十六: 障碍物

这些条形障碍物是提升游戏乐趣的关键所在，利用以下代码在游戏中实现此类设置。

-- 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) 
1.
2.
3.
4.
5.
6.

步骤二十七: 陷阱

这些充当陷阱的洞是我们为小球设计的“敌人”，一旦小球触碰到它们，游戏即宣告结束。

-- 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' 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

步骤二十八: 小球（玩家）

接下来我们要在游戏中添加主角——小球。在设备陀螺仪的帮助下，小球会随着玩家的操作而自然滚动。

-- Player  
 
player = display.newImage('player.png') 
player.x = 49 
player.y = 288 
player:setReferencePoint(display.CenterReferencePoint) 
1.
2.
3.
4.
5.
6.

次回预告

在本系列指南教程的***部分，我们共同探讨了如何为游戏设计用户界面及基本设置。希望大家继续关注第二部分，届时我们将一道学习如何处理应用程序的逻辑、按钮、操作等细节。咱们下期再见！

原文链接：

http://mobile.tutsplus.com/tutorials/corona/corona-sdk-create-a-teeter-like-game-setup-interface-creation/