Asset - Scripts [ALPHA] Local Window Interface v0.1.4

Binsk

Member
Howdy! Take a gander!

Demo_3.png

NOTE: This system is currently in alpha and will be on sale until the beta! Because of this there will be bugs and missing features. Please report any issues / suggestions to contact@upsetbabygames.com or post them in this forum topic, thanks!

GameMaker Marketplace
Itch.io

About

This is a Local Windowing Interface system that aims to give GameMaker: Studio 2.3 easy-to-use but feature rich interface features!

The system is designed to auto-scale and adjust for multiple screen sizes, render only when updates occur, and handle all input events through a passive signaling system. You need only spawn your element and set some properties to be well on your way. The combined anchoring / margin system handles positioning all elements in their proper places.

Not all elements are yet implemented or implemented fully. The currently implemented elements / features are as follows:
  • Theming and element styling system w/ per-element theme override support
  • Panels / Buttons (icon, and text-based)
  • Checkboxes / Radio buttons / Sprite-based switches
  • Scroll bars / Sliders
  • Text labels
  • Line edit w/ cursor, highlight, popup, and limited shortcut support (further shortucts planned)
  • Drop-down menus w/ multi-column, sprite, sprite column, and divider support
  • Draggable containers
  • Scroll containers
  • Horizontal / Vertical alignment containers
  • Surface containers (to include gameplay elements inside the interface)
  • Tab containers
  • Confirmation / Text input dialogs (more on the way)
  • Signal system
  • Element grouping system
Technical

The entire system is based on a tree structure. You can attach elements together and each element will base its position and scale according to the parent. All children are aware of changes to the parent so features like disabling an element, toggling visibility, changing theme, etc. is auto-managed for the children as well.

The system knows when elements update as well thus only calculating position updates and re-rendering pieces that are necessary.

Input events are handled through 'signals'. Each element contains a signaler that you can attach a method to. So, for example, you can attach a popup's 'set_visible' function to a button's 'pressed' signal so that the popup becomes visible whenever the button is pressed.

Lastly is the grouping system. You can create an LWIGroup structure and attach it to any element. Certain elements will behave differently depending on if they are in a group. For example, checkboxes will convert to radio buttons. Button-based drop-menus will know to auto-open when hovered over if one in the group is open, etc.

Future Features

There are plans to greatly expand included elements, albeit it is quite simple to create your own custom elements by inheriting any one of the included structs. Some further planned elements / features are as follows:
  • Progress bars
  • Scrollable drop-down selection menus
  • Multi-line editor
  • Rich text label (w/ BBCode support)
  • Tree system for collapsible menus, etc.
  • More dialogs (file open/save, color selector, and more)
  • Smart element repositioning (so elements physically move w/ screen changes, not just change size)
I will be expanding existing systems further as well.

Platform Support

This has currently been officially tested on Windows and Linux. HTML5 and, hopefully, Android will be supported down the road.

I generally include external documentation for my extensions but my doc generator requires an update for GameMaker: Studio 2.3. Until I can rewrite it there will be no online documentation. However, I have included extensive function / struct headers, a few notes to introduce you to the system, and a heavily-commented example setup.

Feature Requests

This project is currently in alpha because I want to get feedback! If you use the system and are really itching for a feature or think something could be designed a bit better, please let me know! I will be actively monitoring requests.
 
Last edited:

Binsk

Member
Update 0.1.1

