### Scene Transition Setup

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/fundamentals/timer/timer-considerations

Example of configuring a scene transition with a specific duration and easing function.

```javascript
const sceneOne = new Scene({ backgroundColor: WebColors.WhiteSmoke });
game.addScene(sceneOne);
const beginButton = new Button({
text: "Begin",
backgroundColor: WebColors.Chocolate,
size: { width: 150, height: 50 },
position: { x: 100, y: 325 },
isUserInteractionEnabled: true
});
sceneOne.addChild(beginButton);
beginButton.onTapDown(() => {
game.presentScene(sceneTwo,
Transition.slide({
direction: TransitionDirection.Left,
duration: 500,
easing: Easings.quadraticInOut
}));
});
const sceneTwo = new Scene({ backgroundColor: WebColors.WhiteSmoke });
game.addScene(sceneTwo);
```

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

### start()

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/interfaces/Activity

Starts the activity.

```APIDOC
## start()

### Description
Starts the activity.

### Returns
- **Promise<void>**
```

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

### start()

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/SoundRecorder

Starts recording audio from the microphone. Throws an error if already recording or if microphone permission is denied.

```APIDOC
## start()

### Description
Starts recording audio from the microphone. If the recorder is already active, an error is thrown.

### Signature
`start(): Promise<void>`

### Remarks
Ensure microphone permissions are granted using `queryPermission()` or `requestPermission()` before calling this method to avoid runtime errors.
```

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

### start()

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-session/classes/Session

Starts the session and begins the first activity.

```APIDOC
## start()

### Description
Starts the session and starts the first activity.

### Returns
- **Promise<void>**
```

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

### start(entryScene?)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Game

Starts the game loop.

```APIDOC
## start(entryScene?)

### Description
Starts the game loop. If entryScene is undefined, the game will start with the scene defined in the game object's entryScene property or the first scene in the list.

### Parameters
- **entryScene** (string | Scene) - Optional - The scene to display when the game starts.

### Returns
- **Promise<void>**
```

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

### onStart(callback, options?)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Game

Executes a callback when the game starts.

```APIDOC
## onStart(callback, options?)

### Description
Executes a callback when the game starts.

### Parameters
- **callback** (function) - Required - The function to execute.
- **options** (CallbackOptions) - Optional - Options for the callback.
```

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

### Install m2c2kit CLI globally

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/deployment/self-hosting/intro

Install the CLI tool once to enable easy creation and deployment of m2c2kit apps.

```bash
npm install -g @m2c2kit/cli
```

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

### start()

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/CountdownTimer

Starts the countdown timer. Calling this on a timer that is already running or stopped will raise an error.

```APIDOC
## start()

### Description
Starts the countdown timer.

### Returns
- void

### Remarks
Calling start() on a timer whose state is running (already started) or stopped will raise an error.
```

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

### LegacyTimer.start(name)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/LegacyTimer

Starts a millisecond-resolution timer.

```APIDOC
## static start(name: string): void

### Description
Starts a millisecond-resolution timer based on performance.now().

### Parameters
- **name** (string) - Required - The name of the timer to be started.
```

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

### onStart(callback, options?)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/interfaces/Activity

Registers a callback to be executed when the activity starts.

```APIDOC
## onStart(callback, options?)

### Description
Executes a callback when the activity starts.

### Parameters
- **callback** (function) - Required - The function to execute.
- **options** (CallbackOptions) - Optional - Options for the callback.
```

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

### Game Initialization with Localization

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/internationalization/text/interpolation

A full game configuration example including translation settings.

```javascript
class DocsDemo extends Game {
constructor() {
const options = {
name: "Documentation Example",
id: "docs",
publishUuid: "c9ec7b5b-a6cc-4308-9b1c-73b40ae4aa9e",
width: 200, height: 400,
fonts: [
{
fontName: "roboto",
url: "fonts/roboto/Roboto-Regular.ttf",
},
],
locale: "en-US",
missingLocalizationColor: WebColors.Red,
translation: {
"configuration": {
"baseLocale": "en-US"
},
"en-US": {
localeName: "English",
REMEMBER_BALLS: "Remember the position of {{ballCount}} balls",
⚪ font roboto (default) loaded for game docs from assets/docs/fonts/roboto/Roboto-Regular.ttf ⚪ Session.initialize() took 180 ms 🟢 started session 
```

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

### Timer.startNew(name)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Timer

Creates and immediately starts a new timer.

```APIDOC
## static Timer.startNew(name: string)

### Description
Creates and starts a new millisecond-resolution timer based on performance.now(). If a timer with the given name already exists, it will be created, set back to zero, and started.

### Parameters
- **name** (string) - Required - The name of the timer to be started.
```

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

### Full Game implementation with audio

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/sound/playing-audio/sound-player

A complete example showing the Game class configuration including font and sound asset definitions.

```javascript
class DocsDemo extends Game {
constructor() {
const options = {
name: "Documentation Example",
id: "docs",
publishUuid: "c9ec7b5b-a6cc-4308-9b1c-73b40ae4aa9e",
width: 200, height: 400,
fonts: [
{
fontName: "roboto",
url: "fonts/roboto/Roboto-Regular.ttf",
},
],
sounds: [
{
// public domain, adapted from https://commons.wikimedia.org/wiki/File:Car_Horn.wav
soundName: "carHorn",
url: "sounds/car-horn.mp3"
},
]
};
super(options);
```

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

