### MediaStreamTrack getSettings Example

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.MediaStreamTrack

This example demonstrates how to get the current settings of a MediaStreamTrack using the 'getSettings' method. This provides information about the track's currently active configuration.

```javascript
// Assuming 'track' is an instance of MediaStreamTrack
const settings = track.getSettings();
console.log('Track Settings:', settings);
```

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

### PlayerEntity Class Example

Source: https://melonjs.github.io/melonJS/classes/Collectable

An example demonstrating the definition and initialization of a PlayerEntity class, inheriting from me.Sprite and setting up animations, physics, and camera following.

```APIDOC
## Class Definition: PlayerEntity

### Description
This example shows how to define a new player entity class that extends `me.Sprite`. It covers constructor setup, adding animations, configuring physics properties like collision shapes, velocity, and friction, and setting up the game viewport to follow the entity.

### Method
Constructor

### Endpoint
N/A (Class Definition)

### Parameters
#### Constructor Parameters
- **x** (number) - The initial x-coordinate of the entity.
- **y** (number) - The initial y-coordinate of the entity.
- **settings** (object) - An object containing additional settings for the sprite.

### Request Example
```javascript
// define a new Player Class  
 class PlayerEntity extends me.Sprite {  
     // constructor  
     constructor(x, y, settings) {
         // call the parent constructor  
         super(x, y , settings);

         // define a basic walking animation  
         this.addAnimation("walk",  [...]);  
         // define a standing animation (using the first frame)  
         this.addAnimation("stand",  [...]);  
         // set the standing animation as default  
         this.setCurrentAnimation("stand");

         // add a physic body  
         this.body = new me.Body(this);
         // add a default collision shape  
         this.body.addShape(new me.Rect(0, 0, this.width, this.height));
         // configure max speed, friction, and initial force to be applied  
         this.body.setMaxVelocity(3, 15);
         this.body.setFriction(0.4, 0);
         this.body.force.set(3, 0);
         this.isKinematic = false;

         // set the display to follow our position on both axis  
         me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH);
     }
     // ... other methods
 }
```

### Response
N/A (Class Definition)
```

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

### Example: Setting up Lights and Ambient Light for a Stage in JavaScript

Source: https://melonjs.github.io/melonJS/classes/Stage

Demonstrates how to create and configure lights and ambient light for a melonjs Stage. This example shows creating a white spot light, adding it to the stage's lights collection, setting a dark ambient light, and making the light follow the mouse cursor.

```javascript
// create a white spot light  
let whiteLight = new me.Light2d(0, 0, 140, "#fff", 0.7);  
// and add the light to this current stage  
this.lights.set("whiteLight", whiteLight);
// set a dark ambient light  
this.ambientLight.parseCSS("#1117");  
// make the light follow the mouse  
me.input.registerPointerEvent("pointermove", me.game.viewport, (event) => {  
   whiteLight.centerOn(event.gameX, event.gameY);
});
```

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

### PlayerEntity Class Example

Source: https://melonjs.github.io/melonJS/classes/Container

An example demonstrating the definition of a new Player Entity class using MelonJS, including constructor, animations, physics body, and camera following.

```APIDOC
## Example: PlayerEntity Class

### Description
This example shows how to define a new `PlayerEntity` class that extends `me.Sprite`. It covers setting up animations, a physics body with collision shapes, and configuring the game viewport to follow the entity.

### Code
```javascript
// define a new Player Class  
 class PlayerEntity extends me.Sprite {  
     // constructor  
     constructor(x, y, settings) {
         // call the parent constructor  
         super(x, y , settings);
  
         // define a basic walking animation  
         this.addAnimation("walk",  [...]);  
         // define a standing animation (using the first frame)  
         this.addAnimation("stand",  [...]);  
         // set the standing animation as default  
         this.setCurrentAnimation("stand");  
  
         // add a physic body  
         this.body = new me.Body(this);
         // add a default collision shape  
         this.body.addShape(new me.Rect(0, 0, this.width, this.height));  
         // configure max speed, friction, and initial force to be applied  
         this.body.setMaxVelocity(3, 15);
         this.body.setFriction(0.4, 0);
         this.body.force.set(3, 0);
         this.isKinematic = false;
  
         // set the display to follow our position on both axis  
         me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH);
     }
     // ... other methods
 }
```
```

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

### MediaStreamTrack getCapabilities Example

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.MediaStreamTrack

This example shows how to retrieve the capabilities of a MediaStreamTrack using the 'getCapabilities' method. This returns an object detailing the track's supported settings and values.

```javascript
// Assuming 'track' is an instance of MediaStreamTrack
const capabilities = track.getCapabilities();
console.log('Track Capabilities:', capabilities);
```

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

### MediaStreamTrack applyConstraints Example

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.MediaStreamTrack

This example illustrates the use of the 'applyConstraints' method to set specific constraints on a MediaStreamTrack. This is often used to request certain capabilities like resolution or frame rate.

```javascript
// Assuming 'track' is an instance of MediaStreamTrack
const constraints = {
  frameRate: 30
};

track.applyConstraints(constraints)
  .then(() => {
    console.log('Constraints applied successfully.');
  })
  .catch((error) => {
    console.error('Error applying constraints:', error);
  });
```

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