I realize it has only been a day but I found a number of bugs and added easy support for navigation menus through the new LWIButtonDrop struct w/ LWIGroup support.

  • Fixed example code mistake in 'Getting Started' doc
  • Fixed disabled line edit's font color if text was already entered
  • Fixed edge-case visibility bug
  • Fixed parents not properly passing disabled state to children
  • Fixed clipboard glitch w/ backup clipboard that only allowed sharing between siblings
  • Removed unnecessary 'width' and 'height' constructor values for drop-down menus (as it is auto-managed)
  • Added support for 'minimum width' setting on drop-down menus
  • Added ctrl + left click to open right-click menus on LWILineEdit structures
  • Rewrote render sorting to depth-first from breadth-first and added support for per-element render priorities. Fixes a number of issues between clipped and non-clipped elements.
  • Added simple 'flat' render for LWIStyleBox struct for items that should disregard outline properties
  • Added support for drop-down menus to stay open when clicked outside the menu
  • Add simple drop-down buttons; aka buttons that show a drop-down when pressed. LWIGroups are supported thus allowing for easy menu-bar creation w/ mouse-hover support between buttons / drop-downs.
  • Changed button background color to use 'contrast' instead of 'dark' theme setting when toggle mode is enabled and the button's toggle is on.
  • Added support for fetching all children in LWIGroup as an array.
 
Last edited:

rIKmAN

Member
Just purchased on itch, looks promising.
I'll have a play with it this weekend and see what feedback / suggestions I can give you.

Couple of questiosn I have before getting a chance to use it:

1) Regarding future supported targets - is it just a lack of ability to test them yourself that some platforms are not planned to be supported or is it because of technical / code related reasons with the extension and UI system itself? (UWP, iOS or Mac are not listed as "down the road" targets, for example)

2) How is performance?

Keep up the good work!
 
Last edited:

Binsk

Member
Thank you for purchasing the extension!

In regards to support, everything is programmed in raw GML and should technically work on the unlisted platforms. However, I do not have access to Mac OS or IOS devices and thus don't want to list them as supported without officially testing them. I do not own the UWP module and currently do not have the finances to purchase it so I won't make any guarantees on that one either.

As for performance, both input handling (in most cases) and rendering are designed to only update when necessary. For example, moving your mouse inside a button causing it to 'light up' will trigger a redraw. If you have an element that requires constant redrawing (such as a surface container) then you can lose these optimizations.The system can take a fair amount of VRAM due to surfaces, however. The LWIRootObj creates a surface that holds everything, and elements marked to clip content (which is generally off by default) will use a surface as well.

Currently a redraw re-renders every element, which can be expensive with a lot of elements. With 0.1.1 comes a redesign to depth-sorting into a depth-first system. I'm hoping to switch the update system to only redraw modified children then reuse the surfaces on the branch to cut out a lot of needless re-rendering.
 

rIKmAN

Member
I own all licences (other than consoles) so I'll give it a test with them when I get a chance to try it out and let you know how it goes.
I'd also be happy to help test them going forward if you decide the target is something you'd like to try and get working properly.

Looking forward to taking a look at it - I don't even need a GUI atm but the nice looking Dark Theme is what sold me haha.
 

Binsk

Member
That would be fantastic if you were willing to do that. Thank you very much!

Haha, glad the dark theme is to your liking. I am trying to use a similar color scheme to GameMaker and the forum dark theme.

Update 0.1.2

A number of big fixes in terms of depth sorting.
  • Fixed certain setters not triggering render updates
  • Fixed another slew of depth issues between clipped / non-clipped items. Included elements should render consistently now.
  • Fixed 1-frame display glitch for popups becoming visible after changing positions
  • Removed render priority setting as it is not plausible with mixed clipped / non-clipped content
  • Added tree_jump_bottom() to LWIAnchor to help with render / process orders
  • Added get_is_valid() to check if a struct is still valid (in case it gets freed mid-process)
  • Changed a number of popups to attach to root instead of local node due to removal of rendering priority so they get processed last.
  • Wrote initial implementation for more optimized rendering w/ clipped elements. Potentially give a speed boost depending on number of clipped elements and tree depth.
  • Implemented get_child_index to LWIAnchor to retrieve the index given a struct
  • Switched LWIAnchor and children to use ds_lists instead of arrays for child management, other structures still need to be switched
  • Enabled drop-down right-click for popup line-edit element
  • Added function to fetch LineEdit auto-created by related dialog for easier property modifications
  • Implemented saving / loading themes to buffers and files as well as duplicating themes (for easier per-element modifications)
