Editable Fields

When an object in a scene is selected, the inspector panel will show all of the editable fields for that object.

Devs can define which fields are editable by using the @editable decorator.

/pebble/prefabs/car.ts

export default class Car extends BaseObject {
  // ...

  @editable
  public speed: number = 0.8;
}

Serialization

Once a field is marked editable, each objects value will be serialized when a scene is saved.

/pebble/scenes/city-scene.json

[
  //...
  {
    "_id": "i86yx",
    "prefabId": "car",
    "name": "car",
    "speed": 0.8,
    "scripts": {}
  }
]

All of an objects serialized values are passed to a BaseObject / BaseBehaviours constructor when the scene is loaded.

/pebble/prefabs/car.ts

export default class Car extends BaseObject {
  // ...

  public constructor(initialProps) {
    super(initialProps);
    console.log(initialProps.speed); // 0.8
  }
}

Custom Field Types

When a field is marked editable, Pebble Engine will automatically generate a UI for that field. However, sometimes you may want to manually specify a custom UI for a field.

For example, you may want to use a color picker for a field that represents a color.

// ...
@editable({ type: 'color' })
public color: string = '#ff0000';

The current available field types are:

• number
• asset
• string
• vector3
• color
• object
• boolean

Object Type

An “object” field type is available for specifying that an object is editable, along with a specified set of child properties.

  @editable({
    type: "object",
    childConfig: {
      width: { type: "number" },
      height: { type: "number" },
      widthSegments: { type: "number" },
      heightSegments: { type: "number" },
    },
  })
  public geometryParams: Geometry;

onUpdate

You can also specify a callback that will be called when the field is updated.

  @editable({
    type: "number",
    onUpdate: "onUpdateSped"
  })
  public speed: number = 0.8;

  public onUpdateSpeed(value: number) {
    console.log(value);
  }

Registering editable fields through code

If you are looking to register editable fields through code instead of through a TS decorator, you can do so!

/pebble/prefabs/car.ts

export default class Car extends BaseObject {
  // ...

  public constructor(initialProps) {
    super(initialProps);

    this.registerEditableField({
      threeObj: {
        type: "object",
        childConfig: {
          material: {
            type: "object",
            childConfig: {
              color: { type: "color" },
              intensity: { type: "number" },
              wireframe: { type: "string" },
              distance: { type: "number" },
              decay: { type: "number" },
              reflectivity: { type: "number" },
            },
          },
        },
      },
    });
  }
}

The high-level key(s) mark the field name that is editable.