Play scripts in the editor (not in runtime)

Hi,
I would play some scripts in the editor (e.g. load some glbs from a json to populate the scene) before the runtime.
Is it possible?

Side question: is there a way to use JS scripts on the editor instead of TS?

Many thanks

Ping @julien-moreau the amazing daddy of the editor.

Hi @Pedro_Puggioni !
In the file located at “src/index.ts” it is possible to do anything you want. This file is created with the workspace in order to have a project working at startup. Of course this file can be customized to load multiple scenes and even pre-load some assets. Using attached scripts it is not possible to perform async features before the onStart as it is intended to be attached to existing objects. The only way is to customize the index.ts file (or create another file imported in index.ts etc.) to perform your loading part.

Unfortunately is not possible to use JS instead of TS but you can of course write JS code without having any type, accessor or whatever since TS is based on JS :slight_smile:

Thank you for your support @julien-moreau ! :slight_smile:
Trying what you suggest, I’ve added an import mesh async to the index.ts with no luck.
Here is my code, just in case…

import { Engine, Mesh, Scene, SceneLoader } from "@babylonjs/core";
import "@babylonjs/materials";
import { Console } from "console";

import { runScene } from "./scenes/scene";

export class Game {
    /**
     * Defines the engine used to draw the game using Babylon.JS and WebGL
     */
    public engine: Engine;
    /**
     * Defines the scene used to store and draw elements in the canvas.
     */
    public scene: Scene;

    /**
     * Constructor.
     */
    public constructor() {
        this.engine = new Engine(document.getElementById("renderCanvas") as HTMLCanvasElement, true);
        this.scene = new Scene(this.engine);
        
        this._bindEvents();
        this._load();
    }

    /**
     * Loads the first scene.
     */
     
    private _load(): void {
        const rootUrl = "./scenes/scene/";
        
   /**
     * MY CODE
     */
SceneLoader.ImportMeshAsync(
            "",
            "https://dl.dropbox.com/s/88mwi9pa8f7fhi4/",
            "Doors_NOgroupPivot.glb",
            this.scene,
            function (meshes) {        
               
            });
 /**
     * MY CODE END
     */

        SceneLoader.Append(rootUrl, "scene.babylon", this.scene, () => {
            
            this.scene.executeWhenReady(() => {
                // Attach camera.
                if (!this.scene.activeCamera) {
                    throw new Error("No camera defined in the scene. Please add at least one camera in the project or create one yourself in the code.");
                }
                this.scene.activeCamera.attachControl(this.engine.getRenderingCanvas(), false);
                
                // Run the scene to attach scripts etc.
                runScene(this.scene, rootUrl);
                
               
                // Render.
                this.engine.runRenderLoop(() => this.scene.render());
                
            });
            
        }, undefined, (_, message) => {
            console.error(message);
        }, "babylon");
        
    }
    
    
    /**
     * Binds the required events for a full experience.
     */
    private _bindEvents(): void {
        window.addEventListener("resize", () => this.engine.resize());
    }
}

@Pedro_Puggioni im checking today to find what is going wrong :slight_smile:
Your code looks good, I think the issue comes more from the editor

Hey @julien-moreau thank you!
Just to clarify again:
my goal is to populate the editor before hit play, I just want to create a script that imports assets as you do manually by drag and drop from “meshes” menu to the viewport.

thanks!

Hi @Pedro_Puggioni !

I got it working! The fact is that index.ts is not called when you play the scene in the editor (the centered play button in the toolbar). What i did in the that case was to add a new script that I attached to the scene to verify that the scene loads correctly. It loaded and everything was fine. The only problem is it is loaded while the game is running so it doesn’t fit you need as intented :slight_smile: .
I’m looking to add some kind of async “prepare” method in the scripts. That would be cool for your need.

The index.ts file is used only when you run the entire game project using the “Run…” button in the toolbar. But this requires to have webpack watching the files, relauch the entire project each time you want to test etc. That’s not something really fluent. I’m adding the “prepare” function (or something like that, I have to think) and come back to you ASAP

1 Like