跨平臺(tái)工具Corona SDK指南：如何創(chuàng)建指南針應(yīng)用
譯文
教程說明：
- 使用工具: Corona SDK
- 執(zhí)行難度: 普通
- 操作時(shí)間: 一小時(shí)
步驟一: 應(yīng)用程序概述
利用準(zhǔn)備好的圖片素材，我們將以Lua及Corona SDK API為基礎(chǔ)編寫屬于自己的指南針應(yīng)用程序。
基本上，完成品與蘋果公司在iOS系統(tǒng)中自帶的官方指南針應(yīng)用大同小異。
步驟二: 目標(biāo)開發(fā)平臺(tái)
首先，我們要選擇應(yīng)用程序作品所依托的運(yùn)行平臺(tái)，確定了這一點(diǎn)后我們才能選擇與設(shè)備相匹配的圖像顯示尺寸。
iOS系統(tǒng)平臺(tái)具體參數(shù)如下：
-
iPad: 1024x768分辨率, 132ppi
-
iPhone/iPodTouch: 320x480分辨率, 163 ppi
-
iPhone4: 960x640分辨率, 326 ppi
由于Android平臺(tái)的開放特性，我們需要面對(duì)各種各樣不同參數(shù)的設(shè)備及分辨率。這里我們選擇幾款人氣產(chǎn)品作為主要參考對(duì)象：
-
谷歌 NexusOne: 480x800分辨率, 254 ppi
-
摩托羅拉 DroidX: 854x480分辨率, 228 ppi
-
HTC Evo: 480x800分辨率, 217 ppi
在這篇指南文章中，我們主要以iOS平臺(tái)——尤其是iPhone/iPod為基準(zhǔn)進(jìn)行圖像設(shè)計(jì)工作。不過下文中所使用的代碼理論上也同樣適用于Android系統(tǒng)上的Corona SDK開發(fā)。
步驟三: 用戶界面
一款簡(jiǎn)潔而友好的用戶界面會(huì)幫助我們的應(yīng)用作品順利打開市場(chǎng)，而在指南針應(yīng)用中，用戶界面的構(gòu)成元素主要有背景圖案及指針圖形。
本指南中所涉及的一切界面圖形資源都匯總在壓縮包內(nèi)，大家可以點(diǎn)擊以下鏈接獲取并使用。
下載鏈接：https://mobiletuts.s3.amazonaws.com/Corona-SDK_Compass/source.zip
步驟四: 導(dǎo)出圖像
根據(jù)大家所選擇的設(shè)備平臺(tái)，我們需要將圖像資源以合適的PPI及尺寸進(jìn)行導(dǎo)出。這項(xiàng)工作非常簡(jiǎn)單，任何一款主流圖像編輯工具都能實(shí)現(xiàn)，大家根據(jù)自己的習(xí)慣處理即可。我個(gè)人使用AdjustSize，這是一款Mac OS X系統(tǒng)自帶的圖像預(yù)覽應(yīng)用。導(dǎo)出完成后，請(qǐng)記得給文件起一個(gè)清晰準(zhǔn)確的名稱，并保存在項(xiàng)目文件夾當(dāng)中。
步驟五: 應(yīng)用程序配置
首先創(chuàng)建一個(gè)外部文件config.lua，它的作用是保證應(yīng)用程序在設(shè)備上以全屏方式運(yùn)行。這個(gè)文件中會(huì)明確出現(xiàn)應(yīng)用程序的原始分辨率，并提供一套縮放方案，保證應(yīng)用能夠在各種不同設(shè)備的獨(dú)特分辨率下正確顯示。
- application =
- {
- content =
- {
- width = 320,
- height = 480,
- scale = "letterbox"
- },
- }
步驟六: Main.lua
好，準(zhǔn)備工作就緒，現(xiàn)在我們開始編寫應(yīng)用！
打開大家最喜愛的Lua編輯器（任何一款文本編輯工具都能勝任，不過并不是每種都支持Lua語法高亮顯示功能），準(zhǔn)備著手編寫滿載自己汗水的應(yīng)用吧！請(qǐng)記住，一定把文件保存在項(xiàng)目文件夾中，并命名為Main.lua。
步驟七: 代碼結(jié)構(gòu)
我們要將代碼以類的形式進(jìn)行結(jié)構(gòu)整理。如果大家熟悉ActionScript或者Java，肯定會(huì)發(fā)現(xiàn)我所推薦的這套結(jié)構(gòu)基本上符合二者的構(gòu)造特點(diǎn)。
- 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)欄在任何一款移動(dòng)系統(tǒng)平臺(tái)上都會(huì)出現(xiàn)，一般位于屏幕上方，主要顯示時(shí)間、信號(hào)強(qiáng)度等提示信息。
步驟九: 背景圖案
既然是練手用的小作品，我們就姑且使用上面這幅圖片作為背景圖案。以下幾行代碼用于將圖片引入應(yīng)用程序。
- -- Graphics
- -- [Background]
- local bg = display.newImage('bg.png')
步驟十: 指針
指針的作用是指明當(dāng)前方位，用戶配合背景圖案即可輕松了解需要的方向。
- -- [Pointer]
- local pointer = display.newImage('pointer.png')
步驟十一: 指向文本信息
以下變量的作用在于顯示當(dāng)前指向的具體方位及角度。
- -- Heading Text
- local heading = display.newText('0', display.contentCenterX, 60, native.systemFont, 21)
步驟十二: 函數(shù)聲明
應(yīng)用啟動(dòng)之初，向用戶聲明local函數(shù)的基本狀態(tài)。
- -- Functions
- local Main = {}
- local update = {}
步驟十三: 構(gòu)造函數(shù)
接下來，我們需要?jiǎng)?chuàng)建一套運(yùn)行邏輯初始化機(jī)制，具體函數(shù)設(shè)定如下：
- function Main()
- pointer:setReferencePoint(display.CenterReferencePoint)
- pointer.x = display.contentCenterX
- pointer.y = display.contentCenterY
- heading:setTextColor(255)
- heading:setReferencePoint(display.CenterReferencePoint)
- Runtime:addEventListener('heading', update)
- end
步驟十四: 指針旋轉(zhuǎn)
我們利用指向事件（heading）反饋得出的地球磁場(chǎng)結(jié)果來驅(qū)動(dòng)指針旋轉(zhuǎn)。
- function update(e)
- -- Pointer Rotation
- pointer.rotation = math.floor(e.magnetic)
步驟十五: 指向文本&方位
下列代碼用于檢測(cè)當(dāng)前指針的旋轉(zhuǎn)狀態(tài)，這有助于使用者借助指南針應(yīng)用讀取當(dāng)前方位。
- -- Heading Text & Direction
- if(pointer.rotation >= 0 and pointer.rotation < 23) then
- heading.text = math.floor(e.magnetic) .. ' N'
- heading:setReferencePoint(display.CenterReferencePoint)
- heading.x = display.contentCenterX
- elseif(pointer.rotation >= 23 and pointer.rotation < 68) then
- heading.text = math.floor(e.magnetic) .. ' NE'
- heading:setReferencePoint(display.CenterReferencePoint)
- heading.x = display.contentCenterX
- elseif(pointer.rotation >= 68 and pointer.rotation < 113) then
- heading.text = math.floor(e.magnetic) .. ' E'
- heading:setReferencePoint(display.CenterReferencePoint)
- heading.x = display.contentCenterX
- elseif(pointer.rotation >= 113 and pointer.rotation < 158) then
- heading.text = math.floor(e.magnetic) .. ' SE'
- heading:setReferencePoint(display.CenterReferencePoint)
- heading.x = display.contentCenterX
- elseif(pointer.rotation >= 158 and pointer.rotation < 203) then
- heading.text = math.floor(e.magnetic) .. ' S'
- heading:setReferencePoint(display.CenterReferencePoint)
- heading.x = display.contentCenterX
- elseif(pointer.rotation >= 203 and pointer.rotation < 248) then
- heading.text = math.floor(e.magnetic) .. ' SW'
- heading:setReferencePoint(display.CenterReferencePoint)
- heading.x = display.contentCenterX
- elseif(pointer.rotation >= 248 and pointer.rotation < 293) then
- heading.text = math.floor(e.magnetic) .. ' W'
- heading:setReferencePoint(display.CenterReferencePoint)
- heading.x = display.contentCenterX
- elseif(pointer.rotation >= 293 and pointer.rotation < 360) then
- heading.text = math.floor(e.magnetic) .. ' NW'
- heading:setReferencePoint(display.CenterReferencePoint)
- heading.x = display.contentCenterX
- end
- end
步驟十六: 調(diào)用Main函數(shù)
為了在應(yīng)用啟動(dòng)時(shí)進(jìn)行初始化，我們需要調(diào)用Main函數(shù)。上述代碼編寫完成之后，我們只需編輯以下內(nèi)容即可實(shí)現(xiàn)初始化需求：
- Main()
步驟十七: 載入界面
當(dāng)我們啟動(dòng)指南針應(yīng)用時(shí)，iOS系統(tǒng)會(huì)逐項(xiàng)載入基本數(shù)據(jù)，這時(shí)Default.png文件將作為背景圖案顯示在主屏幕當(dāng)中。將這張圖片保存到我們的項(xiàng)目資源文件夾中，這樣它就會(huì)被自動(dòng)添加到Corona的編譯器中。
步驟十八: 圖標(biāo)
現(xiàn)在大家的做圖功力就該派上用場(chǎng)了，快為自己的應(yīng)用打造一款美觀又令人印象深刻的圖標(biāo)吧。在非視網(wǎng)膜屏的iPhone設(shè)備上，圖標(biāo)文件的尺寸應(yīng)為57x57像素，而視網(wǎng)膜屏則需要114x114像素，另外我們還需要為iTunes軟件商店打造一個(gè)512x512的大版圖形。我建議大家先以512x512像素為基準(zhǔn)設(shè)計(jì)，然后再縮小成其它兩種尺寸。
大家沒必要在圖標(biāo)制作方面過分投入精力，制作圓角或者添加半透明特效完全是種花蛇添足——因?yàn)閕Tunes與iPhone會(huì)自動(dòng)為你實(shí)現(xiàn)這些效果。
步驟十九: 在模擬環(huán)境下進(jìn)行測(cè)試
是時(shí)候進(jìn)行最終測(cè)試了。打開Corona模擬器，選擇我們的項(xiàng)目文件夾并點(diǎn)擊“打開”。如果一切都依照預(yù)期效果順利運(yùn)行，那么我們就可以著手做***一項(xiàng)工作了。
步驟二十: 創(chuàng)建
在Corona模擬器中，點(diǎn)選文件選項(xiàng)下的創(chuàng)建項(xiàng)并選擇目標(biāo)設(shè)備平臺(tái)。在對(duì)話框中輸入項(xiàng)目數(shù)據(jù)并點(diǎn)擊創(chuàng)建按鈕。等上幾秒，我們的應(yīng)用作品就大功告成啦！接下來大家可以在設(shè)備上進(jìn)行實(shí)機(jī)測(cè)試，或者直接將應(yīng)用發(fā)布到軟件商店中。
總結(jié)
后期測(cè)試總是越多越好，當(dāng)我們對(duì)自己的應(yīng)用作品詳加打磨后，發(fā)行用戶版吧——這也許會(huì)成為輝煌成功的***步！
希望這篇指南文章能夠幫助大家在移動(dòng)開發(fā)的道路上越走越好，感謝朋友們的支持！
原文鏈接： http://mobile.tutsplus.com/tutorials/corona/corona-sdk-create-a-compass-application/
