preview  
教程說明:
使用工具: Corona SDK
執行難度: 普通
操作時間: 一小時
步驟一: 應用程式概述
1  

利用準備好的圖片素材,我們將以Lua及Corona SDK API為基礎編寫屬於自己的指南針應用程式。
基本上,完成品與蘋果公司在iOS系統中自帶的官方指南針應用大同小異。
步驟二: 目標開發平臺
2  

首先,我們要選擇應用程式作品所依託的運行平臺,確定了這一點後我們才能選擇與設備相匹配的圖像顯示尺寸。
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開發。
步驟三: 使用者介面


一款簡潔而友好的使用者介面會説明我們的應用作品順利打開市場,而在指南針應用中,使用者介面的構成元素主要有背景圖樣及指標圖形。
本指南中所涉及的一切介面圖形資源都匯總在壓縮包內,大家可以點擊以下連結獲取並使用。
 
步驟四: 匯出圖像
4  

根據大家所選擇的設備平臺,我們需要將圖像資源以合適的PPI及尺寸進行匯出。這項工作非常簡單,任何一款主流圖像編輯工具都能實現,大家根據自己的習慣處理即可。我個人使用AdjustSize,這是一款Mac OS X系統自帶的圖像預覽應用。匯出完成後,請記得給檔起一個清晰準確的名稱,並保存在專案資料夾當中。
步驟五: 應用程式佈建
首先創建一個外部檔config.lua,它的作用是保證應用程式在設備上以全屏方式運行。這個檔中會明確出現應用程式的原始解析度,並提供一套縮放方案,保證應用能夠在各種不同設備的獨特解析度下正確顯示。
application = { content = { width = 320, height = 480, scale = "letterbox" }, } 步驟六: Main.lua
好,準備工作就緒,現在我們開始編寫應用!
打開大家最喜愛的Lua編輯器(任何一款文本編輯工具都能勝任,不過並不是每種都支援Lua語法高亮顯示功能),準備著手編寫滿載自己汗水的應用吧!請記住,一定把檔保存在專案資料夾中,並命名為Main.lua。
 
步驟七: 代碼結構
 
我們要將代碼以類的形式進行結構整理。如果大家熟悉ActionScript或者JAVA,肯定會發現我所推薦的這套結構基本上符合二者的構造特點。
 
display.setStatusBar(display.HiddenStatusBar) 這條代碼的作用是隱藏狀態列。狀態列在任何一款移動系統平臺上都會出現,一般位於螢幕上方,主要顯示時間、信號強度等提示資訊。
 
步驟九: 背景圖樣

5  
既然是練手用的小作品,我們就姑且使用上面這幅圖片作為背景圖樣。以下幾行代碼用於將圖片引入應用程式。
-- Graphics -- [Background] local bg = display.newImage('bg.png')
 
步驟十: 指標
6  

指標的作用是指明當前方位,使用者配合背景圖樣即可輕鬆瞭解需要的方向。
-- [Pointer] local pointer = display.newImage('pointer.png')
 
步驟十一: 指向文本資訊
以下變數的作用在於顯示當前指向的具體方位及角度。
-- Heading Text local heading = display.newText('0', display.contentCenterX, 60, native.systemFont, 21)
 
步驟十二: 函式宣告
應用啟動之初,向使用者聲明local函數的基本狀態。
-- Functions local Main = {} local update = {}
 
步驟十三: 建構函式
接下來,我們需要創建一套運行邏輯初始化機制,具體函數設定如下:
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)
步驟十五: 指向文本&方位
下列代碼用於檢測當前指標的旋轉狀態,這有助於消費者借助指南針應用讀取當前方位。

-- 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函數
    為了在應用啟動時進行初始化,我們需要調用Main函數。上述代碼編寫完成之後,我們只需編輯以下內容即可實現初始化需求:

     

    Main() 步驟十七: 載入介面

    5  

    當我們啟動指南針應用時,iOS系統會逐項載入基本資料,這時Default.png檔將作為背景圖樣顯示在主畫面當中。將這張圖片保存到我們的專案資源資料夾中,這樣它就會被自動添加到Corona的編譯器中。

     

    步驟十八: 圖示

    7  

    現在大家的做圖功力就該派上用場了,快為自己的應用打造一款美觀又令人印象深刻的圖示吧。在非視網膜屏的iPhone設備上,圖示檔的尺寸應為57x57圖元,而視網膜屏則需要114x114圖元,另外我們還需要為iTunes軟體商店打造一個512x512的大版圖形。我建議大家先以512x512圖元為基準設計,然後再縮小成其它兩種尺寸。

     

    大家沒必要在圖示製作方面過分投入精力,製作圓角或者添加半透明特效完全是種花蛇添足——因為iTunes與iPhone會自動為你實現這些效果。

     

    步驟十九: 在類比環境下進行測試

    8  

    是時候進行最終測試了。打開Corona模擬器,選擇我們的專案資料夾並點擊「打開」。如果一切都依照預期效果順利運行,那麼我們就可以著手做最後一項工作了。

     

    步驟二十: 創建


    9  

    在Corona模擬器中,點選檔選項下的創建項並選擇目標設備平臺。在對話方塊中輸入專案資料並點擊創建按鈕。等上幾秒,我們的應用作品就大功告成啦!接下來大家可以在設備上進行實機測試,或者直接將應用發佈到軟體商店中。

     

    總結
    後期測試總是越多越好,當我們對自己的應用作品詳加打磨後,發行使用者版吧——這也許會成為輝煌成功的第一步!

     

    希望這篇指南文章能夠説明大家在移動開發的道路上越走越好,感謝朋友們的支援!

     

    原文連結: HTTP://mobile.tutsplus.com/tutorials/corona/corona-sdk-create-a-compass-application/
    創作者介紹
    創作者 shadow 的頭像
    shadow

    資訊園

    shadow 發表在 痞客邦 留言(0) 人氣()