Flex layout helper for Game Maker

Small utility library to simplify working with Game Maker flex system.

Link to Github: https://github.com/chillman79/gm-fflex

About

FFlex (Fluent Flex) is a small wrapper library that makes it easier to build and manage ui layouts using gamemaker’s flex system. it focuses on building nested flex trees with simple, chainable calls.

The goal is to provide a straightforward way to:

• Define a UI structure in GML
• Let flex panels handle the final positions and sizes of your UI components.

Features

• Easy composition of flex layouts
• Support for nested layouts (layouts inside layouts)
• Debug helpers:
  • Draw layout rectangles on screen
  • Print a json representation of the node tree

Setup

1. Download the latest .yymps package from the repository or itch page.
2. In the GameMaker IDE, select Tools → Import Local Package.
3. Choose the .yymps file and confirm import.

Getting started

Basic idea

FFlex is based on two main structs: FFlexLayout and FFlexItemComponent, which work together to build and manage flexible layouts in GameMaker.

• FFlexLayout: This struct defines a layout node. It specifies its size, position, direction of the elements, spacing between them, and a list of child items.
• Child items: Each child can be any struct, as long as it contains a flex_component field that references an instance of FFlexItemComponent.
• Nested layouts: A child can also be another FFlexLayout, allowing for hierarchical layouts by nesting multiple levels of flex layouts and building more complex structures.

Once you have defined your layout, you need to call the .load() function. This function generates the equivalent struct described in the Flex Panels documentation, creating the necessary internal structure for Flex Panels to manage the layout.

Within .load(), you need to pass a callback function as a parameter. This function will be executed for each struct that is not of type FFlexLayout. Inside this struct, the flex_component field will contain the final positions and sizes, which you can use to create instances of your UI elements.

Finally, you can use the .debug() and .debug_string() functions to inspect and test your layouts. The .debug() function (called in any Draw event) draws the outlines of the elements on screen, while .debug_string() generates a clean JSON representation of the layout (which you can use in Flex Panels documentation).

Usage examples

Simple two panel layout

_layout = new FFlexLayout()
    .row()     
    .width(room_width - 128)     
    .height(room_height - 128)     
    .left(64)     
    .top(82)     
    .gap(40)     
    .padding(0)     
    .items([         
        // first child layout         
        new FFlexLayout()             
            .row()             
            .width("100%")             
            .height("100%")             
            .items([                 
                {                     
                    flex_component: new FFlexItemComponent()
                        .set_size("100%", "100%"),                     
                    instance: o_panel                 
                }             
            ]),         
        // second child layout         
        new FFlexLayout()             
            .row()             
            .width("100%")             
            .height("100%")             
            .items([                 
                {                     
                    flex_component: new FFlexItemComponent()
                        .set_size("100%", "100%"),
                    instance: o_panel                 
                }             
                ])     
            ]);  
// resolve and apply layout 
_layout.load(function(item) {     
    var flex_vars = item[$ FFLEX_COMPONENT_KEY];      
    
    var d = variable_struct_exists(item, "depth") ? item.depth : layer_get_depth("Instances");     
    
    if (item.instance == o_panel) {         
        var inst = instance_create_depth(flex_vars.left(), flex_vars.top(), d, o_panel, {             
            width: flex_vars.get_width(),             
            height: flex_vars.get_height(),         
        });     
    } 
});

Debug helpers

// (In a End Draw/End Draw GUI Event) draw debug rectangles over the layout 
layout.debug();  
// log a json representation of the flex node. 
layout.debug_string();

Roadmap

• todo: add editor tools or inspectors for flex layouts
• todo: demo project showing a complete menu ui

Acknowledgements

Special thanks to:

• Juju Adams for ScribbleJr
  • https://github.com/JujuAdams/ScribbleJunior

• Kenney for the sprites and asset packs

  • website: https://kenney.nl/