ui

Builds DOM-based game UI overlays, menus, HUD text, and touch controls in ignifx.

Updated Sep 5, 2026
One-click install
npx skills add https://github.com/astrum-forge/ignifx --skill ui-astrum-forge
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui
Source: https://github.com/astrum-forge/ignifx/tree/main/packages/ui/skills/ui
Command: npx skills add https://github.com/astrum-forge/ignifx --skill ui-astrum-forge

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @ignifx/ui, @ignifx/core, @ignifx/input.

What problem does it solve? Game developers using the ignifx engine need a way to build menus, HUDs, dialogs, and touch controls without writing low-level rendering code, and must decide when to use DOM elements versus GPU-drawn text. ## Core Features & Use Cases - DOM Overlay & Layers: Mount React, Svelte, Vue, or plain DOM into named layers over the canvas with css, fit, or dpi scaling modes. - Menus & Navigation: Build keyboard- and gamepad-driven menus with Menu and MenuStack, including sliders, toggles, choices, and input rebinding rows. - GPU Text & World Anchors: Render HudText, WorldText, and WorldText2D on Babylon Lite's text renderer, and attach DOM elements to entities with WorldAnchor. - Use Case: Create a pause menu with a music volume slider and a shadows toggle, wire it to a MenuStack that pauses the game when open, and add a localized HUD readout that updates when the locale changes. ## Quick Start Ask the assistant to add a pause menu with settings rows and a HUD text readout to your ignifx project using @ignifx/ui.

Frequently Asked Questions about ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a pause menu in an ignifx game?▼

Create a Menu with rows of kinds like action, slider, and toggle, then push it onto a MenuStack. Connect the stack's onChanged signal to call app.pause() when a menu is open and app.resume() when the last one closes.

When should I use DOM elements versus HudText in ignifx?▼

Use DOM elements in app.ui layers for menus, dialogs, and responsive HUDs that need real layout and accessibility. Use HudText, WorldText, or WorldText2D only when text must be GPU-drawn, pixel-exact, or visible in captureScreenshot().

Does @ignifx/ui work with React, Svelte, or Vue?▼

Yes, the overlay is a plain absolutely positioned div with named layers, so any framework that mounts into a DOM element works. You mount your framework's root into app.ui.layer(name).element.

How do I add touch controls like a virtual joystick in ignifx?▼

Instantiate VirtualJoystick and VirtualButton with the app and a control name after registering both the input and ui extensions. Bind the virtual paths like <Virtual>/joystick in the game's .input.json exactly as hardware inputs.

Why does my WorldText not render when added mid-game in ignifx?▼

WorldText must exist before app.start() because Babylon Lite drains deferred scene renderables only once at scene registration. Text added later logs IGX-1308 and does not draw; use WorldText2D instead, which can be added at any time.

How do I localize HUD text and menus in ignifx?▼

Load a .i18n.json file through app.i18n.load, then set i18nKey on HudText, WorldText, or WorldText2D so they re-shape on locale change. Menu labels accept functions that are re-read on every refresh(), so they can call app.i18n.t().