Phaser

https://docs.phaser.io/phaser
Admin
Phaser is a fast, free, and fun open-source HTML5 game framework for creating 2D games for web...
Tokens:789,470
Snippets:6,779
Trust Score:9.4
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install a script library with npm

Source: https://docs.phaser.io/phaser-editor/scene-editor/script-node/script-node-libraries

Install a script library as a Node module using npm. The example installs @phaserjs/editor-scripts-quick.

```bash
npm install @phaserjs/editor-scripts-quick  
```

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

### Get data example

Source: https://docs.phaser.io/phaser/concepts/gameobjects

Example of getting a data value using `getData`.

```javascript
mummy.getData('health'); // → 3  
```

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

### Install plugin dynamically in init method

Source: https://docs.phaser.io/phaser/concepts/scenes

Install a default plugin at runtime using this.sys.install inside the scene's init method. This example installs the TweenManager plugin.

```javascript
class BootScene extends Phaser.Scene {  
  
    constructor ()  
    {  
        super({  
            key: 'boot',  
            plugins: []  
        });  
    }  
  
    init ()  
    {  
        this.sys.install('TweenManager');  
    }  
  
}  

```

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

### Start loading

Source: https://docs.phaser.io/phaser/concepts/loader

Event fired when the loader starts loading.

```APIDOC
## Start loading

### Description
Event fired when the loader starts loading.

### Event
`start`

### Parameters
- **scope** (object) - The context for the callback.

### Example
```javascript
this.load.once("start", function () {}, scope);
```
```

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

### Install Phaser from npm

Source: https://docs.phaser.io/phaser/getting-started/installation

Install Phaser via npm.

```bash
npm install phaser  

```

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

### Crop example

Source: https://docs.phaser.io/phaser/concepts/gameobjects

Example that crops an image to a 64x32 region starting at (0,0) in texture coordinates.

```javascript
image.setCrop(0, 0, 64, 32);  
```

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

### this.load.plugin(key, url, start)

Source: https://docs.phaser.io/phaser/concepts/loader

Loads a plugin. The start parameter indicates whether to start the plugin when loaded.

```APIDOC
## this.load.plugin(key, url, start)

### Description
Loads a plugin. The start parameter indicates whether to start the plugin when loaded.

### Method
LOAD

### Endpoint
this.load.plugin(key, url, start)

### Parameters
- **key** (string) - Required - The unique key to store the loaded plugin in the cache.
- **url** (string) - Required - File url or class instance.
- **start** (boolean) - Required - Whether to start the plugin when loaded.

### Request Example
```
this.load.plugin(key, url, true);
```

### Response
No direct response. The plugin is stored in the cache and can be retrieved using the key.
```

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

### Listen to start event

Source: https://docs.phaser.io/phaser/concepts/loader

Registers a one-time callback for the 'start' event, which fires when the loader starts loading. The callback receives the scope.

```javascript
this.load.once("start", function () {}, scope);  
```

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

### Read start parameter and start scene (development)

Source: https://docs.phaser.io/phaser-editor/scene-editor/misc

Code to read the 'start' URL parameter and start the corresponding scene. Used in development builds to preview a specific scene. The process.env.NODE_ENV expression is replaced by webpack at compile time.

```javascript
if (process.env.NODE_ENV === "development") {  
  
    const start = new URLSearchParams(location.search).get("start");  
  
    if (start) {  
  
        console.log(`Development: jump to ${start}`);  
        this.scene.start(start);  
        return;  
    }  
}  

```

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

### Install Spine Phaser runtime via NPM

Source: https://docs.phaser.io/phaser-editor/scene-editor/spine-animations/spine-animations-install

Install the Spine Phaser runtime using NPM. This is one of two installation methods; the other uses a script tag.

```bash
npm install @esotericsoftware/spine-phaser  
```

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

### Set path example

Source: https://docs.phaser.io/phaser/concepts/loader

Example of setting a path and then loading an image. The image is loaded from 'images/sprites/ball.png'.

```javascript
this.load.setPath("images/sprites/");  
this.load.image("ball", "ball.png"); // loads the ball.png file from images/sprites/ball.png  
```

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

### Get and set start angle

Source: https://docs.phaser.io/phaser/concepts/gameobjects/graphics

Gets the start angle in degrees, sets it with setStartAngle (optionally with anticlockwise), or by directly assigning to arc.startAngle.

```javascript
var startAngle = arc.startAngle;  

```

```javascript
arc.setStartAngle(startAngle);  
// arc.setStartAngle(startAngle, anticlockwise);  

```

```javascript
arc.startAngle = startAngle;  

```

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

### Install desktop shortcuts on Linux with install.sh

Source: https://docs.phaser.io/phaser-editor/first-steps/download-and-install

Execute the install.sh script to create a desktop shortcut and a menu entry in the Desktop Environment. No root privileges are required.

```bash
$ ./install.sh  

```

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

### Install Spine Phaser runtime via script tag

Source: https://docs.phaser.io/phaser-editor/scene-editor/spine-animations/spine-animations-install

Install the Spine Phaser runtime using a script tag in the index.html file of your game. This is an alternative to the NPM installation.

```html
<script src="https://unpkg.com/@esotericsoftware/spine-phaser@4.1.*/dist/iife/spine-phaser.js">  
</script>  
```

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

### File Pack example

Source: https://docs.phaser.io/phaser/concepts/loader