### Initialize trial configuration variables

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/fundamentals/full-example/randomization

Setup for trial counts and the container array for storing generated configurations.

```javascript
const numberOfTrials = 3;  
const numberOfCongruentTrials = 2;  
const trialConfigurations = [];  
```

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

### Timer.start(name)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Timer

Starts a previously created and stopped timer.

```APIDOC
## static Timer.start(name: string)

### Description
Starts a stopped millisecond-resolution timer based on performance.now(). The method throws an error if a timer with the given name does not exist or is not in a stopped state.

### Parameters
- **name** (string) - Required - The name of the timer to be started.
```

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

### Initialize Game Class

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/sound/recording-audio/sound-recorder

Example of a Game class initialization structure for a m2c2kit project.

```javascript
class DocsDemo extends Game {
constructor() {
const options = {
name: "Documentation Example",
id: "docs",
publishUuid: "c9ec7b5b-a6cc-4308-9b1c-73b40ae4aa9e",
width: 200, height: 400,
fonts: [
{
fontName: "roboto",
url: "fonts/roboto/Roboto-Regular.ttf",
},
],
};
super(options);
}
async initialize() {
await super.initialize();
const game = this;
const sceneOne = new Scene({
backgroundColor: WebColors.WhiteSmoke
});
```

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

### new Session(options)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-session/classes/Session

Creates a new instance of a Session, which manages the start, stop, and advancement of activities.

```APIDOC
## new Session(options)

### Description
Initializes a new session instance with the provided configuration options.

### Parameters
- **options** (SessionOptions) - Required - Configuration options for the session.
```

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

### Example assessment list output

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/deployment/self-hosting/configuration/existing-assessments

Sample output showing the structure of assessment information returned by the CLI, including descriptions, latest versions, and available version history.

```text
@m2c2kit/assessment-symbol-search:  
  description: A speeded continuous performance test of conjunctive feature search in which respondents identify matching symbol pairs as quickly and as accurately as they can  
  latest version: 0.8.19 (2024-08-16T19:21:09.927Z)  
  versions: 0.8.3, 0.8.4, 0.8.5, 0.8.6, 0.8.7, 0.8.8, 0.8.9, 0.8.10, 0.8.11, 0.8.12, 0.8.13, 0.8.14, 0.8.15, 0.8.16, 0.8.17, 0.8.18, 0.8.19  
  
@m2c2kit/assessment-grid-memory:  
  description: A visuospatial working memory task, with delayed free recall. After a brief exposure and short distraction phase, participants report the location of dots on a grid  
  latest version: 0.8.19 (2024-08-16T19:21:10.035Z)  
  versions: 0.8.3, 0.8.4, 0.8.5, 0.8.6, 0.8.7, 0.8.8, 0.8.9, 0.8.10, 0.8.11, 0.8.12, 0.8.13, 0.8.14, 0.8.15, 0.8.16, 0.8.17, 0.8.18, 0.8.19  
  
@m2c2kit/assessment-color-shapes:  
  description: A visual array change detection task, measuring intra-item feature binding, where participants determine if shapes change color across two sequential presentations of shape stimuli  
  latest version: 0.8.19 (2024-08-16T19:21:10.044Z)  
  versions: 0.8.3, 0.8.4, 0.8.5, 0.8.6, 0.8.7, 0.8.8, 0.8.9, 0.8.10, 0.8.11, 0.8.12, 0.8.13, 0.8.14, 0.8.15, 0.8.16, 0.8.17, 0.8.18, 0.8.19  
  
@m2c2kit/assessment-color-dots:  
  description: A cued-recall, item-location memory binding task, where after viewing 3 dots for a brief period of time, participants report: (1) the color at a cued location; (2) the location of a cued color  
  latest version: 0.8.19 (2024-08-16T19:21:10.046Z)  
  versions: 0.8.3, 0.8.4, 0.8.5, 0.8.6, 0.8.7, 0.8.8, 0.8.9, 0.8.10, 0.8.11, 0.8.12, 0.8.13, 0.8.14, 0.8.15, 0.8.16, 0.8.17, 0.8.18, 0.8.19
```

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

### Class-based parameter initialization

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/fundamentals/full-example/parameters

Example of defining parameters within a class constructor.

```javascript
class DocsDemo extends Game {
constructor() {
const defaultParameters = {
number_of_trials: {
type: "integer",
default: 3,
description: "How many trials to run.",
},
number_of_congruent_trials: {
type: "integer",
default: 2,
description: "How many trials will be congruent (word matches its color).",
},
fixation_cross_duration_ms: {
type: "number",
default: 1000,
description: "Duration, in milliseconds, of how long the fixation across will be shown.",
},
post_fixation_cross_blank_duration_ms: {
type: "number",
default: 1000,
```

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

### Example trial data output

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/fundamentals/user-data/saving-data

The raw JSON output printed to the console after a trial is completed.

