love2d教程13--图形界面

图形界面给我们使用电脑带来了方便,可是那些按钮,文本框,工具栏等究竟是怎么实现的呢?
其实它们都是系统画出来的,我们编程时使用那些控件就是调用系统
封装好的画图操作,当然控件还必须有事件处理.现在windows下流行
的界面库好多都是使用directui技术,即直接绘图.

在示例里我使用love里的retangle函数,来实现一个简单的按钮,并实现一个简单的按钮事件.
上图(没什么立体效果).



其实就是画了一大一小两个矩形,小矩形的颜色比大矩形深.
每次在love.update(dt)里检测鼠标的位置是否在小矩形区域内和鼠标左键是否按下.
事件的处理是传入自定义的处理函数给onClick(fun),在update里处理(也可以放在draw,这样就可以使用love.graphics里的绘图函数了).具体的看代码:

Button.lua

require('middleclass')
local lg=love.graphics
Button=class('Button')

--按钮上显示的文字,按钮位置
function Button:initialize(text,x,y)
self.text=text
--为按钮内框位置
self.bx=x
self.by=y
self.font =lg.newFont(18) --18号字体一个字母宽11,高21
lg.setFont(self.font)
--文字宽度
self.tw=self.font:getWidth(text)
--这里的按钮为两个矩形,内框,外框
--内框默认40宽,25高,外框和内框间距4像素
self.bw=40
self.bh=25
if self.tw>33 then --即3个字母
self.bw=self.tw+4
end

--tx,ty是文字显示的位置,,文字据内框2像素
self.tx=self.bx+2
self.ty=self.by+2

--是否点击
self.isDown=false
end

--在屏幕上显示的坐标,可以为空,为空时,即初始化时的值
function Button:draw(x,y)
self.bx=x or self.bx
self.by=y or self.by
--先保存原来的颜色
local r, g, b, a = love.graphics.getColor( )

--先画外框
lg.setColor(130,183,237) --淡蓝色
lg.rectangle( "fill", self.bx-4,self.by-4, self.bw+8, self.bh+8 )

--再画内框
if(self.isDown) then
lg.setColor(130,183,237) --淡蓝色
lg.rectangle("fill",self.bx,self.by,self.bw,self.bh)
self.isDown=false
else
lg.setColor(100,126,250) --较深的蓝色
lg.rectangle("fill",self.bx,self.by,self.bw,self.bh)
end
--画文字
lg.setColor(255,0,0)
lg.print(self.text,self.tx,self.ty)
--恢复以前颜色
lg.setColor(r,g,b,a)

lg.print("bx=" .. self.bx .. " by=" .. self.by,10,20)
lg.print("moux=" .. love.mouse.getX() .. " mouy=" .. love.mouse.getY() ,10,40)
end

--就是检测鼠标在按钮区域是否按下
function Button:isClick()
local moux= love.mouse.getX( )
local mouy=love.mouse.getY( )
if moux>self.bx and moux <self.bx+self.bw then
if mouy>self.by and mouy<self.by+self.bh then
if love.mouse.isDown("l") then
self.isDown=true
return true
end
end

end

end
--事件处理函数
function Button:onClick(fun)
self.clickFun=fun
end

function Button:update()
self:isClick() --不断检测鼠标左键是否按下
if self.isDown then
self:clickFun()
end
end

main.lua

require('Button')

function testClick()
love.graphics.setBackgroundColor(100,100,100)
end

function love.load()
myBtn=Button:new("myBtn",100,100)
myBtn:onClick( testClick) --回调函数
end

function love.update(dt)
myBtn:update()
end

function love.draw()
myBtn:draw()
end

由于love里没有gui部分,而游戏不可避免要使用一下gui,难道我们要自己实现一套gui吗?
不用担心,在love wiki的library页面我们可以发现一些gui库,不过有些已经过期了.好在有一个loveframe支持0.8,我打开一看

发现远超过了我的预期,支持很多控件,而且还可以换肤.可惜我在linux下使用不支持中文输入.官方demo演示如下:

loveframe的下载地址,它也是使用middleclass的,看来我的选择比较走运,要不以后得更换对象库.
https://github.com/NikolaiResokav/LoveFrames/
(我已经下载了,放在gui目录下)
文档https://github.com/NikolaiResokav/LoveFrames/wiki
5天前作者还更新了一次,我相信它会越来越强大.
例子暂时不写,读者可以先看demo,我放在了tutor13目录下.接下来我看看如何让其支持中文输入.

代码下载,已clone的直接git pull
git clone git://gitcafe.com/dwdcth/love2d-tutor.git
或git clone https://github.com/dwdcth/mylove2d-tutor-in-chinese.git