Phaser

https://docs.phaser.io
Admin
Phaser is a fast, free, and fun open-source HTML5 game framework for creating interactive games and...
Tokens:4,980,017
Snippets:33,706
Trust Score:9.4
Update:1 week ago
Show doc for...
Tokens:
Raw
### install(key, plugin, [start], [mapping], [data])

Source: https://docs.phaser.io/api-documentation/4.0.0/class/plugins-pluginmanager

Installs a new Global Plugin into the Plugin Manager and optionally starts it running. The plugin can be accessed by all Scenes using the provided key.

```APIDOC
## install(key, plugin, [start], [mapping], [data])

### Description
Installs a new Global Plugin into the Plugin Manager and optionally starts it running. A global plugin belongs to the Plugin Manager, rather than a specific Scene, and can be accessed and used by all Scenes in your game. The `key` property is what you use to access this plugin from the Plugin Manager.

### Method
install

### Parameters
- **key** (string) - Required - The unique handle given to this plugin within the Plugin Manager.
- **plugin** (function) - Required - The plugin code. This should be the non-instantiated version.
- **start** (boolean) - Optional (default: false) - Automatically start the plugin running? This is always `true` if you provide a mapping value.
- **mapping** (string) - Optional - If this plugin is injected into the Phaser.Scene class, this is the property key to use.
- **data** (any) - Optional - A value passed to the plugin's `init` method.

### Returns
Phaser.Plugins.BasePlugin - The plugin that was started, or `null` if `start` was false, or game isn't yet booted.

### Example
```
this.plugins.install('powerupsPlugin', pluginCode);

// and from within the scene:
this.plugins.get('powerupsPlugin');
```
```

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

### 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  
```

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

### A 2-scene game with Boot and Play

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

A complete 2-scene game example: Boot loads assets and starts Play; Play creates game objects and updates. Only 'boot' starts automatically because it is the first scene.

```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"),  
  ],  
});  

```

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

### Get data example

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

Example of getting a data value using `getData`.

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

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

### 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;  

```

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

### start()

Source: https://docs.phaser.io/api-documentation/4.0.0/class/game

Called automatically by Game.boot once all global systems are set up. It starts the main loop and enables the Visibility Handler.

```APIDOC
## start()

### Description
Called automatically by Game.boot once all of the global systems have finished setting themselves up. By this point the Game is now ready to start the main loop running. It will also enable the Visibility Handler.

### Method
start

### Access
protected

### Parameters
None

### Returns
None

### Source
src/core/Game.js#L401

### Since
3.0.0
```

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

### Run server with multiple options

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

Example of running the server with -public, -port, and -project options.

```bash
$ PhaserEditor -public -port 80 -project /path/to/project  
```

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

### Get server help with --help

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

Use the --help option to display the full list of server options.

```bash
$ PhaserEditor --help  
```

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

### start()

Source: https://docs.phaser.io/api-documentation/4.0.0/class/loader-loaderplugin

Starts the Loader running. This resets progress and totals, emits a 'start' event, and begins loading the first batch of files. If the queue is empty, it completes immediately. If already running, it returns without action.

```APIDOC
## start()

### Description
Starts the Loader running. This will reset the progress and totals and then emit a `start` event. If there is nothing in the queue the Loader will immediately complete, otherwise it will start loading the first batch of files.

The Loader is started automatically if the queue is populated within your Scenes `preload` method. However, outside of this, you need to call this method to start it.

If the Loader is already running this method will simply return.

### Method
start

### Fires
Phaser.Loader.Events#event:START

### Source
src/loader/LoaderPlugin.js#L899

### Since
3.0.0
```

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

### 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);  
```

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

### 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();  

```

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

### start()

Source: https://docs.phaser.io/api-documentation/4.0.0/class/cameras-controls-smoothedkeycontrol

Starts the Key Control running, provided it has been linked to a camera. Returns the Key Control instance for chaining.