Shows how to load a file pack with named sections. The pack must have at least one named section.

```javascript
this.load.pack("pack1", {  
  section1: {  
    files: [  
      { type: "image", key: "conch", url: "conch.png" },  
      {  
        type: "spritesheet",  
        key: "mermaid",  
        url: "mermaid.png",  
        frameConfig: {  
          /* … */  
        },  
      },  
    ],  
  },  
});  
```

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

### startFullscreen()

Source: https://docs.phaser.io/phaser/concepts/scale-manager

Starts fullscreen mode. Should be called under a 'pointerup' touch event.

```APIDOC
## Method: startFullscreen()

### Description
Starts fullscreen mode. Should be called under a 'pointerup' touch event.

### Method
`startFullscreen()`

### Syntax
```javascript
scene.scale.startFullscreen();
```
```

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

### Get game time

Source: https://docs.phaser.io/phaser/concepts/game

Get the time that the current game step started using game.getTime() or scene.game.getTime().

```javascript
var time = game.getTime();  
// var time = scene.game.getTime();  

```

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

### Get Phaser Editor server options with --help

Source: https://docs.phaser.io/phaser-editor/misc/server-options

Run this command to display the full list of server options. The output is not shown in the source.

```bash
$ PhaserEditor --help  

```

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

### Hello World HTML file

Source: https://docs.phaser.io/phaser/getting-started/set-up-dev-environment

A complete index.html file that loads Phaser 3.85.2 from a CDN and creates a simple game with a sky background, a bouncing logo, and particle effects. Paste this into your webroot and open it in a browser to test your setup.

```html
<!DOCTYPE html>  
<html>  
<head>  
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.85.2/dist/phaser-arcade-physics.min.js"></script>  
</head>  
<body>  
  
    <script>  
    class Example extends Phaser.Scene  
    {  
        preload ()  
        {  
            this.load.setBaseURL('https://cdn.phaserfiles.com/v385');  
  
            this.load.image('sky', 'assets/skies/space3.png');  
            this.load.image('logo', 'assets/sprites/phaser3-logo.png');  
            this.load.image('red', 'assets/particles/red.png');  
        }  
  
        create ()  
        {  
            this.add.image(400, 300, 'sky');  
  
            const particles = this.add.particles(0, 0, 'red', {  
                speed: 100,  
                scale: { start: 1, end: 0 },  
                blendMode: 'ADD'  
            });  
  
            const logo = this.physics.add.image(400, 100, 'logo');  
  
            logo.setVelocity(100, 200);  
            logo.setBounce(1, 1);  
            logo.setCollideWorldBounds(true);  
  
            particles.startFollow(logo);  
        }  
    }  
  
    const config = {  
        type: Phaser.AUTO,  
        width: 800,  
        height: 600,  
        scene: Example,  
        physics: {  
            default: 'arcade',  
            arcade: {  
                gravity: { y: 200 }  
            }  
        }  
    };  
  
    const game = new Phaser.Game(config);  
    </script>  
  
</body>  
</html>  

```

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

### plane.anims.hasStarted

Source: https://docs.phaser.io/phaser/concepts/gameobjects/mesh

Gets whether the animation has started on this Plane.

```APIDOC
## plane.anims.hasStarted

### Description
Gets whether the animation has started on this Plane.

### Property
hasStarted

### Returns
- **boolean** - True if the animation has started, false otherwise.

### Example
```javascript
var hasStarted = plane.anims.hasStarted;
```

```

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

### preBoot and postBoot callbacks in game config

Source: https://docs.phaser.io/phaser/concepts/game

Shows how to use preBoot and postBoot callbacks in the game configuration. preBoot runs after DOMContentLoaded and before most systems are set up; postBoot runs after all systems are ready. The game loop starts immediately after postBoot.

```javascript
const config = {  
    preBoot: function (game) {  
      // Config (including defaults) has been created.  
      console.log('game config' game.config);  
    },  
    postBoot: function (game) {  
      // Game canvas has been created.  
      console.log('game canvas', game.canvas);  
    }  
};  
  
const game = new Phaser.Game(config);  

```

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

### timer.getElapsed

Source: https://docs.phaser.io/phaser/concepts/time

Gets the elapsed time since the timer started.

```APIDOC
## timer.getElapsed

### Description
Gets the elapsed time since the timer started.

### Method
getElapsed

### Returns
- **number** - Elapsed time in milliseconds.

### Example
```javascript
var elapsed = timer.getElapsed(); // ms
```
```

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

### Get start point of path or curve

Source: https://docs.phaser.io/phaser/concepts/math

Returns the start point of the path or curve. The optional out parameter allows modifying an existing object.

```javascript
var out = path.getStartPoint();  
// var out = path.getStartPoint(out);  // modify out  

```

```javascript
var out = curve.getStartPoint();  
// var out = curve.getStartPoint(out);  // modify out  

```

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

### Scene configuration object example

Source: https://docs.phaser.io/phaser/concepts/scenes

Example of a scene configuration object with the key property and commented-out optional properties.

```javascript
var config = {  
  key: "",  
  // active: false,  
  // visible: true,  
  // pack: false,  
  // cameras: null,  
  // map: {},  
  // physics: {},  
  // loader: {},  
  // plugins: false,  
  // input: {}  
};  

```

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

### Basic Configuration

Source: https://docs.phaser.io/phaser/concepts/physics/arcade

