### Create a Start Button Screen Element

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/05-user-interface/02-screen-elements.mdx

This example shows how to create a custom screen element for a start button. It includes handling hover and click events, and assigning graphics. Ensure 'Resources.StartButtonBackground' and 'Resources.StartButtonHovered' are properly imported.

```typescript
import * as ex from 'excalibur'
import Resources from './resources'

class StartButton extends ex.ScreenElement {
  constructor() {
    super({
      x: 50,
      y: 50,
    })
  }

  onInitialize() {
    this.graphics.add('idle', Resources.StartButtonBackground)
    this.graphics.add('hover', Resources.StartButtonHovered)

    this.on('pointerup', () => {
      alert("I've been clicked")
    })

    this.on('pointerenter', () => {
      this.graphics.use('hover')
    })

    this.on('pointerleave', () => {
      this.graphics.use('idle')
    })
  }
}

game.add(new StartButton())
game.start()
```

--------------------------------

### Engine Start Promise

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/12-other/99-utilities.mdx

Handle the promise returned by `Engine.start()` to execute initialization logic once the game has finished loading. This is a common pattern for asynchronous setup.

```javascript
const game = new ex.Engine();
// perform start-up logic once game is ready
game.start().then(function () {
  // start-up & initialization logic
});
```

--------------------------------

### Create and Start Excalibur Game

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/02-fundamentals/04-architecture.mdx

Instantiate the Excalibur engine with configuration options and start the game loop. The `start()` method returns a promise that resolves when the game is ready.

```typescript
/// <reference path="../src/engine/excalibur.d.ts" />

// ---cut---
const game = new ex.Engine({
  width: 800, // the width of the canvas
  height: 600, // the height of the canvas
  canvasElementId: '', // the DOM canvas element ID, if you are providing your own
  displayMode: ex.DisplayMode.FitScreen, // the display mode
  pointerScope: ex.PointerScope.Document // the scope of capturing pointer (mouse/touch) events
});
// call game.start, which is a Promise
game.start().then(function () {
  // ready, set, go!
});
```

--------------------------------

### Start Local Development Server

Source: https://github.com/excaliburjs/excalibur/blob/main/site/README.md

Starts a local development server for live preview. Changes are reflected without a server restart.

```bash
yarn start
```

--------------------------------

### Install Excalibur Tiled Plugin

Source: https://github.com/excaliburjs/excalibur/blob/main/site/blog/2022-01-22-excalibur-0-25-2-released/2022-01-22-excalibur-0-25-2-released.md

Install the Excalibur Tiled plugin using npm.

```bash
> npm install @excaliburjs/plugin-tiled
```

--------------------------------

### Install Aseprite Plugin

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/13-plugins/15-aseprite-plugin.mdx

Install the Aseprite plugin using npm. This is the first step to enable Aseprite support in your project.

```bash
> npm install @excaliburjs/plugin-aseprite
```

--------------------------------

### Install Tiled Plugin

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/13-plugins/15-tiled-plugin.mdx

Install the Tiled plugin using npm. This command ensures the exact version is installed.

```sh
npm install --save-exact @excaliburjs/plugin-tiled
```

--------------------------------

### Start Local Playground

Source: https://github.com/excaliburjs/excalibur/blob/main/site/README.md

Starts the Playground locally. This is useful for local documentation development.

```bash
cd playground
npm start
```

--------------------------------

### Start Playground with Production BASE_URL

Source: https://github.com/excaliburjs/excalibur/blob/main/playground/README.md

Starts the Playground locally with the `BASE_URL` set to `/playground`, simulating production routing. Run this command from the `playground` directory.

```sh
BASE_URL=/playground npm run start
```

--------------------------------

### Install Excalibur and TypeScript

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/01-getting-started/03-bundlers.mdx

Install Excalibur and TypeScript packages using npm.

```bash
npm install excalibur typescript
```

--------------------------------

### Install Dependencies and Playwright

Source: https://github.com/excaliburjs/excalibur/blob/main/README.md

Run these commands after cloning the repository to install project dependencies and Playwright with system dependencies. The `--with-deps` flag is important for ensuring all necessary system libraries are installed.

```bash
npm install
npx playwright install --with-deps
```

--------------------------------

### Start Excalibur Engine

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/00-tutorials/BreakOut/00-breakout.mdx

Call the start() method on the game instance to initialize and begin running the Excalibur engine. This must be called after configuration.