```APIDOC
## start()

### Description
Starts the Key Control running, provided it has been linked to a camera.

### Method
`<instance> start()`

### Parameters
None

### Returns
- **Phaser.Cameras.Controls.SmoothedKeyControl** - This Key Control instance.

### Source
- src/cameras/controls/SmoothedKeyControl.js#L290
- Since: 3.0.0
```

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

### start(key, [runAs])

Source: https://docs.phaser.io/api-documentation/4.0.0/class/plugins-pluginmanager

Starts a global plugin running. If the plugin was previously active, it resets to active and calls its start method. If never run, a new instance is created and its init and start methods are called. If already running under the given key, nothing happens.

```APIDOC
## start(key, [runAs])

### Description
Starts a global plugin running. If the plugin was previously active then calling `start` will reset it to an active state and then call its `start` method. If the plugin has never been run before a new instance of it will be created within the Plugin Manager, its active state set and then both of its `init` and `start` methods called, in that order. If the plugin is already running under the given key then nothing happens.

### Method
start

### Parameters
| name | type | optional | description |
|------|------|----------|-------------|
| key | string | No | The key of the plugin to start. |
| runAs | string | Yes | Run the plugin under a new key. This allows you to run one plugin multiple times. |

### Returns
Phaser.Plugins.BasePlugin - The plugin that was started, or `null` if invalid key given or plugin is already stopped.

### Source
src/plugins/PluginManager.js#L539

### Since
3.8.0
```

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

### getStartPoint([out])

Source: https://docs.phaser.io/api-documentation/4.0.0/class/curves-line

Gets the starting point of the curve.

```APIDOC
## getStartPoint([out])

### Description
Gets the starting point on the curve.

### Method
`<instance> getStartPoint([out])`

### Parameters
- **out** (Phaser.Math.Vector2) - Optional - A Vector2 object to store the result in. If not given will be created.

### Returns
- **Phaser.Math.Vector2** - The coordinates of the point on the curve. If an `out` object was given this will be returned.

### Overrides
Phaser.Curves.Curve#getStartPoint

### Source
src/curves/LineCurve.js#L100 (Since 3.0.0)
```

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

### Install and get a global plugin

Source: https://docs.phaser.io/api-documentation/4.0.0/class/plugins-pluginmanager

Installs a global plugin with the key 'powerupsPlugin' and retrieves it from within a scene using the same key.

```javascript
this.plugins.install('powerupsPlugin', pluginCode);



// and from within the scene:

this.plugins.get('powerupsPlugin');

```

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

### init()

Source: https://docs.phaser.io/api-documentation/4.0.0/class/renderer-canvas-canvasrenderer

Sets up the event listeners required by the renderer. Specifically, it listens for the Game BOOT event to fill the background color on the canvas, and waits for the Texture Manager's READY event before completing the boot sequence and registering the Scale Manager resize handler.

```APIDOC
## init()

### Description
Sets up the event listeners required by the renderer. Specifically, it listens for the Game BOOT event to fill the background color on the canvas, and waits for the Texture Manager's READY event before completing the boot sequence and registering the Scale Manager resize handler.

### Method
init

### Source
src/renderer/canvas/CanvasRenderer.js#L223

### Since
3.0.0
```

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

### 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;
```

```

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

### 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  
```

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

### 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
```
```

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

### startFollow([config], [startAt])

Source: https://docs.phaser.io/api-documentation/4.0.0/namespace/gameobjects-components-pathfollower

Instance method to start the PathFollower following its given Path, with optional configuration and start position.

```APIDOC
## [INSTANCE] startFollow([config], [startAt])

### Description
Starts this PathFollower following its given Path.

### Parameters
- **config** (number | Phaser.Types.GameObjects.PathFollower.PathConfig | Phaser.Types.Tweens.NumberTweenBuilderConfig) - Optional, default: "{}" - Configuration settings for the follow.
- **startAt** (number) - Optional, default: 0 - Optional start position of the follow, between 0 and 1.