Shows how to enable Arcade Physics with a basic configuration object.

```APIDOC
## Basic Configuration

### Description
Enables Arcade Physics with default settings.

### Configuration Object
```javascript
const config = {  
    // ...  
    physics: {  
        default: 'arcade'  
    },  
    // ...  
};  
  
const game = new Phaser.Game(config);  
```
```

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

### line.getPointA()

Source: https://docs.phaser.io/phaser/concepts/geometry

Gets the start point of the line as an object with x and y properties.

```APIDOC
## line.getPointA()

### Description
Gets the start point of the line as an object with x and y properties.

### Method
`line.getPointA()` or `line.getPointA(start)`

### Parameters
- `start` (object) - Optional. The object to store the result in.

### Returns
- (object) - The start point as `{x, y}`.

### Example
```javascript
var start = line.getPointA(); // start: {x, y}
var start = line.getPointA(start); // push start
```
```

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

### Arc Angle Methods

Source: https://docs.phaser.io/phaser/concepts/gameobjects/graphics

Get and set start angle, end angle, and anticlockwise flag.

```APIDOC
## Arc Angle Methods

### Description
Provides getters and setters for start angle, end angle, and anticlockwise flag.

### Start Angle (degrees)
#### Get
```javascript
var startAngle = arc.startAngle;
```

#### Set
```javascript
arc.setStartAngle(startAngle);
// arc.setStartAngle(startAngle, anticlockwise);
```
or
```javascript
arc.startAngle = startAngle;
```

### End Angle (degrees)
#### Get
```javascript
var endAngle = arc.endAngle;
```

#### Set
```javascript
arc.seEndAngle(endAngle);
```
or
```javascript
arc.endAngle = endAngle;
```

### Anticlockwise (boolean)
#### Get
```javascript
var anticlockwise = arc.anticlockwise;
```

#### Set
```javascript
arc.anticlockwise = anticlockwise;
```
```

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

### Add scene from scene instance using scene.add()

Source: https://docs.phaser.io/phaser/concepts/scenes

Uses the preBoot callback to add a scene from an instance with the key 'default' and autoStart set to true.

```javascript
class Scene extends Phaser.Scene {  
  create() {  
    /*…*/  
  }  
}  
  
new Phaser.Game({  
  callbacks: {  
    preBoot: (game) => {  
      game.scene.add("default", new Scene(), true);  
    },  
  },  
});  

```

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

### Create a basic Phaser.Game instance

Source: https://docs.phaser.io/phaser/concepts/game

Creates a new Phaser game with a single scene that displays 'Hello world' text. No need to wait for DOMContentLoaded or window.onload, but may be needed if using the Scale Manager with external stylesheets or images.

```javascript
new Phaser.Game({  
  scene: {  
    create: function () {  
      this.add.text(0, 0, 'Hello world');  
    }  
  }  
});  

```

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

### Get elapsed time of a timer

Source: https://docs.phaser.io/phaser/concepts/time

Gets the elapsed time since the timer started. `getElapsed()` returns milliseconds, `getElapsedSeconds()` returns seconds. The commented `timer.elapsed` property also returns milliseconds.

```javascript
var elapsed = timer.getElapsed(); // ms  
var elapsed = timer.getElapsedSeconds(); // sec  
// var elapsed = timer.elapsed;  // ms  

```

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

### getStartPoint(out?)

Source: https://docs.phaser.io/phaser/concepts/math

Gets the start point of the path or curve. The optional out parameter can be used to modify an existing vector.

```APIDOC
## getStartPoint(out?)

### Description
Gets the start point of the path or curve. The optional out parameter can be used to modify an existing vector.

### Method
`getStartPoint`

### Parameters
- `out` (object) - Optional - A vector object to store the result.

### Returns
- `out` (object) - The start point.

### Example
```javascript
var out = path.getStartPoint();
// var out = path.getStartPoint(out);  // modify out
```

or
```javascript
var out = curve.getStartPoint();
// var out = curve.getStartPoint(out);  // modify out
```
```

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

### Plugins configuration object example

Source: https://docs.phaser.io/phaser/concepts/scenes

Example of a plugins configuration object with global and scene arrays for plugin definitions.

```javascript
{  
    global: [  
        //{key, plugin, start}  
    ],  
    scene: [  
        // ...  
    ]  
}  

```

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

### Get random child

Source: https://docs.phaser.io/phaser/concepts/gameobjects/container

Returns a random child from the container, optionally within a start index and length range.

```javascript
var child = container.getRandom(startIndex, length);  
```

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

### Retrieve the first object in the Display List

Source: https://docs.phaser.io/phaser/concepts/gameobjects/display-list

Example of using `getAt(0)` to get the first object in the Display List.

```javascript
let firstObject = this.children.getAt(0); // Retrieves the first object in the Display List  
```

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

### emitter.startFollow(target, offsetX, offsetY, trackVisible)

Source: https://docs.phaser.io/phaser/concepts/gameobjects/particles

Starts the emitter following a target Game Object. Optionally specify offsets and whether the emitter's visible state tracks the target's visible state.

