Scripting improvements for UI

For my current project (not that one, the other one) I needed a mechanism to create user interfaces in a fast and easy way, without having to position elements explicitly.

In a recent post, I talked about a kind of constraint-based UI layout mechanism included in recent versions of Crimild that allow us to create interfaces in a declarative way:

Each element in the UI defines a set of constraints related with either its parent another element.

Surprisingly, I (almost) didn’t change anything about that (so far). I know, I know, it’s shocking to me as well.

Anyway, that mechanism is pretty powerful, indeed. Still, it requires us to recompile the game every time we make changes (because C++). Therefore, the next evolutionary step was quite obvious: move that feature to Lua.

Using Crimild’s Coding facilities introduced last year, I implemented decoding functions for all of the UI-related components. The result is a Lua script that looks like this:

local UIFrameConstraint = 'crimild.ui.UIFrameConstraint'
local makeConstraint = UIFrameConstraint.Maker
-- Other require calls remove for clarity

-- Create a Restart Button
local restartButton = Group(
{
components = {
UIBackground( { color = { 0.0, 0.0, 1.0, 1.0 } } ),
UIFrame(
{
constraints = {
makeConstraint.after( mainMenuButton ),
makeConstraint.bottom( 10 ),
makeConstraint.width( 80 ),
makeConstraint.height( 20 ),
},
}
),
UILabel( { text = 'Restart' } ),
UIRestartButton(),
},
}
)

Simple and fast. Nice!

BTW, that script is using a new organization for scripts based on Lua modules. But that’s a story for another time…