用LuaSTG制作自己的单关1:制作简单的UI
各位,好久不见(
有没有想我呢(凑不要脸)
昨天也说了,要做教程,那么废话不多说,直接开始吧
注意:我这里lsTG用的是ex+ 0.82b版本,你可能会看见一些不认识的节点,出现的时候我会解释一下
接下来的内容可能需要一点lua基础,如果不会的话...还不滚去学(?)
这是原有的UI,然后呢,我们可以给他加上一些东西.
定义一个obj,组改为GROUP_GHOST,layer改成LAYER_TOP
然后再把这个obj的render的回调函数的default action给删掉
再然后就可以开始我们的制作了.
现在,假如我想要显示残机数量,那我该怎么做呢?
介绍一个变量叫lsTG.var.lifeleft
这个变量代表着残机的数量(可以试试手动修改他)
类似的,还有(以下省略lsTG.var)
chip(残机碎片)
bomb(雷)
bombchip(雷碎片)
pointrate(最大得点)
power(灵力)
graze(擦弹)
Score(得分)
hiScore(最高分)
这些变量都是数值,用普通的image来表示是无法想象的,那么有什么好方法吗?
这里又要介绍几个函数:
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是字体的粗细，400为普通粗细，700为粗体；可选参数是字体的变形，可以取以下一个或多个字符串：RenderText(fontname,text,x,y,size,...)
绘制文字。可选参数表示文字排列和对齐的模式，可以取以下一个或多个字符串（每行限1个）：
'left' 'center' 'right'
'top' 'vcenter' 'bottom'
或者：
'centerpoint' 等效于同时取'center'和'vcenter'RenderTTF(ttfname,text,left,right,bottom,top,color,...)
在一个矩形区域中绘制文字。可选参数表示文字排列和对齐的模式，可以取以下一个或多个字符串（每行限1个）：
'left' 'center' 'right'
'top' 'vcenter' 'bottom'
'wordbreak' 'singleline' 'expantextabs 'noclip' 'calcrect' 'rtlreading'
或者：
'paragraph'等效于同时取'left'、'top'和'wordbreak'
'centerpoint' 等效于同时取'center'、'vcenter'和'noclip'
那个这个Font和TTF有什么区别呢?
简单的说,一般Font只能用ASCII码的字符,而TTF可以用更多的字符
但是Font字符的自由度(?)更高
LuaSTG自带了几个字体(在Library\font里),也已经帮我们加载好了,我们可以直接使用
可以替换这里面的字体,不过名字要和原来的一模一样
这里用的是Font
RenderText(fontname,text,x,y,size,...)
最上面的是加载原有的字体
然后现在给它起名了叫'my_Score'(fontname)
text是文字的内容
x,y是文字的坐标(具体位置因后面的附加参数而异)
size是字体大小
textlist里的就是所谓附加参数,效果如上面gif图(
那个LeaF叶子是RenderText下面一行的Render实现的,用来标记坐标(self.x,self.y)
知道了RenderText的用法之后,就可以上手了(?)
这样就简单的做出了一个小UI了
这时你可能会有疑问
那么有没有什么办法解决这个问题呢?
这里呢,再再介绍几个函数:
SetFontState(fontname,blendmode)
SetFontState(fontname,blendmode,color)
设置字体的混合模式和颜色。若省略color，则维持原颜色。
SetFontState2(proportion,rotation,spacing,tracking)
设置字体的几何参数。每个参数均可以为nil，这样将被视为默认值。
SetFontState和SetImageState是很相似的,可以类比一下.
上面这一坨是为了简单易懂点,其实可以压缩成这个样子:
效果是一样的
然后呢,如果是想要渲染那种条状的,该怎么做呢?
用到了RenderTexture
希望能看懂(
'white'是一个全白的image
然后是,下面的是可以做的比较好看的条的做法(?)
RenderTexture和RenderRect具体的用法可以看看我之前写的那篇教程:
好了,卜想写了(
最后祝你,提前 再见
oh对了,你可以在code里加个这个,这样原有的UI就会消失(也许仅限ex+版本以上)
function lsTG.lsTG_ui:drawScore()
self:ScoreUpdate()
end
