phaser-editor-helper

中文文档 | English Documentation

PhaserEditor integration helper

Introduction

phaser-editor-helper is a Webpack plugin designed for Phaser Editor

What does the plugin do?

• Isolates the code and artifacts generated by PhaserEditor from the Webpack project for separate management.

• Fixes the artifacts of Only Generate Methods:

  create and preload support passing in the scene, no longer using call redirection, and automatically export the create and preload functions.

• Friendly typescript type hints:

  When the scene type is set to typescript, the plugin will infer types for elements with public scope and script nodes with public scope, and merge all type inferences into SceneExtensions for unified export.

• Static resource management:

  During the build, the complete relative path of the static resource files is retained, so there is no need to modify the import path of static resources in the code. Configurable exclusion of static resources unrelated to the project.

• Output file management:

  Optionally exclude artifacts unrelated to development, and copy them completely to the specified directory, with combinational references to scene files.

Installation

npm install phaser-editor-helper --save-dev

Usage

Before starting, you need to specify a Webpack static resource directory as the working directory for PhaserEditor, such as /public or /static, which may commonly exist in your Webpack project.

Preparation before integration

1. Create a publicroot file specified by PhaserEditor in the static resource directory.
2. Create a working directory for PhaserEditor containing scenes, node scripts, etc., such as /editor.

Example

The example project structure is as follows:

project
├──public
|   └──assets
|   └──editor
|       └──scenes
|           └──Level
|               └──Scene.ts
|               └──Scene.scene
|       └──script-nodes
|       └──...
|   └──publicroot
├── src
|   └──editor
|       └──scenes
|       └──script-nodes
|   └──scenes
|       └──MyScene.ts
|       └──...

Plugin Configuration

• watchDir: Directory to watch.
• outputDir: Directory to copy to.
• excludePatterns: File types to exclude from copying.
• conversionDir: Scene files that need secondary processing.

Add the phaser-editor-helper plugin in the webpack configuration:

const PhaserEditorHelper = require("phaser-editor-helper");

module.exports = {
  // ...existing code...
  plugins: [
    new PhaserEditorHelper({
      watchDir: "public/editor",
      outputDir: "src/editor",
      conversionDir: "public/editor/scenes",
      excludePatterns: [".scene", ".json", ".components", "node_modules"],
    }),
  ],
};

Choose Only Generate Methods to create the game

The plugin will automatically process the code and optimize the generated code based on the scenes you create, for example: Level/Scene.ts

function preload(scene): void {
  scene.load.pack("asset-pack", "xxx/xxx/xxx/asset-pack.json");
}

function editorCreate(scene): void {
  // Editor generated code... for example:
  const image_1 = scene.add.image(0, 0, "1");
  scene.image_1 = image_1;
  scene.events.emit("scene-awake");
}
// Secondary processing generates corresponding types and exports methods for combination
export { preload };
export { editorCreate };
type SceneExtensions = {
  image_1: Phaser.GameObjects.Image;
};
export type { SceneExtensions };

Gracefully use these codes

Use in src/scenes/MyScene.ts

import {
  preload,
  editorCreate,
  type SceneExtensions,
} from "@/editor/scenes/Level/Scene";

export default class MyScene extends Phaser.Scene implements SceneExtensions {
  constructor() {
    super("MyScene");
  }
  image_1!: Phaser.GameObjects.Image; // From type hints
  preload() {
    preload(this);
  }
  create() {
    editorCreate(this);
    this.image_1.x = 0; // ...existing code...
  }
}

Build and Release

Since the working directory is in the public resource directory, the plugin has built-in cleanup of resources related to the editor and retains the complete path of json files, as json files are essential artifacts during project build, such as asset-pack.json. You can safely execute:

npm run build

Additional Configuration

The publicroot created in the project is just an empty file for the editor to identify, but with this plugin, you can set it in the publicroot file to clear some unnecessary junk files in the public directory, such as:

package.json
package-lock.json
node_modules
log.txt
...

License

MIT