Inky, a GUI framework

[Tjakka5]

"What? Another GUI library?" I hear you ask. Yes, but wait. This one is different.

Inky is a GUI framework that aims to solve LÖVE's problem of having no generic GUI framework that can work everywhere for anything. Most of LÖVE's GUI frameworks provide a (limited) set of widgets, and/or constrain itself to only a single input system. Inky gives complete freedom in both these aspects: Mouse, Mobile, Gamepad, Retro, Modern, Windowed. Everything is possible with Inky.

Inky does not provide any out of the box widgets for you to use. If you want a button, you'll have to program it. However! Inky does provide everything to make this process streamlined and easy. Making a widget means settings up 'hooks' for the widget's logic, and providing a draw function. Inky provides hooks to respond to events, interact with pointers, manage state, perform side effects, and much more.

Making a simple button is as easy as:

Code: Select all

return Inky.defineElement(function(self)
	context:onPointer("release", function()
		print("I have been clicked!")
	end)

	return function(_, x, y, w, h)
		love.graphics.rectangle("line", x, y, w, h)
		love.graphics.printf("Click me!", x, y, w, "center")
	end
end)

And that button is fully customizable. Want to add a icon? Just throw a 'love.graphics.draw' in there. Change color on hover? Inky's 'context:onPointerEnter' has got you covered.
This way, you'll be able to create a GUI that fits YOUR game, with the widgets YOU need.

Source code, documentation and examples are available on the Github page: https://github.com/Keyslam/Inky

[ivan]

I do not know much about React but my first impression is that the use of closures reminds me of JavaScript.
This is usually not a big deal in terms of performance, as long as you do not create a lot of new closures each frame which get garbage collected and may cause sudden drops in frame rate.
Cheers!

[Tjakka5]

Hey Ivan,

The examples indeed use closures a lot, (in my opion) it helps a lot with readability. They would only be created when a UI Element is created, but if you're creating lots of the same element, you'd have a lot of 'duplicate' closures.
'self' is passed to all those functions, so if memory usage and/or performance is a concern it's easy enough to move the closures out:

Code: Select all

local function onRelease(self)
	print("I have been clicked!")
end

local function render(self, x, y, w, h)
	love.graphics.rectangle("line", x, y, w, h)
	love.graphics.printf("Click me!", x, y, w, "center")
end

return Inky.defineElement(function(self)
	context:onPointer("release", onRelease)

	return render
end)

[dusoft]

Readability is a thing of preference. See these examples that I find more readable than your compacted closures:

Code: Select all

local interface = {
    panel = {
        icon_width = 50,
        functions = {
            { name = 'Stop', image = 'tram.png', handler = { id = 'stop', callback = function() interface.handler.stop() end }, mouseover = function() return lines.isLine() end },
            { name = 'Line', image = 'tram.png', handler = { id = 'line', callback = function() interface.handler.line() end }, mouseover = function() return roads.isRoad() end },
            { name = ' [i]', image = 'tram.png', handler = { id = 'info', callback = function() interface.handler.info() end }, mouseover = function() return interface.info() end },
            { name = 'Finances', image = 'tram.png', handler = { id = 'finances', callback = function() interface.handler.finances() end }, mouseover = function() return false end }
        }
    }
}

I.e. I am using anonymous functions as handlers/callbacks that point to the actual named functions.