```json
Trial Data: {"document_uuid":"9d6761b0-5593-4f66-b2aa-6befb8f97d9b", "session_uuid":"a274f6e1-79dc-4925-9468-29b906ac9acb",  
"activity_uuid":"c50ddb34-a477-4b23-8456-36aaa23777ea","trial_index":0,"mobile_research_fun":true,  
"device_metadata":{"userAgent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36(KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36",  
"devicePixelRatio":1.5,"screen":{"availHeight":1392,"availWidth":2560,"colorDepth":24,"height":1440,  
"orientation":{"type":"landscape-primary","angle":0},"pixelDepth":24,"width":2560},  
"webGlRenderer":"Google Inc. (NVIDIA), ANGLE (NVIDIA, NVIDIA GeForce RTX 3060 Ti Direct3D11 vs_5_0 ps_5_0, D3D11)"}}  
```

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

### Initialize Timer in onSetup

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/fundamentals/timer/timer-considerations

Starting a timer in onSetup triggers it before the scene transition completes, potentially leading to inaccurate response time measurements.

```javascript
sceneTwo.onSetup(() => {  
    backButton.hidden = true;  
    clickMeButton.hidden = true;  
    console.log("sceneTwo onSetup event");  
    clickMeButton.hidden = false;  
    clickMeButton.isUserInteractionEnabled = true;  
    Timer.startNew("rt");      
});
```

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

### node

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-physics/classes/PhysicsBody

Gets or sets the associated M2Node.

```APIDOC
## node

### Description
Gets or sets the M2Node associated with this physics body.

### Signature
- **get**: `M2Node`
- **set**: `(node: M2Node) => void`
```

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

### mass

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-physics/classes/PhysicsBody

Gets or sets the mass of the body.

```APIDOC
## mass

### Description
The mass of the body. Density will automatically be calculated when mass is set.

### Signature
- **get**: `number`
- **set**: `(mass: number) => void`
```

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

### Configure audioTrackConstraints

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/SoundRecorder

Example of setting audio track constraints for the SoundRecorder. Use caution as restrictive constraints may cause device access issues.

```typescript
audioTrackConstraints: {  
   channelCount: 1,  
   noiseSuppression: { ideal: true },  
 }  
```

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

### Instructions.create()

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Instructions

Creates an array of scenes containing instructions on how to complete the assessment.

```APIDOC
## Instructions.create(options)

### Description
Creates an array of scenes containing instructions on how to complete the assessment.

### Parameters
- **options** (InstructionsOptions) - Required - Configuration options for the instructions.

### Returns
- **Scene[]** - An array of instruction scenes.
```

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

### friction

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-physics/classes/PhysicsBody

Gets or sets the friction of the body.

```APIDOC
## friction

### Description
Friction of the body, in the range [0, 1].

### Signature
- **get**: `number`
- **set**: `(friction: number) => void`
```

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

### size

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Sprite

Gets or sets the size of the node.

```APIDOC
## size

### Description
Gets or sets the size of the node.

### Signature
- **get size()**: `Size`
- **set size(size: Size)**: `void`
```

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

### Initialize and Add SoundRecorder

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/sound/recording-audio/sound-recorder

Create a SoundRecorder instance with preferred and backup MIME types, then add it to the scene.

```javascript
const recorder = new SoundRecorder({  
  mimeType: "audio/webm",  
  backupMimeTypes: ["audio/webm", "audio/mp4"],  
});  
sceneOne.addChild(recorder);  
```

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

### Example output structure

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/fundamentals/randomization/randomizing-grids

Represents the expected array format returned by the randomization method.

```json
[
  { row: 2, column: 2 },
  { row: 0, column: 2 },
]
```

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

### Initialize a basic scene

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/fundamentals/primitives/buttons

Sets up a new scene with a specific background color.

```javascript
const sceneOne = new Scene({ backgroundColor: WebColors.WhiteSmoke });
```

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

### size

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Button

Gets or sets the dimensions of the button.

```APIDOC
## size

### Description
Size of the button. Default is 200 wide by 50 high.

### Signature
- **get**: `Size`
- **set**: `(size: Size) => void`
```

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

### initialize()

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/SoundPlayer

Initializes the SoundPlayer instance.

```APIDOC
## initialize()

### Description
Initializes the SoundPlayer node. This overrides the base M2Node initialization logic.

### Returns
- **void**
```

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

### fontColor

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/TextLine

Gets or sets the font color of the text.

```APIDOC
## fontColor

### Description
Manages the color of the text displayed by the node.

### Get Signature
- **Returns** (RgbaColor) - The current font color.

### Set Signature
- **Parameters**
  - **fontColor** (RgbaColor) - The new color to apply.
```

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

### Start Response Timer

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/fundamentals/full-example/data

Initializes a timer when the stimulus becomes visible and interaction is enabled.

```javascript
Action.custom( {callback: () => {  
    redButton.hidden = false;  
    greenButton.hidden = false;  
    blueButton.hidden = false;  
    wordLabel.text = trialConfigurations[game.trialIndex].word;  
    wordLabel.fontColor = trialConfigurations[game.trialIndex].color;  
    redButton.isUserInteractionEnabled = true;  
    greenButton.isUserInteractionEnabled = true;  
    blueButton.isUserInteractionEnabled = true;  
    Timer.startNew("rt");  
}})
```

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

### initialize()

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Game

Initializes the game activity.

```APIDOC
## initialize()

### Description
Initializes the activity. This method is asynchronous and must be awaited. When extending the Game class, this method should be overridden, and the base method must be called with `await super.initialize()`.

### Returns
- **Promise<void>**
```

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

