My Virtual Pet ist ein von Tamagotchis inspiriertes Spiel, welches ich 2021/22 begonnen habe zu programmieren. Hierzu finden sich auch schon zwei frühere Blogeinträge unter dem gleichen Namen. Die erste Version des Spiels diente mehr dazu die Spieleentwicklung mit JavaScript und Unity zu vergleichen bzw. meine JavaScript Kenntnisse zu verbessern. Das Design des Spiels lag hierbei im Hintergrund, da der Fokus mehr auf der Implementierung der verschiedenen Funktionen lag. Bei der nächsten Version “My Virtual Pet 2.0”, lag wiederum der Fokus stark auf Design und zusätzlich darauf einen neuen Spielmodus zu implementieren – den Quiz-Modus. Bei der neuesten Version – 3.0, habe ich das mehr dreidimensionale Design der Charaktere von der 2.0 Version aufgegriffen und einen 3D Modus implementiert. Zusätzlich habe ich erhaltene Kritik aufgenommen und aufgrund dieser, das Spielerlebnis generell versucht zu verbessern.

Was ist Three.js?

Three.js ist eine JavaScript Bibliothek und ein 3D-Grafik-Framework, welches die Erstellung von 3D Grafiken und Animationen für Webanwendungen erleichtert. Es benutzt WebGL (Web Graphics Library), eine API welche speziell für das Web entwickelt wurde und bietet eine benutzerfreundliche Schnittstelle zur Erstellung von 3D Inhalten.

Starten mit Three.js:

Die Installation von Three.js ist mit ein paar Zeilen im Terminal schnell erledigt. Auf threejs.org findet man eine gute Dokumentation und einen Installation Guide.

Zusätzlich benötigt man noch Vite, ein Build-Tool und eine Entwicklungsumgebung speziell für webbasierte JavaScript Projekte. Hierdurch wird der Entwicklungs- und Build-Prozess optimiert. Die Installation war auch mit ein paar Kommandozeilen im Terminal erledigt, dauert nur ein bisschen länger zum Runterladen und Installieren.

First Steps – Szene, Kamera und Renderer:

Zuerst muss man ganz oben im Code dem Import erstellen mit: import * as THREE from ‘three’;

Um 3D Objekte anzeigen zu können benötigt man dann eine Szene, eine Kamera und einen Renderer:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Es stehen mehrere verschiedne Kameras zur Auswahl, wie Orthographic Camera und Stereo Camera, die Perspective Camera ist jedoch die, die die Inhalte am ehesten darstellt so wie das Menschliche Auge es sehen würde.

Nachdem die drei essentiellen Elemente erstellt wurden, fehlt nur noch ein Objekt. Hier hat man zwei Möglichkeiten. Primitive Formen mittels Three.js erstellen oder ein fertiges 3D Objekt, welches mit einem 3D Programm modelliert wurde, laden. In My Virtual Pet habe ich beides gemacht.

Erstellen von Formen:

const geometry = new THREE.SphereGeometry(0.05, 10, 10);
const material = new THREE.MeshStandardMaterial( {color: 0xffffff});
const star = new THREE.Mesh( geometry, material);
scene.add(star);

Hier habe ich mich dazu entschlossen, Kugeln zu erstellen, welche im Spiel kleine Sterne repräsentieren sollen, die verteilt den Hintergrund füllen sollen und so für mehr Tiefe sorgen sollen.

Die erste Codezeile ist für das “Gerüst” der Form. Hier werden Punkte erstellt (Vertices) Welche dann gefüllt werden (faces) und eine Form entstehen lassen. Hier habe ich mich für die Sphere (Kugel) entschieden, aber es gibt weitere primitive Formen wie Box, Circle, Cylinder, Plane usw..

Die zweite Codezeile ist für das Material, welchem wir eine Farbe zuweisen können, um die Form einzufärben.

In der dritten Codezeile machen wir ein Mesh. Das Mesh ist ein Objekt welches die Form nimmt und mit dem Material verbindet, dass wir es in der Szene platzieren und bewegen können

In der vierten und letzten Codezeile fügen wir die fertige Kugel unserer Szene hinzu.

Hiermit habe ich die Kugeln dann noch mit zufälligen Koordinaten im Spiel verteilt:

const [x, y, z] = Array(3).fill().map(() => THREE.MathUtils.randFloatSpread(100));
star.position.set(x, y, z);

Lichtquelle:

Zusätzlich kann man noch eine Lichtquelle in der Szene platzieren. Hier gibt es verschiedene zur Auswahl, wie Ambient Light, Directional Light und Point Light.

Hier ein Beispiel wie man ein Ambient Light hinzufügt:

const light = new THREE.AmbientLight( 0x404040 );
scene.add( light );

Im Konstruktor werden jeweils die Intensität des Lichts sowie die Farbe angegeben. Danach fügt man das Licht der Szene hinzu. Im Spiel habe ich ein Ambient Light verwendet, welches alle Objekte in der Szene gleich beleuchtet und ein Point Light, für eine Stehlampe, welches Licht von einem Punkt in alle Richtungen ausstrahlt.

Orbit Controls:

Eine weitere Funktion, die ich eingebaut habe, ist Orbit Controls. Orbit Controls erlaubet einem die Kamera um ein Objekt zu schwenken und zu zoomen. Diese Funktion ermöglicht es im Spiel den Raum samt Inhalten zu drehen und hinein bzw. hinaus zu zoomen.

Zuerst muss man es oben im Code wieder implementieren, mit:

import { OrbitControls } from ‘three/addons/controls/OrbitControls.js’;

Danach weist man den Konstruktor wieder einer Variable zu. Hier gibt man die Kamera, welche kontrolliert werden soll, an und das HTML Dom Element.

In der Zeile danach wird dann nach jeder Änderung der Kamera der Renderer aufgerufen, um die Szene zu erneuern:

const controls = new  OrbitControls( camera, renderer.domElement );

controls.addEventListener( ‘change’, render );

Um den Zoom einzuschränken, habe ich noch eine minimum und maximum Distanz angegeben, mit:

controls.minDistance = 0.6;
controls.maxDistance = 7;

3D Objekte laden:

Die Objekte, welche ich mit Womp modelliert habe, können entweder als OBJ oder STL exportiert werden. In der Three.js habe ich schnell eine Möglichkeit gefunden OBJ Dateien zu laden, mittels dem OBJLoader. Leider hatte ich Probleme die 3D-Modelle damit zu laden. Die Objekte sind zwar geladen worden, jedoch nicht mit den passenden Farben und Texturen, speziell beim Charakter. Auch nach längerem recherchieren und rum probieren habe ich es nicht geschafft die OBJ Dateien mit den richtigen Farben geladen zu bekommen. Meine Lösung war auf einen anderen Loader bzw. auf eine andere Dateiart zu wechseln.

