Galacean Editor provides a powerful code editor with features such as code suggestions, third-party package imports, engine event debugging, script parameter debugging, real-time project preview, and more, helping you quickly edit and debug code.

For more information about the code editor, please check Code Editor.

Code Editing

After creating a script asset in the scene editor, double-click the script to open the code editor. Scripts in Galacean need to be written in Typescript, and new scripts are created based on built-in templates by default. Additionally, the Galacean code editor is based on Monaco, with shortcuts similar to VSCode. After modifying the script, press Ctrl/⌘ + S to save, and the real-time preview area on the right will show the latest scene effects.

Tip: The Galacean code editor currently supports .ts, .gs, and .glsl file editing.

File Preview

1. File Search Quickly search for files in the project
2. Code Filter Whether to display only code files ( .ts, .gs, .glsl ) in the file tree
3. Built-in Files Used to display which files are non-editable internal files
4. Expand/Hide Toggle the expansion or hiding of folders
5. Code Files Editable code files will display corresponding file type thumbnails

Importing Third-Party Packages

The code editor has a built-in engine corresponding to the project, which can automatically provide intelligent suggestions for engine APIs, helping you quickly implement logic based on the engine. However, in most cases, you will need to import Galacean ecosystem packages or other third-party packages to enhance functionality.

1. Search Box Enter the package name in the search box and press Enter to quickly fetch the package version list
2. Version Selection By default, the latest version is used
3. Import Button After selecting the package name and version, click the import button to load the type information of the third-party package into the workspace
4. Package List This will list all third-party packages that the current project depends on
5. Version Switching You can switch the version of the imported package here. After switching, the new type information will be loaded into the workspace

Real-time Preview Area

The Galacean code editor provides a real-time preview feature. After saving the code, the preview area will automatically update, allowing you to quickly see the execution results of the code.

1. Drag Button Hold to drag the simulator. Drag the simulator to the right edge of the screen to dock it on the right panel.
2. Statistics Toggle Click to toggle the display status of scene statistics.
3. Open in New Window Open the project preview page in a new window.
4. Script Parameter Editing If the active script in the current scene has configurable parameters, you can open this panel to adjust the script parameters in real-time. For more details on script parameters, please refer to Script System.
5. Close Button Click to close the simulator. After closing, a display button is provided at the top right corner of the screen, click to reopen the simulator.

Event Debugging

In the code editor, we provide an event debugging panel to help you quickly debug events in the scene.

1. Event List The Galacean Editor will automatically collect all event names in the scene and display them here.
2. Event Parameter Configuration You can click this button to configure the parameters carried when the event is triggered. The parameters are written in JSON format.
3. Event Trigger Button Click this button to trigger the corresponding event in the scene.

Note, the script component must be bound to an entity to display the event list.