```APIDOC
## emitter.startFollow(target, offsetX, offsetY, trackVisible)

### Description
Starts the emitter following a target Game Object. Optionally specify offsets and whether the emitter's visible state tracks the target's visible state.

### Method
startFollow

### Parameters
- **target** (Game Object) - Required - The Game Object to follow.
- **offsetX** (number) - Optional - Horizontal offset of the particle origin from the Game Object.
- **offsetY** (number) - Optional - Vertical offset of the particle origin from the Game Object.
- **trackVisible** (boolean) - Optional - Whether the emitter's visible state will track the target's visible state.

### Request Example
```js
emitter.startFollow(target);
// emitter.startFollow(target, offsetX, offsetY, trackVisible);
```

```

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

### Add script libraries to phasereditor2d.config.json

Source: https://docs.phaser.io/phaser-editor/scene-editor/script-node/script-node-libraries

Add the installed script libraries to the 'scripts' section of the phasereditor2d.config.json file. The example shows both @phaserjs/editor-scripts-base and @phaserjs/editor-scripts-quick.

```json
{  
    "plugins": [],  
    "scripts": [  
        "@phaserjs/editor-scripts-base",  
        "@phaserjs/editor-scripts-quick"  
    ],  
    "skip": [  
        "dist"  
    ],  
    "playUrl": "http://localhost:8080"  
}  
```

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

### Start following a target with emitter.startFollow

Source: https://docs.phaser.io/phaser/concepts/gameobjects/particles

Makes the emitter follow a target Game Object. Optional parameters include offsetX, offsetY, and trackVisible.

```javascript
emitter.startFollow(target);  
// emitter.startFollow(target, offsetX, offsetY, trackVisible);  

```

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

### Get all matching children

Source: https://docs.phaser.io/phaser/concepts/gameobjects/container

Returns all children whose property strictly (===) matches the given value, optionally within a start and end index range.

```javascript
var children = container.getAll(property, value, startIndex, endIndex);
// value: the value to test the property against. Must pass a strict (`===`) comparison check.
```

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

### Example query return object

Source: https://docs.phaser.io/phaser/concepts/data-manager

Example object returned by query when matching keys are found.

```javascript
{  
    'M41A Pulse Rifle': 10,  
    'M42A Scope Rifle': 40  
}  

```

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

### Get render children

Source: https://docs.phaser.io/phaser/concepts/cameras

Returns the array of Game Objects that this Camera rendered in the previous (or current) frame. The array is cleared at the start of Camera.preUpdate, or if the Camera is destroyed.

```javascript
var children = camera.renderList;  
```

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

### Add a particle emitter with full configuration

Source: https://docs.phaser.io/phaser/concepts/gameobjects/particles

Creates a particle emitter with a comprehensive configuration object. The example shows all available EmitterOp and emitter properties, including zones, bounds, follow, and texture settings. Many properties are left undefined or empty for customization.

```javascript
var particles = this.add.particles(x, y, texture, {  
      
    // EmitterOp  
    accelerationX: 0,  
    accelerationY: 0,  
    alpha: 1,  
    angle: { min: 0, max: 360 },  
    bounce: 0,  
    color: undefined,  
    delay: 0,  
    hold: 0,  
    lifespan: 1000,  
    maxVelocityX: 10000,  
    maxVelocityY: 10000,  
    moveToX: 0,  
    moveToY: 0,  
    quantity: 1,  
    rotate: 0,  
    scaleX: 1,  
    scaleY: 1,  
    // scale:  
    speedX: 0,  
    speedY: 0,  
    speed:   
    tint: 0xffffff,  
    x: 0,  
    y: 0,  
  
    // Emitter properties  
    active:  
    advance:  
    blendMode:  
    colorEase:  
    deathCallback:  
    deathCallbackScope:  
    duration:  
    emitCallback:  
    emitCallbackScope:  
    // callbackScope      
    frequency:  
    gravityX:  
    gravityY:  
    maxAliveParticles:  
    maxParticles:  
    name:  
    emitting:  
    particleBringToTop:  
    particleClass:  
    radial:  
    sortCallback:  
    sortOrderAsc:  
    sortProperty:  
    stopAfter:  
    tintFill:  
    timeScale:  
    trackVisible:  
    visible:  
  
    // Position  
    // emitZone : random-zone, edge-zone  
    // random-zone  
    emitZone: {  
        type: 'random',  
        source: geom,  
    },  
  
    // edge-zone  
    emitZone:{  
        type: 'edge',  
        source: geom,  
        quantity: 1,  
        stepRate: 0,  
        total: -1,  
        yoyo: false,  
        seamless: true  
    },  
  
    deathZone: {  
        type: 'onEnter', // 'onEnter', or 'onLeave'  
        source: geom,  
    },  
  
    bounds:               // {x, y, w, h}, or {x, y, width, height}, or Phaser.Geom.Rectangle  
    collideLeft: true,  
    collideRight: true,  
    collideTop: true,  
    collideBottom: true,  
  
    follow:  
    followOffset:{  
       x: 0,  
       y: 0  
    },  
  
    // Texture  
    texture:  
    frame:  
    anim: [],  // string, or array of string  
      
    reserve: 0,  
    advance: 0  
});  
```

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

### generateFrameNumbers with start and end range

Source: https://docs.phaser.io/phaser/concepts/animations

Selects spritesheet-style frame indexes from 0 to 2 inclusive, producing the same three frame configs as the explicit array example.

```javascript
this.anims.generateFrameNumbers("mummy", { start: 0, end: 2 });  
```

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

### Full Configuration

Source: https://docs.phaser.io/phaser/concepts/physics/arcade

Shows the full Arcade Physics configuration object with all available options.