### getStartTime

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.SVGAnimateElement

Gets the start time of an element or animation.

```APIDOC
## GET /elements/{elementId}/start-time

### Description
Gets the start time of an element or animation.

### Method
GET

### Endpoint
/elements/{elementId}/start-time

### Parameters
#### Path Parameters
- **elementId** (string) - Required - The ID of the element or animation.

### Response
#### Success Response (200)
- **startTime** (number) - The start time in milliseconds.

#### Response Example
```json
{
  "startTime": 0
}
```
```

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

### Basic Hello World with melonJS

Source: https://melonjs.github.io/melonJS/index

This snippet demonstrates a basic 'Hello World' application using melonJS. It initializes the game engine, sets up the display canvas, configures a background color, and adds a text element to the game world. It requires a modern HTML5-capable browser.

```javascript
import * as me from "https://esm.run/melonjs";  
  
me.device.onReady(function () {
    // initialize the display canvas once the device/browser is ready  
    if (!me.video.init(1218, 562, {parent : "screen", scale : "auto"})) {
        alert("Your browser does not support HTML5 canvas.");
        return;
    }

    // set a gray background color  
    me.game.world.backgroundColor.parseCSS("#202020");

    // add a font text display object  
    me.game.world.addChild(new me.Text(609, 281, {
        font: "Arial",
        size: 160,
        fillStyle: "#FFFFFF",
        textBaseline : "middle",
        textAlign : "center",
        text : "Hello World !"
    }));
});
```

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

### Get Child Element by GUID

Source: https://melonjs.github.io/melonJS/classes/UIBaseElement

Finds and returns a child element within a container based on its unique GUID. Note: This method can be performance-intensive as it iterates through all children.

```javascript
Container.prototype.getChildByGUID = function(guid) {};
```

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

### Application Constructor

Source: https://melonjs.github.io/melonJS/classes/Application

Initializes a new melonJS game application instance. This includes setting up the canvas viewport and optional rendering parameters.

```APIDOC
## new Application(width, height, options?)

### Description
Initializes a new melonJS game application instance. This includes setting up the canvas viewport and optional rendering parameters.

### Method
Constructor

### Endpoint
N/A (Constructor)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Example of creating a new application
const app = new me.Application(800, 600, {
    // optional renderer settings
    wrapper: 'game_wrapper',
    scale: me.device.isFullscreen ? 1 : 2
});
```

### Response
#### Success Response (Instance)
- **Application** (object) - The newly created Application instance.

#### Response Example
```json
// No direct JSON response, returns an Application object
```

### Throws
- Will throw an exception if it fails to instantiate a renderer.
```

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

### Get Child by GUID using getChildByGUID()

Source: https://melonjs.github.io/melonJS/classes/Container

Finds a child element within a container using its unique GUID. Note: This method can be performance-intensive as it iterates through all children.

```javascript
const child = container.getChildByGUID('some-guid');
```

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

### MediaSource Constructor and Prototype

Source: https://melonjs.github.io/melonJS/variables/_internal_.MediaSource-1

Provides information about the MediaSource constructor and its prototype, including available methods and their signatures.

```APIDOC
## MediaSource API

### Description
The MediaSource API provides an interface for JavaScript to construct media elements in the browser.

### Method
N/A (This section describes the type declaration)

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
#### Type Declaration
- **MediaSource** (object)
  - **prototype**: MediaSource
  - **isTypeSupported**(type: string): boolean
  - **new**(): MediaSource

#### Success Response (200)
N/A

#### Response Example
N/A

## isTypeSupported Method

### Description
Checks if a given MIME type is supported by the MediaSource API.

### Method
Static method of MediaSource

### Endpoint
N/A

### Parameters
#### Query Parameters
- **type** (string) - Required - The MIME type to check for support.

### Request Example
```javascript
MediaSource.isTypeSupported('video/mp4; codecs="avc1.42E01E,mp4a.40.2"');
```

### Response
#### Success Response (200)
- **return value** (boolean) - `true` if the type is supported, `false` otherwise.

#### Response Example
```json
true
```
```

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

### Node Root and Duration

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.SVGAnimationElement

Provides methods to get the root node of an element and its simple duration or start time.

```APIDOC
## GET /websites/melonjs_github_io_melonjs/getRootNode

### Description
Retrieves the root node of an element, optionally with specific options.

### Method
GET

### Endpoint
/websites/melonjs_github_io_melonjs/getRootNode

### Parameters
#### Query Parameters
- **options** (GetRootNodeOptions) - Optional - Options for retrieving the root node.

### Response
#### Success Response (200)
- **node** (Node) - The root node of the element.

## GET /websites/melonjs_github_io_melonjs/getSimpleDuration

### Description
Returns the simple duration of an element.

### Method
GET

### Endpoint
/websites/melonjs_github_io_melonjs/getSimpleDuration

### Response
#### Success Response (200)
- **duration** (number) - The simple duration.

