Skip to main content

Plugin

The editor supports plug-ins. Plug-ins provide complete control over the editor, including but not limited to the following functions:

  1. Display a customized view.
  2. Display the customized Inspector.
  3. Customize the menu.
  4. Operations on resources, such as import and export.
  5. Add components to the stage and set the properties of the components on the stage.
  6. Insert custom actions into the publishing process. For example, custom publishing code.

Supports plug-in development in three languages: Lua, Typescript, and Javascript. The plug-in hosting environment is XLua and Purets. Plug-in examples can be downloaded from warehouse.

Plug-in view​

Plug-in view figure 1

  • Plug-in view figure 2 Open the directory where the plug-in is placed. The plug-in directory is under the "project root directory/plugins" directory, and each plug-in corresponds to a subdirectory.

  • Plug-in view figure 3 Create a new plug-in. A dialog box pops up after clicking:

    Plug-in view figure 4

    • plugin_name The name of the plugin will be used as the name of the plugin directory.
    • Display Name The value set here will be displayed in the title of the plugin list.
    • Description The value set here will be displayed in the description of the plugin list.
    • Plug-in Template You can use a template when creating, such as using the release code template. The template contains the entire process of customizing the release code, and can be adapted to the special needs of the project with slight modifications.

Use Lua to develop plug-ins​

The editor's open API can be found in LuaAPI. It is recommended to use EmmyLua to write plug-ins.

You can use the fprint method to output information to the console for debugging.

If you need to require other Lua files in main.lua, you should use the predefined variable PluginPath, for example:

require(PluginPath..'/xxx')

But PluginPath cannot be used in other lua files.

References:

  1. Using FairyGUI in Lua.
  2. XLua Manual.
  3. Third-party Lua code generation plug-in.

Use Typescript/Javascript to develop plug-ins​

The editor's open API can be found in TsAPI. It is recommended to use VSCode to write plug-ins. The editor runs JS, so TS needs to be translated into JS.

If you want to introduce other modules in main.ts/main.js, just follow the module management rules of nodejs.

You can use console.log to output information to the console for debugging.

Here are some examples:

//Introduce C# class
const FairyEditor = CS.FairyEditor;

//Publish start notification
export function onPublishStart(pkgs: CS.System.Array$1<CS.FairyEditor.FPackage>) {
console.log(pkgs.get_Item(0).name);
}

//Publish end notification
export function onPublishEnd(pkgs: CS.System.Array$1<CS.FairyEditor.FPackage>) {
console.log(pkgs.get_Item(0).name);
}

//Initiate an http request
async function httpGetSample() {
let client = new CS.System.Net.Http.HttpClient()
var responseString = await puerts.$promise(client.GetStringAsync("http:/example.com/"));
console.log(responseString);
}

References:

  1. Using FairyGUI in Puerts.
  2. Puerts Manual.