### Returns
Phaser.GameObjects.Components.PathFollower - This Game Object.

### Source
src/gameobjects/components/PathFollower.js#L186

### Since
3.3.0
```

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

### Get start point on path or curve

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

Returns the start point of the path or curve. The optional output parameter can be used to modify 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  

```

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

### boot()

Source: https://docs.phaser.io/api-documentation/4.0.0/class/game

Initializes the game when the DOM is ready, creating the renderer, adding the canvas, and emitting the 'boot' event. This method is protected and called automatically.

```APIDOC
## boot()

### Description
This method is called automatically when the DOM is ready. It is responsible for creating the renderer, displaying the Debug Header, adding the game canvas to the DOM and emitting the 'boot' event. It listens for a 'ready' event from the base systems and once received it will call `Game.start`.

### Method
boot

### Access
protected

### Fires
- Phaser.Core.Events#event:BOOT

### Source
src/core/Game.js#L339

### Since
3.0.0
```

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

### get: Retrieve a value by key

Source: https://docs.phaser.io/api-documentation/4.0.0/class/data-datamanager

Retrieves the value for the given key, or undefined if it doesn't exist. This example shows how to get the value for the key 'gold'.

```javascript
this.data.get('gold');
```

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

### 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  

```

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

### 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
```
```

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

### start(x, y, [duration], [ease], [force], [callback], [context])

Source: https://docs.phaser.io/api-documentation/4.0.0/class/cameras-scene2d-effects-pan

Starts the pan effect, scrolling the camera viewport center to the given destination over the specified duration and ease. Returns the camera instance.

```APIDOC
## start(x, y, [duration], [ease], [force], [callback], [context])

### Description
This effect will scroll the Camera so that the center of its viewport finishes at the given destination, over the duration and with the ease specified.

### Method
start

### Parameters
- **x** (number) - Required - The destination x coordinate to scroll the center of the Camera viewport to.
- **y** (number) - Required - The destination y coordinate to scroll the center of the Camera viewport to.
- **duration** (number) - Optional (default: 1000) - The duration of the effect in milliseconds.
- **ease** (string | function) - Optional (default: 'Linear') - The ease to use for the pan. Can be any of the Phaser Easing constants or a custom function.
- **force** (boolean) - Optional (default: false) - Force the pan effect to start immediately, even if already running.
- **callback** (Phaser.Types.Cameras.Scene2D.CameraPanCallback) - Optional - This callback will be invoked every frame for the duration of the effect. It is sent four arguments: A reference to the camera, a progress amount between 0 and 1 indicating how complete the effect is, the current camera scroll x coordinate and the current camera scroll y coordinate.
- **context** (any) - Optional - The context in which the callback is invoked. Defaults to the Scene to which the Camera belongs.

### Returns
Phaser.Cameras.Scene2D.Camera - The Camera on which the effect was started.

### Events Fired
- Phaser.Cameras.Scene2D.Events#event:PAN_START
- Phaser.Cameras.Scene2D.Events#event:PAN_COMPLETE

### Source
src/cameras/2d/effects/Pan.js#L150

### Since
3.11.0
```

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

### getStartPoint([out])

Source: https://docs.phaser.io/api-documentation/4.0.0/class/curves-curve

Get a point at the start of the curve. Optionally provide a Vector2 to store the result.

```APIDOC
## getStartPoint([out])

### Description
Get a point at the start of the curve.

### Method
<instance> getStartPoint([out])

### Parameters
- **out** (Phaser.Math.Vector2) - Optional - A point to store the result in.

### Returns
Phaser.Math.Vector2 - The point.

### Source
src/curves/Curve.js#L420

### Since
3.0.0
```

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

### 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;
```
```

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

### start(zoom, [duration], [ease], [force], [callback], [context])

Source: https://docs.phaser.io/api-documentation/class/cameras-scene2d-effects-zoom

Starts zooming the Camera to the given scale over a specified duration with an easing function.

```APIDOC
### start(zoom, [duration], [ease], [force], [callback], [context])

