textmode.js / loading / LoadingScreenRendererContext

Interface: LoadingScreenRendererContext

Context object passed to a loading screen renderer function.

Can be used to create a custom loading screen to fit your needs.

Example

const t = textmode.create({
  width: 800,
  height: 600,
  loadingScreen: {
    message: 'loading...',
    renderer: (ctx) => {
      const { textmodifier: tm, grid, progress, message, transitionOpacity } = ctx;

      // Clear the screen
      tm.background(0, 0, 0, Math.floor(transitionOpacity * 255));

      // Position at top-left corner
      const x = -Math.floor(grid.cols / 2) + 2;
      const y = -Math.floor(grid.rows / 2) + 2;

      tm.push();
      tm.translate(x, y, 0);
      tm.charColor(255, 255, 255, transitionOpacity * 255);

      // Display message
      if (message) {
        for (let i = 0; i < message.length; i++) {
          tm.char(message[i]);
          tm.rect(1, 1);
          tm.translateX(1);
        }
      }

      // Display progress bar
      tm.translate(-message.length, 2, 0);
      const barWidth = 20;
      const filled = Math.floor(progress * barWidth);

      for (let i = 0; i < barWidth; i++) {
        tm.char(i < filled ? '=' : '-');
        tm.rect(1, 1);
        tm.translateX(1);
      }

      tm.pop();
    }
  }
});

Properties

Property	Type	Description
elapsedMs	number	The elapsed time since the loading started, in milliseconds.
errorDetails?	string	Detailed error information, if any.
errorMessage?	string	The error message to display, if any.
frameCount	number	The number of frames rendered since the loading started.
grid	TextmodeGrid	The TextmodeGrid representing the screen grid.
isError	boolean	Indicates if the loading screen is in an error state.
message?	string	The current loading message, if any.
palette	TextmodeColor[]	The palette of colors available for rendering based on the theme.
phases	LoadingPhaseSnapshot[]	The phases of the loading process.
progress	number	The current loading progress (0-1).
textmodifier	Textmodifier	The Textmodifier instance for rendering text and graphics.
theme	LoadingScreenTheme	The current theme of the loading screen.
transitionOpacity	number	The opacity level for transition effects.