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