Type Alias BpxFrameworkConfig

BpxFrameworkConfig: {
    assets?: BpxAssetsToLoad;
    canvasSize?: "64x64" | "128x128" | "256x256";
    debugMode?: {
        available?: boolean;
        forceEnabledOnStart?: boolean;
        fpsDisplay?: {
            color?: BpxRgbColor;
            enabled?: boolean;
            placement?: BpxFpsDisplayPlacement;
        };
    };
    fixedTimestep?: "30fps" | "60fps";
    frameByFrame?: {
        activateOnStart?: boolean;
        available?: boolean;
    };
    gameId: string;
    gamePause?: {
        available?: boolean;
    };
    requireConfirmationOnTabClose?: boolean;
    screenshots?: {
        available?: boolean;
    };
}

The configuration of the BeetPx framework. Passed into BeetPx.start.

Type declaration

  • Optionalassets?: BpxAssetsToLoad

    A list of URLs of assets to load. The URLs might be either relative to the ./public/ directory, or external ones.

    Allowed file extensions:

    • .png – for images,
    • .wav – for music,
    • .flac – for music, smaller files than .wav,
    • .json – for JSON files,
    • .ldtk – a convenience extension support for JSON files with the default extension used by LDtk tool, so you doesn't have to rename them.

    Example

    $x.start({
      // ...
      assets: [
        "spriteshet.png",    // refers to `./public/spriteshet.png`
        "music/track1.flac", // refers to `./public/music/track1.flac`
        "https://the.url/of/level.ldtk",
      ],
    });
  • OptionalcanvasSize?: "64x64" | "128x128" | "256x256"

    The logical canvas size. Not to be mistaken with a size of the HTML Canvas, which the user has no control over.

    During the game, this value (as a BpxVector2d can be obtained with BeetPx.canvasSize.

  • OptionaldebugMode?: {
        available?: boolean;
        forceEnabledOnStart?: boolean;
        fpsDisplay?: {
            color?: BpxRgbColor;
            enabled?: boolean;
            placement?: BpxFpsDisplayPlacement;
        };
    }

    A mode in which you can perform an additional logic, draw helpful markers, etc. When active, the BeetPx.debug returns true.

    Visually, this mode is indicated by an orange border around the game canvas.

    When inactive, the BeetPx.logDebug are not printed.

    Example

    $d.sprite(playerSprite, xy);
    if ($x.debug) {
      $d.rect(xy, playerSprite.size, $rgb_red);
    }
    • Optionalavailable?: boolean

      Whether to allow use to toggle the debug mode (with use of the ; key).

      A recommended approach would be to set it to the negation of BEETPX__IS_PROD.

    • OptionalforceEnabledOnStart?: boolean

      Whether to activate the debug mode from the game start. Useful, when you want to investigate what happens on the very first frame. This setting ignores the persisted state of whether the debug mode was activated the last time the games was run.

    • OptionalfpsDisplay?: {
          color?: BpxRgbColor;
          enabled?: boolean;
          placement?: BpxFpsDisplayPlacement;
      }

      FPS Display shows the rendering FPS in one of the canvas corners, when in enabled and in the debug mode.

      • Optionalcolor?: BpxRgbColor

        The color of the printed FPS on the canvas.

      • Optionalenabled?: boolean

        Whether the FPS Display should be shown in the debug mode.

      • Optionalplacement?: BpxFpsDisplayPlacement

        The placement of the printed FPS on the canvas.

  • OptionalfixedTimestep?: "30fps" | "60fps"

    The desired frequency of update calls. This is a basis for all time-based computations in the game, since BeetPx has no notion of the real time, nor delta time between update calls. The entire framework is based in a fixed timestep computations, where you can expect each game loop iteration to happen after the similar amount of time from the previous one.

    60 FPS games looks smoother, but require more performant machine, if the game logic is computation heavy.

    PleaseThis setting does not imply the rendering FPS, which is decoupled from the update calls.

  • OptionalframeByFrame?: {
        activateOnStart?: boolean;
        available?: boolean;
    }
    • OptionalactivateOnStart?: boolean

      Whether to activate the frame-by-frame mode from the game start. Useful, when you want to investigate what happens on the very first frame.

    • Optionalavailable?: boolean

      Whether to allow use to toggle the frame-by-frame mode (with use of the , key), and (when in that mode) to progress to the next frame (with use of the . key).

      A recommended approach would be to set it to the negation of BEETPX__IS_PROD.

  • gameId: string

    Used for scoping localStorage keys, so two different games won't override their persisted state.

    An example: built-in screenshots feature binds screenshots to the proper game by its gameId.

  • OptionalgamePause?: {
        available?: boolean;
    }

    A feature which allows to toggle a game pause with use of a "menu" button. When active, the timers, animations, and music do not progress, unless configured to ignore the pause.

    This also allows to implement a pause menu.

    Example

    $x.setOnDraw(() => {
      // ...
      if ($x.isPaused) {
        pauseMenu.draw();
      }
    });

    See

    https://github.com/beetrootpaul/beetpx-examples/tree/main/pause-and-restart

    • Optionalavailable?: boolean

      Whether the game pause should be available (and automatically toggled with the "menu" button).

  • OptionalrequireConfirmationOnTabClose?: boolean

    Whether to prevent user from accidentally closing the browser tab with the game running.

    A recommended approach would be to set it to BEETPX__IS_PROD

    Example

    $x.start({
      // ...,
      requireConfirmationOnTabClose: BEETPX__IS_PROD,
    });
  • Optionalscreenshots?: {
        available?: boolean;
    }
    • Optionalavailable?: boolean

      Whether to allow user to take screenshots of the game (with use of the ] key) and access the screenshot browser overlay (with use of the } key).

Settings