Building the HUD

What is drawn over the game: scores, bars, menus, modals and pause screens.

Everything drawn over the game is shown on panels of the ui plugin, from values on the rows the seat is sent. Values only the page keeps, a volume or a mute, are in the store.

#Where each piece goes

#Steps

1. Put the value on a row, such as a score field on the player prefab.
2. List ui in the scene's plugins, and store when a screen sets page-only values.
3. Write world.ui: a panel per region, the six keys, and each style. Give a text style's outline, stroke, "join": "round": by default the corners are mitred, and at the sharp points of W, V, A, M and 1 the outline runs out in spikes up to 10 times its width.
4. Write every place and word on the definitions.
5. Draw it in player.client.ts's tick, for the row that is mine, with ui.show(panel, key, make) every frame it should be shown.

"ui": {
  "panels": {
    "hud": { "anchor": "top-left", "at": [16, 16], "size": [200, 24] },
    "pause": { "anchor": "center", "size": [320, 200], "modal": true, "layer": 1, "backdrop": { "color": 0, "alpha": 0.6 } }
  },
  "keys": { "up": "ArrowUp", "down": "ArrowDown", "left": "ArrowLeft", "right": "ArrowRight", "press": ["Enter", " "], "back": "Escape" },
  "styles": { "score": { "fontFamily": "monospace", "fontSize": 20, "fill": 16777215, "stroke": { "color": 0, "width": 3, "join": "round" } } }
}

#Screens

• A screen the game puts up, a pause or a game over, is a kind with an on field; its look shows it while the row says so. Bind the pause key to world.ui's back.
• A menu the player opens, an inventory or a map, is a modal panel with a key; its look shows it while ui.opened(name). The game plays on under it.
• The first thing shown on a modal takes the focus.

Starting values for store keys are the store prefab. A volume screen counts whole steps of the definition's steps and divides. A screen where the player sees and rebinds the controls is Building a controls screen.

#Checking it

1. In <kind>.client.test.ts, read what is shown off the panel by key: ui.panel('hud').getChildByLabel('score').text.
2. Open the game's index.html as in Starting a game, change the value in play, and open and leave each screen with keys and the pointer.