GML GUI Creator — GameMaker draw_gui Generator

GML GUI Creator

Place elements on a virtual screen, drag them, get ready Draw GUI code for GameMaker

by GanjaViruss & Claude Opus 4.8 & Sonnet 4.6

✦ Built with AI

Pick a tool and click or drag on the screen to draw it · Select: drag = move, green corner handle = resize, arrow keys = nudge · Ctrl+Z undo · drag empty = pan, wheel/pinch = zoom

Screen (GUI resolution)

Preset

Size × px

Snap to grid

Auto anchor on place (recommended)

Sprite library

Drag a sprite onto the screen to place it (or tap it, then tap the screen). Name each one to match your GameMaker asset (e.g. spr_icon).

Import existing code

Paste a Draw GUI snippet and the tool rebuilds it on the canvas. It works out positions by reading your code — including display_get_gui_*() and your own vars — so paste the variable definitions too, not just the draw line.

How import works (read me)

1. Add your sprites first. Put any sprite the code draws into the library above, named exactly as in GameMaker (s_bar). Then the preview shows the real image.

2. Paste the draw call + the variables it needs. The tool can compute: numbers, + - * / ( ), display_get_gui_width()/height(), sprite_get_width()/height(spr), and any var _x = … you defined above the draw line.

What it can't read (anything that only exists while the game runs): arrays like player_weapon[…], function calls like func_draw_bar() / string(), enums like WEAPON_ID.X, and global. values. An element that uses those shows up red at 0,0 with the reason — replace the value with a number (or add the missing var) and re-import, or just drag it into place.

Supported draws: draw_text, draw_text_transformed, draw_rectangle, draw_circle, draw_healthbar, draw_line(_width), draw_sprite, draw_sprite_ext, draw_sprite_stretched(_ext), draw_sprite_part(_ext). Text taken from a variable shows as [expr] — fix the wording after.

Element properties

No element selected. Pick a tool and click the screen to add one.

Elements

Generated Draw GUI code

How to use

Set your GUI resolution (the size you pass to display_set_gui_size, or your window size). Pick a tool, then click or drag on the screen to draw an element — drag while placing a Rect / Line / Circle / HP bar to set its size right away. Use the Select tool to move things, grab the green corner handle to resize, or nudge with arrow keys (Shift = 10 px).

Undo / redo: Ctrl+Z / Ctrl+Y. Duplicate with Ctrl+D, delete with Delete.

Anchors are the trick to clean GUI code: anchor an element to the center or a corner and the generated code uses display_get_gui_width() / display_get_gui_height() instead of hard-coded numbers — so it stays correct at any resolution. With Auto anchor on, new elements pick the nearest corner / edge / center automatically; the small green cross shows where the element is anchored.

The generated code always ends with draw_set_default() so your font / color / alpha / alignment never leak into other draw events.

Sprite library & importing your code

Sprite library: add your sprites (PNG etc.), name them to match your GameMaker assets (spr_icon), then drag a thumbnail onto the screen — or tap it, then tap the screen on mobile. The generated draw_sprite_ext uses that exact name.

Import existing code: paste your Draw GUI code and the tool rebuilds it on the canvas — texts, rectangles, sprites, lines, circles and healthbars, including alignment, colors, alpha and resolution-relative positions like display_get_gui_width()/2. If a sprite name from the code is in the library, its image shows up automatically. Positions that use your own variables can't be resolved and land at 0 — just drag them where they belong.

Hide / show: the 👁 toggle in the Elements list hides an element from both the preview and the generated code — handy for trying variants.