AutoUi for GameMaker

AutoUi is a powerful and flexible UI package built specifically for GameMaker developers who want fast, modular, and highly customizable user interfaces. Designed with both simplicity and scalability in mind, AutoUi allows you to create fully responsive menus, sliders, buttons, lifebars, scroll areas, text inputs, and more—with minimal code and maximum control.

Featuring simple-to-use constructor-based elements, dynamic layout management (horizontal and vertical containers), alignment options, and built-in interactivity, AutoUi makes UI creation intuitive and efficient. Each element automatically calculates its dimensions and positioning, letting you focus on design instead of pixel math.

Whether you're building a full options menu, a character builder, or just a few tooltips, AutoUi’s streamlined architecture adapts to your workflow—AutoUi gives you the tools to build fast and polish faster.

KEY FEATURES

Rapid UI Construction 

• Build interfaces with minimal code using modular constructors like labels, images, sliders, and scrollbars.

• The flexible container system automatically handles padding, alignment, and layout flow without any extra input.  Widgets adapt fluidly to their container's constraints—no manual math or recalculations required.

Tons of built-in functionality

• Built-in tweening, one-line typewriting, full mouse hover/click control, and more are built right under the hood.

Fully Skinnable

• Incredibly easy to customize UI with sprites, fonts, and nine-slices.

• Easily adjust font, padding, indentation, alignment, and formatting on the fly with simple single-line methods.

Full Documentation

• Included is a note document for each element with fully detailed methods, variables, and explanations to make it as easy as possible to understand.

Below are some code > build examples on how simple building your UI can be:

EXAMPLES

The following code shows how all UI with AutoUi is made.  Create an object, and in the Create Event you can initialize the elements.  Then in the Step Event call step(<x>, <y>), and put draw() in the draw event.  That's it!

And in turn, the code creates the following a simple dialogue text:

As you can see, the wrap_width is automatically set.  If we were to change the width of the container, the wrap_width would automatically adjust. The same would happen if we were to change the padding of the container.

Let's look at another small example - a simple tooltip:

Here we're adding multiple elements to the container now, and as you can see they will stack vertically (due to the container's first parameter (AuiDirection.vertical).

And with a simple addition, you can add a nice typewrite effect (with optional parameters to control the speed), and an indent to the description text (the additional lines are highlighted below):

Resulting in:

Let's now look at some simple functions under the hood and create a dialog box!

Hopefully you can start to see how easy it is to create a modular UI, allowing you to change elements individually, add extra padding, or simply adjust the order of the elements without the headache of coding it manually!

Now, let's take a look at another element - the health bar:

All of the tweening speeds, hold timer for the optional secondary orange bar, and tweening values are completely adjustable, too.  No more trying to figure out the math for the current value based on width of the bar!

You can also see how powerful this UI system by looking at this simple options menu made with only ~47 lines of code! (This is one of the example objects available in the package with a detailed explanation for each line of code):

And last but CERTAINLY not least, any of these objects can be placed in a scroller for vertical or horizontal scrolling with full mouse control, snap to item index, and more useful functions!

There are so many features and functions in this package, it's quite difficult to show everything here.  So, if you're still not convinced, feel free to leave a comment with any questions!

Current Element List

(as of 2025/08/04)

• LABEL
  • Text with customizable font (accepts spritefonts and font objects), one-line typewriting, optional nine_slice background with user-set padding  values, and optional indentation.

• IMAGE
  • Show any sprite animated or held on a frame with optional (but very recommended) auto-centering which calculates the position regardless of the origin point.

• CHECKBOX
  • A simple image/text checkbox that is checkable, allowing the user to set the hover frame, non-hover frame, and clicked frame for both checked/unchecked.  You can also set the frame duration the click frame shows upon click, as well as change the orientation of the text from the image (from left to right).

• RADIOBOX/RADIOGROUPS
  • Inheriting the checkbox above, the radiobox has the addition of being able to add to a Radiogroup object which will uncheck all other objects in the group when checked.

• LIFEBAR
  • A simple nine slice background with a nine slice hp bar.  You can set the value, padding of the interior bar, set a tween/speed on value change, and even add a secondary bar behind the main bar (to show something like damage taken)

• SEGMENTED LIFEBAR
  • Similar to above, this one takes a nine slice background and a segment sprite (i.e. a heart sprite), and upon entering the amount of segments, will appropriately space them and subtract/add them similar to the lifebar.

• RECTANGLE
  • A simple rectangle with a start/end indentation.  Useful for dividers, or even hoverable boxes.

• SCOLLBAR
  • A user-set width/height scroll bar that takes a flex container as its content.  Includes mouse support for mouse wheel, clicking the scrollbar and moving it, but also gamepad variability like "scroll_to_next_item", "scroll_to_top", etc.

• SIZED BOX
  • Empty space to add to a container between elements.  You can also use flexcontainer.add_space(<value>) to add this without needing to instantiate this element.

• SLIDER
  • A horizontal/vertical slider that takes a handle sprite and background nine slice with complete mouse support.  You set a min/max value of the slider, and can optionally snap the values by a user-set increment.

• TEXT EDITOR
  • A selectable single-line text editor that allows you to focus, type, delete, add keys to allow/ignore, and other useful features.

• FLEX CONTAINER
  • The main container all other elements must be nested in to function.  This container must be set to a vertical or horizontal direction, and specify the size (the width of a vertical container, and height of a horizontal).  The container will resize to the elements added.
  • However, other than just "containing" elements, you can also play one-shot animations at absolute x/y values (useful for flashy UI effects), set the padding/spacing of the elements within, change the draw anchor position (i.e. if you want the container's bottom left corner drawn at the mouse_pos, you can easy just set_draw_anchor(AuiDrawAnchor.BOTTOMLEFT), and everything will properly offset).

What will I receive?

You will receive a .yymps file you can drag into your GMS2 project.  It requires NO ADDITIONAL THIRD PARTY PACKAGES.  Everything was made in GMS2.  The only files you absolutely need for it to function are the scripts folder.  In the package will also include a NOTES folder with the documentation for each method (although the constructor scripts are well commented, the documentation does add another degree of clarity), as well as a few example objects/sprites that I urge you to look through to understand how the system works.

You can also download a logo kit if you so choose to include the logo in a splash screen anywhere in your game, however this is completely optional.

The license upon purchase allows you to use this package on any commercial or hobby project, but does not allow the reselling or repackaging of the library.

So, what's next?

Well, you tell me!  I'm keen to hear about your thoughts on the package, and what elements you feel are missing from it, as I would love to continue to add free updates.  So let me know in the comments!