Property Types

Table of contents

  1. Types
  2. Flags
  3. Icons
  4. Primitive Properties
    1. String
    2. Boolean
    3. Number
  5. Compound Properties
    1. Vec3
    2. Vec2
    3. Quat
  6. Shapes
    1. Sphere
    2. Capsule
    3. Cylinder
    4. Hemisphere
    5. AABB
    6. OOBB
    7. Plane
    8. Line
    9. Arrow
    10. Vector
    11. Mesh
    12. Path
    13. Triangle
  7. Others
    1. Groups
    2. Entity Reference
    3. Table
    4. Comment
    5. Line Chart
      1. Line Chart Data
      2. Line Chart Property

This is a complete description of all property types and their layouts.

Types

These are all the possible property types:

Typeid
Group"group"
Comment"comment"
Number"number"
String"string"
Boolean"boolean"
Vec2"vec2"
Vec3"vec3"
Quaternion"quat"
Entity Reference"eref"
Table"table"
Sphere"sphere"
Capsule"capsule"
Cylinder"cylinder"
HemiSphere"hemisphere"
AABB"aabb"
OOBB"oobb"
Plane"plane"
Line"line"
Arrow"arrow"
Vector"vector"
Mesh"mesh"
Path"path"
Triangle"triangle"
Line Chart"linechart"

Flags

These are all the possible property flags:

Flagvaluedescription
None0No changes
Hidden1The property will be hidden on the property tree
Collapsed2The property will appear collapsed as default on the property tree

Flags are used as a bitmask, so their value is combined in binary. When setting this flags from the game/engine, you need to treat the as such.

Example:

  • Hidden has a value of 1, in binary this is 0001.
  • Collapsed has a value of 2, in binary this is 0010.
  • Hidden | Collapsed has a value of 3, in binary this is: 0011

Icons

All properties can have an icon.

Icons use Font Awesome Icons:

  • The icon property is the name of the icon. Examples: question, circle, user.
  • The icolor property is a valid CSS color value. Examples: HEX colors like #333 or #565656 are valid. Named colors such as red or cornflowerblue are also valid.

Properties with an icon property and no icolor will use a default color.

By default, icons are displayed before the name of the property, and only the icon is affected by the color. However, a few properties have custom behavior:

  • First level groups: first level groups create blocks of properties on the Entity Data panel. A first level group with an icolor property tints the header of the block with a darker shade of the color.

First level group with an icon with color

  • Comments: Any comment with an icolor property tints the background of the comment with a darker shade of the color, and the border of the comment with the given color:

Different types of comments with icons and colors

Primitive Properties

String

{
    "name": string,
    "type": "string",
    "value": string,
    "flags": number,
    "icon"?: string,
    "icolor"?: string
}

Boolean

{
    "name": string,
    "type": "boolean",
    "value": boolean,
    "flags": number,
    "icon"?: string,
    "icolor"?: string
}

Number

{
    "name": string,
    "type": "number",
    "value": number,
    "flags": number,
    "icon"?: string,
    "icolor"?: string
}

Compound Properties

Vec3

{
    "name": string,
    "type": "vec3",
    "value": {
        x: number,
        y: number,
        z: number
    },
    "flags": number,
    "icon"?: string,
    "icolor"?: string
}

Vec2

{
    "name": string,
    "type": "vec2",
    "value": {
        x: number,
        y: number,
    },
    "flags": number,
    "icon"?: string,
    "icolor"?: string
}

Quat

{
    "name": string,
    "type": "quat",
    "value": {
        x: number,
        y: number,
        z: number,
        w: number
    },
    "flags": number,
    "icon"?: string,
    "icolor"?: string
}

Shapes

Sphere

{
    "name": string,
    "type": "sphere",
    "layer": string,
    "color": {
        r: number,
        g: number,
        b: number,
        a: number
    },
    "position": {
        x: number,
        y: number,
        z: number
    },
    "radius": number,
    "flags": number,
    "texture"?: string,
    "icon"?: string,
    "icolor"?: string
}

Capsule

{
    "name": string,
    "type": "capsule",
    "layer": string,
    "color": {
        r: number,
        g: number,
        b: number,
        a: number
    },
    "position": {
        x: number,
        y: number,
        z: number
    },
    "direction": {
        x: number,
        y: number,
        z: number
    },
    "radius": number,
    "height": number,
    "flags": number,
    "texture"?: string,
    "icon"?: string,
    "icolor"?: string
}

Cylinder

{
    "name": string,
    "type": "cylinder",
    "layer": string,
    "color": {
        r: number,
        g: number,
        b: number,
        a: number
    },
    "position": {
        x: number,
        y: number,
        z: number
    },
    "direction": {
        x: number,
        y: number,
        z: number
    },
    "radius": number,
    "height": number,
    "flags": number,
    "texture"?: string,
    "icon"?: string,
    "icolor"?: string
}

Hemisphere