## GET /websites/melonjs_github_io_melonjs/getStartTime

### Description
Returns the start time of an element.

### Method
GET

### Endpoint
/websites/melonjs_github_io_melonjs/getStartTime

### Response
#### Success Response (200)
- **startTime** (number) - The start time.
```

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

### VideoFrameInit Interface

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.VideoFrameInit

The VideoFrameInit interface provides properties for initializing a VideoFrame.

```APIDOC
## Interface VideoFrameInit

### Description
Provides properties for initializing a VideoFrame.

### Properties

#### `Optional` alpha
- **Type**: AlphaOption
- **Description**: Specifies the alpha channel option.

#### `Optional` displayHeight
- **Type**: number
- **Description**: Specifies the display height.

#### `Optional` displayWidth
- **Type**: number
- **Description**: Specifies the display width.

#### `Optional` duration
- **Type**: number
- **Description**: Specifies the duration.

#### `Optional` timestamp
- **Type**: number
- **Description**: Specifies the timestamp.

#### `Optional` visibleRect
- **Type**: DOMRectInit
- **Description**: Specifies the visible rectangle.
```

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

### Get Character Position Information

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.SVGTSpanElement

Retrieves the start and end positions of a character within a text element, along with its extent. Requires a character number as input.

```javascript
/**
 * Returns the DOMPoint representing the start position of a character.
 * @param {number} charnum - The character number.
 * @returns {DOMPoint}
 */
getStartPositionOfChar(charnum)

/**
 * Returns the DOMPoint representing the end position of a character.
 * @param {number} charnum - The character number.
 * @returns {DOMPoint}
 */
getEndPositionOfChar(charnum)

/**
 * Returns the DOMRect representing the extent of a character.
 * @param {number} charnum - The character number.
 * @returns {DOMRect}
 */
getExtentOfChar(charnum)
```

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

### Get Current Time in melonJS

Source: https://melonjs.github.io/melonJS/classes/_internal_.Timer

The `getTime` method returns the current timestamp in milliseconds. This timestamp is measured from the start of the game or the Linux epoch, depending on browser support for high-resolution timers.

```javascript
const currentTime = me.timer.getTime();
```

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

### Method: beginQuery

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.WebGL2RenderingContext

Begins a query. Queries can be used to retrieve information about the rendering pipeline, such as the number of primitives drawn.

```APIDOC
## Method: beginQuery

Begins a query. Queries can be used to retrieve information about the rendering pipeline, such as the number of primitives drawn.

### beginQuery
  * beginQuery(target, query): void
  * MDN Reference
#### Parameters
    * target: number
    * query: WebGLQuery
#### Returns void
```

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

### Transition Event Handlers

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.MathMLElement

Documentation for transition event handlers: ontransitioncancel, ontransitionend, ontransitionrun, and ontransitionstart.

```APIDOC
## Transition Event Handlers

### ontransitioncancel

- **Description**: Handles the cancellation of a CSS transition.
- **Type**: `null | ((this: GlobalEventHandlers, ev: TransitionEvent) => any)`
- **MDN Reference**: [link to MDN]

### ontransitionend

- **Description**: Handles the end of a CSS transition.
- **Type**: `null | ((this: GlobalEventHandlers, ev: TransitionEvent) => any)`
- **MDN Reference**: [link to MDN]

### ontransitionrun

- **Description**: Handles the start of a CSS transition before it has been applied.
- **Type**: `null | ((this: GlobalEventHandlers, ev: TransitionEvent) => any)`
- **MDN Reference**: [link to MDN]

### ontransitionstart

- **Description**: Handles the start of a CSS transition.
- **Type**: `null | ((this: GlobalEventHandlers, ev: TransitionEvent) => any)`
- **MDN Reference**: [link to MDN]
```

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

### Get and Set Color Styles in MelonJS

Source: https://melonjs.github.io/melonJS/classes/WebGLRenderer

Allows retrieval of the current fill and stroke style color. While not explicitly shown for setting, `setColor` is implied by usage in examples. The `Color` object is used to represent the color value.

```javascript
const currentColor = renderer.getColor();
console.log(currentColor);
```

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

### PlayerEntity Example with Physics

Source: https://melonjs.github.io/melonJS/classes/Camera2d

Demonstrates the creation of a PlayerEntity using me.Sprite, including animation setup, physics body addition with a rectangular collision shape, velocity and friction configuration, and setting the game viewport to follow the player.

```javascript
 class PlayerEntity extends me.Sprite {
     constructor(x, y, settings) {
         super(x, y , settings);
         this.addAnimation("walk",  [...]);
         this.addAnimation("stand",  [...]);
         this.setCurrentAnimation("stand");
         this.body = new me.Body(this);
         this.body.addShape(new me.Rect(0, 0, this.width, this.height));
         this.body.setMaxVelocity(3, 15);
         this.body.setFriction(0.4, 0);
         this.body.force.set(3, 0);
         this.isKinematic = false;
         me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH);
     }
     ...
 }
