[WIP] CrashUI

[krankzinnig]

Hello, I am new to LÖVE and Lua and I decided a great project for myself would be to create a stupid simple GUI module. I have posted the source on github if anyone is curious or would like to offer some suggestions/code. The goal of this project is to create a very simple image based UI library for prototyping usable game/app interfaces. This is in no way complete or even usable at this point, just a proof of concept.

My goal is to include basic UI elements (panels, checkbox, radio, button, input, dropdown, slider [vertical and horizontal]) without over complicating usage. Upon completion, this would be ideal for anyone not interested in creating elaborate customized interfaces, but need quick and dirty theme-able menus. I understand there are various libraries out there that do a good job, this is just my personal attempt.

In the repo are some UI assets in various colors (blue, green, yellow, grey, and red) released by kenney as a part of his donation asset pack. The source is licensed under CC 1.0.

GitHub: https://github.com/hookglobal/crashui
Kenney Donation Pack: http://kenney.itch.io/kenney-donation
UI elements included in his pack: http://img.itch.io/aW1hZ2UvMjQyNi8xODEx ... 3J%2FJ.png

I only have a few hours into this project, will update this post as I get free time outside of work.

[artofwork]

I was looking at your draw function for your button and i don't think its a good idea to assign values inside of draw

Code: Select all

        local font = love.graphics.getFont()
	local text_width = font:getWidth(self.label_text)
	local text_height = font:getHeight(self.label_text)
	local button_width = self.btn_img:getWidth()
	local button_height = self.btn_img:getHeight()

	love.graphics.draw(self.btn_img, self.x, self.y)

	if self.label_text ~= "" then
		love.graphics.print(self.label_text, self.x + (button_width - text_width) / 2, self.y + (button_height - text_height) / 2)
	end

Because what your doing is each time draw is called your setting that information to the button which can be resource intensive. I try to go by the motto "set and forget" method

What i would do or at least try to do is set the properties of an object in its constructor function and then call only the necessary functions in draw

Here is an example of what i mean

Code: Select all

Button = {}
Button.__index = Button

setmetatable(Button, {
    __call = function(cls, ...)
        return cls.new(...)
    end,
})

-- constructor, set the button's properties 
-- button_1 = Button(10, 10, "Enter", "/images/round_button.png")
function Button.new(x, y, text, button, image)
    local self = setmetatable({}, Button)
    self.x = x or 0 
    self.y = y or 0
    self.image = love.graphics.newImage(image)
    self.width = self.image:getWidth()
    self.height = self.image:getHeight()
    self.text = text or "button"
    self.textPos = {}
         self.textPos.x = self.x - (font:getWidth(self.text) / 2) + (self.width / 2)
         self.textPos.y = self.y + 5
    self.button = button or "l"
    self.state = false
    return self
end
--[[ 
    inside of love.update
    if button_1.state == true then
        -- your code goes here for whatever the button activates / diactivates
        button_1.state = false
    end
]]

-- inside of love.draw
-- button_1:draw()
function Button:draw()      
   love.graphics.draw(self.image, self.x, self.y)
   love.graphics.print(self.text, self.textPos.x, self.textPos.y)
end
   
-- inside of love.mousepressed
-- button_1:mousepressed(x, y, button)
function Button:mousepressed(x, y, button)
   mx, my = love.mouse.getPosition()
   if self.button == button and self.state == false then 
      if mx > self.x and mx < (self.x + self.width) then
         if my > self.y and my < (self.y + self.height) then
            self.state = true
         end
      end
   else
      self.state = false
   end
end
   
return Button

[krankzinnig]

Thank you very much for the suggestions, I only had a bit of time tonight but I made several of the changes you pointed out. I will be cleaning up checkbox and moving on to radio as soon as I get a few extra things done.

https://github.com/hookglobal/crashui/b ... button.lua

EDIT: Both are patched
https://github.com/hookglobal/crashui/b ... eckbox.lua

Thanks again!