#### Description
Zooms the Camera to the given scale, over the duration and with the ease specified.

#### Parameters
- **zoom** (`number`) - Required - The target Camera zoom value.
- **duration** (`number`) - Optional (default: `1000`) - The duration of the effect in milliseconds.
- **ease** (`string` | `function`) - Optional (default: `'Linear'`) - The ease to use for the Zoom. Can be any of the Phaser Easing constants or a custom function.
- **force** (`boolean`) - Optional (default: `false`) - Force the zoom effect to start immediately, even if already running.
- **callback** (`Phaser.Types.Cameras.Scene2D.CameraZoomCallback`) - Optional - Invoked every frame for the duration of the effect. Receives the camera reference, progress (0 to 1), and current zoom value.
- **context** (`any`) - Optional - The context in which the callback is invoked. Defaults to the Scene to which the Camera belongs.

#### Returns
- `Phaser.Cameras.Scene2D.Camera` - The Camera on which the effect was started.

#### Events Fired
- `Phaser.Cameras.Scene2D.Events#event:ZOOM_START`
- `Phaser.Cameras.Scene2D.Events#event:ZOOM_COMPLETE`
```

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

### install(target)

Source: https://docs.phaser.io/api-documentation/4.0.0/namespace/input-inputplugincache

Installs all of the registered Input Plugins into the given target.

```APIDOC
## install(target)

### Description
Installs all of the registered Input Plugins into the given target.

### Method
Static function

### Parameters
- **target** (Phaser.Input.InputPlugin) - Required - The target InputPlugin to install the plugins into.

### Source
src/input/InputPluginCache.js#L56

### Since
3.10.0
```

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

### getPoint(t, [out])

Source: https://docs.phaser.io/api-documentation/4.0.0/class/curves-spline

Gets a point at a relative position along the curve, where 0 is the start and 1 is the end.

```APIDOC
## getPoint(t, [out])

### Description
Gets a point at a relative position along the curve, where 0 is the start and 1 is the end.

### Method
`<instance> getPoint(t, [out])`

### Parameters
- **t** (number) - Required - The position along the curve to return. Where 0 is the start and 1 is the end.
- **out** (Phaser.Math.Vector2) - Optional - A Vector2 object to store the result in. If not given will be created.

### Returns
Phaser.Math.Vector2 - The coordinates of the point on the curve. If an `out` object was given this will be returned.

### Source
src/curves/SplineCurve.js#L151

### Since
3.0.0
```

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

### getPoint(t, [out])

Source: https://docs.phaser.io/api-documentation/4.0.0/class/curves-line

Gets a point at a relative position along the line, where 0 is the start and 1 is the end.

```APIDOC
## getPoint(t, [out])

### Description
Gets a point at a relative position along the line, where 0 is the start point and 1 is the end point.

### Method
`<instance> getPoint(t, [out])`

### Parameters
- **t** (number) - Required - The position along the curve to return. Where 0 is the start and 1 is the end.
- **out** (Phaser.Math.Vector2) - Optional - A Vector2 object to store the result in. If not given will be created.

### Returns
- **Phaser.Math.Vector2** - The coordinates of the point on the curve. If an `out` object was given this will be returned.

### Source
src/curves/LineCurve.js#L136 (Since 3.0.0)
```

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

### START

Source: https://docs.phaser.io/api-documentation/4.0.0/namespace/input-events

The Input Plugin Start Event. Dispatched when the Input Plugin has finished setting up, signalling to all internal systems to start.

```APIDOC
## START

### Description
The Input Plugin Start Event. This internal event is dispatched by the Input Plugin when it has finished setting-up, signalling to all of its internal systems to start.

### Source
src/input/events/START_EVENT.js#L7

### Since
3.0.0
```

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

### 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  

```

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

### 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: {  
          /* … */  
        },  
      },  
    ],  
  },  
});  
```
Tokens:
Raw