Top-Level Game

Your top-level Sprite is your Game. It's a special Sprite that's called by the platform directly. All other Sprites are children of the Game Sprite.

You define Game (using makeSprite) and its gameProps separately:

import { makeSprite } from "@replay/core";
export const gameProps = {
id: "Game",
size: {
width: 400,
height: 600,
maxHeightMargin: 150,
},
defaultFont: {
name: "Courier",
size: 10,
},
};
export const Game = makeSprite({
init({ device }) {
...
},
render({ state, updateState, device }) {
...
},
});

The Game Sprite requires two specific props, and some optional props (set in gameProps):

  1. an id prop of value "Game"
  2. a size prop, see Game Size
  3. (Optional) a defaultFont prop that applies to all t.text Textures
  4. (Optional) a backgroundColor prop, must be a CSS Level 1 color or 6 char hex (e.g. #ff0000, green)
Edit this page