Scenes in TCJSgame

Most games have multiple scenes, such as a title screen, main gameplay, pause menu, or game over screen. TCJSgame v3 makes it easy to manage scenes using the scene property of the Display object.

Every Component or TileMap added to the game has a scene value. During each frame, the engine only updates and draws components that match the active display.scene. By switching the scene number, you can change the entire screen instantly without destroying or recreating objects.

Example: Switching Scenes

let display = new Display();
display.start();

// Scene 0: Title Screen
let titleText = new Component("30px", "Consolas", "blue", 50, 100, "text");
titleText.text = "Press ENTER to Start";
display.add(titleText, 0);

// Scene 1: Main Game
let player = new Component(30, 30, "red", 50, 50, "rect");
display.add(player, 1);

function update() {
  // Switch to game when ENTER is pressed
  if (display.keys[13]) {
    display.scene = 1;
  }
}
    

Example: Adding a Game Over Screen

let gameOver = new Component("40px", "Arial", "black", 70, 120, "text");
gameOver.text = "Game Over!";
display.add(gameOver, 2);

// Later in the game:
display.scene = 2;  // Show game over
    

This makes it easy to structure your game into logical parts. For example:

• scene = 0 → Main Menu
• scene = 1 → Gameplay
• scene = 2 → Pause Menu
• scene = 3 → Game Over