### draggable

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/TextLine

Gets or sets the draggable state of the node.

```APIDOC
## draggable

### Description
Determines whether the node can be dragged by the user.

### Get Signature
- **Returns** (boolean) - True if the node is draggable.

### Set Signature
- **Parameters**
  - **draggable** (boolean) - The new draggable state.
```

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

### Configure game options

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/fundamentals/user-data/m2c2kit-internals

Set up game metadata, dimensions, fonts, and link the trial schema.

```javascript
const options = {  
    name: "Documentation Example",  
    id: "docs",  
    publishUuid: "c9ec7b5b-a6cc-4308-9b1c-73b40ae4aa9e",  
    width: 200, height: 400,  
    fonts: [{  
	    fontName: "roboto",  
	    url: "fonts/roboto/Roboto-Regular.ttf"  
    }],  
    trialSchema: demoSchema  
};  
```

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

### hidden

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Scene

Gets or sets the visibility state of the node.

```APIDOC
## get/set hidden

### Description
Determines if the node and its children are hidden from display.

### Parameters
- **hidden** (boolean) - The visibility state (true to hide, false to show).
```

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

### canvasKit

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Scene

Gets the CanvasKit instance associated with the scene.

```APIDOC
## canvasKit

### Description
Gets the scene that contains this node by searching up the ancestor tree recursively. Throws exception if node is not part of a scene.

### Signature
- **get**: `canvasKit(): CanvasKit`
```

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

### Initialize game scenes

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/fundamentals/user-data/m2c2kit-internals

Implement the initialize method to set up the game environment and add scenes.

```javascript
async initialize() {  
    await super.initialize();  
    const game = this;  
    const sceneOne = new Scene({ backgroundColor: WebColors.PaleTurquoise });  
    game.addScene(sceneOne);  
}  
```

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

### backgroundColor

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Scene

Gets or sets the background color of the scene.

```APIDOC
## backgroundColor

### Description
Background color of the scene. Default is Constants.DEFAULT_SCENE_BACKGROUND_COLOR (WebColors.White).

### Signature
- **get**: `backgroundColor(): RgbaColor`
- **set**: `backgroundColor(backgroundColor: RgbaColor): void`
```

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

### Initialize Physics with Performance Logging

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/fundamentals/physics/performance

Enable engine statistics logging by setting logEngineStats to true during Physics instance creation.

```javascript
const NUMBER_OF_BALLS = 50;
const physics = new Physics({ logEngineStats: true });
await game.registerPlugin(physics);
const sceneOne = new Scene({
backgroundColor: WebColors.WhiteSmoke
});
game.addScene(sceneOne);
const edge = new Shape({
rect: { width: 200, height: 400 },
fillColor: WebColors.Transparent,
strokeColor: WebColors.Black,
lineWidth: 1,
position: { x: 100, y: 200 },
});
edge.physicsBody = new PhysicsBody({
edgeLoop: { width: 200, height: 400, thickness: 1000 },
restitution: 0,
});
sceneOne.addChild(edge);
```

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

### onSetup(callback, options?)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/CountdownScene

Registers a callback to be executed every time the scene is presented. Useful for initializing node states.

```APIDOC
## onSetup(callback, options?)

### Description
Registers a callback that is executed every time the scene is presented. This is typically used to reset nodes to their initial state or perform setup logic before the scene is displayed.

### Parameters
- **callback** (function) - Required - The function to execute.
- **options** (CallbackOptions) - Optional - Configuration options for the callback.
```

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

### fontColor

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Label

Gets or sets the text color of the label.

```APIDOC
## fontColor

### Description
Manages the color of the text displayed by the label.

### Get Signature
- **Returns** (RgbaColor) - The current font color.

### Set Signature
- **Parameters**
  - **fontColor** (RgbaColor) - The new color to apply to the text.
```

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

### new VirtualKeyboard(options)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/VirtualKeyboard

Creates a new instance of the VirtualKeyboard component.

```APIDOC
## Constructor: new VirtualKeyboard(options)

### Description
Creates an on-screen keyboard instance that can be used to enter text.

### Parameters
- **options** (VirtualKeyboardOptions) - Required - Configuration options for the virtual keyboard.
```

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

### value

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Slider

Gets or sets the initial value of the slider.

```APIDOC
## value

### Description
The initial value of the slider.

### Signature
- **get**: `value()`: `number`
- **set**: `value(value: number)`: `void`
```

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

### trackColor

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Slider

Gets or sets the color of the slider track.

```APIDOC
## trackColor

### Description
The color of the track.

### Signature
- **get**: `trackColor()`: `RgbaColor`
- **set**: `trackColor(value: RgbaColor)`: `void`
```

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

### Initialize a Game with VirtualKeyboard

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/fundamentals/interactivity/virtual-keyboard

Configure a game instance with specific dimensions and font assets required for rendering custom keyboard components.

```typescript
class DocsDemo extends Game {
constructor() {
const options = {
id: "docs",
publishUuid: "c9ec7b5b-a6cc-4308-9b1c-73b40ae4aa9e",
width: 400, height: 800,
fonts: [{
fontName: "roboto",
url: "fonts/roboto/Roboto-Regular.ttf"
}], 
};
super(options);
}
async initialize() {
await super.initialize();
const game = this;
const sceneOne = new Scene({ backgroundColor: WebColors.LightSkyBlue });
game.addScene(sceneOne);
const box = new Shape({
rect: { size: { width: 300, height: 200 } },
fillColor: WebColors.White,
```

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

