HUD Builder

Builder overview

Parts — The left “part” selector chooses which logical surface you edit (e.g. main canvas, nested custom canvas, scoreboard, minimap player icons). Each part has its own component list and dimensions (1920×1080 or 3840×2160 canvas presets).

Blank vs default layout — You can start from a full template (stock surfaces + factory registry) or a blank layout that hides stock surfaces from the part menu while still saving a compatible HUD shell.

GSI binding (legacy) — Components can bind data paths for live updates. The <> Triggers & effects panel is the structured way to add chains that sync with the first compatible binding row.

Saving — Saves metadata, HTML bundle, preview capture, and version/sub-URL fields to your local HUD folder.

2.1 HTML & CSS components

These are the flexible building blocks you drag onto a canvas. They are implemented as DOM/HTML layers scaled to the design surface. Types include html-text, html-image, html-svg, and image (depending on generation), plus composite factory types (see below).

Common properties across many components:

• Position & size — X/Y, width/height, alignment (corners / center).
• z-index — Layer order within the same canvas.
• Visibility — Toggle without deleting.
• Crop — Optional insets (left/right/top/bottom) to clip images.
• Team color side — For some assets, tint using CT or T color from HUD metadata.
• GSI binding / trigger chains — Connect live data or app data to visibility and animations.

2.1.1 Text settings (html-text)

Renders rich text on the overlay using web fonts. Typical options:

• Content — Static text or placeholder text driven by bindings.
• Font — Google Fonts family picker (fonts are loaded in the exported HUD).
• Size & color — Font size, fill color.
• Weight / style — Bold / italic.
• Alignment — Left, center, right within the box.

Use cases: titles, stat readouts, round timers, labels paired with icons.

2.1.2 Image settings (html-image / image)

Displays raster images (often PNG/WebP data URLs from the Builder). Options include:

• Source — Embedded image data or URL.
• Corner radius — Rounded corners for framed photos or icons.
• Team color tint — Where supported, multiply with CT/T palette.
• HP fill direction — For player-bar style images: reveal a percentage of the image based on player HP (left-to-right, vertical variants, etc.).
• Minimap player icon — On minimap player layers, Rotate with player aligns the asset with GSI view direction; disable for static numbers or markers.

Use cases: team logos, player photos, weapon icons, decorative frames.

2.1.3 SVG settings (html-svg)

Embeds inline SVG markup for crisp scaling. Often used for icons, simple shapes, and vector masks.

• SVG content — Raw SVG string.
• Team color — Tint with CT/T like images.
• Crop & layout — Same general rules as other HTML components.

Use cases: HUD chrome, vector icons, scalable shapes that track colors.

2.2 Factory components

Factory surfaces are pre-structured regions of the HUD — not generic HTML boxes — mapped to game concepts. You add them from the factory / part menu and often nest them under registry groups (e.g. Team Block root → vertical CT → alive/dead surfaces).

Examples of stock surfaces (design keys)

• Main canvas — main-canvas: freeform layout.
• Scoreboard — scoreboard: team scores, names, logos as configured by components on that surface.
• Minimap — minimap background; minimap-players-ct, minimap-players-t, minimap-shooting, minimap-players-dead for layered icons.
• Player blocks — Vertical/horizontal CT/T, alive vs dead canvases for roster strips.
• Team blocks — Aggregated team layouts (vertical/horizontal CT/T).
• Team eco / utils — team-eco-utils-ct / team-eco-utils-t; the editor can composite both for preview.
• Map veto — map-veto-bo1, map-veto-bo3, map-veto-bo5.
• Other main surfaces — e.g. players-alive, round-mvp, round-wins, player-focus, active-player, player-stats.

Custom canvas groups — You can add user-named canvas groups and nested surfaces; the registry drives sub-dropdowns in the part selector. Factory chips may be dragged into custom groups when the UI allows factory instance placement.

Use cases

• Guarantee correct layering for minimap and scoreboard without manual pixel math across modes.
• Reuse the same logical structure across tournaments while swapping only main-canvas branding.

2.3 Triggers & effects

The Triggers & effects panel defines ordered chains: each row pairs a trigger (when something happens) with an effect (what the visual does). Chains are stored on the component; the first chain row may sync with legacy GSI binding fields.

Effects (all groups)

• Show item (effect.show) — Instant visibility toggle.
• Fade animation (effect.fade) — Directional fade; parameters include direction, start visible/invisible, duration.
• Clock animation (effect.clock) — Wipe / clock-style reveal; clockwise or counter-clockwise, duration, start state.

Keybind trigger — Special case: trigger trigger.keybind with a slot parameter (kb1…kb18) ties the row to HUD keybind polling from the overlay server.

2.3.1 GSI triggers

Live game Triggers in the GSI group read Counter-Strike 2 game state delivered via Game State Integration (HTTP JSON to the app, typically from gamestate_integration_*.cfg). They cover player stats, economy, bomb state, round phases, timers, and match-level fields.

Trigger categories (reference)

Exact runtime behavior depends on HUD renderer logic for each trigger key; use chains to show/hide or animate when the bound value changes or crosses thresholds.

2.3.2 LastHUD API triggers

App data Triggers in the LastHUD API group read data maintained inside LastHUD (not from the game binary): roster profiles, map veto state from the active match, schedule, and keyboard slots.

Categories (reference)

Overlay HTTP API (browser source)

The local HUD server (default port 8080) exposes JSON endpoints the rendered HUD polls. These align with Settings sync and Live Match configuration.

GSI endpoint — Game state is ingested separately (e.g. http://127.0.0.1:31337/api/game-state in the app configuration), not as part of the static HUD file list above.