Visual Scripting with JS&NodeJS

YT: https://www.youtube.com/watch?v=vT1zL5oNITY

Source : https://github.com/zlatnaspirala/matrix-engine-wgpu

FluxCodexVertex Web Editor 🚀 (since version 1.8.0)

EditorX has two main parts:

• 
  Frontend (./src/tools/editor)


• 
  Backend (./src/tools/editor/backend)

Before running anything, install dependencies with npm i:

• in the root folder
  


• and also inside ./src/tools/editor/backend
  

The backend is built using Node.js 🟢

General Features 🧩

• Editor creates and manages files (Windows tested only)


• Scene container added


• SceneObject property container added


• Assets toolbar added (bottom panel)
  
  
  
  
  • Add GLB or OBJ files from the asset toolbox by selecting them
  
  
  
  
  
  



• Top menu for adding primitives (Cube / Sphere) with or without physics ⚙️



• Integrated Visual Scripting system 🧠

Visual Scripting – Implemented Features ✅

• Add Math nodes, events / custom methods, variable popup, SceneObject access


• Get SceneObject → set position → bind onTargetReach events


• Custom func editor


• Run the graph ▶️


• Save graph
  
  
  
  
  • Currently saved to LocalStorage
    
  
  
  • For final builds, becomes a real JS object injected into the app flow.[NOT DONE]
    Now it is posible to hide editor on begin.
  
  
  
  
  
  



• Export graph to JSON
  



• Import graph from JSON
  

⚠️ Important Notes

Visual Scripting is only available when running the engine from source


(not from npm i matrix-engine-wgpu).

You must clone or download the engine source from the GitHub repository.

Instructions 📌

• Run the editor with:
  

npm run editorx

from the engine root directory.

EditorX is an alias for FluxCodexVertex (needed three words to keep the name unique)

Run the scene by pressing F6 or by clicking Run in the left panel

If you delete all objects from the scene, you must refresh the page and add at least one object again

Before importing a graph, delete all nodes from the FluxCodexVertex graph

Saving is still based on LocalStorage

After deleting everything, click Save to store an empty [] array

All changes in graph must be saved manually/clicking for now 💾 (no autosave for graphs).