```

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

### JavaScript: Get and Manipulate Text Selection

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.Selection

Demonstrates how to obtain a Selection object using `window.getSelection()` and provides examples of common operations like collapsing the selection or modifying it. This interface is crucial for any text manipulation or user interaction involving selected text.

```javascript
const selection = window.getSelection();

// Example: Collapse the selection to the start
if (selection) {
  selection.collapseToStart();
}

// Example: Check if the selection is collapsed
console.log(selection.isCollapsed);

// Example: Get the text content of the selection
console.log(selection.toString());

// Example: Add a range to the selection (requires a Range object)
// const range = document.createRange();
// selection.addRange(range);

// Example: Modify the selection
// selection.modify('extend', 'forward', 'word');
```

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

### Audio Initialization API

Source: https://melonjs.github.io/melonJS/functions/audio.init

Initializes and configures the audio support for MelonJS. It allows specifying preferred audio formats and fallbacks for maximum browser compatibility.

```APIDOC
## POST /me.audio.init

### Description
Initializes and configures the audio support. Allows specifying preferred audio formats and fallbacks for browser compatibility.

### Method
POST

### Endpoint
/me.audio.init

### Parameters
#### Query Parameters
- **format** (string) - Optional - Audio format to prioritize. Supported formats include: "mp3", "mpeg", "opus", "ogg", "oga", "wav", "aac", "caf", "m4a", "m4b", "mp4", "weba", "webm", "dolby", "flac". Defaults to "mp3".

### Request Example
```json
{
  "format": "webm,mp3"
}
```

### Response
#### Success Response (200)
- **boolean** - Indicates whether audio initialization was successful.

#### Response Example
```json
{
  "success": true
}
```

#### Error Response (e.g., 400)
- **string** - Error message if initialization fails.

#### Error Response Example
```json
{
  "error": "Audio initialization failed."
}
```
```

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

### WebGL API - Query, Sampler, and Sync Objects

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.WebGL2RenderingContext

Documentation for creating, deleting, and managing WebGL query, sampler, and sync objects.

```APIDOC
## createQuery /api/webgl/createQuery

### Description
Creates a new query object.

### Method
Not Applicable (this is a function signature, not an HTTP endpoint)

### Endpoint
Not Applicable

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (WebGLQuery)
Returns a WebGLQuery object or null if creation failed.

#### Response Example
None

## createSampler /api/webgl/createSampler

### Description
Creates a new sampler object.

### Method
Not Applicable (this is a function signature, not an HTTP endpoint)

### Endpoint
Not Applicable

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (WebGLSampler)
Returns a WebGLSampler object or null if creation failed.

#### Response Example
None

## deleteQuery /api/webgl/deleteQuery

### Description
Deletes a query object.

### Method
Not Applicable (this is a function signature, not an HTTP endpoint)

### Endpoint
Not Applicable

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (void)
This function does not return a value.

#### Response Example
None

## deleteQuery /api/webgl/deleteQuery

### Description
Deletes a query object.

### Method
Not Applicable (this is a function signature, not an HTTP endpoint)

### Endpoint
Not Applicable

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (void)
This function does not return a value.

#### Response Example
None

## deleteSampler /api/webgl/deleteSampler

### Description
Deletes a sampler object.

### Method
Not Applicable (this is a function signature, not an HTTP endpoint)

### Endpoint
Not Applicable

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (void)
This function does not return a value.

#### Response Example
None

## deleteSync /api/webgl/deleteSync

### Description
Deletes a sync object.

### Method
Not Applicable (this is a function signature, not an HTTP endpoint)

### Endpoint
Not Applicable

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (void)
This function does not return a value.

#### Response Example
None
```

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

### PlayerEntity with Physics Body - melonjs

Source: https://melonjs.github.io/melonJS/classes/ColorLayer

An example demonstrating the creation of a PlayerEntity class inheriting from me.Sprite, including the setup of a physics body. It shows how to add collision shapes, configure physics properties like max velocity and friction, and apply initial forces.

```javascript
// define a new Player Class  
 class PlayerEntity extends me.Sprite {  
     // constructor  
     constructor(x, y, settings) {  
         // call the parent constructor  
         super(x, y , settings);  
  
         // define a basic walking animation  
         this.addAnimation("walk",  [...]);  
         // define a standing animation (using the first frame)  
         this.addAnimation("stand",  [...]);  
         // set the standing animation as default  
         this.setCurrentAnimation("stand");  
  
         // add a physic body  
         this.body = new me.Body(this);  
         // add a default collision shape  
         this.body.addShape(new me.Rect(0, 0, this.width, this.height));  
         // configure max speed, friction, and initial force to be applied  
         this.body.setMaxVelocity(3, 15);  
         this.body.setFriction(0.4, 0);  
         this.body.force.set(3, 0);  
         this.isKinematic = false;  
  
         // set the display to follow our position on both axis  
         me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH);  
     }  
  
     ...  
  
}
```

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

### Create and Configure a Tween Animation in JavaScript

Source: https://melonjs.github.io/melonJS/classes/Tween

This example demonstrates how to create a new tween for an object's position properties. It specifies the target values, duration, easing function, and an optional callback function to execute upon completion. The tween is automatically started upon creation.

```javascript
tween = new me.Tween(myObject.pos).to({
      x: 200,
      y: 200,
   }, {
      duration: 3000,
      easing: me.Tween.Easing.Bounce.Out,
      autoStart : true
}).onComplete(myFunc);
```

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

### ApplicationSettings Configuration

Source: https://melonjs.github.io/melonJS/types/ApplicationSettings

The ApplicationSettings object allows you to configure various aspects of the melonJS application, such as rendering, scaling, and physics. This is typically passed to the `me.boot()` function.

```APIDOC
## Type Alias ApplicationSettings