```APIDOC
## Full Configuration

### Description
Configures Arcade Physics with all available options.

### Configuration Object
```javascript
const config = {  
  // ...  
  physics: {  
    default: "arcade",  
    arcade: {  
      //    x: 0,  
      //    y: 0,  
      //    width: scene.sys.scale.width,  
      //    height: scene.sys.scale.height,  
      //    gravity: {  
      //        x: 0,  
      //        y: 0  
      //    },  
      //    checkCollision: {  
      //        up: true,  
      //        down: true,  
      //        left: true,  
      //        right: true  
      //    },  
      //    customUpdate: false,  
      //    fixedStep: true,  
      //    fps: 60,  
      //    timeScale: 1,     // 2.0 = half speed, 0.5 = double speed  
      //    customUpdate: false,  
      //    overlapBias: 4,  
      //    tileBias: 16,  
      //    forceX: false,  
      //    isPaused: false,  
      //    debug: false,  
      //    debugShowBody: true,  
      //    debugShowStaticBody: true,  
      //    debugShowVelocity: true,  
      //    debugBodyColor: 0xff00ff,  
      //    debugStaticBodyColor: 0x0000ff,  
      //    debugVelocityColor: 0x00ff00,  
      //    maxEntries: 16,  
      //    useTree: true   // set false if amount of dynamic bodies > 5000  
    },  
  },  
  // ...  
};  
const game = new Phaser.Game(config);  
```
```

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

### Get first child by property

Source: https://docs.phaser.io/phaser/concepts/gameobjects/layer

Returns the first child that has the given property set to the given value. Optional start and end indexes limit the search range.

```javascript
var gameObject = layer.getFirst(property, value);  
// var gameObject = layer.getFirst(property, value, startIndex, endIndex);  

```

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

### Get matching game objects by property

Source: https://docs.phaser.io/phaser/concepts/gameobjects/group

Returns an array of game objects matching a property/value pair. The commented variant allows specifying start and end indices.

```javascript
var gameObjects = group.getMatching(property, value);  
// var gameObjects = group.getMatching(property, value, startIndex, endIndex);  

```

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

### Start fullscreen with startFullscreen()

Source: https://docs.phaser.io/phaser/concepts/scale-manager

Call this method under a 'pointerup' touch event to enter fullscreen mode.

```javascript
scene.scale.startFullscreen();  
```

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

### Get first matching child

Source: https://docs.phaser.io/phaser/concepts/gameobjects/container

Returns the first child whose property strictly (===) matches the given value, optionally within a start and end index range.

```javascript
var child = container.getFirst(property, value, startIndex, endIndex);
// value: the value to test the property against. Must pass a strict (`===`) comparison check.
```

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

### Physics configuration object example

Source: https://docs.phaser.io/phaser/concepts/scenes

Example of a physics configuration object with default set to 'arcade' and placeholders for arcade and matter configurations.

```javascript
{  
    default: 'arcade', // 'arcade', or 'matter'  
    arcade: {...},  
    matter: {...}  
}  

```

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

### Set data example

Source: https://docs.phaser.io/phaser/concepts/gameobjects

Example of setting, incrementing, and toggling data on a game object.

```javascript
mummy.setData('isAlive', true);  
mummy.setData('health', 3);  
mummy.incData('health', 3); // increments existing value (health += 3) or if the key doesn't exist, increases the value from 0  
  
let obj = { health: 3 };  
mummy.setData(obj);  
mummy.data.values['health'] = 3;  
mummy.data.values['health'] += 3;  
  
mummy.toggleData('isAlive');  
```

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

### Example of animation mix setup

Source: https://docs.phaser.io/phaser/concepts/animations

Creates two animations and adds a 200ms mix from 'animA' to 'animB'. The delay is applied automatically when playing the second animation while the first is playing.

```javascript
this.anims.create({ key: "animA" /* etc. */ });  
this.anims.create({ key: "animB" /* etc. */ });  
  
this.anims.addMix("animA", "animB", 200);  
```

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

### Fixed state after restart: reset gameOver in init()

Source: https://docs.phaser.io/phaser/concepts/scenes

Shows the corrected version of the previous example: the gameOver variable is declared without initialization and reset to false in the init() method, which is called on each scene start.

```javascript
let gameOver;  
  
function init() {  
  gameOver = false;  
}  
  
function update() {  
  if (gameOver) {  
    // GAME OVER :(  
  }  
}  
```

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

### Get sound instances by key or all

Source: https://docs.phaser.io/phaser/concepts/audio

Retrieves sound instances: get(key) returns the first matching instance or null, getAll(key) returns all matching instances or null, getAll() returns all instances, and getAllPlaying() returns all playing instances.

```javascript
var music = this.sound.get(key); // music instance, or null  
```

```javascript
var musicArray = this.sound.getAll(key); // music instance, or null  
```

```javascript
var musicArray = this.sound.getAll();  
```

```javascript
var musicArray = this.sound.getAllPlaying();  
```

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

### Add scene from scene class using scene.add()

Source: https://docs.phaser.io/phaser/concepts/scenes

Uses the preBoot callback to add a scene from a class with the key 'default' and autoStart set to true.

```javascript
class Scene extends Phaser.Scene {  
  create() {  
    /*…*/  
  }  
}  
  
new Phaser.Game({  
  callbacks: {  
    preBoot: (game) => {  
      game.scene.add("default", Scene, true);  
    },  
  },  
});  

```

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

