Corona SDK游戲開發(fā)實例（一）：創(chuàng)建用戶界面
譯文教程說明：
- 使用工具: Corona SDK
- 執(zhí)行難度: 普通
- 操作時間: 30分鐘到60分鐘
步驟一: 應(yīng)用程序概述
在Lua與Corona SDK API的幫助下，我們將利用預(yù)先準(zhǔn)備好的圖像素材制作出一款有趣的小游戲。
玩家需要利用設(shè)備自身配備的陀螺儀操控小球避開障礙物，并最終到達(dá)目的地。大家可以通過修改游戲參數(shù)對內(nèi)容進(jìn)行自定義。
步驟二: 目標(biāo)開發(fā)平臺
首先，我們要選擇應(yīng)用程序作品所依托的運行平臺，確定了這一點后我們才能選擇與設(shè)備相匹配的圖像顯示尺寸。
iOS系統(tǒng)平臺具體參數(shù)如下：
-
iPad: 1024x768分辨率, 132ppi
-
iPhone/iPodTouch: 320x480分辨率, 163 ppi
-
iPhone4: 960x640分辨率, 326 ppi
由于Android平臺的開放特性，我們需要面對各種各樣不同參數(shù)的設(shè)備及分辨率。這里我們選擇幾款人氣產(chǎn)品作為主要參考對象：
-
谷歌 NexusOne: 480x800分辨率, 254 ppi
-
摩托羅拉 DroidX: 854x480分辨率, 228 ppi
-
HTC Evo: 480x800分辨率, 217 ppi
在這篇指南文章中，我們主要以iOS平臺——尤其是iPhone/iPod為基準(zhǔn)進(jìn)行圖像設(shè)計工作。不過下文中所使用的代碼理論上也同樣適用于Android系統(tǒng)上的Corona SDK開發(fā)。
步驟三: 用戶界面
一款簡潔而友好的用戶界面會幫助我們的應(yīng)用作品順利打開市場，而在指南針應(yīng)用中，用戶界面的構(gòu)成元素主要有背景圖案及指針圖形。
本指南中所涉及的一切界面圖形資源都匯總在壓縮包內(nèi)，大家可以點擊以下鏈接獲取并使用。
下載鏈接：https://mobiletuts.s3.amazonaws.com/Corona-SDK_Compass/source.zip
步驟四: 導(dǎo)出圖像
根據(jù)大家所選擇的設(shè)備平臺，我們需要將圖像資源以合適的PPI及尺寸進(jìn)行導(dǎo)出。這項工作非常簡單，任何一款主流圖像編輯工具都能實現(xiàn)，大家根據(jù)自己 的習(xí)慣處理即可。我個人使用AdjustSize，這是一款Mac OS X系統(tǒng)自帶的圖像預(yù)覽應(yīng)用。導(dǎo)出完成后，請記得給文件起一個清晰準(zhǔn)確的名稱，并保存在項目文件夾當(dāng)中。
步驟五: 聲音
為了給玩家?guī)砀鋹偟挠螒蝮w驗，我們需要為事件設(shè)定各種音效。在本實例中涉及到的各種音效資源都能夠在Soungle.com網(wǎng)站中找到，搜索關(guān)鍵字“bell”及“buzz”即可。
步驟六: 應(yīng)用程序配置
首先創(chuàng)建一個外部文件config.lua，它的作用是保證應(yīng)用程序在設(shè)備上以全屏方式運行。這個文件中會明確出現(xiàn)應(yīng)用程序的原始分辨率，并提供一套縮放方案，保證應(yīng)用能夠在各種不同設(shè)備的獨特分辨率下正確顯示。
- application =
- {
- content =
- {
- width = 320,
- height = 480,
- scale = "letterbox"
- },
- }
步驟七: Main.lua
好，準(zhǔn)備工作就緒，現(xiàn)在我們開始編寫應(yīng)用！
打開大家最喜愛的Lua編輯器（任何一款文本編輯工具都能勝任，不過并不是每種都支持Lua語法高亮顯示功能），準(zhǔn)備著手編寫滿載自己汗水的應(yīng)用吧！請記住，一定把文件保存在項目文件夾中，并命名為Main.lua。
步驟八: 代碼結(jié)構(gòu)
我們要將代碼以類的形式進(jìn)行結(jié)構(gòu)整理。如果大家熟悉ActionScript或者Java，肯定會發(fā)現(xiàn)我所推薦的這套結(jié)構(gòu)基本上符合二者的構(gòu)造特點。
- Necessary Classes
- Variables and Constants
- Declare Functions
- contructor (Main function)
- class methods (other functions)
- call Main function
步驟九: 隱藏狀態(tài)欄
- display.setStatusBar(display.HiddenStatusBar)
這條代碼的作用是隱藏狀態(tài)欄。狀態(tài)欄在任何一款移動系統(tǒng)平臺上都會出現(xiàn)，一般位于屏幕上方，主要顯示時間、信號強(qiáng)度等提示信息。
步驟十: 導(dǎo)入物理引擎
要還原真實的碰撞反應(yīng)，我們需要在應(yīng)用中使用物理效果庫，通過以下代碼將庫導(dǎo)入程序：
- local physics = require('physics')
- physics.start()
- physics.setGravity(0, 0)
步驟十一: 游戲背景圖案
既然是練手用的小作品，我們就姑且使用上面這幅圖片作為背景圖案。以下幾行代碼用于將圖片引入應(yīng)用程序。
- -- Graphics
- -- [Background]
- local bg = display.newImage('bg.png')
步驟十二: 標(biāo)題視圖
上圖所示即為標(biāo)題視圖，它是我們進(jìn)入游戲后所面對的***個互動界面，按照下列變量將內(nèi)容設(shè)定并保存。
- -- [Title View]
- local titleBg
- local playBtn
- local creditsBtn
- local titleView
步驟十三: 制作人員視圖
上圖所示為開發(fā)者姓名及游戲版權(quán)歸屬信息，利用以下變量對其加以保存。
- -- [CreditsView]
- local creditsView
步驟十四: 游戲視圖
游戲視圖所涉及的要素較多，包括玩家、障礙物及目的地。利用下面列出的代碼完成游戲界面的基本創(chuàng)建。
- -- [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')
步驟十六: 代碼審查
以下列出的是本教程所提到全部代碼綱要，大家可以從宏觀角度對作品進(jìn)行核查，確定所有要素都已經(jīng)包含在程序成品當(dāng)中：
- -- 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')
步驟十七: 函數(shù)聲明
應(yīng)用啟動之初聲明所有函數(shù)的基本狀態(tài)。
- local Main = {}
- local startButtonListeners = {}
- local showCredits = {}
- local hideCredits = {}
- local showGameView = {}
- local gameListeners = {}
- local movePlayer = {}
- local onCollision = {}
- local alert = {}
- local dragPaddle = {}
步驟十八: 游戲構(gòu)造函數(shù)
接下來，我們要創(chuàng)建一套運行邏輯的初始化機(jī)制，具體內(nèi)容如下：
- function Main()
- -- code...
- end
步驟十九: 添加標(biāo)題視圖
現(xiàn)在我們將標(biāo)題視圖放置在主界面中，同時調(diào)用用于監(jiān)聽按鈕“觸摸”動作的函數(shù)。
- 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
步驟二十: 開始按鈕監(jiān)聽
此函數(shù)的作用是為標(biāo)題視圖按鈕添加所需的監(jiān)聽器。
- 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
步驟二十一: 顯示開發(fā)人員名單
當(dāng)用戶點擊對應(yīng)按鈕時，應(yīng)用會顯示開發(fā)人員名單。此時要額外添加一個監(jiān)聽器，這樣用戶再次點擊時程序?qū)⒅兄姑麊物@示并返回主界面。
- 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
步驟二十二: 隱藏開發(fā)人員名單
當(dāng)用戶在開發(fā)人員名單顯示過程中點擊屏幕，顯示將以動畫形式中斷并返回主界面。
- 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
步驟二十三: 顯示游戲視圖
當(dāng)用戶點擊“開始游戲”（Play）按鈕時，標(biāo)題視圖將以動畫形式消去并顯示游戲視圖。
- function showGameView:tap(e)
- transition.to(titleView, {time = 300, x = -titleView.height, onComplete = function() startButtonListeners('rmv') display.remove(titleView) titleView = nil end})
步驟二十四: 目的地
在這里我們要為小球設(shè)定目的地。另外，我們還要為其設(shè)定名稱，以便小球觸碰到目的地時順利觸發(fā)預(yù)定事件。
- -- Goal
- goal = display.newImage('goal.png')
- goal.x = 439
- goal.y = 31
- goal.name = 'g'
步驟二十五: 墻體
我們要在游戲界面中設(shè)置墻體，這樣才能保證小球始終在預(yù)定的游戲場地內(nèi)活動。
- -- 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)
步驟二十六: 障礙物
這些條形障礙物是提升游戲樂趣的關(guān)鍵所在，利用以下代碼在游戲中實現(xiàn)此類設(shè)置。
- -- 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)
步驟二十七: 陷阱
這些充當(dāng)陷阱的洞是我們?yōu)樾∏蛟O(shè)計的“敵人”，一旦小球觸碰到它們，游戲即宣告結(jié)束。
- -- 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'
步驟二十八: 小球（玩家）
接下來我們要在游戲中添加主角——小球。在設(shè)備陀螺儀的幫助下，小球會隨著玩家的操作而自然滾動。
- -- Player
- player = display.newImage('player.png')
- player.x = 49
- player.y = 288
- player:setReferencePoint(display.CenterReferencePoint)
次回預(yù)告
在本系列指南教程的***部分，我們共同探討了如何為游戲設(shè)計用戶界面及基本設(shè)置。希望大家繼續(xù)關(guān)注第二部分，屆時我們將一道學(xué)習(xí)如何處理應(yīng)用程序的邏輯、按鈕、操作等細(xì)節(jié)。咱們下期再見！
原文鏈接：