Some notes:
  1. Saving themes in regards to fonts only saves font indices, not actual font data at the moment (have to look into whether it would be worth trying to save font data and if that is possible).
  2. Implemented the base for more optimized rendering. If you come across weird render glitches let me know as I had to change a bit under-the-hood.
 
Last edited:

rIKmAN

Member
That would be fantastic if you were willing to do that. Thank you very much!
No worries, as I said I'll have a look at it at some point over the weekend and let you know the results.
Shall I post the info and any feedback here or do you prefer email or some other contact method?
 

Binsk

Member
No worries, as I said I'll have a look at it at some point over the weekend and let you know the results.
Shall I post the info and any feedback here or do you prefer email or some other contact method?
Thanks again for doing that.

Posting here or shooting me a PM would both work just fine, thanks.
 

Samuel Venable

Time Killer
That ok-only textbox grey-skinned popup reminds me of the good old pre-studio gamemaker days.

I really like what I see. I don't have any immediate need for it, but if the need ever arises, honestly this is one of the very first interface aesthetics I'd pick over alternatives I've seen thus far. I have my eye on it.

Well done! :)
 

rIKmAN

Member
Posting here or shooting me a PM would both work just fine, thanks.
Here's the results of testing v0.1.2 "as-is" on each target using the latest Beta (IDE: 23.1.1.263 / Runtime v23.1.1.265)

Windows
VM x86:
Works
VM x64: Works
YYC x86: Doesn't work (compiles but window doesn't appear, no error message in compile log)
YYC x64: Doesn't work (gives an error message in compile log)

HTML5
Doesn't work (has error messages in browser dev console)

UWP
VM:
Works
YYC: Doesn't work (compiles but loads toa black, before crashing)

Android
VM:
Works
YYC: Doesn't work (compilesbut loads to a black screen)

I couldn't test iOS + Mac tonight as I don't have access to the Mac atm and Ubuntu I can't test as I have no Linux machine (nor any interest in having one).
I didn't bother profiling etc as I know performance improvement are on your roadmap and I figured just testing if they worked was the logical first step.

A couple of things I noticed just whilst doing the export tests:

1) There's a small issue with the font, not on all characters but I noticed it when typing my name into the text box.



2) The checkbox + radio buttons are "clickable" all the way into the empty space on the right of them, rather than just the button itself and/or the label.
For example clicking the empty space to the right of the checkboxes activates them and clicking the empty space to the right of the radio buttons does the same.

I'll likely have more feedback when I get chance to actually sit down with it, but that's all I noticed when running the export tests.
 

Binsk

Member
Hm... looks like the YYC will be my nemesis. Glad to see it is working to some extent on UWP and Android, though. I'll be working through other platform compatability once I get the base elements finished.

In response to your notes:

1. That is an odd one. Turning off anti-aliasing for the font removes this issue, I'll have to see if there something going on due to blend-modes as it doesn't happen just printing the text to screen directly. Edit: Fixed for version 0.1.3

2. This is by design. The entire 'container' for an element is clickable, there is no 'sub-masking'. The clickable portion can be adjusted by adjusting the container, so if you only wanted a certain size to be clickable you can adjust margins / anchors to fit your needs. This is especially doable if content clipping is disabled for that element.

That said, I have been considering some sort of 'auto-grow' feature for elements that auto-adjusts margins to precisely fit the content automatically (or some minimum size), But I haven't decided on how I want to tackle that yet.
 
Last edited:

rIKmAN

Member
Hm... looks like the YYC will be my nemesis. Glad to see it is working to some extent on UWP and Android, though. I'll be working through other platform compatability once I get the base elements finished.

In response to your notes:

1. That is an odd one. Turning off anti-aliasing for the font removes this issue, I'll have to see if there something going on due to blend-modes as it doesn't happen just printing the text to screen directly. Edit: Fixed for version 0.1.3

