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"
  | "Audio"

SelectOptions

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