editor-decorators

A collection of decorator functions helps you write scripts in Galacean Editor.

Installation

npm install @galacean/editor-decorators

Usage

import { Script } from '@galacean/engine';
import { inspect } from "@galacean/editor-decorators";

export default class extends Script {
  @inspect('Number', {
    min: 1,
    max: 10
  })
  rotate = 1;

  onUpdate(deltaTime: number) {
    this.entity.transform.rotate(this.rotate, this.rotate, this.rotate);
  }
}

API

inspect(type: ComponentType, options: ComponentOptions)

This decorator exports the property to the Editor. It can be used on any property of a class. The property will be shown in the Inspector of the Editor.

ComponenType

type ComponentType =
    "Input"
  | "Number"
  | "Slider"
  | "Boolean"
  | "Vector2"
  | "Vector3"
  | "Vector4"
  | "Rect"
  | "Color"
  | "AssetPicker"
  | "Select"
  | "SegmentControl"
  | "Textarea";

Common options

| Name | Type | Required | Description | Default | | --- | --- | --- | --- | --- | | property | string | - | The name according with EngineObject | The name of the decorated property | | label | string | - | Label for the value, would be shown in the Inspector | | | info | string | - | Additional information or a description about the GUI item. | | | priority | number | - | The priority of the GUI item. The higher the priority, the higher the item is displayed in the Inspector. | |

NumberOptions

| Name | Type | Required | Description | Default | | --- | --- | --- | --- | --- | | max | number | - | Maximum value | | | min | number | - | Minimum value | | | dragStep | number | - | Step value when dragging | |

SliderOptions

| Name | Type | Required | Description | Default | | --- | --- | --- | --- | --- | | max | number | - | Maximum value | | | min | number | - | Minimum value | | | dragStep | number | - | Step value when dragging | |

AssetPickerOptions

| Name | Type | Required | Description | Default | | --- | --- | --- | --- | --- | | assetType | AssetType | ✓ | The type of the asset | |

type AssetType = 
    "Scene"
  | "AnimationClip" 
  | "Folder" 
  | "AmbientLight" 
  | "glTF" 
  | "Texture2D" 
  | "HDR" 
  | "AnimatorController" 
  | "Lottie" 
  | "Spine" 
  | "sprite" 
  | "Font" 
  | "script" 
  | "Material"
  | "Mesh"

SelectOptions

| Name | Type | Required | Description | Default | | --- | --- | --- | --- | --- | | options | { value: string, label: string }[] | ✓ | The options of the select | |