Free Mono:UI - A GMS2 User Interface Library (v0.1.2)

Discussion in 'Work in Progress' started by 2Create, Mar 26, 2018.

  1. 2Create

    2Create Member

    Joined:
    Jun 20, 2016
    Posts:
    17
    [​IMG]
    (Be aware: This project is still early in development.)
    (Not many features are currently available.)

    CURRENT VERSION: 0.1.2
    DOWNLOAD LINK: zip - gz - bz2
    MORE:


    Mono:UI

    Mono:UI is a library for use with GameMaker Studio 2. It is meant to make common UI functionality easily accessible, and easily customisable. In other words, its goal is to make things look pretty using as little effort as possible.
    Mono:UI comes in two modules. There is the core functionality, known as Mono:UI, and then there's a collection of graphics, known as Mono:UI Asset Collection. Both of these modules are free to use and are GPL-compatible.
    The core functionality of Mono:UI has all you need to start making a functional user interface in minutes, even without the Asset Collection.
    Similarly, the Asset Collection will allow you to use a collection of graphics that you can add to your own user interface, even if it doesn't make use of Mono:UI's core.​



    Ready in Minutes

    Let us see just how quick and simple Mono:UI is to use.
    Take a look at this snippet of code:
    Code:
    // Room Creation Code
    m_init();
    
    var _btn = instance_create_depth( 50, 50, 0, m_Button );
    
    MONO( _btn, [
        [ "theme", "bold" ],
        [ "label", "Click Me!" ],
        [ "shape.width", 200 ],
    ] );

    And then at its result:
    [​IMG]

    Nearly all Mono:UI functionality is short and easy to understand at a glance, making it ideal to use anywhere, even inside events.​



    Concepts

    To make things work as smoothly as possible, Mono:UI makes use of some concepts that you're expected to understand when working with it. You've already seen two of them in action, but there are some more. They won't take long to understand, so here's a summary of the most important ones.​

    Properties

    Properties are a concept that allows for quick and easy customisation of any Mono:UI element. They embody a number of ways in which the element can change, both in appearance and in function. There is a full list on the Wiki. These Properties can be accessed through use of the MONO function, which takes an instance, and an array of Property / Value pairs.
    As you can see in the example above, we have set the property "shape.width" to 200, "label" to "Click Me!" and "theme" to "bold". These values are passed into the instance, which will immediately adapt.
    In addition to this, it is possible to define defaults for different configurations known as targets. Default values for a Property will be retrieved upon instance creation. If an instance can't find a default, because the object doesn't have an associated target, or because the default it found was undefined, it will look up the defaults for its parent, and so on.
    This means that GameMaker's native inheritance functionality becomes another powerful tool in UI design, as it allows you to quickly create a number of different configurations for different purposes, without any need to switch back and forth between them.​

    Themes

    Themes are a concept that makes it easier to keep track of colours, by grouping them into sets that can be reused and even overwritten. Each Theme consists of 4 colours. These are a primary colour, a secondary colour, a text colour and a border colour.
    As you can see in the example above, one of the default Themes is "bold". This prints the button in an assertive blue colour. Other presets are similarly named by the kind of feeling they evoke. These can naturally be overwritten, which is in fact encouraged.
    It is recommended to not name Themes after specific colours or functions, but rather name them after emotive words. This will allow you to construct your Themes with the experience the end user will have in mind, and will also allow you to more quickly select the right Theme. For example, the default Theme "dangerous" is red, and can be used in situations ranging from "Are you sure you want to delete your savegame?" to "Report this player", where the decision is an important one.
    You can create your own themes using the m_make_theme function.
    Code:
    m_make_theme( "foo", c_red, c_blue, c_green, c_yellow );
    It also takes an optional sixth argument, which when set to true, will allow you to input colours in RGB format, rather than GameMaker's internal format.
    Code:
    m_make_theme( "foo", $ff0000, $0000ff, $00ff00, $ffff00, true );

    Plans

    Plans are a concept that lets you provide a callback for when Mono:UI completes a certain task. For a button, this is being clicked. Plans are usually an array holding a callback target in index 0, and holding an array of arguments in index 1. If there is only one argument, it doesn't have to be an array.
    A callback target can either be a script or an event. In case it is a script, you only need to provide the name. In case it is an event, you will need to provide the instance or object to target, and which event to perform. Arguments will be stored in the mono_load global variable for the duration of the event.
    As an example, consider a script that shows a message on screen when called. We can add a Plan to call that script to our button.
    Code:
    // Room Creation Code
    m_init();
    
    var _btn = instance_create_depth( 50, 50, 0, m_Button );
    
    MONO( _btn, [
        [ "theme", "bold" ],
        [ "label", "Click Me!" ],
        [ "shape.width", 200 ],
        [ "plan", [
            script_show_message,
            "Hello World!",
        ] ],
    ] );
    The script will be called with the provided arguments when the button is clicked:
    [​IMG]



    More Examples

    "shape.border" Property
    [​IMG]
    "shape.outline" Property
    [​IMG]
    "shape.rounded" Property
    [​IMG]
    "icon" Property
    [​IMG]
    "shape.shadow.colour" Property
    [​IMG]


     Mono:UI is © Kishan Kock, 2018 
     
    Last edited: Mar 27, 2018
    sylvain_l, Lukan, JAG and 6 others like this.

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice