大家好 我是misk
上次介绍了官方的API网站
并且解释了网站中的一些关键字
这次我们从UI开始介绍
让您知道如何在萤幕上显示你想要的字或图型
(请先打开官方的API网站:https://tw.beanfun.com/cso/STUDIO/api/index.html)
如果没看过上一章的,请前往:
************************************
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个角落的四边形,并且在正中央印出"成功"字串。
感谢各位观看,如果有什幺问题或错误的地方还请留个言,之后可能会更新慢一点了,感觉没什幺人在看:(。