Frontend

The game definition is the folder the server runs. The front end is the other half: a gamehoster-frontend/ folder of small, optional snippets, beside the game's backend folders, that the generated client runs in the browser. The page loads that client with one <script> and hands it a canvas with Gamehoster.start. Each snippet runs against the Gamehoster library, which opens the socket, folds each per-viewer delta into a store and interpolates for you. A game that drives its own render loop uses the lower-level Gamehoster.connect instead.

<canvas id="game" width="960" height="600"></canvas>
<script src="https://game.gamehoster.org/asteroids/gamehoster.client.js"></script>
<script>
  Gamehoster.start('game', { name: 'Ada' })
</script>

The whole page: a canvas, the baked client, one start call.

<gamehoster-config-contentRoot>/
  game.gamehoster.org/              a domain
    gamehoster-games/               your games live here
      asteroids/                    one game
        gamehoster-frontend/
          gamehoster-frontend-setup.js              once, on connect
          gamehoster-frontend-render.js             every animation frame
          gamehoster-frontend-update.js             once per server update
          gamehoster-frontend-tick.js               each client tick
          gamehoster-frontend-settings.json         rate limits, mouse capture
          gamehoster-frontend-input-mouse-move.js   one file per input event
          gamehoster-frontend-input-keyboard-space-press.js
        gamehoster-player/
          gamehoster-player-enter.js                a player appears
          gamehoster-player-smooth.js               how it eases each frame
          gamehoster-player-exit.js                 a player leaves your view
          gamehoster-player-predict.js              predict your own object
        gamehoster-entities/
          rock/
            gamehoster-entity-enter.js
            gamehoster-entity-smooth.js
            gamehoster-entity-exit.js

The gamehoster-frontend/ folder and the per-object bodies, inside a game directory under gamehoster-games/.

The gamehoster-frontend/ folder holds the game-wide files below, all optional, plus the per-object bodies that sit beside each object's own schema.

Name	Type	Description
`gamehoster-frontend-setup.js`	file	Runs once on connect. Grab the canvas and cache what the renderer needs.
`gamehoster-frontend-render.js`	file	Runs every animation frame. Read the interpolated world and draw it.
`gamehoster-frontend-update.js`	file	Runs once per server update, after every per-object handler.
`gamehoster-frontend-tick.js`	file	Runs each client tick, for logic paced to ticks rather than frames.
`gamehoster-frontend-settings.json`	file	Front-end settings: mouse capture and per-command rate limits.
`gamehoster-frontend-input-<event>.js`	files	One file per input event, mouse and keyboard. The filename names the event.
`gamehoster-<kind>-enter.js`	file	Beside an object's schema. Runs once when it appears, to seed its persistent data.
`gamehoster-<kind>-smooth.js`	file	Beside an object's schema. Runs each frame, to shape how it eases.
`gamehoster-<kind>-exit.js`	file	Beside an object's schema. Runs once when it disappears.
`gamehoster-player-predict.js`	file	Beside the player schema. Predicts your own object each tick from live input.

Each page below documents one part in full, with a table of members and a worked asteroids example: Game, Instance, Players, Entities, Inputs, Commands and Rendering. The full example is the asteroids front end.

Frontend

Contents