### Fixed state in scene class: reset gameOver in init()

Source: https://docs.phaser.io/phaser/concepts/scenes

Shows the corrected version of the previous example: the property is declared in the constructor without initialization and reset to false in the init() method, which is called on each scene start.

```javascript
class Scene extends Phaser.Scene {  
  constructor() {  
    super();  
  
    this.gameOver;  
  }  
  
  init() {  
    this.gameOver = false;  
  }  
}  
```

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

### line.getPoint(t, point)

Source: https://docs.phaser.io/phaser/concepts/geometry

Gets a point at a specified position along the line. The t parameter is a value between 0 and 1, where 0 is the start, 0.5 is the middle, and 1 is the end. An optional point parameter can be provided to modify an existing point.

```APIDOC
## line.getPoint(t, point)

### Description
Gets a point at a specified position along the line. The t parameter is a value between 0 and 1, where 0 is the start, 0.5 is the middle, and 1 is the end. An optional point parameter can be provided to modify an existing point.

### Method
line.getPoint

### Parameters
- **t** (number) - Required - A value between 0 and 1, where 0 is the start, 0.5 is the middle and 1 is the end point of the line.
- **point** (object) - Optional - An existing point to modify, or if not provided a new point is returned.

### Request Example
```javascript
var point = line.getPoint(t);
// var point = line.getPoint(t, point);
```

### Response
#### Success Response
- **point** (object) - The point at the specified position on the line.

#### Response Example
```javascript
var point = line.getPoint(t);
```
```

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

### Create a timer with all properties

Source: https://docs.phaser.io/phaser/concepts/time

Shows all configurable properties for a timer created with `this.time.addEvent`. `startAt` sets the initial offset, `timeScale` scales the timer speed, and `paused` starts the timer paused. Note that `delay: 0` with `repeat > 0` or `loop: true` throws an error.

```javascript
var timer = this.time.addEvent({  
  delay: 500, // ms  
  callback: callback,  
  args: [],  
  callbackScope: thisArg,  
  loop: false,  
  repeat: 0,  
  startAt: 0,  
  timeScale: 1,  
  paused: false,  
});  

```

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

### Get point on path or curve

Source: https://docs.phaser.io/phaser/concepts/math

Retrieves a point on a path or curve at parameter t (0 to 1). The optional second argument modifies the provided out object instead of creating a new one. Note that distance along the path from start to target point may not be linear with t.

```javascript
var out = path.getPoint(t); // t: 0 ~ 1  
// var out = path.getPoint(t, out);  // modify out  

```

```javascript
var out = curve.getPoint(t); // t: 0 ~ 1  
// var out = curve.getPoint(t, out);  // modify out  

```

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

### Start the Timeline

Source: https://docs.phaser.io/phaser/concepts/time

Starts the Timeline. The Timeline always starts paused, so call this to begin.

```javascript
timeline.play();  
```

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

### Listen to animationstart-{key} event

Source: https://docs.phaser.io/phaser/concepts/gameobjects/sprite

Attach a listener for the 'animationstart-' + key event on a sprite, scoped to a specific animation key.

```javascript
sprite.on('animationstart-' + key, function(currentAnim, currentFrame, sprite){});  
```

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

### Install phasereditor2d-ninepatch-plugin via npm

Source: https://docs.phaser.io/phaser-editor/misc/plugins

Installs the phasereditor2d-ninepatch-plugin as a dev dependency. This is the recommended way to install third-party plugins.

```bash
$ npm install phasereditor2d-ninepatch-plugin --save-dev  
```

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

### Get a key object with options

Source: https://docs.phaser.io/phaser/concepts/input

Create a key object with enableCapture and emitOnRepeat options.

```javascript
var keyObject = scene.input.keyboard.addKey("W", enableCapture, emitOnRepeat);  

```

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

### Run Phaser Editor Core with -project flag

Source: https://docs.phaser.io/phaser-editor/first-steps/download-and-install

After unzipping the Core distribution, run the PhaserEditor binary with the mandatory -project flag pointing to the game project. The server starts and opens the default browser at http://127.0.0.1:1959/editor.

```bash
$ cd /path/to/downloaded/PhaserEditor  
$ ./PhaserEditor -project path/to/project  

```

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

### Get frame information

Source: https://docs.phaser.io/phaser/concepts/animations

Checks if a frame exists at an index, gets a frame at an index, or gets the last frame.

```javascript
var HasFrameAt = anim.checkFrame(index);  
```

```javascript
var frame = anim.getFrameAt(index);  
```

```javascript
const mummyWalkFrame1 = this.anims.get("mummyWalk").getFrameAt(1);  
```

```javascript
var frame = anim.getLastFrame();  
```

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

### camera.startFollow(target, roundPixels, lerpX, lerpY, offsetX, offsetY)

Source: https://docs.phaser.io/phaser/concepts/cameras

Sets the Camera to follow a Game Object. The camera scrolls automatically to keep the target in the center of the viewport, with optional smoothing via lerp values and offsets.