### Start a timer on scene appearance

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/fundamentals/timer/timing-user-behavior

Initialize a named timer within the onAppear event handler to begin tracking duration.

```javascript
sceneTwo.onAppear(() => {  
    console.log("sceneTwo onAppear event");  
    clickMeButton.hidden = false;  
    clickMeButton.isUserInteractionEnabled = true;  
    Timer.startNew("rt");  
});  
```

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

### Create instruction scenes

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/fundamentals/full-example/scenes

Uses Instructions.create() to define multiple instruction screens with custom text, images, and button overrides.

```javascript
const instructionsScenes = Instructions.create({  
    instructionScenes: [  
        {  
            title: "Stroop Assessment",  
            text: "Select the color that matches the font color. This is commonly known as the Stroop task.",  
            textFontSize: 20,  
            titleFontSize: 30,  
        },  
        {  
            title: "Stroop Assessment",  
            text: "For example, the word Red is colored Blue, so the correct response is Blue.",  
            textFontSize: 20,  
            titleFontSize: 30,  
            imageName: "stroop-screenshot",  
            imageAboveText: true,  
            textVerticalBias: .65,                     
            /**  
             * We override the next button's default text and color  
             */  
            nextButtonText: "START",  
            nextButtonBackgroundColor: WebColors.Green,  
        },  
    ],  
});  
game.addScenes(instructionsScenes);
```

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

### hidden

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Slider

Gets or sets the visibility of the slider node.

```APIDOC
## hidden

### Description
Determines if the node and its children are hidden from display.

### Parameters
- **hidden** (boolean) - Whether the node should be hidden.

### Returns
- **boolean** - The current hidden state.
```

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

### text

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Button

Gets or sets the text displayed on the button.

```APIDOC
## text

### Description
Text to be displayed on the button.

### Signature
- **get**: `string`
- **set**: `(text: string) => void`
```

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

### size

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Grid

Gets or sets the size of the grid in pixels.

```APIDOC
## size

### Description
Gets or sets the size of the grid in pixels.

### Signature
- **get**: `size()`: `Size`
- **set**: `size(size: Size)`: `void`
```

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

### initialize()

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/SoundRecorder

Initializes the SoundRecorder instance. This method overrides the base M2Node initialization logic.

```APIDOC
## initialize()

### Description
Performs initialization tasks specific to the SoundRecorder component.

### Returns
- **void**
```

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

### initialize()

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-session/classes/Session

Asynchronously initializes the m2c2kit engine and loads assets.

```APIDOC
## initialize()

### Description
Asynchronously initializes the m2c2kit engine and loads assets.

### Returns
- **Promise<void>**
```

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

### gridBackgroundColor

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Grid

Gets or sets the background color of the grid.

```APIDOC
## gridBackgroundColor

### Description
Accesses or modifies the background color property of the grid.

### Signature
`get gridBackgroundColor(): RgbaColor`
`set gridBackgroundColor(backgroundColor: RgbaColor): void`

### Parameters
- **backgroundColor** (RgbaColor) - The new color to apply to the grid background.
```

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

### completeNodeOptions()

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/VirtualKeyboard

Retrieves the complete configuration options for the VirtualKeyboard node, including visual properties, layout settings, and interaction states.

```APIDOC
## completeNodeOptions()

### Description
Returns the full set of configuration options for the VirtualKeyboard node. This includes properties like alpha, anchorPoint, backgroundColor, keyboard padding, and key configurations.

### Signature
`get completeNodeOptions(): object`

### Returns
- **alpha** (number) - Opacity of the node.
- **anchorPoint** (Point) - Point within the node that determines its position.
- **backgroundColor** (RgbaColor) - Background color of the keyboard.
- **capitalLettersOnly** (boolean) - If true, only capital letters are shown.
- **draggable** (boolean) - Whether the node can be dragged.
- **fontNames** (string[]) - Fonts for key labels.
- **fontSize** (number) - Size of font for keys.
- **hidden** (boolean) - Whether the node is hidden.
- **hiddenKeys** (string) - Comma-separated list of keys to hide.
- **isUserInteractionEnabled** (boolean) - Whether the node responds to user events.
- **keyboardHorizontalPaddingPercent** (number) - Horizontal padding percentage.
- **keyboardVerticalPaddingPercent** (number) - Vertical padding percentage.
- **keyColor** (RgbaColor) - Color of keys.
- **keyDownColor** (RgbaColor) - Color of keys when pressed.
- **keyHorizontalPaddingPercent** (number) - Horizontal padding for keys.
- **keysPerRow** (number) - Number of keys per row.
- **keyVerticalPaddingPercent** (number) - Vertical padding for keys.
- **name** (string) - Name of the node.
- **position** (Point) - Position of the node.
- **rows** (VirtualKeyboardRow[]) - Configuration of keyboard rows.
- **scale** (number) - Scale of the node.
- **showKeyDownPreview** (boolean) - Whether to show a key press preview.
- **size** (Size) - Size of the node.
- **specialKeyDownColor** (RgbaColor) - Color of special keys when pressed.
- **zPosition** (number) - Z-axis value for drawing order.
- **zRotation** (number) - Rotation in radians.
```

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