```typescript
// Start the engine to begin the game.
game.start();
```

--------------------------------

### Install Excalibur Dev Tools

Source: https://github.com/excaliburjs/excalibur/blob/main/site/blog/2022-01-22-excalibur-0-25-2-released/2022-01-22-excalibur-0-25-2-released.md

Install the Excalibur dev tools package using npm.

```bash
> npm install @excaliburjs/dev-tools
```

--------------------------------

### Install Excalibur via Nuget

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/01-getting-started/01-installation.mdx

Use this command to install the Excalibur package if you are working within a .NET project environment.

```bash
Install-Package Excalibur
```

--------------------------------

### Initialize Capacitor App

Source: https://github.com/excaliburjs/excalibur/blob/main/site/blog/2022-02-21-android-games-capacitor/2022-02-21-android-games-capacitor.md

Use this command to start a new Capacitor project. Follow the on-screen prompts for configuration.

```bash
npm init @capacitor/app
```

--------------------------------

### Load Resources Before Game Start

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/00-tutorials/Excalibird/11-step-images-graphics.mdx

Create an `ex.Loader` instance with the values from your resources object. Start the game with the loader to display a loading bar.

```typescript
// main.ts
...
const loader = new ex.Loader(Object.values(Resources));
game.start(loader).then(() => {
  game.goToScene('Level');
});
```

--------------------------------

### Install Excalibur via npm

Source: https://github.com/excaliburjs/excalibur/blob/main/site/blog/2024-12-13-excalibur-0-30-0-released/2024-12-13-excalibur-0-30-0-released.md

Use this command to install the latest version of Excalibur.js.

```sh
npm install excalibur@0.30.1
```

--------------------------------

### Install Excalibur v0.25.2

Source: https://github.com/excaliburjs/excalibur/blob/main/site/blog/2022-01-22-excalibur-0-25-2-released/2022-01-22-excalibur-0-25-2-released.md

Install the specified version of Excalibur using npm.

```bash
> npm install excalibur@0.25.2
```

--------------------------------

### Install Dependencies

Source: https://github.com/excaliburjs/excalibur/blob/main/site/README.md

Installs project dependencies using Yarn. Run this command after cloning the repository.

```bash
yarn
```

--------------------------------

### Install Excalibur Engine

Source: https://github.com/excaliburjs/excalibur/blob/main/site/blog/2022-02-21-android-games-capacitor/2022-02-21-android-games-capacitor.md

Installs the Excalibur game engine as a project dependency.

```bash
> npm install excalibur --save-exact
```

--------------------------------

### Run Sandbox Server

Source: https://github.com/excaliburjs/excalibur/blob/main/sandbox/tests/iframe/xorigin.html

Execute this command to start a sandbox server for testing.

```bash
npm run sandbox
```

--------------------------------

### Install TypeScript and Initialize tsconfig.json

Source: https://github.com/excaliburjs/excalibur/blob/main/site/blog/2022-02-21-android-games-capacitor/2022-02-21-android-games-capacitor.md

Installs TypeScript as a development dependency and initializes a tsconfig.json file for TypeScript configuration.

```bash
> npm install typescript --save-dev --save-exact
> npx tsc --init
```

--------------------------------

### Starting Scene Transition Configuration

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/02-fundamentals/05-transitions.mdx

Configure a custom transition for the initial scene load using `Engine.start`. This allows for special effects or matching colors on game start.

```typescript
game.start('scene1',
{
  inTransition: startTransition
});

```

--------------------------------

### Starting Game with Centralized Loader

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/02-fundamentals/06-loaders.mdx

Initialize the Excalibur engine and start the game using the loader defined in your `resources.ts` file.

```typescript
// main.ts
import * as ex from 'excalibur';
import { loader } from './resources';

const game = new ex.Engine({...});

game.start(loader);
```

--------------------------------

### Initialize Excalibur Engine

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/04-graphics/04.7-tint.mdx

Sets up a basic Excalibur engine instance. This is a common starting point for Excalibur applications.

```typescript
const game = new ex.Engine({
  width: 120, // the width of the canvas
  height: 120, // the height of the canvas
  displayMode: ex.DisplayMode.Fixed, // the display mode
  pixelArt: true,
});
```

--------------------------------

### Markdown Link Example

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/101-style-guide.mdx

Demonstrates creating Markdown links using URL paths or relative file paths.