`ApplicationSettings` is an object used to configure the melonJS application.

### Properties

- **antiAlias** (boolean) - Whether to enable video scaling interpolation. Defaults to `false`.
- **blendMode** (BlendMode) - The blending mode to use.
- **compositor** (Compositor) - Optional. A custom compositor class (WebGL only).
- **consoleHeader** (boolean) - Whether to display melonJS version and basic device information in the console. Defaults to `true`.
- **depthTest** (DepthTest) - Experimental. The default method to sort objects on the z-axis in WebGL. Defaults to `sorting`.
- **failIfMajorPerformanceCaveat** (boolean) - Indicates if the application should fail if major performance caveats are detected.
- **legacy** (boolean) - Enables legacy features.
- **physic** (PhysicsType) - The physic system to use. Can be `"builtin"` or `"none"` to disable builtin physic. Defaults to `"builtin"`.
- **powerPreference** (PowerPreference) - A hint to the user agent indicating what GPU configuration is suitable for the WebGL context. Defaults to `default`.
- **preferWebGL1** (boolean) - If true, the renderer will only use WebGL 1. Defaults to `false`.
- **renderer** (RendererType | Renderer) - The renderer to use (CANVAS, WEBGL, AUTO), or a custom renderer class. Defaults to `AUTO`.
- **scale** (number | "auto") - Enables scaling of the canvas. Use `"auto"` for automatic scaling. Defaults to `1`.
- **scaleMethod** (ScaleMethod) - The screen scaling mode to use. Defaults to `fit`.
- **scaleTarget** (HTMLElement) - The HTML Element to be used as the reference target when using automatic scaling. Defaults to the parent container of the canvas element.
- **subPixel** (boolean) - Enables sub-pixel rendering.
- **transparent** (boolean) - Whether to allow transparent pixels in the front buffer (screen). Defaults to `false`.
- **verbose** (boolean) - Enables verbose logging.

### Conditional Properties

Either `canvas` and `parent` must be defined:

- **canvas** (HTMLCanvasElement) - The canvas element to use for rendering. Cannot be used with `parent`.
- **parent** (HTMLElement) - The HTML element to append the canvas to. Cannot be used with `canvas`.

### Example Usage

```javascript
// Example configuration object
const settings = {
    antialiasing: true,
    backgroundColor: "#222",
    scale: "auto",
    scaleMethod: me.game.scale.SHOW_ALL,
    parent: "game",
    // ... other settings
};

// Boot the melonJS application with the settings
me.boot(settings, () => {
    // Application loaded, start the game
    me.state.change(me.state.PLAY);
});
```
```

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

### Associate State with Stage using melonjs state.set

Source: https://melonjs.github.io/melonJS/functions/state.set

This JavaScript code demonstrates how to use the `me.state.set()` function in melonjs to associate a state ID (e.g., `me.state.MENU`) with a custom `MenuScreen` Stage instance. This is crucial for managing different game states within a melonjs application. The example also shows the setup for a `MenuButton` that triggers a state change.

```javascript
class MenuButton extends me.GUI_Object {
    onClick() {
        // Change to the PLAY state when the button is clicked
        me.state.change(me.state.PLAY);
        return true;
    }
};

class MenuScreen extends me.Stage {
    onResetEvent() {
        // Load background image
        me.game.world.addChild(
            new me.ImageLayer(0, 0, {
                image : "bg",
                z: 0 // z-index
            })
        );

        // Add a button
        me.game.world.addChild(
            new MenuButton(350, 200, { "image" : "start" }),
            1 // z-index
        );

        // Play music
        me.audio.playTrack("menu");
    }

    onDestroyEvent() {
        // Stop music
        me.audio.stopTrack();
    }
};

me.state.set(me.state.MENU, new MenuScreen());
```

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

### Path Drawing Example

Source: https://melonjs.github.io/melonJS/classes/WebGLRenderer

Demonstrates how to use `beginPath`, `setColor`, `moveTo`, `lineTo`, and `stroke` to draw two distinct paths with different colors.

```javascript
// First path
renderer.beginPath();
renderer.setColor("blue");
renderer.moveTo(20, 20);
renderer.lineTo(200, 20);
renderer.stroke();
// Second path
renderer.beginPath();
renderer.setColor("green");
renderer.moveTo(20, 20);
renderer.lineTo(120, 120);
renderer.stroke();
```

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

### start

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.HTMLMarqueeElement

Starts an operation. This method is deprecated.

```APIDOC
## start

### Description
Starts an operation. Deprecated.

### Method
`void`

