Skip to content

UI

The engine’s UI primitives are the only way to draw text, panels, buttons and bars, each with the house look built in. A raw HTML element inside a game is a lint finding. A game overrides through a variant the engine defines or a className that shows in the diff.

The set: Hud, Panel, Modal; Text, Bar, Icon; Button, Joystick, Tap.

Each one has a story in the Storybook.

UI sits at any level and the engine hoists it to the screen. The level decides what it reads and how long it lives; see the table. This page is the one that cuts across levels, because Panel appears at every one.

A Panel names a slot and an order, never a position. Slots are the four corners, four edges and centre; each stacks its children, so overlap is impossible. A Hud carries a slot Panel to the screen from any level. A Panel with anchor follows its entity in the world.

A Modal draws over the whole screen, from any level. The engine keeps one modal stack and the top one draws, so two chests open at once show one, then the other. A modal pauses the world only when it passes pause.

The engine re-exports nothing from three. A game that needs it imports from @daniel-zarinski/engine/three, so the MCP and a lint rule see every place a game went under the engine.

The samples on Game, Scene, World and Entity show a Panel at each level and a Modal inside an entity.