第一話 圖文顯示

第一話 圖文顯示

在首話中將要介紹給大家的是開發遊戲的基礎,圖片以及文字的呈現。相信在這次的探險結束之後,各位同學將會發現程式開發竟然這麼的簡單。^^

先說明一下本話的成果展現。

一開始會出現遊戲Logo,三秒鐘之後會切換到遊戲的主介面,上面包括了背景.遊戲按鈕以及數值文字等等。這就是本話要做到的程度。

在開始說明這一話所使用到的Corona SDK工具前,大家應該對我們即將要使用的Lua語言感到陌生,因此先為大家做一個簡單的說明,以下為Lua的基礎特性。
 

  • 每行程式結尾不需加分號
  • 沒有型態
  • 可串接其他程式語言

首先,學習過其他程式語言的同學應該會有印象,一般每一行的程式寫完會加一個分號來表示這一行程式到這裡結束,如下例。但是lua語法是不需要加這個分號的,不過如果同學不習慣的話,加上分號也是可以執行的。


var x = 3;  --javascript語法
local x = 3  --lua語法

其次,跟C.Java等嚴謹程式語言不同,在lua裏頭的變數都是沒有型態之分,也就是說,該變數可以指向任何像是數值或者是字串的內容。以生活中的大禮包商品來比喻的話,學校常教的C或者是Java等程式語言就像是禮包上頭會告訴你裡面是實體商品又或是虛寶,等你打開後得到的東西一定是相符的。而lua所對應的大禮包則是上頭沒告訴你裡頭是什麼東西,等你打開就知道了。這樣的好處是,不但好寫而且更加彈性。

最後,lua語言的角色定位為腳本語言,就像是遙控器一樣,用來遙控呼叫其他更加強大的語言,像是C語言。大家在學校都會學習C語言,知道這個語言很強大能夠搞定所有底層的複雜功能,只有你想不到沒有做不到。問題是它不但難寫,更加難學,如果整個開發過程全部都使用C來寫估計要寫到猴年馬月去。因此像是魔獸世界這種龐大架構的網路遊戲就會將腳本工作改由lua來寫,以簡化開發工作。

哪些是腳本工作?

只要是該功能目的是指揮或呼叫其他功能,通通都可以看作是腳本的範疇。像WOW裏頭的所有副本都是透過Lua來開發的唷,還有插件拉.外掛啦這些其實都是腳本,所以很適合利用lua來進行開發,這下你知道lua語言多牛B了吧。

說完lua語言的基礎特性,在開始開發之前需要準備好大家的開發環境,詳請請參考此影片

假如你的開發環境已經就緒的話,就可以開始第一話的破解教程囉....

這一話所有的程式碼都會寫在main.lua檔裡頭,所以就請同學創建一個新的Corona Project,並且用 Sublime Text3又或者是其他編輯工具來開啟main.lua檔案。

先說說這一話的完成品,如下圖所示。

 第一步,為了讓開發的程式碼來夠兼容所有的手機裝置,包含iOS.Android等等。我們需要取得執行環境的螢幕解析度,並在日後顯示圖片時利用這些數值來計算位置,參考以下程式碼。


_SCREEN = {
	HEIGHT = display.contentHeight,   --執行裝置螢幕的高度
	WIDTH = display.contentWidth      --執行裝置螢幕的寬度
}

_SCREEN.CENTER = {
	X = display.contentCenterX,       --執行裝置螢幕的中心點X軸
	Y = display.contentCenterY        --執行裝置螢幕的中心點Y軸
}

在上面的程式碼使用到lua的Table,這是lua語言最重要的資料結構,用來儲存程式所需要的資料。目前同學只要先掌握下表的使用重點:
 

  • 取得螢幕總高度 _SCREEN.HEIGHT
  • 取得螢幕總寬度 _SCREEN.WIDTH
  • 取得螢幕中心點X軸 _SCREEN.CENTER.X
  • 取得螢幕中心點Y軸 _SCREEN.CENTER.Y


另外,在Corona SDK的螢幕座標軸系統,X軸向右為正,Y軸向下為正,所以原點是在螢幕的左上角。Y軸的部分與同學們在數學課所學的相反,要注意一下,可參考下圖。

