Download
Customizing scripts
Introduction
A same script can be attached to multiple objects in the scene. Each object may have its own configuration for the script so they can behave differently. To do so, properties like booleans, numbers, vectors, colors etc. can be decorated so they become customizable in the editor per script and per object.
Each decorator is composed of at least a label and an optional description. This label is used to be displayed in the editor (if not provided, the name of the property is used as a label), where the description is used as a tooltip to help the user to understand what's the purpose of the property.
@visibleAsBoolean
When a property is decorated with @visibleAsBoolean, it will be displayed as a checkbox in the editor's inspector. This field can be customized with a label that is the first parameter of the decorator and a description.
@visibleAsNumber
When a property is decorated with @visibleAsNumber, it will be displayed as a number field in the editor's inspector. This field can be customized with:
  • min: Defines the minimum value the user can set (optional).
  • max: Defines the maximum value the user can set (optional).
  • step: Defines the increment/decrement step value (when the user slides on the input, optional).
@visibleAsString
When a property is decorated with @visibleAsString, it will be displayed as a text input in the editor's inspector. This field can be customized with a label that is the first parameter of the decorator and a description.
@visibleAsVector2
When a property is decorated with @visibleAsVector2, it will be displayed as a 2D vector field (X and Y) in the editor's inspector. This field can be customized with:
  • min: Defines the minimum value the user can set for each axis (optional).
  • max: Defines the maximum value the user can set for each axis (optional).
  • step: Defines the increment/decrement step value (when the user slides on the input, optional).
  • asDegrees: Defines if the field should convert radians to degrees internally for a better understanding (optional).
@visibleAsVector3
When a property is decorated with @visibleAsVector3, it will be displayed as a 3D vector field (X, Y and Z) in the editor's inspector. Properties to customize the field are the same as for @visibleAsVector2.
@visibleAsColor3
When a property is decorated with @visibleAsColor3, it will be displayed as a color field (R, G and B) in the editor's inspector. The color field has a color picker added automatically by default.
This field can be customized with:
  • noClamp: Defines if the color values (R, G and B) should be clamped between 0 and 1 (optional).
  • noColorPicker: Defines if the color picker should be disabled (optional).
@visibleAsColor4
When a property is decorated with @visibleAsColor4, it will be displayed as a color field (R, G, B and A for the alpha) in the editor's inspector. Properties to customize the field are the same as for @visibleAsColor3.
@visibleAsEntity
When a property is decorated with @visibleAsEntity, it will be displayed as a field that can receive entities from the scene in the editor's inspector. This creates a link to the chosen entity and allows to retrieve it in the script.
To set an entity, simply select it in the graph of the editor and drag it to the field.
The type of entities that can be dropped on the field are, according to the configuration of the decorator:
  • node: Any node from Babylon.js like meshes, cameras, lights, transform nodes, etc. that is available in the scene.
  • sound: Any sound that has been instantiated and available in the scene.
  • particleSystem: Any particle system that is available in the scene.
  • animationGroup: Any animation group that is available in the scene.
Let's have a scene with 2 boxes: one has a script attached to it and the second one is just a mesh. The first box has a script that rotates the entity that is attached to it using the @visibleAsEntity decorator.
In this example, the second box is attached to the first box's script so the rotation of the second box will be updated by the script when running the scene. The entity is attached just by drag'n'dropping it in the inspector's field.
Next
Compressing textures