Icon  
教程說明:

使用工具: Corona SDK
執行難度: 普通
操作時間: 30分鐘到60分鐘
步驟一: 應用程式概述

1  

在Lua與Corona SDK API的説明下,我們將利用預先準備好的圖圖元材製作出一款有趣的小遊戲。

玩家需要利用設備自身配備的陀螺儀操控小球避開障礙物,並最終到達目的地。大家可以通過修改遊戲參數對內容進行自訂。

步驟二: 目標開發平臺
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開發。

步驟三: 使用者介面
3  

一款簡潔而友好的使用者介面會説明我們的應用作品順利打開市場,而在指南針應用中,使用者介面的構成元素主要有背景圖樣及指標圖形。

本指南中所涉及的一切介面圖形資源都匯總在壓縮包內,大家可以點擊以下連結獲取並使用。


步驟四: 匯出圖像
4  

根據大家所選擇的設備平臺,我們需要將圖像資源以合適的PPI及尺寸進行匯出。這項工作非常簡單,任何一款主流圖像編輯工具都能實現,大家根據自己 的習慣處理即可。我個人使用AdjustSize,這是一款Mac OS X系統自帶的圖像預覽應用。匯出完成後,請記得給檔起一個清晰準確的名稱,並保存在專案資料夾當中。

步驟五: 聲音
5  

為了給玩家帶來更愉悅的遊戲體驗,我們需要為事件設定各種音效。在本實例中涉及到的各種音效資源都能夠在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)
 
步驟十一: 遊戲背景圖樣
6  

既然是練手用的小作品,我們就姑且使用上面這幅圖片作為背景圖樣。以下幾行代碼用於將圖片引入應用程式。

-- Graphics
--[Background]
local bg = display.newImage('bg.png')
 
步驟十二: 標題視圖
7  

上圖所示即為標題視圖,它是我們進入遊戲後所面對的第一個互動介面,按照下列變數將內容設定並保存。

-- [Title View]
local titleBg local playBtn local creditsBtn local titleView
 
步驟十三: 製作人員視圖
8  

上圖所示為開發者姓名及遊戲版權歸屬資訊,利用以下變數對其加以保存。

-- [CreditsView]
local creditsView
 
步驟十四: 遊戲視圖
9  

遊戲視圖所涉及的要素較多,包括玩家、障礙物及目的地。利用下面列出的代碼完成遊戲介面的基本創建。

-- [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) 次回預告
在本系列指南教程的第一部分,我們共同探討了如何為遊戲設計使用者介面及基本設置。希望大家繼續關注第二部分,屆時我們將一道學習如何處理應用程式的邏輯、按鈕、操作等細節。咱們下期再見!

原文連結:

HTTP://mobile.tutsplus.com/tutorials/corona/corona-sdk-create-a-teeter-like-game-setup-interface-creation/
創作者介紹
創作者 shadow 的頭像
shadow

資訊園

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