```markdown
Let's see how to [Create a page](/create-a-page).
```

```markdown
Let's see how to [Create a page](./create-a-page.md).
```

--------------------------------

### Install LDtk Plugin

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/13-plugins/15-ldtk-plugin.mdx

Install the LDtk plugin using npm. This is the first step to integrating LDtk maps into your Excalibur project.

```sh
npm install @excaliburjs/plugin-ldtk
```

--------------------------------

### Register and Start Scene

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/00-tutorials/Excalibird/06-step-refactor-to-scene.mdx

In the main game file, register the custom scene with the Excalibur engine and then navigate to it after the game has started.

```typescript
// main.ts
import * as ex from 'excalibur';
import { Level } from './level';

const game = new ex.Engine({
  ... 
  scenes: { Level: Level }
});

game.start().then(() => {
  game.goToScene('Level');
});
```

--------------------------------

### Initialize and Start Excalibur Engine

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/00-tutorials/Excalibird/01-step-start-engine.mdx

Creates and starts a new Excalibur Engine instance. Configure width, height, background color, pixel art, pixel ratio, and display mode.

```typescript
// main.ts
import * as ex from 'excalibur';

const game = new ex.Engine({
  width: 400,
  height: 500,
  backgroundColor: ex.Color.fromHex("#54C0CA"),
  pixelArt: true,
  pixelRatio: 2,
  displayMode: ex.DisplayMode.FitScreen
});

game.start();
```

--------------------------------

### Start an Action with moveTo

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/00-tutorials/How-to's/02-Actions Primer/02-actions-basics.mdx

Initiates a `MoveTo` action on an actor. This is one of the two common ways to start an action in Excalibur.

```typescript
actor.actions.moveTo(vec(100,100), 200);
```

--------------------------------

### Sprite Fusion Plugin Installation and Usage

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/13-plugins/15-spritefusion-plugin.mdx

Instructions on how to install the plugin and integrate it into your Excalibur game, including loading resources and adding maps to scenes.

```APIDOC
## Installation

```sh
npm install @excaliburjs/plugin-spritefusion
```

## Basic Usage

Create your resource, load it, then add it to your scene!

```typescript
const game = new ex.Engine({...});

const spriteFusionMap = new SpriteFusionResource({
    mapPath: './map/map.json',
    spritesheetPath: './map/spritesheet.png'
});

const loader = new ex.Loader([spriteFusionMap]);

game.start(loader).then(() => {
    spriteFusionMap.addToScene(game.currentScene);
});
```
```

--------------------------------

### Complete ExcaliburJS Serialization Example

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/12-other/15-Serialization.mdx

A comprehensive example demonstrating ExcaliburJS serialization. It covers initializing the serializer, registering custom actors and graphics, creating and serializing an actor, and then deserializing it back into the game.

```typescript
// @include: ex
const game = new ex.Engine({
  width: 800, // the width of the canvas
  height: 600, // the height of the canvas
  displayMode: ex.DisplayMode.Fixed, // the display mode
  pixelArt: true,
});
// ---cut---

// Initialize
ex.Serializer.init();

// Register custom actors
class Player extends ex.Actor { /* ... */ }
ex.Serializer.registerCustomActor(Player);

// Load and register graphics
const spriteSheet = new ex.ImageSource('./player.png');
spriteSheet.load();
const playerSprite = spriteSheet.toSprite();
ex.Serializer.registerGraphic('player-sprite', playerSprite);

// Create and serialize an actor
const player = new Player();
player.pos.x = 100;
player.pos.y = 200;
player.graphics.use(playerSprite);

const savedActorData = ex.Serializer.serializeActor(player);
console.log('Saved:', savedActorData);

// Later: deserialize
const loadedPlayer:ex.Entity = ex.Serializer.deserializeActor(savedActorData) as ex.Entity;
game.add(loadedPlayer);
```

--------------------------------

### Load ImageSource during Game Start

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/06-resources/05-image-source.mdx

Instantiate an ImageSource and add it to the Excalibur Loader before starting the game. Loaded resources are available after game.start() resolves.

```typescript
const game = new ex.Engine({ width: 800, height: 600 })

const image = new ex.ImageSource('./img/myimg.png')

const loader = new ex.Loader()
loader.addResource(image)

game.start(loader).then(() => {
  // resources like ImageSource loaded before game started
})
```

--------------------------------