```APIDOC
## camera.startFollow(target, roundPixels, lerpX, lerpY, offsetX, offsetY)

### Description
Sets the Camera to follow a Game Object. The camera scrolls automatically to keep the target in the center of the viewport. The optional `lerpX` and `lerpY` arguments smooth the movement by interpolating the two positions.

### Method
startFollow

### Parameters
- `target` (GameObject|Point) - Required - The game object or point-like object to follow.
- `roundPixels` (boolean) - Optional - Set true to round the camera position to integers.
- `lerpX` (number) - Optional - A value between 0 and 1. `1` snaps instantly, `0.1` gives a smooth transition.
- `lerpY` (number) - Optional - A value between 0 and 1. `1` snaps instantly, `0.1` gives a smooth transition.
- `offsetX` (number) - Optional - The horizontal offset from the camera follow target.x position.
- `offsetY` (number) - Optional - The vertical offset from the camera follow target.y position.

### Request Example
```
camera.startFollow(gameObject);
// camera.startFollow(gameObject, roundPx, lerpX, lerpY, offsetX, offsetY);
```

### Response
No return value documented.
```

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

### Example getAll return object

Source: https://docs.phaser.io/phaser/concepts/data-manager

Example object returned by getAll when data is present. Shows the structure of the returned object.

```javascript
{  
    playerName: 'Hicks',  
    weapon: 'M41A Pulse Rifle',  
    score: 0  
}  

```

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

### bounce (get)

Source: https://docs.phaser.io/phaser/concepts/physics/arcade

Gets the bounce values of the body.

```APIDOC
## bounce (get)

### Description
Gets the bounce values of the body.

### Method
bounce (property getter)

### Response
- **bounce.x** (number) - The horizontal bounce value.
- **bounce.y** (number) - The vertical bounce value.

### Response Example
```javascript
var bx = body.bounce.x;
var by = body.bounce.y;
```
```

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

### State usage examples

Source: https://docs.phaser.io/phaser/concepts/gameobjects

Shows examples of setting and modifying the `state` field for different game objects.

```javascript
// State  
mummy.state = 'sleeping';  
bat.state = 'movingLeft';  
  
// Coins  
treasure.state = 10;  
treasure.state -= 1;  
  
// Health  
snake.state = 3;  
```

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

### Get multiple data values using get with an array

Source: https://docs.phaser.io/phaser/concepts/data-manager

Pass an array of keys to get an array of values in the same order. Missing keys return undefined.

```javascript
//  In the Registry  
this.registry.get([ 'playerName', 'score' ]);  
  
//  From within a Scene  
this.data.get([ 'playerName', 'score' ]);  
  
//  On a Game Object instance  
sprite.getData([ 'playerName', 'score' ]);  
//  or:  
sprite.data.get([ 'playerName', 'score' ]);  

```

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

### Add scene from config object using scene.add()

Source: https://docs.phaser.io/phaser/concepts/scenes

Uses the preBoot callback to add a scene from a config object with the key 'default' and autoStart set to true.

```javascript
const sceneConfig = {  
  create: function () {  
    /*…*/  
  },  
};  
  
new Phaser.Game({  
  callbacks: {  
    preBoot: (game) => {  
      game.scene.add("default", sceneConfig, true);  
    },  
  },  
});  

```

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

### Example phasereditor2d.config.json

Source: https://docs.phaser.io/phaser-editor/misc/project-config

Example configuration file for a Phaser Editor project. It filters resources with skip, sets UI settings, loads user plugins, passes server flags, and defines the play URL.

```json
{
    "skip": ["dist/", "editor-plugins/"],
    "settings": {
        "phasereditor2d.scene.enablePixelArt": true
    },
    "plugins":
        [
            "editor-plugins/my-fonts-plugins",
            "editor-plugins/my-awesome-plugins"
        ],
    "flags": ["-port", "7171"],
    "playUrl": "http://localhost:4200"
}
```

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

### collisionMask (get)

Source: https://docs.phaser.io/phaser/concepts/physics/arcade

Gets the current collision mask of the body.

```APIDOC
## collisionMask (get)

### Description
Gets the current collision mask of the body.

### Method
collisionMask (property getter)

### Response
- **collisionMask** (number) - The current collision mask.

### Response Example
```javascript
var collisionMask = body.collisionMask;
```
```

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

### A 2-scene game

Source: https://docs.phaser.io/phaser/concepts/scenes

Defines a Boot scene that loads assets and starts the Play scene, and a Play scene that creates game objects and updates. Only 'boot' starts automatically.

```javascript
class Boot extends Phaser.Scene {  
  // Load assets  
  preload() {}  
  
  // Start Play scene  
  create() {}  
}  
  
class Play extends Phaser.Scene {  
  // Create game objects with loaded assets  
  create() {}  
  
  // Update the scene  
  update() {}  
}  
  
new Phaser.Game({  
  scene: [  
    // Only 'boot' will start.  
    new Boot("boot"),  
    new Play("play"),  
  ],  
});  

```

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

### collisionCategory (get)

Source: https://docs.phaser.io/phaser/concepts/physics/arcade

Gets the current collision category of the body.

```APIDOC
## collisionCategory (get)

### Description
Gets the current collision category of the body.

### Method
collisionCategory (property getter)

### Response
- **collisionCategory** (number) - The current collision category bitmask.

### Response Example
```javascript
var collisionCategory = body.collisionCategory;
```
```

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

### angularDrag (get)

Source: https://docs.phaser.io/phaser/concepts/physics/arcade

Gets the current angular drag of the body.

```APIDOC
## angularDrag (get)

### Description
Gets the current angular drag of the body.

### Method
angularDrag (property getter)

### Response
- **angularDrag** (number) - The current angular drag.

### Response Example
```javascript
var ad = body.angularDrag;
```
```

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

