Um den Babylon.js GUI-Editor offline zu verwenden, zuerst sichergestellt werden, dass alle erforderlichen Komponenten lokal auf Ihrem Computer installiert sind. Anschließend kann man den Editor ohne Internetverbindung starten und damit arbeiten, ohne auf eine Online-Verbindung angewiesen zu sein. Wie das genau von Statten geht beschreibe ich in dieser kleinen Anleitung
Was ist der Babylon.js GUI Editor?
Babylon.js ist eine umfangreiche Open-Source-Bibliothek für die Entwicklung von 3D-Web-Anwendungen. Der GUI Editor ist eine Erweiterung dieser Bibliothek, die speziell darauf ausgerichtet ist, die Gestaltung und Implementierung von Benutzeroberflächen in Babylon.js-Projekten zu vereinfachen.
Mit dem Babylon.js GUI Editor kann man 2D-Elemente wie Schaltflächen, Textfelder, Listen, Slider und mehr erstellen, positionieren und anpassen. Diese Elemente können in eine 3D-Szene integriert werden, um interaktive Benutzeroberflächen für Spiele, Simulationen und andere Anwendungen zu erstellen.
Die Benutzeroberfläche des Editors ist benutzerfreundlich und bietet eine Vielzahl von Werkzeugen und Funktionen, darunter Drag-and-Drop-Funktionalität, Echtzeitvorschauen, Eigenschaftspanels zur Anpassung von Stilen und Verhalten der GUI-Elemente sowie Unterstützung für verschiedene Eingabegeräte wie Maus, Tastatur und Touchscreen.
Die Integration mit der Babylon.js-Bibliothek ermöglicht eine nahtlose Interaktion zwischen der erstellten Benutzeroberfläche und der 3D-Szene. Es können Eventhandler hinzugefügt werden, um auf Benutzerinteraktionen zu reagieren und eine Interaktionen zwischen den 2D- und 3D-Elementen zu implementieren.
Der Babylon.js GUI Editor hat eine Reihe von Exportoptionen, die es Entwicklern ermöglichen, die erstellten Benutzeroberflächen einfach in die 3D-Webanwendungen zu integrieren. Dies umfasst die Möglichkeit, die generierte Benutzeroberfläche als JSON Objekt herunterzuladen und in einem bestehenden Projekt zu verwenden.
Insgesamt bietet der Babylon.js GUI Editor eine effiziente und benutzerfreundliche Lösung für die Erstellung von 2D-Benutzeroberflächen in 3D-Umgebungen. Durch seine Integration mit der Babylon.js-Bibliothek und seine umfangreichen Funktionen ist er ein tolles Werkzeug für Entwickler um 2D GUI für 3D Web-Anwendungen und Spiele zu erstellen.
babylon.js GUI-Editor Installation
Der babylon.js GUI-Editor kann im Netz unter https://gui.babylonjs.com/ verwendet werden, wenn man den Internet hat. Falls man aber gerade an einem einsamen Strand unter Palmen oder (so wie ich öfter mal) in einem überfüllten Zug der deutschen Bahn kein Internet hat, ist eine Offline Version des babylon.js GUI-Editors sehr hilfreich.
Daher habe ich mich entschieden den babylon.js GUI-Editor auf meinem Notebook zu installieren. Die Installation unter Windows (vermutlich auch unter Linux) ist in wenigen Schritten erledigt und dauert (bei entsprechender Internet Verbindung nur wenige Minuten).
- Folgende Requirements müssen erfüllt sein.
Installation von Node und Npm (https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
Installation von Git (https://git-scm.com/downloads) - Clonen des https://github.com/BabylonJS/Babylon.js Repos
Eine Eingabeaufforderung (CMD.exe) öffnen und folgendes eintippen
git clone https://github.com/BabylonJS/Babylon.js.git - Mit „cd Babylon.js“ in das neue Verzeichnis wechseln und dort folgendes eintippen
npm install
npm run build:dev
Damit ist die Installation von babylon.js incl. des babylon.js GUI-Editors abgeschlossen.
babylon.js GUI-Editor starten
Mit den folgenden Schritten kann man den Babylon.js GUI Editor aus einer CMD.exe heraus starten und damit interaktive 2D-Benutzeroberflächen für deine 3D-Anwendungen und Spiele erstellen. Da der GUI-Editor vom „@tools/babylon-server“ abhängig ist, muss auch dieser in einer weiteren CMD.exe Box gestartet werden.
„@tools/babylon-server“ ist ein Modul, das als Teil des Babylon.js-Ökosystems entwickelt wurde. Es ist ein Tool, das eine lokale Entwicklungsumgebung für Babylon.js-Projekte bereitstellt, indem es einen lokalen Server bereitstellt, der die Entwicklung und das Testen von Babylon.js-Anwendungen erleichtert.
Starten des @tools/babylon-server
– Starten von CMD.exe
– Wechseln in das Babylon.js Verzeichnis
– npm run serve -w @tools/babylon-server ausführen
Starten von @tools/gui-editor
– Starten von CMD.exe
– Wechseln in das Babylon.js Verzeichnis
– npm run serve -w @tools/gui-editor ausführen
Der babylon.js GUI-Editor ist nun bereit und kann offline genutzt werden.
babylon.js GUI-Editor offline benutzen
Nach dem Start kann man im Browser http://localhost:1341/ öffnen und offline verwenden.
Eine gute Einführung in den babylon.js GUI-Editor kann man hier finden.
