Designing

Elements

Every element type you can place on the canvas, what it is for, and how it behaves.

Everything you place on the canvas in Easelt Builder is an *element*. This page is the complete catalogue of every element type you can add — decorative shapes, text, images, interactive widgets, and containers — plus the rules they all share. Every element is drawn with MTA:SA's dx functions, so what you see in the builder is exactly what your players see in-game (honest WYSIWYG).

How every element behaves

Before the catalogue, here are the rules that apply to *every* element, no matter its type. These hold whether you dropped a rectangle, a button, or a group onto the canvas.

Position and size are stored as screen fractions — never fixed pixels. This is what keeps your GUI responsive, so a layout designed on one resolution lands correctly on another.
Select to style, drag to move, handles to resize. Click an element to select it and open its properties in the inspector, drag its body to reposition, and pull its corner/edge handles to resize.
Rotate handle where available. Elements that support rotation expose a dedicated rotate handle so you can spin the element's box.
Opacity is per element. Each element carries its own opacity, so you can fade any single item independently of the rest.
Any element can become a Blueprint window/panel. Flip the Blueprint option in the inspector to promote any element into a window or panel that frames your layout.

ℹ️

Text is always drawn upright. MTA's dxDrawText has no rotation, so rotating a text or button rotates the *box* — the letters stay horizontal. Easelt Builder shows this honestly rather than faking a tilt that the game can't render.

Shapes

Shapes are non-interactive decoration — the panels, dividers, badges, and accents that give a GUI its structure. They don't respond to clicks in-game; they're there to be seen. Each row below is one shape type you can add.

Shape	What it draws	Notable options
`rectangle`	A plain, flat rectangle.	Fill color, opacity.
`roundedrect`	A rectangle with rounded corners.	Corner rounding, fill color.
`circle`	A filled circle.	Fill color, radius via size.
`ellipse`	A filled ellipse (a stretched circle).	Fill color, width/height.
`ring`	A hollow circle — an annulus (donut).	Ring thickness, fill color.
`pie`	A pie slice / wedge of a circle.	Start angle and stop angle.
`polygon`	An N-sided regular polygon.	Adjustable number of sides.
`star`	A star shape.	Adjustable point count and inner ratio.
`triangle`	A three-sided triangle.	Fill color, size.
`gradientrect`	A rectangle filled with a color gradient.	Gradient colors.
`line`	A single straight segment.	Rotatable; style solid/dashed/dotted with adjustable dash/dot spacing.

💡

Use line for dividers and accents — it's the one shape built to be rotated freely, and its dashed/dotted styles with adjustable spacing make it flexible for separators and framing.

Text

There's one text element, and it's the workhorse of every label, heading, and caption in your GUI.

text

A label. Type any string you want, including Arabic. Remember it always renders upright — rotating it turns the bounding box, not the letters.

Images

Two element types bring artwork into your GUI — one for your own pictures, one for crisp vector glyphs.

image

Shows an imported picture. Drop in your own artwork and place it anywhere on the canvas.

icon

A vector glyph pulled from a built-in Feather-style icon set — sharp at any size, perfect for buttons and labels.

Interactive widgets

Widgets are the elements that *respond to clicks in-game*. These are your buttons, fields, toggles, and meters — the parts of the GUI players actually operate. Each row below is one widget type.

Widget	What it is	Notable options
`button`	A clickable button.	Label text, styling, opacity.
`editbox`	A text-field look for input.	Field styling and placeholder look.
`checkbox`	An on/off box with a label.	Box can sit on the left or right of the label.
`switch`	An on/off toggle.	Toggle state and styling.
`dropdown`	A select list.	The list of choices to pick from.
`progressbar`	A fill bar showing progress.	Label position: inside, left, right, top, bottom, or none.
`volume`	A slider / meter.	Fill mode or center mode; left and right labels.

ℹ️

Because a button contains text, the same upright-text rule applies: rotate it and the box turns while the caption stays horizontal — exactly as it will in MTA:SA.

Container

One element type holds others, letting you build structured, movable panels.

group

A container that holds other elements. Promote it to a Blueprint window or panel to frame a whole section of your GUI, then move the group to reposition everything inside at once.

Blueprint windows and panels

"Blueprint" isn't a separate element — it's a mode you can switch on for *any* element in the inspector. Turning it on makes that element act as a window or panel that frames your layout. A group is the natural choice for this, since it also carries its child elements, but the option is available everywhere.

That's the full element catalogue. Add any of these from the canvas, then select to style, drag to move, and pull the handles to resize — using the rotate handle where it's offered — and tune each element's opacity and Blueprint setting in the inspector.