2. This is by design. The entire 'container' for an element is clickable, there is no 'sub-masking'. The clickable portion can be adjusted by adjusting the container, so if you only wanted a certain size to be clickable you can adjust margins / anchors to fit your needs. This is especially doable if content clipping is disabled for that element.

That said, I have been considering some sort of 'auto-grow' feature for elements that auto-adjusts margins to precisely fit the content automatically (or some minimum size), But I haven't decided on how I want to tackle that yet.
No problem and yeah I assume you have some plans for it so didn't do any actual testing - those were just things I noticed when going through the compile for each target.

Let us know when you are happy to take suggestions on features/additions etc as I'm sure I can come up with some, but I don't want to suggest things that you already have planned so it seems better to wait until you are happy with things first.

Keep up the good work!
 

Binsk

Member
Go ahead and give some suggestions / additions! If you suggest something already planned I'll just know to work on that first. Best to have these requests before things are too set in stone, anyway.

In other news, another update should be up in a day or two. Fixes a big render-request bug that was causing popups to update in a really jittery fashion. Also addresses two compile issues for the YYC (targeting Ubuntu) so things compile correctly on Linux now. LineEdit shortcuts are broken for Linux at the moment. Lots of other little bug fixes too. Just trying to add a new feature or two before releasing 0.1.3.
 

deepfry3

Member
Yo! I was just getting started on developing something similar!
You probably have far more experience than I, but if you're looking for any help at all, even just with the documentation, feel free to let me know.

Otherwise, some suggestions you may not have thought of:
  • Tooltip (a description of the element when you hover over it)
  • Toggle Switch / Pill (basically a checkbox but designed for settings on and off, etc.)
  • Three-state Checkboxes / Checkbox grouping (eg 10 checkboxes with a parent 'Select All' checkbox)
  • Progress bars
  • Auto-suggest for text/dropdowns (tries to match entered text to a known item)
 

Binsk

Member
@deepfry3 I appreciate the offer!

Those are some good suggestions! I have added most of them to the implementation list, thank you! The ones I didn't add can either already be done w/ the system or are now under consideration.

Update 0.1.3
Mostly fixes this time around but I did also update a few things and added some smaller elements. Some of these sprite-based elements, such as the 'close button' and the 'pill switch', once implemented', will come with a default sprite that can be used or changed in the theme.
  • Fixed odd font-render glitches w/ LineEdit
  • Fixed some compile errors w/ Ubuntu YYC export so things compile correctly now
  • Fixed ctrl+c copying empty text when nothing is selected in LineEdit
  • Fixed render update request glitch causing dragged objects to appear to be lagging
  • Fixed LWIButtonDrop elements not closing upon second button press
  • Fixed LWIButtonTree elements still highlighting w/ mouse hover when disabled
  • Fixed 'hover detection' passing through blocking elements. Mouse hover signals moved to LWIAnchor from LWIPanel
  • Fixed bug with aspect-ratio handling for surface elements
  • Fixed cursor changing back when leaving scrollbar while dragging
  • Added support for 'auto-resize' with visual elements to make containers grow until the content is completely fit inside or shrink to remove wasted space.
  • Added support for soft min / max sizes of elements when auto-grow / shrink is enabled.
  • Adjusted demo project's textbox / radio elements to use auto-grow as an example
  • Changed LWI_SURFACECONTAINER_SCALEMODE to LWI_SCALEMODE as well as scale names from aspect_* to keep_* for better clarity
  • Changed default scale mode of surface container to 'keep' from 'none'
  • Added LWIButtonSprite which allows a sprite-based button and / or mixing sprite w/ regular button
  • Add 'condensed' setting for VBox / HBox containers to allow dynamic-sized cells that shrink to fit child content
  • Added title and close-button elements to dialogs.
  • Added default 'header' font property to LWITheme
  • Added new style type for button sprites and 'close button' property to LWITheme
EDIT: I am noticing some more text render glitches, namely with labels. This should be addressed in the next version.
 
Last edited:

Binsk

Member
Whiew! Finally getting this update out.