### Simple Material Playground Example

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/04-graphics/04.2-material.mdx

A basic Excalibur playground example demonstrating the usage of a simple custom material. This snippet is intended to be run within the Excalibur playground environment.

```typescript
import SimpleMaterial from '!!raw-loader!./examples/simple-material.ts';
```

--------------------------------

### package.json Scripts for Parcel Development and Build

Source: https://github.com/excaliburjs/excalibur/blob/main/site/blog/2022-02-21-android-games-capacitor/2022-02-21-android-games-capacitor.md

Defines npm scripts for starting a development server with Parcel and building the project for production. The 'start' script uses 'game/index.html' as the entry point and outputs to the 'www' directory, while 'build' performs a production build.

```json
{
  "name": "my-cool-game",
  "scripts": {
    "start": "parcel game/index.html --dist-dir www",
    "typecheck": "tsc -p . --noEmit",
    "build": "parcel build game/index.html --dist-dir www"
  }
  ...
}
```

--------------------------------

### Example Path Output

Source: https://github.com/excaliburjs/excalibur/blob/main/site/blog/2024-05-19-pathfiinding-part1/pathfindingpart1.md

This is an example of the expected output array when a path is found between two nodes, excluding the starting node.

```typescript
//[Node C, Node D]
```

--------------------------------

### Combine Sprite Sheet, Animations, and Graphics Registration

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/00-tutorials/Excalibird/12-step-bird-graphics.mdx

This comprehensive example integrates sprite sheet creation, 'up' and 'down' animations, a 'start' sprite, and registers them all with the actor's graphics. It also sets the initial graphic to the 'start' sprite.

```typescript
// bird.ts

export class Bird extends ex.Actor {
  ...
  startSprite!: ex.Sprite;
  upAnimation!: ex.Animation;
  downAnimation!: ex.Animation;
  ...
  override onInitialize(): void {
    // Slice up image into a sprite sheet
    const spriteSheet = ex.SpriteSheet.fromImageSource({
        image: Resources.BirdImage,
        grid: {
            rows: 1,
            columns: 4,
            spriteWidth: 32,
            spriteHeight: 32,
        }
    });

    // Animation to play going up on tap
    this.upAnimation = ex.Animation.fromSpriteSheet(
        spriteSheet,
        [2, 1, 0], // 3rd frame, then 2nd, then first
        150, // 150ms for each frame
        ex.AnimationStrategy.Freeze);

    // Animation to play going down
    this.downAnimation = ex.Animation.fromSpriteSheet(
        spriteSheet,
        [0, 1, 2],
        150,
        ex.AnimationStrategy.Freeze);

    // Register animations by name
    this.graphics.add('down', this.downAnimation);
    this.graphics.add('up', this.upAnimation);
    this.graphics.add('start', this.startSprite);

    // Set the default sprite to use
    this.graphics.use(this.startSprite);
    ...
    this.on('exitviewport', () => {
        this.level.triggerGameOver();
    });
  }
}
...
```

--------------------------------

### Initialize Excalibur Project

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/00-z-quick-start.mdx

Use this command to create a new Excalibur project with the latest template. This sets up your project structure and necessary dependencies.

```bash
npm init excalibur@latest
```

--------------------------------

### Create a new Excalibur project with CLI

Source: https://github.com/excaliburjs/excalibur/blob/main/site/blog/2024-12-13-excalibur-0-30-0-released/2024-12-13-excalibur-0-30-0-released.md

Use the Excalibur CLI to quickly bootstrap a new game project. This command initiates the project setup process.

```sh
npx create-excalibur@latest
```

--------------------------------

### Perform Breadth-First Search (BFS) Traversal

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/09-math/07-graph.mdx

Example of initiating a Breadth-First Search starting from a specified node to explore the graph layer by layer.

```typescript
// Create and populate your graph first
const visitedNodeIds = graph.bfs(startNode);
```

--------------------------------

### Perform Depth-First Search (DFS) Traversal

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/09-math/07-graph.mdx

Example of initiating a Depth-First Search starting from a specified node to explore the graph by going as deep as possible along each branch.

```typescript
// Create and populate your graph first
const visitedNodeIds = graph.dfs(startNode);
```

--------------------------------

### Complete Ground Actor Class

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/00-tutorials/Excalibird/14-step-ground-graphics.mdx

