用LuaSTG制作自己的單關(guān)1:制作簡(jiǎn)單的UI
各位,好久不見(
有沒有想我呢(湊不要臉)
昨天也說(shuō)了,要做教程,那么廢話不多說(shuō),直接開始吧
注意:我這里lsTG用的是ex+ 0.82b版本,你可能會(huì)看見一些不認(rèn)識(shí)的節(jié)點(diǎn),出現(xiàn)的時(shí)候我會(huì)解釋一下
接下來(lái)的內(nèi)容可能需要一點(diǎn)lua基礎(chǔ),如果不會(huì)的話...還不滾去學(xué)(?)?
這是原有的UI,然后呢,我們可以給他加上一些東西.
定義一個(gè)obj,組改為GROUP_GHOST,layer改成LAYER_TOP
然后再把這個(gè)obj的render的回調(diào)函數(shù)的default?action給刪掉
再然后就可以開始我們的制作了.
現(xiàn)在,假如我想要顯示殘機(jī)數(shù)量,那我該怎么做呢?
介紹一個(gè)變量叫l(wèi)sTG.var.lifeleft
這個(gè)變量代表著殘機(jī)的數(shù)量(可以試試手動(dòng)修改他)
類似的,還有(以下省略lsTG.var)
chip(殘機(jī)碎片)
bomb(雷)
bombchip(雷碎片)
pointrate(最大得點(diǎn))
power(靈力)
graze(擦彈)
Score(得分)
hiScore(最高分)
這些變量都是數(shù)值,用普通的image來(lái)表示是無(wú)法想象的,那么有什么好方法嗎?
這里又要介紹幾個(gè)函數(shù):
LoadFont(fontname,filename)
從資源文件中加載位圖字體。filename為fnt格式，可由工具Font Editor生成，生成的fnt文件和png文件要在同一目錄下。
LoadTTF(ttfname,filename,facename,size,weight,...)
從資源文件中加載字體，支持fon/fnt/ttf/ttc/fot/otf/mmm/pfb/pfm格式。facename是字體的名稱；size為字體的高度，單位是像素；weight是字體的粗細(xì)，400為普通粗細(xì)，700為粗體；可選參數(shù)是字體的變形，可以取以下一個(gè)或多個(gè)字符串：RenderText(fontname,text,x,y,size,...)
繪制文字。可選參數(shù)表示文字排列和對(duì)齊的模式，可以取以下一個(gè)或多個(gè)字符串（每行限1個(gè)）：
'left' 'center' 'right'
'top' 'vcenter' 'bottom'
或者：
'centerpoint' 等效于同時(shí)取'center'和'vcenter'RenderTTF(ttfname,text,left,right,bottom,top,color,...)
在一個(gè)矩形區(qū)域中繪制文字?？蛇x參數(shù)表示文字排列和對(duì)齊的模式，可以取以下一個(gè)或多個(gè)字符串（每行限1個(gè)）：
'left' 'center' 'right'
'top' 'vcenter' 'bottom'
'wordbreak' 'singleline' 'expantextabs 'noclip' 'calcrect' 'rtlreading'
或者：
'paragraph'等效于同時(shí)取'left'、'top'和'wordbreak'
'centerpoint' 等效于同時(shí)取'center'、'vcenter'和'noclip'
那個(gè)這個(gè)Font和TTF有什么區(qū)別呢?
簡(jiǎn)單的說(shuō),一般Font只能用ASCII碼的字符,而TTF可以用更多的字符
但是Font字符的自由度(?)更高
LuaSTG自帶了幾個(gè)字體(在Library\font里),也已經(jīng)幫我們加載好了,我們可以直接使用
可以替換這里面的字體,不過(guò)名字要和原來(lái)的一模一樣
這里用的是Font
RenderText(fontname,text,x,y,size,...)
最上面的是加載原有的字體
然后現(xiàn)在給它起名了叫'my_Score'(fontname)
text是文字的內(nèi)容
x,y是文字的坐標(biāo)(具體位置因后面的附加參數(shù)而異)
size是字體大小
textlist里的就是所謂附加參數(shù),效果如上面gif圖(
那個(gè)LeaF葉子是RenderText下面一行的Render實(shí)現(xiàn)的,用來(lái)標(biāo)記坐標(biāo)(self.x,self.y)
知道了RenderText的用法之后,就可以上手了(?)
這樣就簡(jiǎn)單的做出了一個(gè)小UI了
這時(shí)你可能會(huì)有疑問
那么有沒有什么辦法解決這個(gè)問題呢?
這里呢,再再介紹幾個(gè)函數(shù):
SetFontState(fontname,blendmode)
SetFontState(fontname,blendmode,color)
設(shè)置字體的混合模式和顏色。若省略color，則維持原顏色。
?
SetFontState2(proportion,rotation,spacing,tracking)
設(shè)置字體的幾何參數(shù)。每個(gè)參數(shù)均可以為nil，這樣將被視為默認(rèn)值。
SetFontState和SetImageState是很相似的,可以類比一下.
上面這一坨是為了簡(jiǎn)單易懂點(diǎn),其實(shí)可以壓縮成這個(gè)樣子:
效果是一樣的
然后呢,如果是想要渲染那種條狀的,該怎么做呢?
用到了RenderTexture
希望能看懂(
'white'是一個(gè)全白的image
然后是,下面的是可以做的比較好看的條的做法(?)
RenderTexture和RenderRect具體的用法可以看看我之前寫的那篇教程:
好了,卜想寫了(
最后祝你,提前? ? 再見
oh對(duì)了,你可以在code里加個(gè)這個(gè),這樣原有的UI就會(huì)消失(也許僅限ex+版本以上)
function lsTG.lsTG_ui:drawScore()
? ? self:ScoreUpdate()
end
