Phaser Editor

https://docs.phaser.io/phaser-editor/
Admin
Phaser Editor is a powerful and user-friendly development environment tailored for creating 2D games...
Tokens:70,791
Snippets:713
Trust Score:9.4
Update:9 months ago
Show doc for...
Tokens:
Raw
### Run Phaser Editor Core Server

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

This command starts the Phaser Editor Core server application from its installation directory. The '-project' flag is mandatory and specifies the path to the game project to be opened in the editor.

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

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

### Install Phaser Editor Desktop Shortcuts on Linux

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

This script creates desktop and menu entry shortcuts for Phaser Editor on Linux. It is used to easily launch the application after installation. No root privileges are required.

```bash
./install.sh
```

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

### Run Phaser Editor Core Server Publicly

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

This command starts the Phaser Editor Core server and enables remote connections using the '-public' option. This disables OS integration features like automatic browser opening and launching external applications.

```bash
./PhaserEditor -public
```

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

### Phaser Editor Project Configuration Example (JSON)

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

An example of a `phasereditor2d.config.json` file, demonstrating how to configure project settings such as resource skipping, UI settings, plugin paths, server flags, and 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"
}

```

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

### Install Phaser Editor Script Library (npm)

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

This command installs the '@phaserjs/editor-scripts-quick' script library using npm. This library provides a collection of script nodes and user components for various game development areas. Ensure you have Node.js and npm installed in your environment.

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

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

### Scene Preload Method Example

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

Illustrates how the compiler generates a `preload` method to load asset packs specified in the scene settings. This method typically uses `this.load.pack` to load the specified assets.

```javascript
class Level extends Phaser.Scene {

    preload() {
        this.load.pack("asset-pack", "assets/asset-pack.json");
    }

    create() {
        // ...
    }
}
```

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

### Example Scene Creation and User Code

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

Demonstrates a typical Phaser scene class generated by the editor, including the `editorCreate` method for object initialization and the user-defined `create` method for adding interactive logic.

```javascript
/* START OF COMPILED CODE */

class Level2 extends Phaser.Scene {

    constructor() {
        super("Level2");

    }

    editorCreate() {

        // dino
        const dino = this.add.image(346, 233, "dino");

        // fields
        this.dino = dino;
    }

    /* START-USER-CODE */

    // this is the method called by Phaser,
    // when the scene is created.
    create() {

        this.editorCreate();

        // you can add more code here

        this.dino.setInteractive()
            .on("pointerdown", () =>{
                // do something
            });
    }

    /* END-USER-CODE */
}

/* END OF COMPILED CODE */
```

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

### Prefab Instance Display Name Template Example

Source: https://docs.phaser.io/phaser-editor/scene-editor/prefabs/prefab-display-properties

This example demonstrates setting a display name for button instances using a template that includes a placeholder for the 'Action' property. The `${action}` placeholder is dynamically replaced with the value of the 'Action' prefab property.

```text
Button - ${action}
```

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

### Install Phaser Editor Plugin via NPM

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

This command installs a Phaser Editor plugin as a development dependency for your project using npm. This is the recommended way to install third-party plugins.

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

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

### Install Spine Phaser via NPM

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

Install the Spine Phaser runtime using the NPM package manager. This is the recommended method for modern JavaScript projects.

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

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

### Run Phaser Editor Linux Binary

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

This command executes the Phaser Editor binary on Linux systems. It requires the user to be in the directory where the editor was unzipped and run it directly. No root privileges are needed.

```bash
./PhaserEditor
```

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

### Install Spine Phaser via Script Tag

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

Include the Spine Phaser runtime in your HTML file using a script tag. This method is suitable for simpler projects or when not using a module bundler.

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

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

### Preview Scene with URL Parameter

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

This code snippet demonstrates how to read a 'start' URL parameter to dynamically load a Phaser scene. It's designed for development environments and uses `URLSearchParams` to get the parameter value. This functionality is typically included in Phaser Editor project templates.

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

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

### Component Inheritance Example

Source: https://docs.phaser.io/phaser-editor/scene-editor/user-components/user-components-compiler

Demonstrates how a custom component class can extend a specified superclass, such as 'BaseComponent'. This allows for code reuse and the implementation of common behaviors or helper methods across different components.

```javascript
class HorizontalMove extends BaseComponent {
    ...
}
```

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

### Manually Emitting Scene Awake for Dynamic Prefabs (JavaScript)

Source: https://docs.phaser.io/phaser-editor/scene-editor/prefabs/prefab-user-properties

Provides an example of how to manually emit the 'scene-awake' event when creating dynamic prefab instances to ensure their initializations run correctly.

```javascript
spawnDino(scene, x, y, flame) {

    const dragon = new Dragon(scene, x, y);
    dragon.flameType = flame;
    // send the awake notification to the new object
    scene.events.emit("scene-awake");
}