第二步,來把手機上方的狀態列隱藏起來,程式碼為下,如果去掉這一行預設就是顯示狀態列。可以使用lua的註解語法來讓這一行不執行。

display.setStatusBar( display.HiddenStatusBar )

PS:所謂的註解就是讓電腦在讀到該行時不加以執行

 

第三步,我們希望在螢幕上顯示自家工作室的Logo,程式碼為下:
 


   local logo = display.newImageRect( "logo.png", _SCREEN.WIDTH/1.5, _SCREEN.HEIGHT/3 )
   logo.x = _SCREEN.CENTER.X
   logo.y = _SCREEN.CENTER.Y

display是Corona用來顯示元件非常重要的一個隱含物件,透過點語法來呼叫newImageRect這個函式,display物件裡頭擁有非常多的newXXX函式。

這行程式碼指定顯示project根目錄裡頭,檔名為logo.png的圖檔,顯示時將其寬度設定為螢幕寬度除以1.5,其高度設定為螢幕高度除以3。生成後將該圖片賦值給logo變數加以儲存,接下來就利用logo變數來設定圖片的中心點座標X軸與Y軸分別為螢幕的中心點。

PS:在lua裡頭,雙引號”"以及單引號'’都是表示為字串,也就是文字的意思。
PS:在變數名稱前面加上local這個字,表示這個變數為區域變數,只存在這個檔案裡頭
PS:在程式碼的世界裡,=並不是讀做數學所說的等於,而是賦值。數學所說的等於,一般在程式中是用於比較是否相等,寫作==。

第四步,三秒之後我們要把Logo給拿掉,程式碼為下:


   logo:removeSelf( )
   logo = nil

    第一行將變數logo所指向的圖片給刪除,下一行將nil賦值給logo,也就是把該記憶體段給清掉的意思。

    timer.performWithDelay(3000,….) 這個函式用於延時三秒,詳細用法於後話解說,現在只要知道用於定時即可。


 

第五步,顯示主頁面的介面,具體作法與第三步類似,請參考原始碼。


第六步,顯示主頁面的數值文字,只要是會隨遊戲改變的文字或數值,都應該使用這樣的做法而非圖片。


   local lb_id = display.newText( "哥布林程式學苑", 200, 70 , system.nativeFont, 21 )
   lb_id.anchorX = 1
   lb_id:setFillColor( 0,0,255/255 )

第一行顯示”哥布林程式學苑"這段文字並賦值給區域變數lb_id,第二行設定錨點anchor的X座標為1,也就是在最右端,第三行設定文字的顯示顏色為藍色。

PS:anchorX與anchorY是用來設定錨點的XY軸位置,大小範圍從0~1,是用來擺放元件用的定位點。

PS:Corona的顏色設定為RGBA四個數值,各數值大小範圍從0~1,如果為不透明A可以不提供。

第七步,等級部分來做點美化,做個戴光暈的文字效果,文字改用粗體字型。


 local lb_lv = display.newEmbossedText( "2", 35, 128, system.nativeBoldFont, 38 )
 lb_lv:setFillColor( 1,0,0 )

 local color =
 {
    highlight = { r=1, g=1, b=1 },
    shadow = { r=0.3, g=0.3, b=0.3 }
 }
 lb_lv:setEmbossColor( color )

程式第一行顯示文字為2,座標為(35,128),使用系統粗體字型,大小為38的光暈文字。第二行設定文字充填顏色為紅色。第三行利用Table結構宣告高量與光暈顏色,最後一行完成光暈顏色設定。

怎麼樣勒?是否作出了你想要的遊戲介面呢,其實只要透過這一話所教的一些技巧,搭配美麗的介面素材,做成像神魔之塔那樣漂亮的UI介面也是小菜一碟。自己也試著做看看心目中的遊戲UI介面吧~~~

最後附上本話的完整源代碼與結構說明:


--取得裝置的寬高解析度
_SCREEN = {
	HEIGHT = display.contentHeight,   --執行裝置螢幕的高度
	WIDTH = display.contentWidth      --執行裝置螢幕的寬度
}

