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