Defines the `Ground` actor class, including its sprite initialization, tiling setup, and scrolling logic. It also provides methods to start and stop the ground's movement.

```typescript
// ground.ts
export class Ground extends ex.Actor {
    groundSprite = Resources.GroundImage.toSprite();
    moving = false;
    constructor(pos: ex.Vector) {
        super({
            pos,
            anchor: ex.vec(0, 0),
            height: 64,
            width: 400,
            z: 1
        })
    }

    onInitialize(engine: ex.Engine): void {
        this.groundSprite.sourceView.width = engine.screen.drawWidth;
        this.groundSprite.destSize.width = engine.screen.drawWidth;
        this.graphics.use(this.groundSprite);
    }

    onPostUpdate(_engine: ex.Engine, elapsedMs: number): void {
        if (!this.moving) return;
        this.groundSprite.sourceView.x += Config.PipeSpeed * (elapsedMs / 1000);
        this.groundSprite.sourceView.x = this.groundSprite.sourceView.x % Resources.GroundImage.width;
    }

    start() {
        this.moving = true;
    }

    stop() {
        this.moving = false;
    }
}
```

--------------------------------

### Get and Use a Single Sprite Frame

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/00-tutorials/Excalibird/12-step-bird-graphics.mdx

Extracts a single frame from a sprite sheet as an `ex.Sprite` using `spriteSheet.getSprite(column, row)` and registers it with the actor's graphics. This is useful for static poses or starting frames.

```typescript
// bird.ts

export class Bird extends ex.Actor {
  ...
  startSprite!: ex.Sprite;
  ...
  override onInitialize(): void {
    ...
    this.startSprite = spriteSheet.getSprite(1, 0);
    ...
    this.graphics.add('start', this.startSprite);

    this.graphics.use('start');
    ...
  }
}
...
```

--------------------------------

### Query Gamepad Axis Input

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/11-input/10.4-gamepad.mdx

Enable gamepad support and query axis values during the update loop. This example shows how to get the value of the left stick's X-axis and log a message when it exceeds a threshold.

```javascript
// enable gamepad support
engine.input.gamepads.enabled = true;
// query gamepad on update
engine.on('update', function(ev) {
  // access any gamepad by index
  const axisValue =  = engine.input.gamepads.at(0).getAxes(ex.Axes.LeftStickX));
  if (axisValue > 0.5) {
    ex.Logger.getInstance().info('Move right', axisValue);
  }
});
// subscribe to axis events
engine.input.gamepads.at(0).on('axis', function(ev) {
  ex.Logger.getInstance().info(ev.axis, ev.value);
});
```

--------------------------------

### Serve current directory with npx serve

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/06-resources/05-resources.mdx

Use the 'serve' NPM package to quickly start a web server for your project files. This is necessary for the Excalibur asset loader to function correctly.

```bash
# Serve the current directory
npx serve .

# Serve a folder
npx serve ./dist
```

--------------------------------

### Install Excalibur Dependency

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/00-tutorials/Excalibird/00-step-ts-env.mdx

Install the Excalibur game engine as a regular npm dependency.

```sh
npm install excalibur --save-exact
```

--------------------------------

### Install Parcel Dev Dependency

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/01-getting-started/03-bundlers.mdx

Install Parcel bundler as a development dependency using npm.

```bash
npm install parcel-bundler --save-dev
```

--------------------------------

### Bundle Excalibur with Deno

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/01-getting-started/03-bundlers.mdx

Use Deno to create a bundled version of Excalibur for direct use in HTML.

```bash
deno bundle https://esm.sh/excalibur excalibur.bundle.js
```

--------------------------------

### Navigate to Scene with Options

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/100-migrations.mdx

The `ex.Engine.goToScene` method now accepts a second argument of type `GoToOptions` for scene activation data and transitions. This example demonstrates how to pass these options.

```typescript
game.goToScene('myscene', {
  /**
   * Optionally supply scene activation data passed to Scene.onActivate
  */
  sceneActivationData?: TActivationData,
  /**
   * Optionally supply destination scene "in" transition, this will override any previously defined transition
  */
  destinationIn?: Transition,
  /**
   * Optionally supply source scene "out" transition, this will override any previously defined transition
  */
  sourceOut?: Transition,
  /**
   * Optionally supply a different loader for the destination scene, this will override any previously defined loader
  */
  loader?: DefaultLoader
});
```

--------------------------------

