Corona SDK游戲開發實例（一）：創建用戶界面
譯文教程說明：
- 使用工具: 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)
次回預告
在本系列指南教程的***部分，我們共同探討了如何為游戲設計用戶界面及基本設置。希望大家繼續關注第二部分，屆時我們將一道學習如何處理應用程序的邏輯、按鈕、操作等細節。咱們下期再見！
原文鏈接：