Ein Loader der bei meiner Recherche häufig aufgekommen ist, ist der GLTFLoader. Um diesen für meine schon in Womp modellierten Objekte verwenden zu können, habe ich die exportierten OBJ Dateien in Blender, einer anderen 3D Software, importiert. Hier wurden sie ohne Probleme mit den richtigen Farben und Texturen geladen. Die importierten OBJ Dateien habe ich somit dann als GLTF/GLB Dateien exportieren können und dann mit dem GLTFLoader ohne Probleme laden können.

Das einzige noch bestehende Problem war, dass ich einige Glasoberflächen mit dem entsprechendem Material in den Modellen hatte und diese leider nicht durchsichtig, wie Glas sein sollte, geladen wurden. Ich habe dann die dementsprechenden Oberflächen aus den Modellen gelöscht und leer gelassen, sodass zumindest die Illusion besteht und man hindurchsehen kann.

Der Code für den GLTFLoader sieht wie folgt aus:

import { GLTFLoader } from ‘three/addons/loaders/GLTFLoader.js’;

const loader = new GLTFLoader();

loader.load(

‘CharacterTest.glb’,

scene.add( gltf.scene );

},

function ( xhr ) {

console.log( ( xhr.loaded / xhr.total * 100 ) + ‘% loaded’ );

},

function ( error ) {

console.log( ‘An error happened’ );

} );

In der ersten Codezeile wird der Loader importiert. Danach initiiert. Dann folgt das eigentliche Laden des Objekts, wo man die URL vom Objekt angibt, welches man laden möchte. in der folgenden Funktion wird es dann zu der Szene hinzugefügt. die folgenden zwei Funktionen sind um anzuzeigen wie weit das entsprechende Objekt geladen ist und eine Meldung falls ein Error beim Laden passiert.

Bedürfnisse füllen in 3D Umgebung:

Um den neugewonnenen 3D Bereich zu nutzen, habe ich einen Raum modelliert und ihn mit Objekten gefüllt, welche die Bedürfnisse des Charakters repräsentieren. Für den Hunger einen Kühlschrank, für das Spielen einen Laptop, für das Waschen eine Dusche und für das Schlafen ein Bett.

Damit der Charakter lebendiger wird, wird er bei jedem Betätigen der Bedürfnis-Buttons zu dem dementsprechenden Objekt bewegt. Hierfür ändere ich sowohl die Position als auch die Rotation des Charakters, wenn der Button gedrückt wurde und setze die Werte nach kurzer Zeit wieder auf die Ursprungswerte zurück, um den Character wieder auf die Ausgangsposition zu bringen.

Bedürfnisse sinken offline

Eine Kritik von der letzten Version war, dass die Bedürfnisse auch offline sinken sollen, um es ähnlicher zu einem richtigen Tamagotchi zu machen und um das Spielerlebnis zu verbessern.

Hierfür habe ich das “beforeunload”-Event verwendet. Dieses wird aktiviert, wenn das aktive Fenster aktualisier oder geschlossen wird.

Sobald das Event getriggert wird, werden alle benötigten Werte, wie die von den verschiedenen Bedürfnissen und zusätzlich ein Timestamp in den Local Storage gespeichert.

Bei dem folgenden Start vom Spiel wird der Wert vom gespeicherten Timestamp das von der jetzigen Zeit abgezogen und durch tausend dividiert, um einen Wert zu erhalten, der von den Bedürfnissen abgezogen wird.

Zuerst Werte Speichern, bevor Fenster geschlossen wird(Hier nur am Beispiel vom Timestamp):

window.addEventListener(“beforeunload”, function() {

window.localStorage.setItem(“lastPlayedTimestamp”, new Date().getTime().toString());

});

Bei neu laden, entsprechenden Wert von Bedürfnissen abziehen (Hier nur am Beispiel vom Hunger-Bedürfnis):

function offlineDepleation () {

var currentTime = new Date().getTime();

var lastPlayedTimestamp = localStorage.getItem(“lastPlayedTimestamp”);

var timeElapsed = lastPlayedTimestamp ? currentTime – parseInt(lastPlayedTimestamp) : 0;

var deductedOfflineValue = Math.floor(timeElapsed / 1000);

hunger -= deductedOfflineValue;

if (hunger <= 0) {

hunger = 0;

}

}

In der ersten Codezeile speichere ich mir die aktuelle Zeit ab (welche in Millisekunden seit Jänner 1, 1970 abgespeichert wird) und in der zweiten Zeile hole ich mir die Zeit zu der zuletzt gespielt wurde aus dem Local Storage. Die nächste Zeile kontrolliert ob ein lastPlayedTimestamp existiert, wandelt ihn in einen Integer um und rechnet die Differenz zwischen diesem und der jetzigen Zeit aus. Wenn kein lastPayedTimestamp existiert, wird der Wert 0 genommen. Dieser Wert wird in der nächsten Zeile dann durch tausend dividiert, um Sekunden zu erhalten bzw. einen Wert welcher klein genug ist, um ihn von den Werten der Bedürfnisse abziehen zu können, welches in der darauffolgenden Zeile passiert. Zuletzt wird noch kontrolliert, dass der Wert des Bedürfnisses nicht kleiner als 0 wird.

3D- und 2D-Modus + abgeänderter Startscreen

Der Startscreen hat sich im Vergleich zu der alten Version etwas geändert. Ich habe die alten Sprites von der ersten Version den Spiels wieder hinzugefügt und in den “2D Modus” gesteckt. Somit hat der Spieler die Wahl in 3D oder 2D zu Spielen und die alten Sprites bleiben erhalten.

Der “Survival Mode” von der letzten Version wurde zu den 3D- und 2D-Mode und der Quiz-Modus wurde in den Continue Screen versetzt.

Da das Spiel jetzt automatisch speichert, wurde der “Load Game”-Button unten rechts zum “New Game” -Button. Hier werden die gespeicherten Werte im Local Storage zurückgesetzt, sodass man nicht wieder beim neuen Continue Screen landet (siehe unten), sondern wieder beim diesem Startscreen.

Geld Funktion

Um das Spiel noch ähnlicher zu einem Tamagotchi zu machen, habe ich den Timer bzw. die “Survival” Funktion vom Spiel entfernt. Der Timer, welcher links unter den Bedürfnissbalken war, habe ich durch eine neue Geld Funktion ersetzt. Alle 10 Sekunden, die man aktiv im Spiel verbringt, gewinnt man 1$ dazu. Diese Währung kann man dann dazu verwenden eine neue Version deines ausgewählten Charakters freizuschalten. Diese Funktion soll dazu anregen, mehr Zeit im Spiel selbst zu verbringen und öfter zu spielen.

Continue Screen