```

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

### Basic ScriptNode Class Structure

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

A fundamental example of the ScriptNode class structure. It requires a constructor that accepts a parent argument. This class serves as a base for custom behaviors in Phaser Editor.

```javascript
class ScriptNode {

   constructor(parent) {
   }
}
```

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

### Conditional Display Name with #{propName} Syntax

Source: https://docs.phaser.io/phaser-editor/scene-editor/prefabs/prefab-display-properties

This example illustrates the use of the `#{propName}` syntax for conditional display names. The property name is included in the display name only if the property's value is 'true', 'undefined', or an empty string.

```text
Collide #{up} #{down}
```

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

### Conditional Event Listener Registration in JavaScript

Source: https://docs.phaser.io/phaser-editor/scene-editor/user-components/user-components-super-class

Demonstrates the conditional registration of Phaser scene 'update' event listeners for 'start' and 'update' methods. Listeners are only added if the corresponding methods in the derived component class have been overridden.

```javascript
...
if (listenStart) {

    this.scene.events.once(Phaser.Scenes.Events.UPDATE, this.start, this);
}

if (listenUpdate) {

    this.scene.events.on(Phaser.Scenes.Events.UPDATE, this.update, this);
}
...

```

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

### Uninstall Phaser Editor Desktop Shortcuts on Linux

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

This script removes the desktop and menu entry shortcuts created for Phaser Editor on Linux. It is used to clean up the system after uninstalling the editor. No root privileges are required.

```bash
./uninstall.sh
```

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

### Display Phaser Editor Server Help

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

Use the `--help` option to display a comprehensive list of all available command-line options for the Phaser Editor server. This is useful for discovering and understanding the full range of configurable settings.

```bash
PhaserEditor --help
```

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

### Play Animation with Phaser

Source: https://docs.phaser.io/phaser-editor/scene-editor/game-objects/common-object-properties

Demonstrates how to play an animation on a game object using the `play()` method in Phaser. It supports playing forward and optionally accepts a configuration object for custom playback parameters like frame rate and repetition.

```javascript
Copydragon.play("dragon - dragon/Moving Forward");
```

```javascript
Copydragon.playReverse("dragon - dragon/Moving Forward");
```

```javascript
Copydragon.play({
    "key": "dragon - dragon/Moving Forward"
    "frameRate": 10,
    "repeat": -1
});
```

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

### Texture Config Property Type in TypeScript

Source: https://docs.phaser.io/phaser-editor/scene-editor/prefabs/prefab-user-properties

Example of how the scene compiler generates Texture Config properties in TypeScript classes. It shows the JSDoc type annotation and an example initialization.

```typescript
class Dragon extends Phaser.GameObjects.Sprite {

    constructor(..) {
        ...
    }

    /** @type {{key:string,frame?:string|number}} */
    myTexture = {"key":"atlas-props","frame":"branch-01"};
}
```

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

### Component Instantiation and Property Setting

Source: https://docs.phaser.io/phaser-editor/scene-editor/user-components/user-components-compiler

Illustrates the process of creating a new instance of a custom component and assigning it to a game object. It also shows how to modify the component's properties after instantiation.

```javascript
const enemy = this.add.image(...);
const enemyMove = new HorizontalMove(enemyMove);
enemyMove.maxX = 400;
```

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

### Create Phaser Video Object using Factory

Source: https://docs.phaser.io/phaser-editor/scene-editor/game-objects/video-object

Demonstrates how to create a Phaser Video object using the scene's factory method. It requires the position and the asset key for the video. This is the programmatic way to instantiate a video in a Phaser scene.

```javascript
const player = this.add.video(192, 512, "my-video");
```

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

### Create Tilemap Layer (JavaScript)

Source: https://docs.phaser.io/phaser-editor/scene-editor/game-objects/editable-tilemap-object

This code snippet demonstrates how to create a visual layer for a Phaser tilemap. The `createLayer()` method takes the layer name, an array of tileset names used by the layer, and the layer's position (x, y) as arguments. This method is used to render specific layers defined in the tilemap data.

```javascript
// mainLayer
const mainLayer = levelMap.createLayer("mainLayer", ["tileset"], 0, 0);
```

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

