Composer - a simple layout engine

[wolf]

For a game I am working on, I recently wanted to use some kind of layout engine. My requirements were that the layout engine would have a small code-base and be easy to use. I also wanted the layout engine to be flexible with regards to the widgets it could use. I might use custom widgets now, but in the past I used SUIT as well. Maybe in the future I would like to use another widget library still ...

At the time I could not find a layout engine that was suitable for my needs, but did find an interesting Python project that was implemented in about ~100 lines of code. I decided to port this Python project to Lua. For reference, the Python project is described here: https://forums.4fips.com/viewtopic.php?f=3&t=6896

While this is still very much a alpha release, I decided to make it available already. I should note though: for now I only tested the layout library with my own custom widgets, but I believe it should work fine with most widget libraries.

I believe this layout engine adds a few nifty features, in short:
- UI layouts are decoupled from the rest of the code base.
- UI layouts are defined on (more or less) a subset of Lua which kind-of mimics HTML / C# layouts
- The core is very easy to understand, there's a very limited set of layout objects (VStack, HStack, Border, Elem) and a very limited set of attributes (Stretch, MinSize, ID, Margin)
- The API for loading and resizing layouts is very easy as well.

The following layout code is used for the loading screen:

Code: Select all

Border(Margin(10), {
	VStack({
		Label("", ID("title"), Stretch(1, 1), MinSize(0, 50)),
		Label("", ID("message"), Stretch(1, 0), MinSize(0, 50)),
	}),
})

loading.png (66.7 KiB) Viewed 5554 times

The following layout code is used for the game screen:

Code: Select all

Border(Margin(10), {
    VStack({
        Border(Margin(0, 0, 0, 4), {
            FlexibleSpace(),
        }),
        VStack(Stretch(1, 0), {
            HStack(Stretch(1, 0), {
                TextView("", ID("status"), MinSize(320, 110), Stretch(1)),
                FixedSpace(10, 0),
                VStack(MinSize(0), Stretch(0, 1), {
                    FlexibleSpace(),
                    [[ "ui/fighter.lua" ]],
                }),
                FlexibleSpace(),    
            })
        }),
    }),
})

File: "ui/fighter.lua" as referenced in the above file.

Code: Select all

HStack(Stretch(0, 0), {
    ImageButton("gfx/game-icons/conversation.png", MinSize(48), Stretch(0)),
    ImageButton("gfx/game-icons/hand.png", MinSize(48), Stretch(0)),
    FixedSpace(10, 0),
    ImageButton("gfx/game-icons/switch-weapon.png", MinSize(48), Stretch(0)),
    ImageButton("gfx/game-icons/crossed-swords.png", MinSize(48), Stretch(0)),
    FixedSpace(10, 0),
    ImageButton("gfx/game-icons/magic-potion.png", MinSize(48), Stretch(0)),
    ImageButton("gfx/game-icons/fairy-wand.png", MinSize(48), Stretch(0)),
    ImageButton("gfx/game-icons/scroll-unfurled.png", MinSize(48), Stretch(0)),
    FixedSpace(10, 0),
    ImageButton("gfx/game-icons/backpack.png", MinSize(48), Stretch(0)),
    FixedSpace(10, 0),
    ImageButton("gfx/game-icons/skills.png", MinSize(48), Stretch(0)),
    FixedSpace(10, 0),
    ImageButton("gfx/game-icons/night-sleep.png", MinSize(48), Stretch(0)),     
})

Which results in the following:

game.png (611.93 KiB) Viewed 5554 times

The library is called Composer and can be found here: https://github.com/wolf81/composer

I've added a few basic examples, but I will improve these in the future. In the future I will probably also add a hot reload functionality, which I feel would work very well with this setup.

[dusoft]

How do you handle callbacks? I.e. does this handle button presses as well?

[wolf]

Handling UI interactions is not the goal of the library. The library doesn’t provide any widgets (except some demo widgets that are not finished in example project).

Handling UI interactions should be handled by the widget library of your choice, e.g. SUIT, GSpöt or whatever …

The goal of Composer is strictly to arrange a UI. As such Composer can help to set the frame (drawing rectangle) of a widget but not much more besides.

In the future I hope to add some demo code using several widget libraries.