Der Continue Screen wird angezeigt, sobald man das Spiel aufruft und davor schon mal ein Spiel angefangen hat. Hier kontrolliere ich mit einer Funktion, ob schon Werte im Local Storage abgespeichert wurden und zeige dann dementsprechend nur gewisse Elemente an. Mit dem New Game Button werden diese Werte wieder zurückgesetzt und man landet wieder beim eigentlichen Startscreen.

3D Assets

Die unten dargestellten 3D-Assets habe ich mithilfe von Womp-3D modelliert. Zu Womp-3D habe ich auch schon einen früheren Blogeintrag erstellt.

Learnings

Mit diesem Projekt habe ich gelernt mit Three.js zu arbeiten, was für mich etwas ganz neues war. Ich habe auch generell mehr gelernt wie man mit 3D Objekten arbeitet und diese in Applikationen einbindet. Bis dahin habe ich mich nur etwas mit der Modellierung von 3D Objekten beschäftigt gehabt. Zusätzlich habe ich mich noch mehr mit dem Spielerlebnis selbst auseinandergesetzt. Bei der ersten Version des Spiels lag der Fokus sehr darauf etwas in mehreren Technologien umzusetzen und diese Technologien zu vergleichen und nicht auf dem Spiel selbst. In der zweiten Version habe ich mich dann auf das Design konzentriert und darauf einen neuen Spielmodus hinzuzufügen, ohne das eigentliche Spiel zu verändern. Bei dieser Version habe ich das Gefühl einen guten Abschluss erreicht zu haben, indem ich sowohl eine neue Technologie erlernt habe als auch das gesamte Spielerlebnis verbessern konnte, zu der vorherigen Version. Das Spiel fühlt sich auf jeden Fall “fertiger” an, wobei man natürlich immer verbessern und erweitern kann.

The post My Virtual Pet 3.0 appeared first on Mobile USTP MKL.

Womp ist eine im Webbrowser laufende Applikation, die es ermöglicht 3D Modelle zu erstellen. Herkömmliche 3D Software is meistens sehr komplex und kann schnell überwältigend sein. Ich selbst habe etwas Erfahrung mit der 3D Software Blender und wie ich sie das erste Mal geöffnet habe, habe ich mich vom User Interface schon fast erschlagen gefühlt. Man wird von gefühlt hundert unterschiedlichen Optionen und Werkzeugen begrüßt, wie: Netze, Scheitelpunkte, Polygone, Boolsche Werte, Verrundungen, Erhebungen, Unterteilungen und Retopologie … um nur einige zu nennen.
Ich wollte für ein Spiel Charaktere in 3D erstellen, habe es mit Blender versucht und durch Fehler beim Rendern frustrierend aufgegeben und nach Alternativen gesucht. Somit bin ich auf Womp gestoßen.
Womp ist einfach zu bedienen und weil es im Browser und auf externen Servern läuft, braucht man keinen starken Computer mit einer teuren Grafikkarte.Womp-Projekte werden auch automatisch in der Cloud gespeichert, sodass man überall auf jedem Gerät arbeiten kann.

Womp verwendet keine komplexe Geometrie. Stattdessen werden klebrige und flüssige Formen verwendet, die man leicht und zügig verändern kann, ohne die steile Lernkurve von üblicher 3D Software wodurch Womp sehr einsteigerfreundlich ist.

Womp ist auch sehr gemeinschaftsorientiert. Man kann seine Kreationen problemlos innerhalb der Womp-Community teilen und die Arbeit der anderen verfolgen und liken. Zusätzlich kann man die in der Community geteilten Projekte herunterladen und sich im Detail anschauen wie das 3D Objekt genau kreiert wurde.
Man kann seine Werke auch ganz einfach in bestimmten Größen exportieren, oder auch als 3D Objekt herunterladen, um es in anderer Software verwenden zu können, oder auch mit einem 3D-Drucker auszudrucken.

Get started

Wenn man ein neues Projekt in Womp startet, wird man mit diesen Screen willkommen geheißen. Diese Szene spiegelt die Grundprinzipien der Software wieder. Man hat Primitive Formen, wie einen Cube und eine Sphere. Diese können durch sogenanntes “Gooping” miteinander verbunden werden – sozusagen verschmelzen. Man kann auch Formen voneinander abziehen, wie in dem Beispiel eine Sphere aus der Mitte eines Cubes abgezogen wird. Man sieht auch noch, dass die Formen unterschiedliche Farben und Materialien haben können.

Primitives

Es stehen drei Formen zur Verfügung, Cylinder, Cube und Sphere, aus denen man aus unzähligen Kombinationen seine 3D Objekte erstellen kann. Diese Formen kann man auch jederzeit in den Optionen wieder ändern – zum Beispiel eine Sphere zu einem Cube machen. Wie man in den Beispiel-Bild erkennen kann, kann man den Formen auch verschiedene Materialien zuweisen und hier deren Farbe und Beschaffenheit ändern. So kann man beispielsweise Formen aus Metall und Glas erstellen.

Curves

Curves sind kurz gesagt, eine Gruppe aus mehreren Formen, welche miteinander durch “Gooping” oder verschmelzen miteinander verbunden sind. So kann man leicht dynamische Forme erstellen, wie Kurven oder Treppen. Man kann hier auch wieder jeder einzelnen Form in der Gruppe ein anderes Material zuweisen und somit Verläufe von Farben und Materialien erstellen.

Gooping

Wie schon angedeutet, ist “Gooping” eine Art Verschmelzung der Formen. Man hat die Möglichkeit an einem Regler die “Goop Strength” einzustellen, welche die Stärke der Verschmelzung bestimmt. Umso stärker die Goop Strength umso größer kann der Abstand zwischen den Formen sein, in dem sie noch miteinander verschmelzen und umso größer wird auch der Effekt der Verschmelzung.

Negative Shapes

Man kann Formen nicht nur miteinander verbinden, sonder sie auch voneinander abziehen, um neue und komplexere Formen zu erstellen. In dem Beispiel-Bild habe ich aus einer Sphere für den Kopf die Augenhöhlen mit zwei weiteren Spheres subtrahiert und dann wieder etwas kleinere Spheres für die Augen hinzugefügt. Für den offenen Mund habe ich einen Cylinder von der Sphere für den Kopf abgezogen und dann einen abgerundeten Cylinder für die Zunge eingefügt. Man kann sehr schnell und leicht verständlich kompliziertere Formen erstellen.

Fazit

Ich kann Womp jedem empfehlen, der schon immer mal 3D Objekte erstellen wollte und kein großen Wissen von 3D Modelling hat. Das Programm ist sehr einsteigerfreundlich. Ich finde es auch für Entwickler von Applikationen sehr gut geeignet um verschiedenste Assets, wie Icons und Schriften, schnell und effektiv zu erstellen.

The post 3D modellieren einfach gemacht? – Womp appeared first on Mobile USTP MKL.