### Phaser HorizontalMove Component Example

Source: https://docs.phaser.io/phaser-editor/scene-editor/user-components/user-components-start-update-methods

This JavaScript class, HorizontalMove, extends the EventComponent to implement horizontal movement for a Phaser GameObject. It overrides the update method to modify the object's x-coordinate based on a delta value. This example demonstrates how to extend the base EventComponent for specific behaviors.

```javascript
class HorizontalMove extends EventComponent {

    ...

    update() {

        this.gameObject.x += this.deltaX;
    }
}

```

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

### Particle Emitter Start/End Value Configuration

Source: https://docs.phaser.io/phaser-editor/scene-editor/game-objects/particle-emitter-object-properties

Defining a range for a particle emitter property where the value changes from a 'start' to an 'end' value over the particle's lifetime. An optional ease function can control the rate of change, and a 'random' parameter can set a random starting value within the range.

```javascript
scale: { start: 0, end: 1 }
```

```javascript
scale: { start: 0, end: 1, ease: "Bounce.easeOut" }
```

```javascript
scale: { start: 4, end: 0.5, random: true }
```

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

### Load Extra Plugins with Phaser Editor CLI

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

This command loads additional plugins for Phaser Editor Core using the '-plugins' flag. The paths to the plugin directories are provided as a semicolon-separated string.

```bash
PhaserEditor -plugins "/demo/plugins;/some/extra/plugins" -project .
```

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

### Extending UserComponent to Implement Update Behavior in JavaScript

Source: https://docs.phaser.io/phaser-editor/scene-editor/user-components/user-components-super-class

Shows an example of a 'RotateObject' class that extends the UserComponent. It overrides the 'update' method to continuously rotate the game object by incrementing its angle on each 'UPDATE' event.

```javascript
class RotateObject extends UserComponent {

    constructor(gameObject) {
        super(gameObject);
    }

    ...

    update() {

        // this method is called when the scene
        // emits the UPDATE event

        this.gameObject.angle += 1;
    }
}

```

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

### Configure Spine Scene Plugin in Phaser

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

Add the Spine scene plugin to your Phaser game configuration object. This allows you to use Spine features within your Phaser scenes.

```javascript
const config = {
  ...
  plugins: {
      scene: [{
          key: "spine.SpinePlugin",
          plugin: spine.SpinePlugin,
          mapping: "spine"
        }]
    }
  }

new Phaser.Game(config);
```

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

### Configure Phaser Editor Server Options in flags.txt

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

Centralize Phaser Editor server configuration by using a `flags.txt` file. Each line in this file represents a command-line argument, allowing for persistent customization of server options like port, public access, and browser commands.

```text
-public
-port
80

```

```text
-public

# -port

# 80

```

```text
-browser-command
"C:\Program Files\Google\Chrome\Application\chrome.exe" "--app=$URL"

```

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

### Scene Compiler Generated Awake Handler (JavaScript)

Source: https://docs.phaser.io/phaser-editor/scene-editor/prefabs/prefab-user-properties

Shows an example of how the scene compiler can automatically generate the code to emit the 'scene-awake' event, allowing prefabs to set up their properties.

```javascript
class Level extends Phaser.GameObjects.Image {

    constructor(scene,...) {

        // awake handler
        this.scene.events.once("scene-awake", () => this.awake());

        ...
    }
}

```

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

### Create Tilemap Instance from Cache Key (JavaScript)

Source: https://docs.phaser.io/phaser-editor/scene-editor/game-objects/editable-tilemap-object

This code snippet shows how to create a Phaser tilemap instance by referencing the key under which the tilemap data was previously added to the cache. This is the standard Phaser API call to instantiate a tilemap after its data has been loaded or embedded.

```javascript
const levelMap = this.add.tilemap("levelMap_5ca7319c-74c6-458a-8589-37cef0ce2ff4");
```

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

### Run Phaser Editor with Different Plugin Version

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

This command allows you to run Phaser Editor with a different set of plugins by specifying the path to another editor implementation. This is useful for testing in-development versions of the editor.

```bash
PhaserEditor -project "/path/to/project" -editor "path/to/another/editor"
```

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

### Spine Skin Name Property Type in TypeScript

Source: https://docs.phaser.io/phaser-editor/scene-editor/prefabs/prefab-user-properties

Example of generating Spine Skin Name properties in TypeScript. This allows selecting a skin name from Spine skeleton assets.

```typescript
class Player extends SpineGameObject {

    constructor(..) {
        ...
    }

    theSkin: string;
}
```
Tokens:
Raw