### columns

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Grid

Gets or sets the number of columns in the grid.

```APIDOC
## columns

### Description
Number of columns in the grid. Must be 1 or greater.

### Signature
- **get**(): `number`
- **set**(columns: `number`): `void`
```

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

### initialize()

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/TextLine

Initializes the TextLine node.

```APIDOC
## initialize()

### Description
Initializes the node. Overrides the base M2Node initialization.

### Returns
- **void**
```

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

### borderWidth

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/DrawPad

Gets or sets the border width of the DrawPad.

```APIDOC
## borderWidth

### Description
Gets or sets the border width of the DrawPad component.

### Parameters
- **borderWidth** (number) - Required - The width to set for the border.
```

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

### borderColor

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/DrawPad

Gets or sets the border color of the DrawPad.

```APIDOC
## borderColor

### Description
Gets or sets the border color of the DrawPad component.

### Parameters
- **borderColor** (RgbaColor) - Required - The color to set for the border.
```

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

### backgroundColor

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/DrawPad

Gets or sets the background color of the DrawPad.

```APIDOC
## backgroundColor

### Description
Gets or sets the background color of the DrawPad component.

### Parameters
- **backgroundColor** (RgbaColor) - Required - The color to set for the background.
```

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

### new Game(options)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Game

Constructor for the Game class. Initializes a new game instance with the provided options.

```APIDOC
## new Game(options)

### Description
Creates a new instance of the Game class. This is the base class that should be extended by all custom games.

### Parameters
- **options** (GameOptions) - Required - Configuration options for the game instance.
```

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

### onStrokeStart

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/DrawPad

Executes a callback when the user starts a stroke on the DrawPad.

```APIDOC
## onStrokeStart(callback, options?)

### Description
Executes a callback when the user starts a stroke on the DrawPad.

### Parameters
- **callback** (function) - Required - The function to execute.
- **options** (CallbackOptions) - Optional - Configuration options for the callback.

### Returns
- **void**
```

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

### circleOfRadius

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Shape

Gets or sets the radius if the shape is defined as a circle.

```APIDOC
## circleOfRadius

### Description
If provided, the shape will be rendered as a circle with the given radius.

### Signature
- **get**(): `undefined` | `number`
- **set**(circleOfRadius: `undefined` | `number`): `void`
```

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

### play(options)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/ScaleAction

Creates an action that will play a sound.

```APIDOC
## static play(options)

### Description
Creates an action that will play a sound. This action can only be used with a SoundPlayer node.

### Parameters
- **options** (PlayActionOptions) - Optional - The configuration options for the play action.

### Returns
- **PlayAction** - The play action.
```

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

### game

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Scene

Gets or sets the game object associated with the scene.

```APIDOC
## get/set game

### Description
Accesses the game instance that this scene belongs to. Throws an error if the scene is not part of a game object.

### Parameters
- **game** (Game) - The game instance to associate with the node.
```

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

### initialize()

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Button

Initializes the button component.

```APIDOC
## initialize()

### Description
Initializes the button component.

### Returns
- **void**
```

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

### backgroundColor

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Label

Gets or sets the background color of the label text.

```APIDOC
## backgroundColor

### Description
Gets or sets the background color of the label text. Default is undefined.

### Signature
- **get** backgroundColor(): undefined | RgbaColor
- **set** backgroundColor(backgroundColor: undefined | RgbaColor): void

### Parameters
- **backgroundColor** (undefined | RgbaColor) - The background color value.
```

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

### onAppear(callback, options)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/CountdownScene

Registers a callback to be executed after the scene has finished transitions and appeared on screen.

```APIDOC
## onAppear(callback, options)

### Description
Code that will be called after the scene has finished any transitions and has fully appeared on the screen.

### Parameters
- **callback** (function) - Required - function to execute
- **options** (CallbackOptions) - Optional - CallbackOptions

### Returns
- **void**
```

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

### initialize()

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/I18n

Initializes the I18n instance and sets the initial locale, optionally retrieving settings from a data store.

```APIDOC
## Method: initialize()

### Description
Initializes the I18n instance and sets the initial locale. If a data store is configured, it attempts to retrieve previously set locale and fallback locale settings.

### Returns
- **Promise<void>**
```

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

### fontColor

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/CountdownTimer

Gets or sets the font color for the timer text.

```APIDOC
## get fontColor()

### Description
Returns the current font color of the timer text.

## set fontColor(fontColor)

### Description
Sets the font color for the timer text.

### Parameters
- **fontColor** (RgbaColor) - Required - The color to set for the timer text.
```

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

### new SoundPlayer(options)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/SoundPlayer

Creates a new instance of the SoundPlayer class.

```APIDOC
## Constructor: new SoundPlayer(options)

### Description
Initializes a new SoundPlayer node for playing sounds.

### Parameters
- **options** (SoundPlayerOptions) - Required - Configuration options for the sound player.
```

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

### hidden

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Button

Gets or sets the visibility state of the button and its children.

```APIDOC
### hidden

- **Get**: `hidden(): boolean`
- **Set**: `hidden(hidden: boolean): void`

Gets or sets whether the node and its children are hidden. Default is false.
```

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

### draggable

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Slider