Als Projekt für das erste Semester, in der Masterklasse Mobile, habe ich ein von Tamagotchis inspiriertes Spiel erstellt, mit den Namen “My Virtual Pet” (siehe früheren Blogbeitrag). Für das Projekt im zweiten Semester habe ich das Design des Spiels komplett überarbeitet und einen neuen Spielmodus hinzugefügt – Quiz Mode.

Old vs. New

Hier sieht man den Vergleich von der neuen Version (links) mit der alten Version (rechts). Das Layout ist größtenteils gleich geblieben, jedoch habe ich alle Assets neu gemacht. Einen neues Titelbild, ein neuer Bildschirmhintergrund und neue Icons für die neuen Spielmodi wurden hinzugefügt. Diese ändern jeweils die Farbe, wenn man eines davon ausgewählt hat.

Der visuell größte Unterschied ist der Spielercharakter bzw. das Pet, welches ich basierend auf den alten Charakter in 3D modelliert habe. Hier gibt es zwei unterschiedliche Pets zu Auswahl.

Zu den neuen Spielmodi Buttons ist auch noch ein neuer “Instructions” Button für die Spiele Anleitung hinzugekommen.

Instructions Funktion

Eine neue Funktion, die hinzugekommen ist, ist es eine Anleitung vom Startbildschirm aufzurufen, welche die verschiedenen Spielmodi im Detail erklärt.

Survival Mode

Der einzige Spielmodus bei der alten Version, wurde zu dem “Survival Mode” in der neuen Version. So wie beim Startbildschirm sind auch hier die Grundelemente fast ganz gleich geblieben und wurden durch ein neues styling verändert bzw. ganz durch neue Assets ersetzt.
In der alten Version war es nicht möglich das Spiel zu gewinnen. Das Spiel lief so lange, bis eines der Bedürfnisse null erreicht hat und somit das Spiel verloren ist. Um das Spiel auch gewinnbar zu machen, habe ich einen Timer eingebaut. Wenn man es schafft, keines der Bedürfnisse seines Pets null erreichen zu lassen, bis der Timer abgelaufen ist, hat man das Spiel gewonnen.

Game Over Screen bei Survival Mode

Der Game Over Bildschirm hat im Vergleich zum alten Spiel auch ein neues Aussehen und einen neuen Button bekommen. Man muss somit nicht mehr die ganze Webseite neu laden, um das Spiel neu zu starten, sondern gelangt mit Hilfe eines Buttons wieder zum Startbildschirm. Zusätzlich zum neuen “Game Over” Schriftzug und den neuem Hintergrundbild, habe ich noch den Pet Charakter als Geist in 3D modelliert und hinzugefügt.

Quiz Mode

Der komplett neue Modus ist der Quiz Modus. Hier werden dem Spieler Fragen gestellt und jede richtig beantwortete Frage füllt einen Teil von einem der vier Bedürfnisbalken auf. Das Ziel ist es, alle Balken komplett aufzufüllen bevor die Zeit ausläuft.
Kein Versuch ist gleich. Man muss insgesamt 12 Fragen richtig beantworten, welche von einer Liste an Fragen kommen, die aus einer json Datei geholt werden. Die Fragen werden auch nie in der selben Reihenfolge gestellt, sodass jeder Versuch anders ist. Zu jeder Frage gibt es vier Antwortmöglichkeiten.
Bei einer richtig beantworteten Frage, färbt sich die richtige Antwort grün und ein Teil von einem Bedürfnisbalken füllt sich gleichzeitig ein Stück auf.
Bei einer falsch beantworteten Frage wird das Pet sichtbar traurig und es erscheint ein rotes Pop-Up, welches anzeigt, dass die gegebene Antwort falsch war und 10 Sekunden vom Timer abgezogen werden.
Wenn man es nicht schafft alle Bedürfnisbalken komplett aufzufüllen, bevor der Timer abläuft, hat man verloren und wird zum Game Over Screen weitergeleitet.

Game Over und Win Screen – Quiz Modus

Der Win Screen ist bei beiden Modi gleich. Dieser Screen ist ganz neu und hat in der vorherigen Version des Spiels nicht existiert.
Der Game Over Screen ist bis auf zwei neue Elemente gleich zu dem vom Survival Modus. Hier werden zusätzlich noch angezeigt wie viele Fragen man beim Quiz richtig beantwortet hat und ein “Results” Button, welcher eine Detailansicht zu den falsch beantworteten Fragen anzeigt.
Der “Play again” Button bringt den Spieler, wie auch beim Survival Modus, wieder zum Startbildschirm zurück.

Results Screen

Der Results Screen lässt einem alle die im Quiz falsch beantworteten Fragen anschauen und zeigt einem welche Antworten richtig und welche falsch sind.
Mit den zwei Buttons unter den Antworten kann man zur nächsten und zur vorherigen Frage wechseln und mit dem “Zurück” Button kommt man wieder zum Game Over Screen zurück.

Benutzte Software und Technologien

Figma, Photoshop, Womp, HTML, CSS, Bootstrap und JavaScript.

Meine Learnings

Nachdem ich das Design bei der ersten Version von der “My Virtual Pet” Applikation hinten angestellt habe und dann nicht mehr dazu gekommen bin, die App schön zu gestalten, war hier mein Hauptziel die App visuell zu verbessern und auch eine neue Game Mechanic hinzuzufügen.
Das Design habe ich Hauptsächlich mit Figma umgesetzt und die Icons und Bilder mit Photoshop bearbeitet. Die Charaktere habe ich zuerst mit Blender modelliert, hatte aber dann Probleme beim rendern, sodass ich nach Alternativen gesucht habe. Hier bin ich dann auf die ziemlich neue Software “Womp” gestoßen, welche es ermöglicht im Browser Objekte in 3D zu modellieren und zu rendern und habe die Charaktere dann hiermit basierend auf den alten 2D Charakteren umgesetzt.
Ich finde der Quiz Modus ergänzt das Spiel gut, da es an eine eher junge Zielgruppe gerichtet ist und somit die Kinder auch einen Lerneffekt beim Spielen bekommen.
Die alte Version vom Spiel habe ich mit zwei verschiedenen Technologien umgesetzt – Unity und JavaScript. Für die neue Version habe ich an der JavaScript Version weitergearbeitet, weil ich in Unity schon einmal ein Quiz programmiert habe. Um etwas neues zu lernen, habe ich mich deswegen entschlossen den neuen Quiz Modus in JavaScript zu machen. Hier ist es auch leichter das Spiel auf verschiedenen mobilen Geräten auszuprobieren.
Für Erweiterungen am Spiel könnte man natürlich noch weitere Spielmodi hinzufügen oder auch eine Art Overworld kreieren, wo die Spielmodi dann Minispiele wären.

The post My Virtual Pet 2.0 appeared first on Mobile USTP MKL.

Einleitung

