Linking assets

Reference JSON, material, and GUI assets from your scripts using @visibleAsAsset.

Introduction

The editor provides a way to use assets directly in scripts. Those assets are preloaded and are part of the loading process of the scene.

To use those assets in scripts, properties need to be decorated with the @visibleAsAsset decorator from the babylonjs-editor-tools package and will then be available in the editor's inspector.
To set those properties, simply select an asset from the Assets Browser panel and drag & drop it to the desired property in the inspector.

If the dropped asset is not compatible with the property type, an error popup will be displayed.

The supported asset types are:

json: any JSON file that can be parsed.
material: any material created in the editor and available as asset.
gui: any GUI created in the editor and available as asset.

Package dependency

Those decorators are available in the babylonjs-editor-tools package that is provided as a dependency in the package.json file. In case a decorator that is documented here is not available in the code, make sure to install the up-to-date package in your project.

JSON files

When a property is decorated with @visibleAsAsset, this property will be linked to the provided asset with extension .json in the editor's inspector. The JSON file is automatically parsed and properties can be accessed directly.

typescript

import { Mesh } from "@babylonjs/core/Meshes/mesh";

import { visibleAsAsset } from "babylonjs-editor-tools";

export default class MyMeshComponent {
    public constructor(public mesh: Mesh) { }

    @visibleAsAsset("json", "My JSON asset")
    private _json!: MyJsonTypeOrAny;

    public onStart(): void {
        console.log(this._json.name);
    }
}

Material files

As well as JSON files, when a property is decorated with @visibleAsAsset, this property will be linked to the provided asset with extension .material in the editor's inspector. The material is automatically parsed and properties can be accessed directly.

typescript

import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { PBRMaterial } from "@babylonjs/core/Materials/PBR/pbrMaterial";

import { visibleAsAsset } from "babylonjs-editor-tools";

export default class MyMeshComponent {
    public constructor(public mesh: Mesh) { }

    @visibleAsAsset("material", "My material asset")
    private _material!: PBRMaterial;

    public onStart(): void {
        this.mesh.material = this._material;
    }
}

In order to restrict the type of supported material, a configuration object can be passed to the decorator. By default, all materials are allowed. Example to restrict to PBR material:

typescript

import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { PBRMaterial } from "@babylonjs/core/Materials/PBR/pbrMaterial";

import { visibleAsAsset } from "babylonjs-editor-tools";

export default class MyMeshComponent {
    public constructor(public mesh: Mesh) { }

    @visibleAsAsset("material", "My material asset", {
        typeRestriction: "PBRMaterial",
    })
    private _material!: PBRMaterial;

    public onStart(): void {
        this.mesh.material = this._material;
    }
}

GUI files

As well as JSON files, when a property is decorated with @visibleAsAsset, this property will be linked to the provided asset with extension .gui in the editor's inspector. The GUI file is automatically parsed and properties can be accessed directly.

typescript

import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture";

import { visibleAsAsset } from "babylonjs-editor-tools";

export default class MyMeshComponent {
    public constructor(public mesh: Mesh) { }

    @visibleAsAsset("gui", "My GUI asset")
    private _gui!: AdvancedDynamicTexture;

    public onStart(): void {
        this._gui.addControl(...);
    }
}

Listening events

Using Sprite Manager