{
    "name": string,
    "type": "hemisphere",
    "layer": string,
    "color": {
        r: number,
        g: number,
        b: number,
        a: number
    },
    "position": {
        x: number,
        y: number,
        z: number
    },
    "direction": {
        x: number,
        y: number,
        z: number
    },
    "radius": number,
    "flags": number,
    "texture"?: string,
    "icon"?: string,
    "icolor"?: string
}

AABB

{
    "name": string,
    "type": "aabb",
    "layer": string,
    "color": {
        r: number,
        g: number,
        b: number,
        a: number
    },
    "position": {
        x: number,
        y: number,
        z: number
    },
    "size": {
        x: number,
        y: number,
        z: number
    },
    "flags": number,
    "texture"?: string,
    "icon"?: string,
    "icolor"?: string
}

OOBB

{
    "name": string,
    "type": "oobb",
    "layer": string,
    "color": {
        r: number,
        g: number,
        b: number,
        a: number
    },
    "position": {
        x: number,
        y: number,
        z: number
    },
    "size": {
        x: number,
        y: number,
        z: number
    },
    "up": {
        x: number,
        y: number,
        z: number
    },
    "forward": {
        x: number,
        y: number,
        z: number
    },
    "flags": number,
    "texture"?: string,
    "icon"?: string,
    "icolor"?: string
}

Plane

{
    "name": string,
    "type": "plane",
    "layer": string,
    "color": {
        r: number,
        g: number,
        b: number,
        a: number
    },
    "position": {
        x: number,
        y: number,
        z: number
    },
    "normal": {
        x: number,
        y: number,
        z: number
    },
    "up": {
        x: number,
        y: number,
        z: number
    },
    "width": number,
    "length": number,
    "flags": number,
    "texture"?: string,
    "icon"?: string,
    "icolor"?: string
}

Line

{
    "name": string,
    "type": "line",
    "layer": string,
    "color": {
        r: number,
        g: number,
        b: number,
        a: number
    },
    "origin": {
        x: number,
        y: number,
        z: number
    },
    "destination": {
        x: number,
        y: number,
        z: number
    },
    "flags": number,
    "icon"?: string,
    "icolor"?: string
}

Arrow

{
    "name": string,
    "type": "arrow",
    "layer": string,
    "color": {
        r: number,
        g: number,
        b: number,
        a: number
    },
    "origin": {
        x: number,
        y: number,
        z: number
    },
    "destination": {
        x: number,
        y: number,
        z: number
    },
    "flags": number,
    "icon"?: string,
    "icolor"?: string
}

Vector

{
    "name": string,
    "type": "vector",
    "layer": string,
    "color": {
        r: number,
        g: number,
        b: number,
        a: number
    },
    "vector": {
        x: number,
        y: number,
        z: number
    },
    "flags": number,
    "icon"?: string,
    "icolor"?: string
}

Mesh

{
    "name": string,
    "type": "mesh",
    "layer": string,
    "color": {
        r: number,
        g: number,
        b: number,
        a: number
    },
    "vertices": number[],
    "indices"?: number[],
    "wireframe"?: boolean,
    "flags": number,
    "texture"?: string,
    "icon"?: string,
    "icolor"?: string
}

Path

{
    "name": string,
    "type": "path",
    "layer": string,
    "color": {
        r: number,
        g: number,
        b: number,
        a: number
    },
    "p1": {
        x: number,
        y: number,
        z: number
    },
    "p2": {
        x: number,
        y: number,
        z: number
    },
    "p3": {
        x: number,
        y: number,
        z: number
    },
    "flags": number,
    "icon"?: string,
    "icolor"?: string
}

Triangle

{
    "name": string,
    "type": "triangle",
    "layer": string,
    "color": {
        r: number,
        g: number,
        b: number,
        a: number
    },
    "points": Vec3[],
    "flags": number,
    "texture"?: string,
    "icon"?: string,
    "icolor"?: string
}

Others

Groups

{
    "name": string,
    "type": "group",
    "value": Property[],
    "flags": number,
    "icon"?: string,
    "icolor"?: string
}

Entity Reference

{
    "name": string,
    "type": "eref",
    "value": {
        "name": string,
        "id": number
    },
    "flags": number,
    "icon"?: string,
    "icolor"?: string
}

Table

{
    "name": string,
    "type": "table",
    "value": {
        "header": string[],
        "rows": string[][]
    },
    "flags": number,
    "icon"?: string,
    "icolor"?: string
}

Comment

{
    "name": string,
    "type": "comment",
    "value": string,
    "flags": number,
    "icon"?: string,
    "icolor"?: string
}

Line Chart

Line Chart Data

{
    "values": number[],
    "ylabel": string,
    "color"?: string

Line Chart Property

{
    "name": string,
    "type": "linechart",
    "data": ILineChartData[],
    "yscale": number,
    "xscale": number,
    "chart"?: string, // use "bar" for a bar chart instead of a line chart
    "height"?: number,
    "flags": number,
    "icon"?: string,
    "icolor"?: string
}