Einkaufen, Entertainment, Socialising, arbeiten und studieren – Information wird Rund um die Uhr empfangen und weitergegeben. Das Smartphone ist eines der wichtigsten Mittel für die Kommunikation geworden und beinhaltet so gut wie alle Informationen, die man je brauchen könnte. Somit wird auch das Usability Design und User Interface Design (die Gestaltung der Benutzeroberfläche) für eben diese mobilen Geräte auch immer relevanter. Designer suchen konstant nach besseren Methoden um das Design noch intuitiver und effektiver zu gestalten. (Jia, 2021)

User Interface Design

Die Benutzeroberfläche, auch User Interface (UI) genannt, erleichtert die Kommunikation zwischen Menschen und Geräte – wie Computer und Smartphones. Sie besteht aus physischen und kommunikativen Aspekten von Input und Output oder Interaktion zwischen Mensch und Maschine. User Interface Design für Computer und Smartphones beinhaltet Applikationen, Betriebssysteme und Netzwerke. UI Design ist die Gestaltung von allen essentiellen wahrnehmbaren Eigenschaften einer Webseite. Dazu gehören die visuellen, auditiven und fühlbaren Eigenschaften. Beispielsweise die Wahl der Farbe, Schriftart, Animationen, Sprache, auditive Hinweise und Vibrationen. (Marcus, 2002, p.24)

Mobile User Interface Design, bezeichnet das gestalten der Mensch-Computer Interaktion und das Benutzen der Software durch die Benutzeroberfläche, welche am Smartphone über den Bildschirm angezeigt wird. Es ist sozusagen die Brücke der Kommunikation zwischen Mensch und Smartphone. Deswegen ist ein gutes UI Design auch ein ausschlaggebender Punkt für den Kauf eines Smartphones, da es nach dem Smartphone selbst, das Erste ist, was einem ins Auge springt. Ein gutes User Interface sollte dem Benutzer ein reibungsloses Benutzen der Software ermöglichen, sodass der Fokus am Prozess liegt, welcher durchgeführt wird und nicht an der Bedienung. Das UI Design hat einen direkten Effekt auf die Aufmerksamkeit des Benutzers und hat somit auch einen Einfluss darauf, wie lange und gerne die Applikation genutzt wird und somit auch das Smartphone selbst. Dies hat einen großen Einfluss auf das Kaufverhalten und ob der Konsument bei dem Produkten bleibt, oder lieber zu einem Produkt eines Konkurrenten wechselt. (Jia, 2021)

Weil User Interfaces unabhängig von Sprache werden soll, wird es immer wichtiger Konzepte und Aktionen durch Zeichen, Symbole, Bilder und Illustrationen zu übermitteln. (Dillon, 2006)

Flat Design Definition

Flat Design ist ein moderner und digitaler Stil, welcher sich auf Minimalismus fokussiert, indem extra Elemente und Effekte vom Design, wie Schatten, Lichteffekte und Texturen, entfernt werden. (Pratas, 2014)

Flat Design basiert auf den Prinzipien von Gittern, geometrischen Formen und visueller Ausgeglichenheit. Die Elemente werden simpel und zweidimensional dargestellt und wirken wie auf den Bildschirm aufliegend. Dies wird mit simplen Formen, zweidimensionalen Elementen, minimalen Texturen und sättigenden Farben geschaffen. Durch das simple Design funktionieren sie besonders gut auf Webseiten und mobilen Applikationen, weil dadurch Ladezeiten verkürzt werden. (El-Sherbiny, 2020)

Das Grundkonzept von Flat Design ist, wiederholende und komplizierte dekorative Elemente wegzulassen, um sich auf das wesentliche Objekt zu konzentrieren. Grafische Elemente, Texturen sowie dreidimensionale Effekte werden weggenommen, um nicht vom Wesentlichen abzulenken. Somit soll die Information simpel dargestellt werden, mit einer geschmeidigen Form und leuchtenden Farben. Informationen sollen direkter und leichter wahrnehmbar kommuniziert werden. Flat Design soll die Benutzung einer Applikation somit so einfach und intuitiv wie möglich machen. Das simpel gehaltene Flat Design kann sich auch besser den verschiedenen Bildschirmgrößen anpassen und verbraucht wenig Speicherplatz, sodass die Ladezeiten kürzer sind. Somit wird auch das Benutzererlebnis verbessert.(Jia, 2021)

Die Entstehung von Flat Design

Flat Design wurde als eine Alternative zu Skeuomorphic Design entwickelt, welches die Illusion von Dreidimensionalität erschafft, indem es mit dem Design das echte Objekt so nah wie möglich zu repräsentieren. Skeuomorphismus wurde von Apple für die grafische Benutzeroberfläche von dem iOS Betriebssystem im Januar 2007 verwendet. Dieses Betriebssystem wurde für mehrere Apple Produkte, wie das iPhone, das iPad, der iPod Touch und Apple TV, verwendet. Es verwendet verstärkt Verläufe, Schatten, Lichteffekte und Reflektionen. (Curtis, 2015)

Die ersten Versuche Flat Design für digitale Produkte zu verwenden kamen von Microsoft, für den Launch des MP3-Players Zune. Danach wurde Flat Design immer beliebter und wurde 2010 auch für die digitale Benutzeroberfläche des Windows Phone7 verwendet. Danach haben auch große Firmen wie Google und Apple die Flat Design Prinzipien in deren mobilen und web-basierten Applikationen übernommen. (El-Sherbiny, 2020)

Die Wurzeln von Flat Design liegen in der “Schweizer Typografie”. Dieser Grafikstil war eines der Grundgerüste von Grafikdesign in der  Mitte des 20. Jahrhunderts und wurde von den Schweizer Designern Josef Müller-Brockmann und Armin Hofmann gegründet. Die Schweizer Typographie verbindet Einflüsse vom Kubismus, Konstruktivismus, Futurismus, Suprematismus und Surrealismus. (Meggs, 2005).

Nachteile von Flat Design

Heutzutage ist es möglich bei Webseiten die häufigsten Aktionen, die ein User durchführt und die wiederkehrenden Muster von Interaktionen zu kategorisieren. Während Benutzer sich immer mehr an die gemeinsamen Funktionen und Bedienungen von Webseiten gewohnt haben, wurden Icons immer mehr verwendet, um Text bzw. Beschreibungen zu ersetzen. Flat Design ist einer der neuesten Trends, Icons noch mehr zu abstrahieren. Das Entfernen von Merkmalen und Attributen kann aber auch die Mehrdeutigkeit von Symbolen erhöhen und somit ihre Erkennbarkeit beeinträchtigen. Ein Hauptkritikpunkt von Flat Design ist die Zweidimensionalität, welche die Wiedererkennbarkeit von Symbolen negativ beeinträchtigen kann. Speziell bei der Umwandlung von Icons und dem Übergang von einem Form zentrierten Ansatz, welcher die Merkmale eines Symbols betont, zu einem funktionsorientierten Ansatz, welcher sich auf die Funktion und die dahinter stehende Absicht fokussiert. (Legleiter & Caporusso, 2020)

