Plugin API
The KAPLAY‑UI plugin extends your kaplay() instance with a small set of UI‑focused helper methods.
Once added, the plugin injects new functions on your KAPLAY context for creating UI components.
🧩 Adding the Plugin
import kaplay from "kaplay";
import kaplayUI from "kaplay-ui";
const k = kaplay({
plugins: [kaplayUI],
});
After this, your k instance includes:
k.addTextButton(txt, opts?)k.addLabel(txt, opts?)
🟦 k.addTextButton(txt, opts?)
Creates a clickable UI button with built‑in hitbox, outline, and text alignment.
const btn = k.addTextButton("Play");
Parameters
| Name | Type | Description |
|---|---|---|
| txt | string | The button label |
| opts | object (optional) | Styling & behavior options |
Returns
A TextButton game object.
For full option details and defaults, see: ➡️ ./components#textbutton
🟨 k.addLabel(txt, opts?)
Creates a lightweight text element ideal for HUDs and overlays.
const lbl = k.addLabel("Score: 0");
Parameters
| Name | Type | Description |
|---|---|---|
| txt | string | The displayed text |
| opts | object (optional) | Styling options. |
Returns
A Label game object.
For full option details and defaults, see: ➡️ ./components.md#label
✅ Notes
- All UI components behave like standard KAPLAY game objects.
- They support transforms, events, layers, and plugin composition.
- UI elements are intentionally minimal, predictable, and easy to theme.
📦 More Plugin Coming Soon
Future versions of KAPLAY‑UI will extend the plugin with:
- Additional UI creation helpers
- Built‑in layout utilities
- Themable presets (light/dark UI packs)
These will be added here as the library grows.