Responsive & resolutions
How Easelt keeps your GUI pixel-matched to MTA:SA on every screen.
In Easelt Builder, layout is never nailed to pixels — every position and size is stored as a fraction of the screen between 0 and 1, exactly like well-written dxDraw code. That single idea is what lets you design a GUI once, at any resolution, and have it land correctly on every player's screen in MTA:SA.
Fractions, not pixels
Instead of remembering that a panel sits at 768px, you describe it as *40% across* the screen. An x of 0.40 means 40% from the left edge, a y of 0.30 means 30% down from the top, and a width of 0.20 means the element is one-fifth of the screen wide. Because these fractions are relative, they describe the same layout no matter how big the actual screen is — which is precisely how a careful MTA:SA scripter writes dxDraw code by hand.
Fractions range from 0 (the left or top edge) to 1 (the right or bottom edge). A value of 0.5 is dead center on that axis.
How the preview turns fractions into pixels
The preview canvas renders in game-pixel space at whatever resolution you pick. To place an element, Easelt Builder multiplies each fraction by the game dimensions — this is identical to the math MTA runs internally, so what you see is what the game draws.
- Pixel position =
fraction * gameWidth(orgameHeightfor the vertical axis). - Global scale
S = gameHeight / 1080scales stroke widths and text sizes so lines and labels stay proportionally correct at any resolution. - Because both use the same formulas as MTA:SA, the on-screen position in the editor equals the in-game position.
The scale S is anchored to a 1080-pixel-tall reference. At 1080p, S = 1; at 4K (2160 tall), S = 2, so strokes and text double in size to match the denser screen.
The Resolution selector
The Resolution selector lives in the top bar and controls the size of the preview canvas. Switching resolution changes the canvas dimensions while your fractions stay constant — so every element keeps the same relative position, and its on-screen position continues to equal its in-game position.
Changing the resolution never moves your elements in relative terms — only the canvas resizes. The fractions are the source of truth.
A worked example
Here's the same element — anchored at x = 0.40, y = 0.30 — resolved into pixels at two different resolutions. Notice how the fractions never change, only the pixel values that fall out of them.
| Fraction | At 1920×1080 | At 3840×2160 (4K) |
|---|---|---|
| x = 0.40 | 0.40 × 1920 = 768 px | 0.40 × 3840 = 1536 px |
| y = 0.30 | 0.30 × 1080 = 324 px | 0.30 × 2160 = 648 px |
| scale S = gameHeight / 1080 | 1080 / 1080 = 1.0 | 2160 / 1080 = 2.0 |
The element sits at 40% across and 30% down on both screens — visually identical — while the underlying pixels and the text/stroke scale grow with the resolution.
What gets exported
When you export, coordinates come out in the same fraction form you designed with, multiplied by the live screen size. So an element at x = 0.40, y = 0.30 is emitted as:
local sx, sy = guiGetScreenSize()
dxDrawRectangle(0.40 * sx, 0.30 * sy, --[[ width, height, ... ]] )The exported script reads the real screen size with guiGetScreenSize() and keeps your fractions intact, so the generated code reads like the hand-written dxDraw you'd write yourself.
Adapting at runtime
Players can change their in-game resolution while your resource is running. To handle that, the exported script also listens to `onClientRestore` and recomputes sx, sy, and the global scale whenever the screen is restored — so the GUI re-lays itself out and stays correct even if the resolution changes on the fly.
Because the fractions are fixed and sx, sy, and S are recalculated on onClientRestore, you never have to ship separate layouts for separate resolutions.
The takeaway
Design once at any resolution, correct on all. Store layout as fractions, let the preview resolve them into game pixels with MTA's own math, pick whatever resolution you want to design in, and export code that recomputes itself at runtime. Your GUI looks the same to every player, regardless of their screen.