Icons repräsentieren im Flat Design deren Funktion bzw. das Ziel des Benutzers und nicht, so wie früher üblich, das eigentliche Objekt. Somit kann es leichter zu Missverständnissen in deren Bedeutung kommen. Die Abwesenheit einer Textbeschriftung des Symbols spielt eine große Rolle für das Verständnis von den Nutzern. In einer Studie von Legleiter & Caporusso  wurde das Verständnis von Flat Design geprüft. Hierfür wurden die meistverwendeten Icons von Webseiten untersucht. Es wurde aufgeführt, dass das Erkennen von Icons mit Alter und Bildungsniveau zusammenhängt. Interessant ist auch, dass hier ein technisches Wissen keinen Einfluss auf die Wiedererkennung von Symbolen auf Webseiten hatte. (Legleiter & Caporusso, 2020)

Illustrationen

Illustrationen sind schon immer in Büchern verwendet worden, um den Inhalt zu unterstützen und verständlicher zu gestalten. Sie helfen auch dabei, sich den Inhalt besser vorstellen zu können. Die früheste Form von Illustrationen wurden in Höhlenmalereien gefunden, welche circa 15,000 vor Christus in Frankreich entstanden sind. Nach dem Start der industriellen Revolution, in der zweiten Hälfte des 18. Jahrhunderts, hat sich der Buchdruck immer mehr verbessert und es wurden stetig mehr Bücher mit Illustrationen publiziert. All diese Illustrationen wurden manuell gezeichnet und maschinell gedruckt. Nach der Erfindung des Computers im 20. Jahrhundert, wurden Illustrationen für einen neuen Zweck verwendet, nämlich für Software. Hierfür mussten die Illustrationen, wegen den technischen Einschränkungen, so simpel wie möglich gestaltet sein. Im 21. Jahrhundert sind neue Geräte, wie der iPod und Smartphones, auf den Markt gekommen, für welche wieder neue Software entwickelt werden musste, um Benutzern zu helfen, diese Geräte auch einfach bedienen zu können. Zur gleichen Zeit wurden viele Webseiten und mobile Applikationen entwickelt, um einen das Leben leichter zu gestalten. Das startete auch die Arbeitsfelder User Experience Design und User Interface Design, welche sich auf die Benutzerfreundlichkeit und das Benutzererlebnis von Webseiten und mobilen Applikationen  fokussieren.

Flat Illustrations

Flat Illustrations sind digitale, vektor-basierte Illustrationen, die dem Flat Design Schema folgen. Wie schon bei den Flat Design Icons beschrieben, benutzen sie einen simplen und minimalistischen Stil und geometrische Formen um Charaktere, Objekte und Hintergründe zu illustrieren. Anstatt Dinge und Menschen realistisch zu repräsentieren wird hier sehr abstrakt gearbeitet. (El-Sherbiny, 2020)

Illustrationen werden heutzutage für das Design von Webseiten und mobilen Applikationen weitgehend genutzt, um die Benutzeroberfläche attraktiver zu gestalten, das Design zu vereinheitlichen und um die Nutzung intuitiver zu machen. Wenn Flat Design in Icons und Symbolen verwendet wird, sollte um die Harmonie zwischen allen Elementen zu bewahren, Flat Design auch bei Illustrationen bzw. den grafischen Elementen angewendet werden. Dies stärkt die Brand Identity, welche für die Webseite oder mobile Applikation entwickelt wird. Ein User Interface sollte nämlich auch die Brand Identity, die die Organisation als Marke repräsentiert, widerspiegeln. Illustrationen werden seit langer Zeit als Mittel zur Kommunikation genutzt. Sie helfen Menschen zu verstehen wie Dinge funktionieren und helfen ihnen beim Vorstellen der Vorteile, die ein Produkt haben kann. Illustrationen können gut im Gedächtnis des Users hängen bleiben und somit die Brand Awareness und Wiedererkennbarkeit erhöhen. (El-Sherbiny, 2020)

Fazit

Flat Design ist ein immer beliebter werdender Stil, um das User Interface von diversen Webseiten und mobilen Applikationen zu gestalten. Es soll die Benutzerfreundlichkeit steigern, indem es die Elemente auf das Wesentliche reduziert, was jedoch auch zu Missverständnissen führen kann und man deswegen auf User Testing nicht verzichten sollte. Man sollte auch darauf achten, dass nicht nur Icons sondern auch die anderen grafischen Elemente, wie Illustrationen im gleichen Flat Design Stil gestaltet werden, um ein einheitliches Bild zu schaffen und die Brand Identity zu stärken.

Quellen:

Legleiter, Andrea & Caporusso, Nicholas. (2020). Flat-Design Icon Sets: a Case for Universal Meanings?.

Page, Tom. (2014). Skeuomorphism or flat design: Future directions in mobile device User Interface (UI) design education. Int. J. of Mobile Learning and Organisation. 8. 130 – 142. 10.1504/IJMLO.2014.062350.

Jia, Yihan. (2021). Flat Research on the Design and Application of Icon Design in Mobile Phone UI Interface. DEStech Transactions on Computer Science and Engineering. 10.12783/dtcse/ccnt2020/35437.

El-Sherbiny, Hanan. (2020). THE USE OF FLAT ILLUSTRATIONS IN WEBSITES AND SMART PHONES APPLICATIONS’ USER INTERFACE (UI) DESIGN. Journal of Art & Architecture Research Studies – JAARS. 1. 10.47436/jaarsfa.v1i2.65.

Meggs, P. B. (2005). Graphic design, 1945-75: The International Typographic Style. Encyclopaedia Britannica.

Marcus, A. (2002). Dare We Define User-Interface Design?. Interactions. Volume 9, Issue 5. DOI: 10.1145/566981.566992.

Dillon, A. (2006). User Interface Design. Encyclopedia of Cognitive Science: John Wiley & Sons. ISBN: 9780470018866. DOI: 10.1002/0470018860.s00054.

Pratas, A. (2014). Creating flat design websites. Birmingham, UK : Packt Publishing Ltd.

The post User Interface Design: Flat Design appeared first on Mobile USTP MKL.

