Das Objekt-Komponenten System von A-Frame verstehen

A-Frame basiert auf einem sehr flexiblen Objekt-Komponenten System. Diese Herangehensweise ist sehr beliebt in der Spieleentwicklung.

Du kannst mit diesem System das Projekt in kleine, handliche Bausteine aufteilen. Im Zusammenspiel bilden die Komponenten dann ein komplexes und interaktives VR Erlebnis.

Falls du A-Frame noch nicht kennst oder eine kurze Auffrischung zum Framework benötigst, findest du hier zwei hilfreiche Artikel:

WebVR mit A-Frame: Einführung & Grundlagen

Schneller Einstieg in die WebVR Entwicklung mit A-Frame


Um diesem Tutorial folgen zu können, ist es von Vorteil, wenn du dich schon etwas mit HTML/CSS auskennst. Kenntnisse in JavaScript sind in diesem Schritt nicht nötig.

Das System

Wie der Name schon vermuten lässt, besteht das Objekt-Komponenten System (entity-component system) aus Objekten und Komponenten.

Objekte (entities) sind dabei allgemeine Container in der 3D Szene. Diese können zum Beispiel die Spielfigur, Gegner, Bäume oder der Himmel sein.

Komponenten (components) werden an Objekte angehängt und bestimmen das Verhalten, die Funktionalität und das Aussehen dieser.

Ein Objekte kann mehrere Komponenten gleichzeitig haben. Sogar während die VR App läuft, können weitere Komponenten hinzufügt oder angepasst werden.

Diese Struktur bietet eine unglaublich große Flexibilität und gleichzeitig bleibt das Projekt übersichtlich, da du dich immer nur auf kleine Einheiten konzentrieren musst. So ist das mentale Model des Projekts nicht unnötig groß und komplex.

Ein abstrakter Vergleich um das System zu verstehen: Stell dir ein Auto als unser Objekt vor. Mit einer Farb-Komponente könne wir die Farbe des Autos bestimmen. Die Motor-Komponente definiert PS und Gewicht, was die Geschwindigkeit des Autos beeinflusst. Fügen wir eine Licht-Komponente hinzu, kann unser Auto den Weg erleuchten.

All diese Komponenten können kombiniert werden und sogar bei anderen Fahrzeugen wiederverwendet werden. Zum Beispiel könnte ein Fahrrad-Objekt die Farb- und Licht-Komponenten verwenden, die Motor-Komponenten würden wir aber weglassen.

Die einzelnen Komponenten können auch miteinander kommunizieren und Daten und Events austauschen. Dadurch entsteht aus einzelnen Teilen ein großes Ganzes.

Verwendung

Im letzten Artikel haben wir schon verschiedene vorgefertigte Objekte, wie zum Beispiel den a-cube kennengelernt. Das grundlegendste Objekt in A-Frame ist das a-entity.

Dieses beschreibt ein allgemeines Element, das nur eine Position, Größe und Orientierung besitzt. Mithilfe von Komponenten kann das a-entity dann erweitert und genauer definiert werden.

Wollen wir zum Beispiel eine grüne Kugel erzeugen, können wir das mit den geometry und material Komponenten erreichen.

Die Komponenten werden dabei wie typische HTML Attribute am Element beschrieben. Die Eigenschaften der Komponente werden mithilfe einer CSS ähnlichen Syntax festgelegt, die sehr flexibel ist.

Auf den ersten Blick erscheint dieser Aufbau vielleicht etwas komisch, auf jeden Fall aber neu für jene die sich mit HTML und CSS schon auskennen.

Mit etwas Übung wird dir aber schnell auffallen wie mächtig dieses Objekt-Komponenten System ist. Durch die endlosen Kombinationsmöglichkeiten kann das a-entity perfekt an die jeweiligen Anforderungen angepasst werden.

So können wir mit zwei weiteren Komponenten unserer grünen Kugel noch die Fähigkeiten geben zu leuchten (mit light) und einen Ton (mit sound) von sich zu geben.

Jedes Verhalten, jede Funktionalität und das Aussehen aller Objekte in einer A-Frame Szene wird über solche Komponenten definiert.


Beispiele

Derzeit entstehen in der Community immer wieder neue Komponenten für das Framework. Hier gibt es einige erste Liste.

Zum Beispiel die Text Komponente – einfach text an ein a-entity hängen, den Text definieren und schon hast du einen dreidimensional gerenderten Text.

Oder diese Layout Komponente programmiert. Sie erlaubt es eine Gruppe von Objekten automatisch nach speziellen Vorgaben anzuordnen.

Würfel mithilfe der Layout Komponente automatisch angeordnet

Auch sehr spannend ist die Arbeit von Kevin Ngo, der eine Physics Komponenten geschrieben hat. Mit ein paar wenigen Attributen wird die komplette Szene physikalisch – im Sinne von Schwerkraft, Reibung, usw. – korrekt berechnet.

Physikalische Berechnungen ganz einfach mit einer Komponente integriert

React

Und wer sich schon mit React (Framework von Facebook) beschäftigt hat, den wird folgendes freuen: A-Frame kann auch in Kombination mit React verwendet werden. Dadurch werden interaktive WebVR Erlebnisse sauber strukturiert.

Die Beschreibung dieser Möglichkeit würde den Rahmen dieses Tutorials sprengen. Aber wenn dich diese Möglichkeit interessiert, kannst du dir hier das Projekt auf GitHub ansehen und hier eine kurze Einführung von Kevin durchlesen.

Gerne kannst du dich auch direkt bei mir melden. Ich beantworte deine Fragen gerne.


Eigene Komponenten programmieren

Damit hast du das Objekt-Komponenten System von A-Frame verstanden und weißt es einzusetzen. Kommende Woche werden wir uns daran setzen selbst eine Komponente zu programmieren.

Dazu werden wir etwas tiefer in Programmierung gehen und uns so eine individuelle Funktionalität ermöglichen, die A-Frame von Haus aus nicht mitliefert.

Bis dahin empfehle ich dir die Dokumentation von A-Frame. Diese gibt dir einen guten Einblick in die weitere Aspekten des Frameworks.

Achja und mit einer Anmeldung bei meinem Newsletter kannst du dich in Zukunft automatisch über neue Artikel und Tutorials zu WebVR und anderen VR Themen informieren lassen.