Styleguide 3D
1. Guidelines und Inspirationen
Beim Erstellen von 3D-Assets für die AdLer-Engine sollten Sie folgende Punkte beachten:
Guidelines | Beschreibung |
|---|---|
Low-Poly | AdLer-Assets sollten eine simplifizierte Darstellung ihrer realen Counterparts sein. Ihre Geometrie sollte einfach, ladetechnisch unaufwendig und ohne minutiöse Details funktionieren. |
Vereinfachte Erkennbarkeit | AdLer-Assets sollten auf den ersten Blick verständlich sein. Es ist also wichtig, sich auf die wesentliche Formsprache des jeweiligen Objektes zu konzentrieren. Erkennbarkeit kann aber genauso durch gezielte Farbgebung erreicht werden. |
Bevel | AdLer-Assets sollten möglichst wenig harte Ecken und Kanten haben, benutzen Sie hierfür die Bevel-Option oder den zugehörigen Modifier in Blender. |
Locker | AdLer-Assets sollten stilisiert, humorös aber seriös sein. Beispiel: "Eine Badewanne ist ein weißes, einfarbiges Objekt mit einer hellblauen Fläche darin. Die Erkennbarkeit leidet hier durch zu wenig Details. Ein Glas Wein und eine übergroße Gummiente können hier helfen. Werden sie aber zu verspielt gestaltet, gefährden Sie die Ausrichtung auf ihre Zielgruppe". |
Schwebend | AdLer-Assets sollten wo möglich auf verbindende Elemente verzichten. Beispiel: Lampe/Lampenhalterung, Blume/Blätter, Hände/Torso, etc. Dies lässt die Objekte schwebend erscheinen und bricht die Seriosität des Lernspiels auf. Es unterstützt also mehr den Spiel- als den Lernaspekt. |
Einfache Farbe statt Textur | AdLer-Assets sollten mit einfachen Farben anstatt von Texturen funktionieren. Benutzen sie eine einfache Farbpalette (wie weiter unten angegeben). Farben können hierbei benutzt werden um Materialien (Holz/hellbraun, Metall/Grau, Glas/hellblau, etc.) sowie die Form des Objektes durch Shading (dunklere Farbabstufungen, vgl. Falten in Stoff mit dunklerer Farbe) zu verdeutlichen. |
Beachten sie, dass diese Punkte sich manchmal auch gegenseitig ausschließen. Hierbei sollten Sie zuerst abwägen, ob Sie die obersten Punkte " Low-Poly " und " Vereinfachte Erkennbarkeit " immer noch erfüllen.
Inspirationen
Inspirationen für die verschiedenen Objekte können sie Beispielsweise aus folgenden Spielen ziehen:
Animal Crossing
Two Point Hospital
Rayman
Nintendo Mii
Zelda: Links Awakening
2. Farben und Texturen
Um die Anzahl und den Aufwand an Draw-Calls durch Materialien und Texturen in AdLer zu verringern haben wir uns entschieden die Assets innerhalb eines Themas auf ein Material zu begrenzen und hierfür eine einzelne Farbpalette als Textur zu verwenden.
Bisher haben wir innerhalb der AdLer 3D-Engine folgende Farbpaletten verwendet:
 |  |
|---|---|
Standard Color-Pallette "Urban" | Color-Pallette "Urban" mit -40 Saturation, |
 |  |
|---|---|
Beispiel für eine Farbpallette für Gestein | Beispiel für eine Farbpallette für Wälder, beide Texturen können natürlich auch zusammengelegt werden |
Für größere Flächen, wie Wiesen oder gepflasterte Wege, sollten allerdings einfache Texturen verwendet werden, um das Flächenvolumen etwas aufzubrechen. Folgende Texturen wurden beispielsweise in den Hintergrundwelten von AdLer verwendet:
 |  |
|---|---|
Seamless-Textur für eine Grasfläche | Seamless-Textur für eine Kiesfläche |
 |  |
|---|---|
Seamless-Textur für Gehwege | Seamless-Textur für Stein/Pflasterboden |
In der AdLer 3D-Umgebung wurden aufwändigere Texturen für Wände und Boden des Lernraums verwendet, um die Aufmerksamkeit des Nutzers auf den Raum zu lenken:
 |  |