### Start following a game object

Source: https://docs.phaser.io/phaser/concepts/cameras

Starts the camera following a target. Optional parameters include roundPixels, lerp values, and offsets. The camera scrolls to keep the target centered.

```javascript
camera.startFollow(gameObject);  
// camera.startFollow(gameObject, roundPx, lerpX, lerpY, offsetX, offsetY);  //  
```

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

### angularAcceleration (get)

Source: https://docs.phaser.io/phaser/concepts/physics/arcade

Gets the current angular acceleration of the body.

```APIDOC
## angularAcceleration (get)

### Description
Gets the current angular acceleration of the body.

### Method
angularAcceleration (property getter)

### Response
- **angularAcceleration** (number) - The current angular acceleration.

### Response Example
```javascript
var aa = body.angularAcceleration;
```
```

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

### Loader configuration object example

Source: https://docs.phaser.io/phaser/concepts/scenes

Example of a loader configuration object with properties like baseURL, path, enableParallel, maxParallelDownloads, crossOrigin, responseType, async, user, password, and timeout.

```javascript
{  
    baseURL: '',  
    path: '',  
    enableParallel: true,  
    maxParallelDownloads: 4,  
    crossOrigin: undefined,  
    responseType: '',  
    async: true,  
    user: '',  
    password: '',  
    timeout: 0  
}  

```

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

### Create Mesh Instance

Source: https://docs.phaser.io/phaser/concepts/gameobjects/mesh

Shows how to create an instance of the custom mesh class.

```APIDOC
## Create Mesh Instance

### Description
Creates a new instance of the custom mesh class.

### Method
Constructor

### Parameters
- **scene** (Phaser.Scene) - Required - The scene.
- **x** (number) - Required - X position.
- **y** (number) - Required - Y position.
- **texture** (string) - Required - Texture key.
- **frame** (string|number) - Optional - Frame.

### Example
```javascript
var mesh = new MyMesh(scene, x, y, texture, frame);
```
```

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

### angularVelocity (get)

Source: https://docs.phaser.io/phaser/concepts/physics/arcade

Gets the current angular velocity of the body.

```APIDOC
## angularVelocity (get)

### Description
Gets the current angular velocity of the body.

### Method
angularVelocity (property getter)

### Response
- **angularVelocity** (number) - The current angular velocity.

### Response Example
```javascript
var av = body.angularVelocity;
```
```

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

### this.make.bitmapText(config)

Source: https://docs.phaser.io/phaser/concepts/gameobjects/bitmap-text

Creates a BitmapText game object from a configuration object. The configuration can specify position, text, font, size, alignment, origin, and whether to add it to the scene.

```APIDOC
## [CREATE] this.make.bitmapText(config)

### Description
Creates a BitmapText game object from a configuration object. The configuration can specify position, text, font, size, alignment, origin, and whether to add it to the scene.

### Method
CREATE

### Endpoint
this.make.bitmapText(config)

### Parameters
- **config** (object) - Required - Configuration object.
  - **x** (number) - Required - The x coordinate.
  - **y** (number) - Required - The y coordinate.
  - **text** (string) - Required - The text to display.
  - **font** (string) - Required - The key of the bitmap font.
  - **size** (number|boolean) - Optional - The size of the font. If false, uses the default size.
  - **align** (number) - Optional - The alignment of the text. 0: Left, 1: Middle, 2: Right.
  - **origin** (object) - Optional - The origin of the text object. Defaults to {x: 0.5, y: 0.5}.
    - **x** (number) - Optional - X origin.
    - **y** (number) - Optional - Y origin.
  - **add** (boolean) - Optional - Whether to add the object to the scene. Defaults to true.

### Request Example
```js
var txt = this.make.bitmapText({
    x: 0,
    y: 0,
    text: 'Text\nGame Object\nCreated from config',
    font: '',
    size: false,
    align: 0,
    // origin: {x: 0.5, y: 0.5},
    add: true
});
```
```

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

### point.x / point.y (get)

Source: https://docs.phaser.io/phaser/concepts/geometry

Gets the x and y coordinates of a point.

```APIDOC
## point.x / point.y (get)

### Description
Gets the x and y coordinates of a point.

### Properties
- **x** (number) - The x coordinate.
- **y** (number) - The y coordinate.

### Example
```javascript
var x = point.x;
var y = point.y;
```
```

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

### Get Animation

Source: https://docs.phaser.io/phaser/concepts/gameobjects/sprite

Gets a global or private animation object.

```APIDOC
## Get Animation

### Description
Gets a global animation object or a private animation object.

### Get Global Animation Object
```javascript
var anim = this.anims.get(key);
```
- **key** (string) - The animation key.

### Get Private Animation Object
```javascript
var anim = sprite.anims.get(key);
```
- **key** (string) - The animation key.
```

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

### this.sound.get(key)

Source: https://docs.phaser.io/phaser/concepts/audio

Gets the first sound instance with the given key.

```APIDOC
## this.sound.get(key)

### Description
Gets the first sound instance with the given key.

### Method
get

### Parameters
- **key** (string) - Required - The key of the sound instance.

### Response
- **music** (Sound) - The sound instance, or null if not found.

### Response Example
```
var music = this.sound.get(key); // music instance, or null
```

```
Tokens:
Raw