Skip to main content

Custom editor fields

Display and functionality of your components in the entity editor can be customized in various ways: labels can be changed, conditions set for display and other things. This is all done using comments inside the schema where fields are marked // @.

Labels​

Sometimes labels in the editor need to be more descriptive than their names in code. For example:

  schema: {
    // @label Target (optional)
    target: 'eid',
  },

Appearance in the editor:

CustomComponentLabels

Conditions​

Properties can be set to only show depending on the values of other properties. Examples:

  schema: {
    // 'from' will only show if autoFrom set false:
    autoFrom: 'boolean',
    // @condition autoFrom=false
    from: 'f32',

    // 'easingFunction' will show if either easeIn or easeOut set:
    easeIn: 'boolean',
    easeOut: 'boolean',
    // @condition easeIn=true|easeOut=true
    easingFunction: 'string',

    // 'targetX' only shows if no target set:
    target: 'eid',
    // @condition target=null
    targetX: 'f32',
  },

Enumerations​

String properties can be limited to a set list:

  schema: {
    // @enum Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential 
    easingFunction: 'string',
  },

In the Editor, this shows up as a drop-down list:

CustomComponentEnums

Groups​

Certain groups of properties can be instructed to be treated specially in the editor. Groups are configured as follows:

  • The start and end of the group is marked with // @group start … and // @group end
  • Conditions can be applied to the whole group with // @group condition
  • Two kinds of group currently supported: vector3 and color

Vector3​

Groups of properties that represent 3D vectors can be indicated as follows:

  schema: {
    autoFrom: 'boolean',
    // @group start from:vector3
    // @group condition autoFrom=false
    fromX: 'f32',
    fromY: 'f32',
    fromZ: 'f32',
    // @group end
  },

Assuming the condition is met, this is displayed tidily in the editor:

StudioGroups

Color​

Colors can be indicated as in the following example:

  schema: {
    // @group start background:color
    bgRed: ecs.f32,
    bgGreen: ecs.f32,
    bgBlue: ecs.f32,
    // @group end
  },

Displays a color selector:

StudioColorSelector

Labels​

Custom labels can still be used for individual fields:

  schema: {
    // @group start orient:vector3
    // @label Pitch
    orientPitch: 'f32',
    // @label Yaw
    orientYaw: 'f32',
    // @label Roll
    orientRoll: 'f32',
    // @group end
  },

This looks like:

StudioFieldLabels