All examples · Frameworks · As Markdown, for AIs

React HUD

What this example shows

The pet is a scene; the bars, the buttons and the flash are React components inside <Game>, from nacatamalon/react. Each side keeps its own rules. The scene's body runs once, so it reads the store with the engine's useStore, which calls a function when the value changes. A component renders again, so it reads it with useGameStore, which returns the value. F and P work from the keyboard too, and the FEED button and the F key go through the same signal.

Watch the render counters: the bars select a value that changes every frame and render every frame; the mood selects hunger > 30 and only renders when the answer flips. Pick values, not objects: the state is changed in place, so (s) => s.items never looks changed and (s) => s.items.length does.

Browser only, for now. The native (desktop) runtime shows only what the engine draws, so a React HUD is not on screen there. If your game will ship natively, build the HUD with the engine: createText, sprites and createNineSlice.

Starting
Starting
—