Gets or sets whether the slider node can be dragged.

```APIDOC
## draggable

### Description
Determines if the node can be dragged by the user.

### Parameters
- **draggable** (boolean) - Whether the node is draggable.

### Returns
- **boolean** - The current draggable state.
```

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

### lineWidth

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/DrawPad

Gets or sets the width of the lines drawn on the DrawPad.

```APIDOC
## lineWidth

### Description
Gets or sets the width of the lines as a number.

### Signature
- **get**(): `number`
- **set**(`lineWidth`: `number`): `void`
```

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

### Initialize a localized game instance

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/internationalization/introduction

Configures a game class with specific locale settings and translation dictionaries for multi-language support.

```javascript
class DocsDemo extends Game {
constructor() {
const options = {
name: "Documentation Example",
id: "docs",
publishUuid: "c9ec7b5b-a6cc-4308-9b1c-73b40ae4aa9e",
width: 200, height: 400,
fonts: [
{
fontName: "roboto",
url: "fonts/roboto/Roboto-Regular.ttf",
},
],
locale: "en-US",
translation: {
"configuration": {
"baseLocale": "en-US"
},
"en-US": {
localeName: "English",
GREETING_LABEL: "Hello, world",
},
```

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

### lineColor

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/DrawPad

Gets or sets the color of the lines drawn on the DrawPad.

```APIDOC
## lineColor

### Description
Gets or sets the RgbaColor used for drawing lines.

### Signature
- **get**(): `RgbaColor`
- **set**(`lineColor`: `RgbaColor`): `void`
```

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

### initialize(physics)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-physics/classes/PhysicsBody

Initializes the physics body with the provided physics engine instance.

```APIDOC
## initialize(physics)

### Description
Initializes the physics body with the provided physics engine instance.

### Parameters
- **physics** (Physics) - Required - The physics engine instance.

### Returns
- **void**
```

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

### show()

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Dialog

Displays the dialog.

```APIDOC
## show()

### Description
Displays the dialog node.
```

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

### damping

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-physics/classes/PhysicsBody

Gets or sets the friction due to air forces on the body.

```APIDOC
## damping

### Description
Friction due to air forces on the body, in the range [0, 1].

### Signature
- **get**: `number`
- **set**: `(damping: number) => void`
```

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

### new Scene(options)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Scene

Creates a new instance of a Scene, which serves as the top-level container for game elements.

```APIDOC
## Constructor: new Scene(options)

### Description
Creates a new Scene instance. The scene acts as the game screen or stage and fills the entire available screen area. It is used to manage different phases or pages of a game.

### Parameters
- **options** (SceneOptions) - Required - Configuration options for the scene, defaults to an empty object `{}`.

### Returns
- **Scene** - A new instance of the Scene class.
```

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

### horizontalAlignmentMode

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Label

Gets or sets the horizontal alignment mode for the label text.

```APIDOC
## horizontalAlignmentMode

### Description
Gets or sets the horizontal alignment of the label text. Defaults to LabelHorizontalAlignmentMode.center.

### Signature
- **get**: `() => LabelHorizontalAlignmentMode`
- **set**: `(horizontalAlignmentMode: LabelHorizontalAlignmentMode) => void`
```

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

### fontSize

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Label

Gets or sets the size of the label text. Defaults to 16.

```APIDOC
## fontSize

### Description
Gets or sets the size of the label text. The default value is 16.

### Signature
- **get**: `() => number`
- **set**: `(fontSize: number) => void`
```

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

### new Physics(options?)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-physics/classes/Physics

Creates an instance of the physics engine. This should be called early in the game's initialize method.

```APIDOC
## Constructor: new Physics(options?)

### Description
Creates an instance of the physics engine. This constructor must be called early in the game's initialize() method as it registers physics properties to the M2Node class.

### Parameters
- **options** (PhysicsOptions) - Optional - Configuration options for the physics engine.
```

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

### draggable

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Label

Gets or sets whether the label node can be dragged by the user.

```APIDOC
## draggable

### Description
Controls whether the node responds to drag interactions.

### Get Signature
- **Returns** (boolean) - True if the node is draggable, false otherwise.

### Set Signature
- **Parameters**
  - **draggable** (boolean) - The new draggable state.
```

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

### Action.sequence

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Action

Creates an array of actions that will be run in order.

```APIDOC
## Action.sequence(actions)

### Description
Creates an array of actions that will be run in order. The next action will not begin until the current one has finished.

### Parameters
- **actions** (Action[]) - Required - One or more actions that form the sequence.

### Returns
- **SequenceAction** - The sequence action.
```

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

### trackSize

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Slider

Gets or sets the size of the track that the thumb moves along.

```APIDOC
## trackSize

### Description
The size of the track that the thumb moves along.

### Signature
- **get**: `trackSize()`: `Size`
- **set**: `trackSize(value: Size)`: `void`
```

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

### draggable

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/CountdownTimer

Gets or sets whether the CountdownTimer node can be dragged by the user.

```APIDOC
## get draggable()

### Description
Returns whether the node is currently draggable.

## set draggable(draggable)

### Description
Sets whether the node can be dragged.

### Parameters
- **draggable** (boolean) - Required - Whether the node should be draggable.
```

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

### completeNodeOptions

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/TextLine

Retrieves the complete configuration options for the TextLine node.