Update 0.1.4
  • Fixed more font interpolation blending issues w/ labels
  • Fixed incorrect blendmode for LWIContainerDraggable element
  • Fixed LWIButtonSprite aligning sprite a couple pixels off if no text is specified
  • Fixed invalid content size calculation for LWIButtonSprite
  • Fixed dialog titles turning invisible if set to clip content
  • Fixed being able to paste in \n characters to LineEdit
  • Fixed several minor text-selection bugs w/ LineEdit
  • Fixed crash w/ deleting elements in focus
  • Fixed elements not removing self from groups upon deletion
  • Fixed render glitch w/ clipped LWIAnchor elements and transparent children
  • Fixed invalid buffer conversions for LWIStyleTree and LWIStyleButtonSprite
  • Fixed input captures by clipped content overflow
  • Fixed slight margin errors w/ V/HBOX container auto-resize
  • Fixed terminal output error if LWILabel attempted to render w/ width of 0
  • Fixed elements not re-rendering directly after auto-resize trigger in some cases
  • Fixed obscure bug w/ auto-resize vertical growth
  • Fixed minor render update delay bug with LineEdit and non-character key strokes
  • Fixed bug where children weren't detached upon a parent's destruction
  • Fixed sliders not adjusting w/ mouse-wheel down if set to 'smooth'
  • Fixed HBOX/VBOX min/max cell values not being set correctly
  • Added support for adding / removing invalid characters for the LineEdit
  • Added 'LWISwitch' elements for sprite-based checkboxes
  • Added property to LWITheme to support LWISwitches
  • Added some getters to HBox/VBox
  • Added support to drop-downs for outlines, icons,'icon columns', and dividers
  • Added add_entry_icon and add_divider to LWIMenuDrop
  • Added default icons for cut / copy / paste
  • Added properties to LWITheme to support new default icons
  • Added 'entered_tree' signal to LWIAnchor that is thrown when the root is set for the element
  • Added 'exited_tree' signal to LWIAnchor that is thrown when the root is unset for the element or the element is
  • Added rough LineEdit scroll-drag when selecting
  • Added ability for containers to optionally condense invisible children
  • Added 'get_font_height' to LWITheme for simpler text-height detection
  • Added 'get_index' and 'get_child' and 'get_child_count' to LWIGroup
  • Added support for auto-resize for condensed VBox/HBox containers. May have bugs, needs testing.
  • Added LWITab element
  • Added LWIContainerTab element for tabbed containers (base implementation, missing some features)
  • Added set_anchors and set_margins to modify all anchors/margins in one call
  • Added id values to LWI elements and ability to search for element ids
  • Added support for auto-resize to scroll containers
  • Added 'get_content_width', 'get_content_height', and 'detach_parent' to LWIAnchor
  • Added extra check to LWISignal so it checks that the targetted struct is valid before sending a signal
  • Added 'deconstruct_tree' to LWIRootObj to allow for auto-cleanup of the tree if desired
  • Added a auto-resize support to a number of elements
  • Added new input handling, 'block_forced', used to block input in all circumstances. Useful for forced-focus popups.
  • Added alpha support for LWIColorRect
 
Last edited:

IGameArt

Member
Does this come with a visual interface editor? Because that would make this hands down the go to tool for creating application interfaces.
 

Binsk

Member
Does this come with a visual interface editor? Because that would make this hands down the go to tool for creating application interfaces.
It does not but that is a very interesting idea. Should this extension become popular enough to warrant the time spent on designing a full-on editor I will certainly consider it!
 

deepfry3

Member
It does not but that is a very interesting idea. Should this extension become popular enough to warrant the time spent on designing a full-on editor I will certainly consider it!
It's something I'd also considered if/when it ever warranted the time. I'm not really sure the best way to do it though. Save your GUI interface to a file which you can then import into your GM projects? Print out the code for this GUI interface as a string that you can then copy into your GM project?
Even with the time, I'm not sure how you balance making the experience great for both creating the GUI in code and creating the GUI via an editor.
 
Top