|---|---|
Mauerwerk-Textur für Lernräume des Arcade-Themes | Teppichboden-Textur für Lernräume des Arcade-Themes |
Alle interagierbaren Elemente in der 3D-Umgebung werden über eine farbliche Umrandung hervorgehoben. Folgende Farben wurden für folgende Zustände verwendet:
 |  |
|---|---|
Hervorhebung nicht abgeschlossenes Lern- oder Adaptivitätselement außerhalb des Interaktionsradius des Avatars | Hervorhebung nicht abgeschlossenes Lern- oder Adaptivitätselement innerhalb des Interaktionsradius des Avatars |
 |  |
|---|---|
Hervorhebung Storyelement außerhalb des Interaktionsradius des Avatars | Hervorhebung Storyelement innerhalb des Interaktionsradius des Avatars |
 |  |
|---|---|
Hervorhebung Lern- oder Adaptivitätselement außerhalb des Interaktionsradius des Avatars | Hervorhebung abgeschlossenes Lern- oder Adaptivitätselement innerhalb des Interaktionsradius des Avatars |
3. Beispielbilder
Im Folgenden Absatz sollen die oben genannten Punkte anhand von einigen Beispielbildern veranschaulicht werden.
 |  |  |
|---|---|---|
Beispiel 1, Deko Komposition | Beispiel 2, Video Projektor | Beispiel 3, Silber Trophäe |
Beispiel 1: Vereinfachte Erkennbarkeit und schwebend
Die einzelnen Elemente des Bücherregals funktionieren ohne aufwendige Geometrie und sind auf dem ersten Blick klar erkennbar. Da es sich hier um eine Deko-Komposition handelt, ist jedoch mehr Detail als eigentlich nötig hinzugefügt worden. Das Objekt ist hier also nicht "Bücherregal", sondern "Dekoration".
Beispiel 2: Vereinfachte Erkennbarkeit und locker
Statt eines modernen Projektors wurde hier ein stilisierter, altertümlicher Video-Projektor mit Filmspulen verwendet und außerdem die Symbolik und der Look einer Dia-Projektion auf der Leinwand benutzt, um die Funktion des Lernelements "Video" klar erkennbar abzubilden. Außerdem soll damit auf die schlechte/veraltete technische Ausstattung von Schulen humorvoll hingewiesen werden. (vgl. außerdem Tageslichtprojektor und PC-Schreibtisch des Campus-Themas)
Beispiel 3: Einfache Farbe statt Textur
Durch verschiedene Farbabstufungen von Blau und Grau wurden hier unterstützend zur Geometrie die Stofffalten der Tischdecke verdeutlicht. Außerdem ist das Material der Trophäe durch einfache Farbe und Kontext klar als Metall (in diesem Fall Silber) zu erkennen.
 |  |
|---|
In unterschiedlichen Themen können natürlich die gleichen Objekte auftauchen, diese sollten aber ebenfalls auf den ersten Blick ihrem Thema zugeordnet werden können. Hier z.B. das Objekt "PC-Schreibtisch" des Arcade-Themas (links) und des Campus-Themas (rechts).
 |  |
|---|---|
 |  |
Je nach Thema kann es sinnvoll sein, mehrere Darstellungen eines Objekts innerhalb des gleichen Themas zu verwenden. Hier zum Beispiel mehrere Darstellungen des Objekts "Arcade-Maschine" aus dem Arcade-Theme.
 |  |  |
|---|
Zu guter Letzt ist es wichtig, dass die Objekte von mehreren Winkeln aus erkennbar sind, da nicht klar ist in welcher Ausrichtung sie später in der Lernwelt platziert werden. Oben sehen sie ein negatives Beispiel für diese Regel in Form des Objektes "Verkaufs-Automat", bei welchem nicht aus jeder Perspektive die Bedeutung ersichtlich ist.
4. Themes
Im Projekt gibt es unterschiedliche Themes, welche eine optische Repräsentation verschiedener realer Umgebungen darstellen. Aktuell implementiert sind:
Campus Kempten |  |
|---|---|
Campus Aschaffenburg | Noch keine Grafik vorhanden |
Vorstadt |  |
Spielhalle |  |
5. Grundrisse
Die Lernräume in der 3D-Lernumgebung basieren auf festen Grundrissen, in welchen Lernelemente durch die Lehrenden platziert werden und Dekoelemente automatisch vom Programm platziert werden.
Folgende Grundrisse sind vorhanden:
6-Elemente |  |
|---|---|
8-Elemente |  |
10-Elemente |  |
13-Elemente |  |
15-Elemente |  |