UI Layers

[iampremo]

Adds the ability to have global GUI layers that are shared across all rooms within your project, so you set them up once and they are available for use in all rooms.

Instances are then able to be placed on these layers in order to achieve a variety of UI layouts which will scale with your game window rather than the application_surface (so if your window is an odd shape and you have black bars down the sides, the UI will still fill the window).

Instance creation order between things on UI Layers and other layers can be set in the first room so that global variables can be declared before other instances try to use them, etc.

In-game, you can also check whether an instance is on a UI Layer or not, using a new function we have added for this, and of course your instances can be further modified at play time using the flexpanel functionality that was already introduced in 2024.11.

Note that HTML5 will not be supported in 2024.13 and also all GMRT targets will not be supported for a while yet. Separate issues have been filed to add support for these targets in future, so please see those issues here in the bug database if you want to follow their progress,

Further Reading

Our GameMaker manual will of course be updated in due course and cover all you need to know, but if you want more information on the technical side of this implementation, you can see the Yoga library docs here: https://www.yogalayout.dev/docs/styling/

Example Projects

You will need to be using 2024.1300 Beta 5 or newer if you want to try any of these projects!

UI Layers Example - Highlighting Start Screen Text.zip: Example setup of a game start screen. UI Layers are used to represent clickable options, with text elements that are recoloured on mouse-over.

UI Layers Example - Screen Edge UI.zip: Resizable window containing a UI that is anchored to the edges of the screen. UI Layers have minimum sizes set on them so that although they take up a percentage of the screen, they will never be shown at a size smaller (in pixels) than a declared value.

UI Layers Example - Player HUD.zip: Resizable window containing a UI Layer that displays 3 sets of player stats along the bottom of the screen. If the window is reduced in width, the player stats will change to stack up the left edge of the screen.

UI Layers Example - Split-Screen Multiplayer.zip: Example setup of a 4-player splitscreen multiplayer game (with a shared pause overlay in the middle). Here, the gameplay UI Layer is drawn in view space, rather than display space, so that the same information can be duplicated to multiple viewports at once very easily.

UI Layers Example - Level Select Screen With Resizing.zip: UI Layer containing a 'grid' of levels that automatically wrap to a new line. Window will resize and flexpanels can be added and removed from the 'grid' at runtime using the number pad + and - buttons. NOTE: this sample does currently require a keyboard which has a number pad, so you might need to modify the code if your keyboard does not have these keys.

UI Layers Example - Inventory Screen.zip: Example setup of an inventory. Sprites and text for main weapon is changed at runtime, clicking on any weapons from the backpack will then switch main weapon, updating the sprite and text to match the new main weapon.

UI Layers Example - Hexmap Game.zip: Example of a game with a UI layer containing buttons and text information that work and update at runtime.

UI Layers Example - Pause Settings Menus.zip : Example of one menu opening another, plus how to achieve checkboxes and "sliders". Note that this project will be further explained in our tech blog for the UI Layers release.

[Andulvar]

Very excited about the GUI layers. I've been having trouble making sure GUI elements are drawing in the correct order having to dance around begin and end draws. Would be great to have some form of built-in aspect ratio scaling help as well.

[gnysek]

I will left it here:

[JustMegaAlex]

Looks very promising! I only want to add that making a UI layer global to a project seems inferior to having them as usual room layers. Or at least having a single UI layer for each room

[GargantulaKon]

@JustMegaAlex Why is a global UI layer inferior to using room layers? I'm curious.

[gnysek]

Yeah, there are games which have tons of rooms, yet usual there median of UI will be "main menu, in-game, options screen", so most of them seems to be shared. Having global UI layers will be much easier to maintain in that case (but there should be option to exclude layers too, and I believe they are aware).

[mgeddesGM]

https://wiki.opera.software/display/GM/FSD+-+UI+Layers (Staff-only URL)

[GargantulaKon]

This "bug" (story) doesn't include the UI Editor that this GameMaker article mentions, correct?

https://gamemaker.io/en/blog/flex-panel-functions

[gnysek]

This "bug" (story) doesn't include the UI Editor this GameMaker article mentions, correct?

https://gamemaker.io/en/blog/flex-panel-functions

It's exactly includes UI editor part.

[rhewid]

Will this be included in LTS 2025?

[gnysek]

@rhewid according to roadmap - should be. Everything added/fixed until LTS 2025 release should be part of it. UI was kinda confirmed to be in 2024.13 in Winter Q&A here too.

[CpGJuro]

Добавляет возможность иметь глобальные слои GUI, которые являются общими для всех комнат в вашем проекте. На них можно будет размещать экземпляры.

Notepad notebooks with a code in one event will return to us as in older versions? It was super convenient, it was possible to prescribe different functionality in different notebooks, this relieved the long code sorting everything by groups

[YYDan]

@CpGJuro I have no idea how your comment relates to this feature. If you meant to write your own new Feature Request, please do so. There's nothing further to say there.

[YYDan]

Added a lot more content into the description now.