### Returns
void
```

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

### BasePlugin Constructor

Source: https://melonjs.github.io/melonJS/classes/plugin.BasePlugin

Initializes a new instance of the BasePlugin class. It accepts an optional reference to the application or game.

```APIDOC
## new BasePlugin(app?): BasePlugin

### Description
Initializes a new instance of the BasePlugin class. It accepts an optional reference to the application or game.

### Method
CONSTRUCTOR

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "app": "game"
}
```

### Response
#### Success Response (200)
Returns a new BasePlugin instance.

#### Response Example
```json
{
  "instance": "BasePlugin"
}
```
```

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

### Initialize melonjs Video System

Source: https://melonjs.github.io/melonJS/functions/video.init

Initializes the melonjs video system by creating a canvas element with specified dimensions and optional rendering configurations. Returns `false` if canvas support is not detected. Dependencies include the melonjs library.

```javascript
me.video.init(640, 480, {
    parent : "screen",
    renderer : me.video.AUTO,
    scale : "auto",
    scaleMethod : "fit"
});
```

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

### Get Opacity

Source: https://melonjs.github.io/melonJS/classes/TMXLayer

Gets the renderable's alpha channel value.

```APIDOC
## GET /renderable/opacity

### Description
Gets the renderable's alpha channel value.

### Method
GET

### Endpoint
/renderable/opacity

### Response
#### Success Response (200)
- **opacity** (number) - The current opacity value between 0 and 1.

#### Response Example
```json
{
  "opacity": 0.8
}
```
```

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

### Tween Start

Source: https://melonjs.github.io/melonJS/classes/Tween

Initiate the tween animation. The animation can optionally be started at a specific time.

```APIDOC
## POST /websites/melonjs_github_io_melonjs/tween/start

### Description
Starts the execution of the tween animation. An optional time parameter can be provided to specify the starting time.

### Method
POST

### Endpoint
/websites/melonjs_github_io_melonjs/tween/start

### Parameters
#### Query Parameters
- **time** (number) - Optional - The current time when the tween was started.
```

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

### Touch Event Handlers

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.SVGAnimateElement

Documentation for ontouchcancel, ontouchend, ontouchmove, and ontouchstart event handlers.

```APIDOC
## Optional ontouchcancel

### Description
Handles the cancellation of touch events.

### Method
Event Handler

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (N/A)
None

#### Response Example
None

## Optional ontouchend

### Description
Handles the end of touch events.

### Method
Event Handler

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (N/A)
None

#### Response Example
None

## Optional ontouchmove

### Description
Handles the movement of touch events.

### Method
Event Handler

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (N/A)
None

#### Response Example
None

## Optional ontouchstart

### Description
Handles the start of touch events.

### Method
Event Handler

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (N/A)
None

#### Response Example
None
```

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

### onVisibilityChange Property with Example

Source: https://melonjs.github.io/melonJS/classes/Container

Information and example for the 'onVisibilityChange' event handler, called when a renderable enters or leaves the camera viewport.

```APIDOC
## onVisibilityChange Property

### Description
An event handler that is called when the renderable leaves or enters a camera viewport.

### Callback Function
- **onVisibilityChange**: A function that takes a boolean `inViewport` argument.

### Default Value
```
undefined
```

### Example
```javascript
this.onVisibilityChange = function(inViewport) {
    if (inViewport === true) {
        console.log("object has entered the in a camera viewport!");
    }
};
```
```

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

### Initialize Game Logic After Device Ready

Source: https://melonjs.github.io/melonJS/functions/device.onReady

The `me.device.onReady` function takes a callback function as an argument. This callback is executed once the melonJS device is fully loaded and ready to be used. This is crucial for initializing video, audio, and loading game assets.

```javascript
let game = {
   // called by the me.device.onReady function
   onload: function () {
      // init video
      if (!me.video.init('screen', 640, 480, true)) {
         alert("Sorry but your browser does not support html 5 canvas.");
         return;
      }

      // initialize the "audio"
      me.audio.init("mp3,ogg");

      // set callback for ressources loaded event
      me.loader.onload = this.loaded.bind(this);

      // set all ressources to be loaded
      me.loader.preload(game.assets);

      // load everything & display a loading screen
      me.state.change(me.state.LOADING);
   },

   // callback when everything is loaded
   loaded: function () {
      // define stuff
      // ....

      // change to the menu screen
      me.state.change(me.state.PLAY);
   }
};

// "bootstrap"
me.device.onReady(function () {
   game.onload();
});
```

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

### Touch Event Handlers

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.MathMLElement

Documentation for optional touch event handlers: ontouchcancel, ontouchend, ontouchmove, and ontouchstart.