```APIDOC
## completeNodeOptions()

### Description
Returns an object containing all configuration options for the node, such as alpha, anchorPoint, font settings, and position.

### Returns
- **object** - The complete node options configuration.
```

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

### fontSize

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Button

Gets or sets the size of the button text. Default is 20.

```APIDOC
### fontSize

- **Get**: `fontSize(): number`
- **Set**: `fontSize(size: number): void`

Gets or sets the size of the button text. Default is 20.
```

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

### run(action, key?)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Dialog

Runs an action on the node. If the node is part of an active scene, the action runs immediately.

```APIDOC
## run(action, key?)

### Description
Runs an action on this node. Calling run() multiple times on a node will add to existing actions, not replace them.

### Parameters
- **action** (Action) - Required - The action to run.
- **key** (string) - Optional - A string identifier used to identify the action for later reference.
```

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

### Initialize a Game with Sprite assets

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/tutorials/fundamentals/primitives/sprites

Define image assets within the game options and initialize the scene with a Sprite.

```javascript
class DocsDemo extends Game {
constructor() {
const options = {
name: "Documentation Example",
id: "docs",
publishUuid: "c9ec7b5b-a6cc-4308-9b1c-73b40ae4aa9e",
width: 200, height: 400,
images: [{
imageName: "earth",
height: 128,
width: 128,
url: "images/blue-marble.jpg",
}]
};
super(options);
}
async initialize() {
await super.initialize();
const game = this;
const sceneOne = new Scene({ backgroundColor: WebColors.SkyBlue });
game.addScene(sceneOne);
const earthSprite = new Sprite({
```

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

### fontColor

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Button

Gets or sets the color of the button text. Defaults to WebColors.White.

```APIDOC
### fontColor

- **Get**: `fontColor(): RgbaColor`
- **Set**: `fontColor(color: RgbaColor): void`

Gets or sets the color of the button text. Default is WebColors.White.
```

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

### draggable

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Button

Gets or sets whether the button node can be dragged by the user.

```APIDOC
## draggable

### Description
Determines if the node is draggable. 

### Parameters
- **draggable** (boolean) - True to enable dragging, false to disable.
```

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

### scale

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Grid

Gets or sets the scale of the node. The default value is 1.0.

```APIDOC
## scale

### Description
Gets or sets the scale of the node. Default is 1.0.

### Signature
- **get**: `scale()`: `number`
- **set**: `scale(scale: number)`: `void`
```

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

### Event Callbacks (onInitialize, onStart, onEnd, onData, onActivityData)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-session/classes/Session

Methods to register callbacks for various session lifecycle and data events.

```APIDOC
## Event Callbacks

### Methods
- **onInitialize(callback, options?)**: Executes a callback when the session initializes.
- **onStart(callback, options?)**: Executes a callback when the session starts.
- **onEnd(callback, options?)**: Executes a callback when the session ends.
- **onData(callback, options?)**: Executes a callback when the session generates data (used for diagnostics).
- **onActivityData(callback, options?)**: Executes a callback when any activity in the session generates data.

### Parameters
- **callback** (Function) - Required
- **options** (CallbackOptions) - Optional
```

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

### anchorPoint

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Grid

Gets or sets the point within the node that determines its position.

```APIDOC
## anchorPoint

### Description
Point within the node that determines its position. Default is { x: 0.5, y: 0.5 }, which centers the node on its position.

### Signature
- **get**(): `Point`
- **set**(anchorPoint: `Point`): `void`
```

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

### isUserInteractionEnabled

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/VirtualKeyboard

Gets or sets whether the VirtualKeyboard responds to user events.

```APIDOC
## isUserInteractionEnabled

### Description
Determines if the VirtualKeyboard responds to user events. Default is true.

### Signature
- **get**: `boolean`
- **set**: `(isUserInteractionEnabled: boolean) => void`
```

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

### warmup(canvas)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/Dialog

Initializes the dialog component on the provided canvas.

```APIDOC
## warmup(canvas)

### Description
Prepares the dialog component for rendering by performing necessary setup on the provided canvas instance.

### Parameters
- **canvas** (Canvas) - Required - The canvas instance to be used for the dialog.

### Returns
- **void**
```

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

### draggable

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/DrawPad

Gets or sets whether the DrawPad node can be dragged by the user.

```APIDOC
## get draggable()

### Description
Checks if the node is currently draggable.

### Returns
- **boolean** - True if the node can be dragged, false otherwise.

## set draggable(draggable)

### Description
Sets whether the node can be dragged.

### Parameters
- **draggable** (boolean) - Required - Whether the node should be draggable.
```

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

### warmup(canvas)

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-core/classes/Sprite

Prepares the sprite for rendering on the provided canvas.

```APIDOC
## warmup(canvas)

### Description
Prepares the sprite for rendering.

### Parameters
- **canvas** (Canvas) - Required - The canvas to warm up.

### Returns
- **void**
```

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

### reset()

Source: https://m2c2-project.github.io/m2c2kit-docs/docs/reference/api-addons/classes/CountdownTimer

Resets the countdown timer to its initial state so it can be started again. This method is idempotent.

```APIDOC
## reset()

### Description
Resets the countdown timer to its initial state so it can be started again. This method is idempotent and can be called on a CountdownTimer in any state.

### Returns
- **void**
```