【攻略】CSO lua零基础小教室(五) UI图型与文本显示

大家好 我是misk
上次介绍了官方的API网站
并且解释了网站中的一些关键字
这次我们从UI开始介绍
让您知道如何在屏幕上显示你想要的字或图型
(请先打开官方的API网站:
如果没看过上一章的,请前往:

函数
在上一章有说明过,只要是关于接口的部份通常都是写在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个角落的四边形,并且在正中央印出"成功"字符串。

感谢各位观看,如果有什么问题或错误的地方还请留个言,之后可能会更新慢一点了,感觉没什么人在看:(

本文来自网络,不代表3楼猫立场,转载请注明出处:https://www.3loumao.org/5652.html
返回顶部