```APIDOC
## Optional Touch Event Handlers

### ontouchcancel

- **Description**: Handles the cancellation of a touch event.
- **Type**: `null | ((this: GlobalEventHandlers, ev: TouchEvent) => any)`
- **MDN Reference**: [link to MDN]

### ontouchend

- **Description**: Handles the end of a touch event.
- **Type**: `null | ((this: GlobalEventHandlers, ev: TouchEvent) => any)`
- **MDN Reference**: [link to MDN]

### ontouchmove

- **Description**: Handles touch movement during a touch event.
- **Type**: `null | ((this: GlobalEventHandlers, ev: TouchEvent) => any)`
- **MDN Reference**: [link to MDN]

### ontouchstart

- **Description**: Handles the beginning of a touch event.
- **Type**: `null | ((this: GlobalEventHandlers, ev: TouchEvent) => any)`
- **MDN Reference**: [link to MDN]
```

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

### mask Property with Example

Source: https://melonjs.github.io/melonJS/classes/Container

Explanation and example of the 'mask' property, used to limit rendering elements to a specific shape and position.

```APIDOC
## mask Property

### Description
A mask limits rendering elements to the shape and position of the given mask object. So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.

### Property
- **mask** (Polygon | Rect | Ellipse | Line | RoundRect) - The mask object defining the clipping area.

### Default Value
```
undefined
```

### Example
```javascript
// apply a mask in the shape of a Star  
myNPCSprite.mask = new me.Polygon(myNPCSprite.width / 2, 0, [
   // draw a star  
   {x: 0, y: 0},
   {x: 14, y: 30},
   {x: 47, y: 35},
   {x: 23, y: 57},
   {x: 44, y: 90},
   {x: 0, y: 62},
   {x: -44, y: 90},
   {x: -23, y: 57},
   {x: -47, y: 35},
   {x: -14, y: 30}
]);
```
```

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

### MediaStreamTrack stop Example

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.MediaStreamTrack

This example shows how to stop a MediaStreamTrack using the 'stop' method. Calling this method will end the track and all associated data flow.

```javascript
// Assuming 'track' is an instance of MediaStreamTrack
track.stop();
console.log('MediaStreamTrack stopped.');
```

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

### Gamepad Event Handlers

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.Window

Documentation for event handlers related to gamepad connections.

