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