Make your game

Drawings

Draw the pitch, the players and the ball with shapes that follow discs, and choose who sees each one.

The world's discs and walls have no look of their own. What players see is what your game draws: shapes that sit on the field or follow a disc.

Draw the pitch

world.draw makes a shape. Shapes belong to the match, so draw them when it starts:

src/pitch.ts

// The pitch: grass, a halfway line and a center circle. Drawn once, at the
// start of the match.
game.on("start", () => {
  world.draw.box({ width: 600, height: 300, fill: GRASS });
  world.draw.line({
    points: [
      { x: 0, y: -150 },
      { x: 0, y: 150 },
    ],
    stroke: LINE,
    strokeWidth: 2,
  });
  world.draw.circle({ radius: 50, stroke: LINE, strokeWidth: 2 });
});

Shape	Draws
`circle`	a circle, or a disc's body when anchored
`box`	a rectangle, with rounded corners
`polygon`	a closed outline through its points
`line`	a line through its points, with arrows
`arc`	part of a circle's outline
`text`	a label that stays upright
`image`	an image from your package
`group`	the shapes inside it, moved together

Every shape takes a position, rotation, scale, fill, stroke, strokeWidth, dash and opacity. A shape without fill is hollow; one without stroke has no outline.

Follow a disc

With an anchor, a shape moves with a disc. A circle without a radius takes the disc's. A group keeps shapes together and in order: later shapes are drawn on top.

src/players.ts

// Players above the pitch: one group, so they are always drawn on top.
let players: Disko.Group | null = null;

game.on("start", () => {
  players = world.draw.group();
});

// Each player's disc gets a body, a ring only they see, and a name.
game.on("player-enter", ({ player }) => {
  const body = world.createDisc({ radius: 15 });
  const color = hsl(player.id * 47, 70, 55);

  player.control(body);
  players?.add(
    world.draw.circle({
      anchor: body,
      radius: 19,
      stroke: withAlpha(color, 0.5),
      strokeWidth: 2,
      audience: { include: [player] },
    }),
    world.draw.circle({
      anchor: body,
      fill: color,
      stroke: darken(color, 0.3),
      strokeWidth: 2,
    }),
    world.draw.text({
      anchor: body,
      position: { x: 0, y: -28 },
      text: player.name,
      size: 13,
      sizing: "screen",
      fill: rgb(255, 255, 255),
    }),
  );
});

Each shape can have an audience: the ring above reaches only its own player.

When a disc is destroyed, the shapes that follow it go too.

Colours

rgb, rgba, hsl and hsla make colours. disko:color mixes them: mix, lighten, darken and withAlpha. The same colours work in chat and in Menu and HUD styles.

Move every frame

Any number can be an expression that every screen works out on each frame, so a shape can spin, pulse or fade with no code in your tick handler:

src/ball.ts

// The ball spins as it rolls: its turn is an expression every screen works
// out on each frame.
game.on("start", () => {
  const ball = world.createDisc({ radius: 10, damping: 0.99 });

  world.draw.group({
    anchor: ball,
    rotation: expr.times(expr.time, 4),
    children: [
      world.draw.circle({ anchor: ball, fill: rgb(255, 255, 255) }),
      world.draw.line({
        points: [
          { x: -10, y: 0 },
          { x: 10, y: 0 },
        ],
        stroke: rgb(30, 30, 30),
      }),
    ],
  });
});

Change and remove

src/banner.ts

// A drawing changes with `update`, and goes with `destroy`.
let banner: Disko.Drawing | null = null;

game.on("start", () => {
  banner = world.draw.text({
    position: { x: 0, y: -170 },
    text: "Kickoff",
    size: 24,
    fill: rgb(255, 214, 102),
  });
});

game.on("tick", ({ tick }) => {
  if (tick === 180) {
    banner?.update({ text: "Play!" });
  } else if (tick === 300) {
    banner?.destroy();
    banner = null;
  }
});

See the physics

Test rooms and the Studio can show the physics view over your drawings: every disc, wall, crossing and joint as disko moves them. Use it to check that what players see matches what collides.

See the world reference for every shape and option.