Assets

Assets are the images and sounds your game uses: a texture for the ball, a goal sound, a logo in the Menu. They live in your project folder next to your code, and they ship inside your release.

You add an asset by importing it, just like a module. The import doesn't give you the file's contents. It gives you a small reference you pass to disko. The players' browsers download the file itself only when they need it.

Importing an asset

An asset is packaged only if a module imports it (see What goes into a release), and only with a default import:

import puck from "./art/puck.png";
import goal from "./sounds/goal.ogg";

The value you get is a frozen object such as { kind: "package-asset", name: "art/puck.png" }, where name is the file's path in the project. Importing the same file twice gives the same object.

Only the default import form works. Named imports, import * as, and importing a file just for its side effects are rejected (asset_import_form). You may re-export one, though: export { default as puck } from "./art/puck.png".

Using an asset

Pass the reference wherever disko accepts an asset: disc.setAvatar or player.setAvatar for images on discs, game.playSound for sounds, and ui.image({ asset }) in the Menu or HUD.

game.on("start", () => {
  const ball = world.createDisc({ radius: 10 });

  // An image asset as a disc avatar.
  ball.setAvatar(puck);

  game.on("crossing", () => {
    // An audio asset, positioned at the ball.
    game.playSound(goal, { source: ball });
  });
});

// Images also work in the Menu and HUD.
ui.menu(ui.image({ asset: puck, accessibleName: "Puck" }));

Supported formats

• Extensions must be lowercase, and SVG isn't supported.

• A file's contents must match its extension: a JPEG renamed to .png is rejected (asset_content_mismatch).

• Images can be 1 to 4096 pixels per side (image_dimensions), and each asset at most 16 MiB.