Als Semsterprojekt für die Masterklasse Mobile habe ich ein Virtual Pet Spiel mit zwei verschiedenen Technologien umgesetzt – Unity (C#) und JavaScript. Das Ziel des Spiels ist es sein virtuelles Haustier am Leben zu erhalten und die stetig sinkenden Bedürfnisse rechtzeitig zu füllen, bevor sie null erreichen und das Spiel vorbei ist.

Die Funktionen der Unity Version:

Der Start Screen:

• Start Screen mit New Game Button, Load Game Button und Quit Button
• New game Button geht zum Character Creator Screen weiter
• Load Game Button geht zum Load Game Screen weiter, wenn ein Speicherstand vorhanden ist
• Load Game Button zeigt nur ein “No save available” Pop-UP an, wenn kein Speicherstand vorhanden ist
• Quit Button beendet die Applikation

Der Load Screen:

• Load Save Screen zeigt gespeicherte Daten an. Hat einen Load Save Button, einen Back Button und einen Delete Save Button
• Delete Save Button löscht den aktuell gespeicherten Spielstand
• Back Button bringt einen zurück zum Start Screen
• Load Save Button bringt einen zum Main Screen und setzt die Werte dem Speicherstand entsprechend

Der Character Creator Screen:

• Der Character Creator Screen beinhaltet ein Textfeld, die verschiedenen Pets, einen links und einen rechts Pfeil und einen “Confirm” Button.
• Im Textfeld kann der Name des Pets eingegeben werden, welcher dann an den Main Screen übergeben wird
• Es werden die zwei möglichen Pets angezeigt, zwischen denen man wechseln kann
• Der linke und rechte Pfeil ermöglichen es, zwischen den unterschiedlichen Pets zu wechseln
• Der “Confirm Button” übergibt den Namen und gibt das ausgewählte Pet an den Main Screen weiter

Der Main Screen:

• Der Main Screen beinhaltet Save & Quit Buttons, 4 Bars für die Bedürfnisse, 4 Bubbles für die Bedürfnisse, das ausgewählte Pet, ein “Game Saved” Pop-Up, den Names des Pets, Bilder für die Entwicklung des Pets und 4 Buttons um die Bedürfnisse zu füllen
• Der Save Button speichert die aktuellen Variablen für die vier Bedürfnisse, die Art des Pets, den Namen des Pets und ob es sich entwickelt hat, ab. Zusätzlich wird in einem Pop-Up angezeigt, dass das Spiel gespeichert wurde
• Der Quit Button beendet die Applikation
• Die Bars für die Bedürfnisse Hunger, Fun, Hygiene und Energy senken sich mit der Zeit und werden hier visuell dargestellt. 
• Die 4 Bubbles für Hunger, Fun, Hygiene und Energy werden angezeigt, wenn das jeweilige Bedürfnis unter einen bestimmten Wert gelangt
• Das ausgewählte Pet wechselt zu einer traurigen Version, wenn ein Bedürfnis unter einen bestimmten Wert gelangt
• Wenn der “Feed” Button bestimmt oft gedrückt wurde entwickelt sich das Pet indem Sterne hintern ihm angezeigt werden
• Der vom Character Creator Screen eingegebene Name wird als Text angezeigt
• Feed, Play, Clean und Sleep Buttons füllen das dazugehörige Bedürfnis wieder auf
• Die Feed, Play, Clean und Sleep Button senken auch immer ein gegenteiliges Bedürfnis, wenn man sie klickt. Bsp: Play senkt das Energy Bedürfnis
• Wenn ein Bedürfnis 0 erreicht, ist das Spiel vorbei und es wird der Game Over Screen angezeigt

Der Game Over Screen:

• Der Game Over Screen beinhaltet das Game Over Bild, einen New Game Button und einen Quit Game Button
• Der New Game Button bringt einen wieder zu dem Start Screen
• Der Quit Game Button beendet die Applikation

Die Funktionen der JavaScript Version:

Der Start Screen:

• Start Screen mit Titelbild, Textfeld für Name des Pets + Label, die zwei auswählbaren Pets, ein links + rechts Pfeil, ein Confirm Button und ein Load Game Button
• Im Textfeld kann der Name des Pets eingegeben werden, welcher dann an den Main Screen übergeben wird
• Es werden die zwei möglichen Pets angezeigt, zwischen denen man wechseln kann
• Der linke und rechte Pfeil ermöglichen es, zwischen den unterschiedlichen Pets zu wechseln
• Der “Confirm Button” übergibt den Namen und gibt das ausgewählte Pet an den Main Screen weiter
• Load Save Button bringt einen zum Main Screen und setzt die Werte dem Speicherstand entsprechend
• Der Confirm Button bringt einem zum Main Screen indem er die nicht mehr gebrauchten Elemente vom Start Screen deaktiviert und die benötigten Elemente für den Main Screen aktiviert

Der Main Screen:

• Die Elemente im Main Screen sind 4 Bars für die Bedürfnisse, 4 Bubbles für die Bedürfnisse, das ausgewählte Pet, der gegebene Pet Name, Bilder für die Entwicklung des Pets und 4 Buttons um die Bedürfnisse zu füllen
• Die Bars für die Bedürfnisse Hunger, Fun, Hygiene und Energy senken sich mit der Zeit und werden hier visuell dargestellt. 
• Die 4 Bubbles für Hunger, Fun, Hygiene und Energy werden angezeigt, wenn das jeweilige Bedürfnis unter einen bestimmten Wert gelangt
• Das ausgewählte Pet wechselt zu einer traurigen Version, wenn ein Bedürfnis unter einen bestimmten Wert gelangt
• Der Save Button speichert die aktuellen Variablen für die vier Bedürfnisse, die Art des Pets, den Namen des Pets und ob es sich entwickelt hat ab.
• Wenn der “Feed” Button bestimmt oft gedrückt wurde entwickelt sich das Pet indem Sterne hintern ihm angezeigt werden
• Der vom Character Creator Screen eingegebene Name wird als Text angezeigt
• Feed, Play, Clean und Sleep Buttons füllen das dazugehörige Bedürfnis wieder auf
• Die Feed, Play, Clean und Sleep Button senken auch immer ein gegenteiliges Bedürfnis, wenn man sie klickt. Bsp: Play senkt das Energy Bedürfnis
• Wenn ein Bedürfnis 0 erreicht, ist das Spiel vorbei und es wird der Game Over Screen angezeigt

Der Game Over Screen:

• Der Game Over Screen deaktiviert alle Elemente vom Main Screen und zeigt das Game Over Bild an und einen Aufruf, die Seite neu zu laden, um das Spiel nochmal zu starten

Unterschiede der JavaScript und Unity Version:

Die beiden Versionen mögen auf dem ersten Blick ziemlich ident wirken, jedoch funktionieren sie doch etwas anders. In der Unity Version wurde mit Scenes gearbeitet. Jeder Screen ist eine Scene, welche durch den Klick auf den dementsprechenden Button geladen wird. Die Scenes existieren alle unabhängig voneinander. In der Version mit Java Script habe ich mit States gearbeitet. State 1 ist beispielsweise der Start Screen und State 2 der Main Screen. Wenn der Button “New Game” am Start Screen gedrückt wird, wird der State zu 2 gesetzt und es werden die nicht mehr gebrauchten Elemente, wie das Titelbild und der Button selbst, deaktiviert und alle Elemente welche für den Main Screen gebraucht werden, aktiviert.

Für die Speicherung der Variablen, die nötig sind um einen Spielstand zu speichern und wieder zu laden, habe ich in Unity die PlayerPrefs verwendet. PlayerPrefs ist eine Klasse, welche Variablen in der Form eines Strings, Integers oder Floats abspeichern kann. Diese werden in einer Datei auf dem Computer abgespeichert. Die Art der Datei ist abhängig vom Betriebssystem. Bei Mac werden die Daten in einem .plist file abgespeichert.

Für die JavaScript Version habe ich die localStorage Methode verwendet. Hier werden die Daten auch beim Client selbst abgespeichert und im Gegensatz zum sessionStorage, haben diese auch kein Verfallsdatum. Die Daten werden im Cache des Browsers abgespeichert und können somit beim nächsten Besuch der Webseite wieder genutzt werden.

Was ich gelernt habe:

Ich habe gelernt, dass die Umsetzung mit Unity für mich weitaus intuitiver war, aber das liegt sicher auch daran, dass Unity auf Spieleentwicklung ausgelegt ist und man mehr Ressourcen dazu online findet, als zur Spieleentwicklung mit JavaScript.

Es hat mir auch viel geholfen, das Spiel zuerst in Unity zu entwickeln, weil ich damit schon etwas vertrauter bin. Somit hatte ich für die JavaScript Version schon eine Idee, wie die Funktionen umzusetzen wären und musste nur das JavaScript equivalent dazu finden. Klingt jedoch einfacher als gesagt, da große Funktionen wie die einzelnen Scenes hier wegfallen und man sich daraufhin etwas anderes einfallen lassen muss.

Die Abspeicherung von Daten/Speicherstände habe ich in Unity auch vorher noch nie gemacht und mich auch nie damit beschäftigt, weil ich gedacht habe, dass es sehr komplex sein wird. Ich war sehr überrascht, wie simpel es funktioniert, wenn man nur ein paar Variablen abspeichern möchte und werde diese Funktion in Zukunft sicher öfter verwenden.

Leider mache ich immer wieder den Fehler mir das Design nicht vorher zu überlegen und einen Prototyp zu machen. Ich nehme mit hierfür die Zeit, weil ich Angst habe, dass die mir dann am Ende fehlen wird und ich nicht mehr rechtzeitig fertig werde. Das führt aber dazu, dass man dann während des Programmierens herausfinden muss wo man Elemente platzieren will und wo sie vor allem Sinn machen. Überhaupt mit HTML dauert das platzieren und verschieben von Elementen länger, als wenn man vorher ein Mockup davon gemacht hätte und schon weiß wo die Elemente hingehören. Und das Design wird auch viel einheitlicher, wenn man sich schon vor der Programmierung darüber Gedanken macht.

Verbesserungen und Erweiterungen:

Verbessern würde ich auf jeden Fall das Design, da ich das, wie schon angesprochen, während des Programmierens selbst und nicht im Vorhinein gemacht habe. Aus Zeitmangel konnte ich es leider auch nicht im Nachhinein noch viel verbessern. Da das Spiel mit einem Mobile Schwerpunkt im Hinterkopf programmiert wurde, habe ich mich auch nur auf die Mobile Version der Spiele konzentriert. Speziell bei der JavaScript Version bedeutet das, dass sie nur im mobilen Modus funktioniert und nicht für Desktops. Das würde ich auch auf jeden Fall noch verbessern wollen.

Erweiterungen können sowohl neue Funktionen sein, als auch vollkommen neue Spielmechaniken. Eine Erweiterung wäre beispielsweise mehrere Speicherdateien anlegen zu können, da momentan nur eine einzige möglich ist. So wie das Spiel jetzt ist, reicht zwar eine Speicherdatei vollkommen aus, aber wenn mehr Spielmechaniken dazukommen würden und das Spiel wächst, wären mehrere Speicherdateien nützlich. Animationen würden das Spiel auch noch lebendiger machen. Ich habe zwar mit gif Dateien gearbeitet, jedoch funktionieren diese nur in der JavaScript Version. Animationen für die einzelnen Tätigkeiten, wie Essen und Spielen, würden das Spiel auch visuell noch interessanter machen.

The post My Virtual Pet – Semesterprojekt appeared first on Mobile USTP MKL.

Die Idee der Anwendung ist es, Werbung attraktiver und interessanter zu gestalten. Werbung wird heutzutage meist passiv konsumiert. Plakate werden oft nur beim Vorbeigehen kurz betrachtet, Prospekte gleich in den Mistkübel geschmissen und digitale Werbung, wie Banner und Videoeinspielungen auf Youtube, so schnell wie möglich weggeklickt oder gleich durch einen AdBlocker blockiert. Die Idee ist es, Werbung interaktiver zu gestalten und die Aufmerksamkeit des Konsumenten somit länger zu fangen. 

Die Umsetzung: 

Für die Umsetzung  habe ich mir eine Augmented Reality (AR) Lösung von Zappar herausgesucht und diese mit dem Programm Unity umgesetzt. In meiner umgesetzten Lösung habe ich ein Bild auf ein A4 großes Papier ausgedruckt und im unteren rechten Eck einen QR-Code hinzugefügt. Wenn man den QR-Code mit dem Smartphone scanned, kommt man zu einem WebGL Build, welcher auf einem Server liegt. Zuerst wird nach der Zustimmung für die Verwendung der Kamera gefragt, um das Bild mit der Kamera vom Smartphone erfassen zu können. Mittels Image Tracking wird das Bild erfasst und die gewünschten Elemente angezeigt. In meinem Fall habe ich ein Video über das Bild platziert, damit es so aussieht, als würde das Bild zum Leben erweckt werden. Zusätzlich habe ich noch zwei Buttons hinzugefügt, um das Video zu stoppen und wieder abzuspielen. 

Umgesetzt mit Zapworks und Unity: 

Zappar stellt unter anderem eine Universal AR SDK für Unity zur Verfügung. Diese beinhaltet AR Face-, World- , und Image-Tracking Funktionen. Es unterstützt Builds für WebGL, native Android und native iOS. Die SDK gibt es auch noch für Three.js, A-Frame, JavaScript, React, PlayCanvas und Babylon.js. Man kann sich die SDK kostenlos herunterladen und verwenden. Für kommerzielle Zwecke und wenn man die Applikation von Zappar hosten lassen möchte, ist es kostenpflichtig. Hierfür gibt es verschiedene Education, Enterprise, Agencies und Business Tarife. 

Mögliche Erweiterungen:

Der QR-Code kann auf Flyer, Karten, Prospekte, Plakate und ähnlichem gedruckt werden. Man kann auch noch alle möglichen Elemente hinzufügen und beispielsweise ein Quiz mit Buttons erstellen und somit ein Gewinnspiel daraus machen.

The post Print to Mobile – Interaktive Werbung mittels AR appeared first on Mobile USTP MKL.