--取得裝置的中心點
_SCREEN.CENTER = {
	X = display.contentCenterX,       --執行裝置螢幕的中心點X軸
	Y = display.contentCenterY        --執行裝置螢幕的中心點Y軸
}

--隱藏手機上方的狀態列
display.setStatusBar( display.HiddenStatusBar )

--單行註解

--[[ 多行註解
註解行1
註解行2
]]

--在畫面上顯示一張圖片
local logo = display.newImageRect( "logo.png", _SCREEN.WIDTH/1.5, _SCREEN.HEIGHT/3 )
logo.x = _SCREEN.CENTER.X
logo.y = _SCREEN.CENTER.Y

timer.performWithDelay(3000, function ( )
	--移除logo圖片
	logo:removeSelf( )
	logo = nil

	local bg = display.newImageRect( "bg.png", _SCREEN.WIDTH, _SCREEN.HEIGHT )
	bg.x = _SCREEN.CENTER.X
	bg.y = _SCREEN.CENTER.Y

	local btn_bag = display.newImageRect( "btn_bag.png", 100, 100 )
	btn_bag.x = _SCREEN.CENTER.X - 230
	btn_bag.y = _SCREEN.HEIGHT - 130

	local btn_team = display.newImageRect( "btn_team.png", 100, 100 )
	btn_team.x = _SCREEN.CENTER.X - 115
	btn_team.y = _SCREEN.HEIGHT - 130

	local btn_store = display.newImageRect( "btn_store.png", 100, 100 )
	btn_store.x = _SCREEN.CENTER.X + 145
	btn_store.y = _SCREEN.HEIGHT - 130

	local btn_social = display.newImageRect( "btn_social.png", 100, 100 )
	btn_social.x = _SCREEN.CENTER.X + 260
	btn_social.y = _SCREEN.HEIGHT - 130

	--在畫面上顯示文字
	local lb_id = display.newText( "哥布林程式學苑", 200, 70 , system.nativeFont, 21 )
	lb_id.anchorX = 1
	lb_id:setFillColor( 0,0,255/255 )

	--在畫面上顯示帶光暈文字
	local lb_lv = display.newEmbossedText( "2", 35, 128, system.nativeBoldFont, 38 )
	lb_lv:setFillColor( 1,0,0 )

	local color = 
	{
	    highlight = { r=1, g=1, b=1 },
	    shadow = { r=0.3, g=0.3, b=0.3 }
	}
	lb_lv:setEmbossColor( color )

	local lb_exp = display.newText( "10%", 200, 128, system.nativeFont, 21 )
	lb_exp.anchorX = 1
	lb_exp:setFillColor( 0,0,255/255 )

	local lb_money = display.newText( "9900", 430, 70, system.nativeFont, 21 )
	lb_money.anchorX = 0
	lb_money:setFillColor( 0,0,255/255 )

	local lb_stone = display.newText( "1000", 430, 128, system.nativeFont, 21 )
	lb_stone.anchorX = 0
	lb_stone:setFillColor( 0,0,255/255 )

	local lb_stone = display.newText( "30/30", _SCREEN.CENTER.X + 15, 800, system.nativeFont, 40 )

end )

源代碼結構說明:

  • 1~11行 取得裝置螢幕數據
  • 14行 隱藏狀態列
  • 24~26行 顯示Logo
  • 28~83行 三秒後隱藏Logo並出現主介面
分享這篇文章:

發佈自 林品爵

林品爵
一個堅信程式教育能夠改變下一代未來的狂熱者,青少年揚帆計畫的推動者。十年以上全端程式開發,上百場程式教學經驗,累積學生數達百人以上。 成大學士畢業,使用過J2EE.PHP.MySQL.CoronaSDK.Android.Objective-C.Swift.Python等技術知識,歷任友訊科技總部Java工程師首席.黑快馬股份有限公司研發經理.諾亞數碼娛樂執行長等職位,現任哥布林程式教育學苑創辦人,所開發過專案涵括產品管理系統.POS系統.拍賣平台.擴增實境.問券.社區App等等。 程式啟蒙班講師 . Laravel網頁程式班講師 . App程式班講師

關聯文章:

留下留言