LV. 20
GP 487

【攻略】CSO lua零基礎小教室(五) UI圖型與文字顯示

樓主 misk yrgna1234
GP14 BP-
大家好 我是misk
上次介紹了官方的API網站
並且解釋了網站中的一些關鍵字
這次我們從UI開始介紹
讓您知道如何在螢幕上顯示你想要的字或圖型
(請先打開官方的API網站:https://tw.beanfun.com/cso/STUDIO/api/index.html

如果沒看過上一章的,請前往:

函式
在上一章有說明過,只要是關於介面的部份通常都是寫在UI中,而字體和圖型的顯示有這兩個。
************************************
UI.Box可以在螢幕中顯示圖型
UI.Text可以在螢幕中顯示文字
************************************
現在我們一一說明。

UI.Box
我們先從圖型開始,首先,請點進去UI.Box,照理來說你會看到這個畫面。
當我們要建立一個圖型時,我們需要這樣做。
(請記住是UI.Box.Create()而不是UI.Box:Create(),官方似乎有寫錯。)
以這個例子來說,這是我們第一章中的"宣告變數",只是這個變數不是整數或字串,而是一個UI.Box.Create(),你可以發現這是一個"函式",我們可以點進去看看官方對UI.Box:Create()的解釋。
官方解釋得很清楚,它可以產生一個四邊形,而Create()這個函式會回傳什麼呢?答案就是UI.Box
UI.Box是一個物件,但為了讓初學者方便了解,我們用第三章所提過的表(table)來說明,你可以說它是一個表,它擁有這些元素:

UI.Box:Show () 在畫面上顯示
UI.Box:Hide () 隱藏畫面顯示
UI.Box:IsVisible () 輸入目前畫面上標示與否
UI.Box:Set (arg) 變更框架的屬性
UI.Box:Get () 輸入包含客體的屬性的Table
所以以那個例子來說,我們定義了一個名叫box的變數,而它是一個UI.box(表)。

而因為我們只是創造而已,並沒有設定這個四邊形的長、寬或是顏色,所以如果您只寫這一段,執行時並不會出現任何東西。

因此我們需要設定它的數值,怎麼更改?我們需要用到UI.Box:Set(arg),我們可以從官網上點進去看。
Parameters的意思是參數,也就是說當我們要設定這個四邊形的數值時,我們需要有arg這個參數,arg是一個表(table),它的元素有這些:

  • x(x座標,是一個整數,螢幕最左邊的座標為0)
  • y(y座標,是一個整數,螢幕最上面的座標為0)
  • width(長度,是一個整數)
  • height(寬度,是一個整數)
  • r(紅色,是一個0到255之間的整數,數值越高越紅)
  • g(綠色,是一個0到255之間的整數,數值越高越綠)
  • b(藍色,是一個0到255之間的整數,數值越高越藍)
  • a(透明程度,是一個0到255之間的整數,數值越低越透明)
也就是說,當我們要設定數值時,我們要將表丟進去函式中,我們舉個例子。
以這個例子來說,第一行我們宣告了一個名叫box的變數,並讓它等於UI.Box
第二行我們使用了box的元素Set(arg),它是一個函式,而這個函式的參數是一個表(table),表中的元素為x,y,width,height,r,g,b,a,意思是說我們設定了一個位置在(0, 0),長寬為100*100,顏色為紅色的四邊形(因為只有r是255,數值越高越紅)。

成果:
就這樣,我們終於顯示出來了(你會發現,元素的x,y是在四邊形左上角的地方)。

我們可以印出更多四邊形,我們舉個例子。
當您需要更多四邊形時,只需要宣告更多變數,並且分別設定它們就行,以這個例子來說,我們宣告了名叫box1跟box2的變數,讓他們都為UI.Box,之後就可以分別設定了。

結果為:

UI.Text
它的寫法跟UI.Box幾乎相同,只有在設定的時候"arg的元素"不同而已,我們一樣點開官方網站。
(只有box的地方變成text而已,跟UI.Box幾乎一樣。)

而在text中,設定數值的arg參數,元素則有這些:

  • text(想要顯示的句子,是一個字串)
  • font(字體大小,超大"verylarge",大"large",中"medium"或小"small",是一個字串)
  • align(置左"left",置中"center"或置右"right",是一個字串)
  • x(x座標,是一個整數,螢幕最左邊的座標為0)
  • y(y座標,是一個整數,螢幕最上面的座標為0)
  • width(字塊長度,是一個整數)
  • height(字塊寬度,是一個整數)
  • r(紅色,是一個0到255之間的整數,數值越高越紅)
  • g(綠色,是一個0到255之間的整數,數值越高越綠)
  • b(藍色,是一個0到255之間的整數,數值越高越藍)
  • a(透明程度,是一個0到255之間的整數,數值越低越透明)

你會發現,text只是多了text, font, align而已。
這邊一樣舉個例子。
結果為:
請注意,在UI.Text中,arg的元素width, height並不代表字體長寬,而是代表這個字體能顯示的區域!
所以假設我們今天使用了最大字體,但卻給予不足的width, height時,情況將會變成這樣:
所以當你在使用UI.Text時,請留意這件事情。

UI.ScreenSize()
這是lua作者很常使用的函式,它會回傳玩家的螢幕介面大小,因為您永遠不會知道其他玩家的螢幕解析度為幾乘幾,所以假如當您辛辛苦苦的使用UI.Text想要顯示遊戲規則時,卻在排版的時候因為使用了固定的x, y,導致在別人的介面中產生了過大或過小的文章,這些都是沒考慮其他人的螢幕解析度的後果,所以當您使用了UI.Box或是UI.Text時,請將這個函式當成排版的依據。

回傳值
UI.ScreenSize()會回傳一個表(table),元素有這些:
  • width(螢幕長度,是一個整數)
  • height(螢幕寬度,是一個整數)
這些元素的值都會根據不同的螢幕解析度有所改變。
我們舉個例子。
在參數arg的width, height元素中,我們從原本的常數100變成了UI.ScreenSize()形式。
我們讓元素width的值為UI.ScreenSize().width / 2,UI.ScreenSize()是一個表(table),我們需要元素width,也就變成UI.ScreenSize().width,它的值是螢幕長度,也是一個整數,所以再除以二,也就是螢幕長度的一半了。
height也一樣,我們讓這個四邊形的長寬都變成螢幕長寬的一半,結果就為:
可以看到四邊形的右下角剛好對到準心了。

練習
請印出4個藍色,長寬分別為200,且在4個角落的四邊形,並且在正中央印出"成功"字串。

感謝各位觀看,如果有什麼問題或錯誤的地方還請留個言,之後可能會更新慢一點了,感覺沒什麼人在看:(

14
-
未登入的勇者,要加入 2 樓的討論嗎?
板務人員:

3678 筆精華,01/13 更新
一個月內新增 6
歡迎加入共同維護。


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】