Cameras & expressions

Each player's screen shows part of the world. Your game decides which part with a camera. Without one, every player sees the default view: 340 × 160 world units around the center.

Cameras, visuals, disc paint and HUD styles can also take expressions: small formulas that every player's client works out on each frame it draws, such as "halfway between me and the ball" or "fade in with speed". You declare them once; they follow the match smoothly without any code in your tick handler.

Frame a field

world.camera takes a center and a width and/or height in world units. With both, the area is fitted to the screen; with one, the other follows the screen's shape. Cameras belong to the match, like the world.

// Frame a 600 × 300 field, for everyone.
world.camera({ center: { x: 0, y: 0 }, width: 640, height: 340 });

Expressions

Expressions come from the standard module disko:expr. Its functions have the same names and meanings as disko:math's, but return expressions instead of numbers. Import it as a namespace so the names never clash with disko:math:

// Follow each player's own disc, leaning toward the ball and zooming out
// as they get farther apart. Spectators have no `me`, so `or` gives them
// the ball instead.
const b = expr.disc(ball);

world.camera({
  center: expr.or(expr.lerp(expr.me.position, b.position, 0.3), b.position),
  width: expr.or(
    expr.clamp(
      expr.times(expr.distance(expr.me.position, b.position), 2.5),
      300,
      900,
    ),
    640,
  ),
});

Expressions read:

• expr.disc(disc): a disc as the player sees it: .position, .velocity, .x, .y, .radius, .speed;

• expr.me: the player's own disc (spectators have none);

• expr.time: match time in seconds (it stops while paused);

• expr.screen: the player's screen, .width, .height, .aspect.

When something an expression reads doesn't exist on a frame (a destroyed disc, me for a spectator), the expression has no value. expr.or gives a fallback; otherwise a camera is skipped (the player sees the previous camera, or the default view), a visual is hidden for that frame, and a paint or HUD number uses its default.

Each player uses the newest camera whose audience includes them and that has a value, so one camera can follow every player's own disc.

Visuals and disc paint

Every number in a visual and in disc paint can be an expression, and both take an opacity from 0 to 1:

// A ring under the player's disc that only they see: it grows with their
// speed, and fades from half-transparent when still to opaque at speed.
const disc = expr.disc(body);

world.visual({
  anchor: { body },
  appearance: {
    type: "ring",
    radius: {
      bodyRadius: true,
      gap: expr.plus(3, expr.times(disc.speed, 2)),
    },
    width: 1.5,
    color: "#ffffff",
  },
  opacity: expr.clamp(expr.plus(0.5, expr.times(disc.speed, 0.25)), 0.5, 1),
  order: "behind-body",
  audience: { include: [player] },
});

HUD styles

Numeric HUD styles (sizes, spacing, radius, font size, opacity) take expressions too. The HUD isn't rebuilt each frame; only the value changes:

// A HUD bar that fills over the first 10 seconds of the match. Its width is
// worked out on every player's screen, every frame.
game.on("start", () => {
  ui.hud(
    ui.box({
      style: ui.style({
        width: expr.min(expr.times(expr.time, 20), 200),
        height: 6,
        background: "primary",
      }),
    }),
  );
});