### Load and Play Sound - Excalibur.js

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/06-resources/05-sound.mdx

Instantiate a Sound with primary and fallback file paths. Load it using the Loader and play it at a specific volume.

```typescript
const game = new Engine({...});
const sound = new Sound('./path/to/my.mp3', './path/to/fallback.wav');

const loader = new Loader([sound]);
await game.start(loader);

sound.play(0.5);
```

--------------------------------

### Get Global Matrix from TransformComponent

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/100-migrations.mdx

To get the global matrix, access the `TransformComponent` and then its `matrix` property.

```typescript
const actor = new ex.Actor({...});
const transform = actor.get(TransformComponent);
const matrix = transform.get().matrix;
```

--------------------------------

### Install Parcel for Project Bundling

Source: https://github.com/excaliburjs/excalibur/blob/main/site/blog/2022-02-21-android-games-capacitor/2022-02-21-android-games-capacitor.md

Installs Parcel, a zero-configuration web application bundler, as a development dependency.

```bash
> npm install parcel --save-dev --save-exact
```

--------------------------------

### Initialize Excalibur Tilemaps

Source: https://github.com/excaliburjs/excalibur/blob/main/site/blog/2025-08-24-dual-tilemap/dual tilemap autotiling.md

Sets up two Tilemaps, `worldMap` and `meshMap`, with specified dimensions and tile sizes. Positions and layers the Tilemaps, loads assets, and adds them to the game. Finally, it centers the camera on the `worldMap`.

```typescript
const worldMap = new TileMap({
  columns: 10,
  rows: 10,
  tileWidth: 16,
  tileHeight: 16,
});

// Note: the meshMap needs to 'overlap' the world map by one tile, you'll see what later
const meshMap = new TileMap({
  columns: 11,
  rows: 11,
  tileWidth: 16,
  tileHeight: 16,
});

// Position the Tilemaps
worldMap.pos = vec(0, 0);
worldMap.z = 0;

// Note: the mesh Tilemap's position is half a tile offset; this is important
meshMap.pos = vec(-8, -8);
meshMap.z = 1;

// Load Assets and add Tilemaps to game
await game.start(loader);
game.add(worldMap);
game.add(meshMap);

//move camera and center on the Tilemap
game.currentScene.camera.pos = vec(16 * 5, 16 * 5);
game.currentScene.camera.zoom = 1.25;
```

--------------------------------

### Detecting Collision Start

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/10-physics/08-collision-events.mdx

Fired when two physics bodies first start colliding. Useful for detecting landings or pickups.

```typescript
actor.on('collisionstart', () => {...})
```

```typescript
actor.body.collider.on('collisionstart', () => {...})
```

--------------------------------

### Quick Start: Pause and Resume Scene

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/12-other/12-pausing.mdx

Demonstrates how to create a pauseable actor, add it to the scene, and then pause and resume the entire scene.

```typescript
let scene = game.currentScene;
// ---cut---

// Create an actor that can be paused
const player = new ex.Actor({ x: 100, y: 100, canPause: true });
scene.add(player);

// Pause the scene
scene.pause();

// Resume the scene
scene.resume();
```

--------------------------------

### Interactive Scene Transition Example

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/02-fundamentals/05-transitions.mdx

This example demonstrates a scene transition effect. Click the canvas to trigger the transition between scenes.

```typescript
import TransitionExample from '!!raw-loader!./examples/scene-transitions.ts';

// The actual code for the TransitionExample would be here, likely involving scene setup and game logic.
```

--------------------------------

### JSON Example: Pathfinding Data Attributes

Source: https://github.com/excaliburjs/excalibur/blob/main/site/blog/2025-11-24-spritefusion-upate/Sprite Fusion Tile Attributes.mdx

Example of tile attributes for pathfinding, indicating a node, its connections, and traversal cost.

```json
{
  "node": true,
  "connections": [12, 45, 67],
  "cost": 2
}
```

--------------------------------

### Configure Physics in Engine Constructor

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/100-migrations.mdx

Physics configuration has moved from `ex.Physics` static properties to the `ex.Engine` constructor. This example shows how to set up the physics solver, gravity, and arcade-specific settings.

```typescript
const engine = new ex.Engine({
  ... 
  physics: {
    solver: ex.SolverStrategy.Realistic,
    gravity: ex.vec(0, 20),
    arcade: {
      contactSolveBias: ex.ContactSolveBias.VerticalFirst
    },
  }
})
```