```APIDOC
## GET /event/gamepadconnected

### Description
Fires when a gamepad is connected.

### Method
GET

### Endpoint
/event/gamepadconnected

### Parameters
#### Query Parameters
- **ev** (GamepadEvent) - Required - The event object containing gamepad information.

### Request Example
```json
{
  "event": "gamepadconnected"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

#### Response Example
```json
{
  "status": "success"
}
```

## GET /event/gamepaddisconnected

### Description
Fires when a gamepad is disconnected.

### Method
GET

### Endpoint
/event/gamepaddisconnected

### Parameters
#### Query Parameters
- **ev** (GamepadEvent) - Required - The event object containing gamepad information.

### Request Example
```json
{
  "event": "gamepaddisconnected"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

#### Response Example
```json
{
  "status": "success"
}
```
```

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

### TMXTilesetGroup Methods

Source: https://melonjs.github.io/melonJS/classes/TMXTilesetGroup

Documentation for the methods available on the TMXTilesetGroup class, including adding tilesets and retrieving them by GID or index.

```APIDOC
## Methods TMXTilesetGroup

### add

#### Description
Adds a TMXTileset object to the TMXTilesetGroup.

#### Method
`add(tileset)`

#### Parameters
- **tileset** (TMXTileset) - The tileset to add to the group.

#### Returns
void

### getTilesetByGid

#### Description
Retrieves a TMXTileset object from the group using its global tile ID (GID). Throws an exception if no matching tileset is found.

#### Method
`getTilesetByGid(gid)`

#### Parameters
- **gid** (number) - The global tile ID of the tileset to retrieve.

#### Returns
- **TMXTileset** (object) - The TMXTileset corresponding to the specified GID.

### getTilesetByIndex

#### Description
Retrieves a TMXTileset object from the group using its index in the tilesets array.

#### Method
`getTilesetByIndex(i)`

#### Parameters
- **i** (number) - The index of the tileset to retrieve.

#### Returns
- **TMXTileset** (object) - The TMXTileset corresponding to the specified index.
```

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

### TimeRanges Methods: start

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.TimeRanges

The 'start' method accepts an index and returns the timestamp indicating the beginning of the corresponding time range. An 'IndexSizeError' is raised for out-of-bounds indices.

```typescript
start(index: number): number
```

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

### PaymentMethodChangeEventInit Interface

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.PaymentMethodChangeEventInit

Defines the initialization properties for a PaymentMethodChangeEvent.

```APIDOC
## Interface PaymentMethodChangeEventInit

### Description
This interface defines the structure for initializing a `PaymentMethodChangeEvent`. It includes optional properties related to event behavior and payment method details.

### Properties

This interface inherits from `PaymentRequestUpdateEventInit`.

#### Optional Properties

- **bubbles** (boolean) - Indicates whether the event bubbles up through the DOM.
- **cancelable** (boolean) - Indicates whether the event can be canceled.
- **composed** (boolean) - Indicates whether the event will trigger event listeners outside of a shadow root.
- **methodDetails** (any) - An object containing details specific to the payment method.
- **methodName** (string) - The name of the payment method.

### Request Example
```json
{
  "bubbles": true,
  "cancelable": false,
  "composed": true,
  "methodDetails": {
    "cardType": "visa",
    "lastFour": "1234"
  },
  "methodName": "basic-card"
}
```

### Response
#### Success Response (200)
This interface is used for request initialization and does not typically have a direct success response.

#### Response Example
N/A
```

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

### Get Vertex and Uniform Information

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.WebGL2RenderingContext

Functions to retrieve information about vertex attributes and uniform variables within WebGL programs. This includes getting uniform locations, block indices, and varying information.

```typescript
getTransformFeedbackVarying(program: WebGLProgram, index: number): null | WebGLActiveInfo;
getUniform(program: WebGLProgram, location: WebGLUniformLocation): any;
getUniformBlockIndex(program: WebGLProgram, uniformBlockName: string): number;
getUniformIndices(program: WebGLProgram, uniformNames: string[]): null | number[];
getUniformIndices(program: WebGLProgram, uniformNames: Iterable<string>): null | Iterable<number>;
getUniformLocation(program: WebGLProgram, name: string): null | WebGLUniformLocation;
getVertexAttrib(index: number, pname: number): any;
getVertexAttribOffset(index: number, pname: number): number;

```

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

### HashChangeEventInit Interface

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.HashChangeEventInit

Provides details about the HashChangeEventInit interface, its optional properties, and its inheritance.

```APIDOC
## Interface HashChangeEventInit

### Description
Represents the initialization properties for a HashChangeEvent.

### Hierarchy
- EventInit
  - HashChangeEventInit

### Properties

#### Optional Properties
- **bubbles** (boolean) - Indicates if the event bubbles.
- **cancelable** (boolean) - Indicates if the event is cancelable.
- **composed** (boolean) - Indicates if the event composed.
- **newURL** (string) - The new URL.
- **oldURL** (string) - The old URL.

### Request Example
```json
{
  "bubbles": true,
  "cancelable": false,
  "composed": true,
  "newURL": "http://example.com/new",
  "oldURL": "http://example.com/old"
}
```

### Response
#### Success Response (200)
This interface is typically used for constructing event objects and does not represent a typical API response.

#### Response Example
```json
{
  "message": "Interface details provided."
}
```
```

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

### JavaScript: Get Current High-Resolution Time

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.Performance

Demonstrates the use of the `now()` method to get the current high-resolution timestamp. This timestamp is relative to the timeOrigin and provides a more precise measurement than `Date.now()`.

```javascript
const currentTime = performance.now();
console.log('Current high-resolution time:', currentTime, 'ms');
```

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

### Touch Events

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.SVGPatternElement

Documentation for touch event handlers: ontouchcancel, ontouchend, ontouchmove, and ontouchstart.

```APIDOC
## Touch Events

### `Optional` ontouchcancel

Handles events when a touch point is interrupted.

- **Method**: N/A (Event Handler)
- **Endpoint**: N/A
- **Parameters**: 
  - **ev** (TouchEvent) - The event object.
- **Request Body**: None

### Response

#### Success Response (N/A)

### `Optional` ontouchend

Handles events when a touch point is removed from the surface.

- **Method**: N/A (Event Handler)
- **Endpoint**: N/A
- **Parameters**: 
  - **ev** (TouchEvent) - The event object.
- **Request Body**: None

### Response

#### Success Response (N/A)

### `Optional` ontouchmove

Handles events when a touch point is moved along the surface.

- **Method**: N/A (Event Handler)
- **Endpoint**: N/A
- **Parameters**: 
  - **ev** (TouchEvent) - The event object.
- **Request Body**: None

### Response

#### Success Response (N/A)

### `Optional` ontouchstart

Handles events when a touch point is placed on the surface.

- **Method**: N/A (Event Handler)
- **Endpoint**: N/A
- **Parameters**: 
  - **ev** (TouchEvent) - The event object.
- **Request Body**: None

### Response

#### Success Response (N/A)
```

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

### MediaStreamTrack addEventListener Example

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.MediaStreamTrack

This example demonstrates how to use the 'addEventListener' method to attach an event listener to a MediaStreamTrack. It shows how to listen for the 'ended' event, which is triggered when the media track is stopped.

```javascript
// Assuming 'track' is an instance of MediaStreamTrack
track.addEventListener('ended', (event) => {
  console.log('MediaStreamTrack has ended:', event);
});
```

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

### Transition Event Handlers

Source: https://melonjs.github.io/melonJS/interfaces/_internal_.SVGAnimateElement

Documentation for ontransitioncancel, ontransitionend, ontransitionrun, and ontransitionstart event handlers.

```APIDOC
## ontransitioncancel

### Description
Handles the cancellation of CSS transitions.

### Method
Event Handler

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (N/A)
None

#### Response Example
None

## ontransitionend

### Description
Handles the end of CSS transitions.

### Method
Event Handler

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (N/A)
None

#### Response Example
None

## ontransitionrun

### Description
Handles the run phase of CSS transitions.

### Method
Event Handler

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (N/A)
None

#### Response Example
None

## ontransitionstart

### Description
Handles the start of CSS transitions.

### Method
Event Handler

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (N/A)
None

#### Response Example
None
```