Saltar al contenido principal

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