--------------------------------

### Install SpriteFusion Plugin

Source: https://github.com/excaliburjs/excalibur/blob/main/site/blog/2025-11-24-spritefusion-upate/Sprite Fusion Tile Attributes.mdx

Install the SpriteFusion plugin using npm. This is the first step to integrating SpriteFusion maps into your ExcaliburJS project.

```bash
npm install @excaliburjs/plugin-spritefusion
```

--------------------------------

### Initialize Excalibur Engine

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/00-tutorials/BreakOut/00-breakout.mdx

Create an instance of the Excalibur Engine, specifying the desired game dimensions. The game will fit to the screen if no dimensions are provided.

```typescript
// Create an instance of the engine.
// I'm specifying that the game be 800 pixels wide by 600 pixels tall.
// If no dimensions are specified the game will fit to the screen.
const game = new Engine({
  width: 800,
  height: 600,
});
```

--------------------------------

### Build Playground for Subdirectory Deployment

Source: https://github.com/excaliburjs/excalibur/blob/main/playground/README.md

Builds the Playground to a `dist/playground` directory for testing deployment in a subdirectory. Run this command from the `playground` directory.

```sh
npm run build:dev
```

--------------------------------

### Create and Start a Repeating Timer

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/12-other/11-timers.mdx

Create a timer that repeats indefinitely at a set interval. Timers must be added to a scene and explicitly started.

```typescript
const timer = new ex.Timer({
  fcn: () => console.log('Every 100 ms'),
  repeats: true,
  interval: 100,
})

game.currentScene.add(timer)

timer.start()
```

--------------------------------

### Scene Raycasting Example

Source: https://github.com/excaliburjs/excalibur/blob/main/site/docs/09-math/07-ray.mdx

Demonstrates how to create a Ray and perform a raycast against all colliders in the current scene or a custom scene.

```typescript
const game = new ex.Engine({...});
game.start();


const ray = new ex.Ray(ex.vec(100, 100), ex.Vector.Right);
game.currentScene.physics.rayCast(ray, {...});

// or in a custom scene
class MyScene extends ex.Scene {

  someRayTestMethod() {

    const ray = new ex.Ray(ex.vec(100, 100), ex.Vector.Right);
    this.physics.rayCast(ray, {...});
  }
}
```

--------------------------------

### JSON Example: Quest Marker Attributes

Source: https://github.com/excaliburjs/excalibur/blob/main/site/blog/2025-11-24-spritefusion-upate/Sprite Fusion Tile Attributes.mdx

Example of tile attributes for a quest marker, indicating an NPC, dialog trigger, and required items.

```json
{
  "npc": "merchant",
  "dialog": "quest_intro",
  "items": ["potion", "map"]
}
```

--------------------------------

### JSON Example: Environmental Effect Attributes

Source: https://github.com/excaliburjs/excalibur/blob/main/site/blog/2025-11-24-spritefusion-upate/Sprite Fusion Tile Attributes.mdx

Example of tile attributes defining an environmental hazard, specifying its type, damage, and damage interval.

```json
{
  "hazard": "lava",
  "damage": 10,
  "interval": 1000
}
```

--------------------------------

### Excalibur Game Implementation with Input Handling

Source: https://github.com/excaliburjs/excalibur/blob/main/site/blog/2022-02-21-android-games-capacitor/2022-02-21-android-games-capacitor.md

Initializes an Excalibur engine, loads an image asset, and sets up an actor that follows the player's pointer movement. The actor's rotation is adjusted to match the direction of movement.

```typescript
import { Actor, DisplayMode, Engine, Input, Loader, ImageSource } from "excalibur";

const game = new Engine({
    displayMode: DisplayMode.FillScreen,
    pointerScope: Input.PointerScope.Canvas
});

const sword = new ImageSource('assets/sword.png');
const loader = new Loader([sword]);

game.start(loader).then(() => {
    game.input.pointers.primary.on('move', event => {
        const delta =  event.worldPos.sub(actor.pos);
        actor.vel = delta;
        // Original asset is at a 45 degree angle need to adjust
        actor.rotation = delta.toAngle() + Math.PI/4;
    });

    const actor = new Actor({
        x: game.halfDrawWidth,
        y: game.halfDrawHeight,
        width: 40,
        height: 40
    });
    actor.graphics.use(sword.toSprite());

    game.add(actor);
});
```