@yagejs/ui

In-game UI layout and widgets for the YAGE 2D game engine.

Install

npm install @yagejs/ui

Built on Yoga for Flexbox layout and @pixi/ui for widgets.

Usage

import { Engine } from "@yagejs/core";
import { UIPlugin, UIPanel, Anchor } from "@yagejs/ui";

const engine = new Engine();
engine.use(new UIPlugin());

Build panels, text, buttons, and images with Flexbox:

entity.add(new UIPanel({
  anchor: Anchor.TopCenter,
  direction: "row",
  gap: 16,
}).text("Score: 0", { fontSize: 32, fill: 0xffffff }));

What's in the box

• UIPlugin - UI layer management
• UIPanel - Flexbox container with Yoga layout
• UIText / UIButton / UIImage / UINineSlice - basic widgets
• UIProgressBar / UICheckbox - interactive widgets
• PixiFancyButton, PixiSlider, PixiScrollBox, etc. - @pixi/ui wrappers
• Anchor points - viewport-relative positioning

Docs

Full documentation at yage.dev.

License

MIT