WeMod AI Game Guide Icon

Unser interaktiv animiertes Icon verleiht dem KI-Assistenten von WeMod eine visuelle ungewöhnliche Persönlichkeit.

WeMod AI Game Guide Icon

WeMod LLC

  • Realtime Experience
  • Web Components
  • UI/UX Design

März 2025 — heute

  • Three.js
  • WebGL
  • Javascript/Typescript
Herausforderung

Seit kurzem hat die bekannte Spiele-Modding-Software von WeMod auch einen AI Game Guide. Der hilft den Usern, alle spielerelevanten Fragen noch schneller zu beantworten. Unser Aufgabe war es, für das Interface des Chatbots ein interaktiv animiertes Icon zu entwickelt, das dem Assistenten Leben einhaucht, interne Zustände kommuniziert und auf den User reagiert.

AI Game Guide Icon Demo
Konzeption

Von der Tierwelt inspiriert

Auf Basis des Briefings haben wir Konzepte für drei unterschiedliche Designrichtungen entwickelt. Schon bei der ersten Präsentation stellte sich schnell heraus, dass ein organisches Konzept, inspiriert von Quallen und Tiefseetieren, die interessanteste Option darstellte und auch visuell gut zum Erscheinungsbild der Marke passte. Eine transluzente Oberfläche wie bei Quallen ermöglichte es zudem, die dem KI-Assistenten innewohnende Intelligenz sehr plastisch darzustellen.

Inspiration
Inspiration (Image Credits: https://unsplash.com/@deko_photo4, https://unsplash.com/@m3design, https://unsplash.com/@bruno_kelzer)
Implementierung

Bionic State Machine

Die transluzente Oberfläche mit ihrer Milchglasoptik stellte eine besondere Herausforderung an das Echtzeit-Rendering dar. Durch den Einsatz einer eigenen Renderpipeline mit speziellen Shadern konnte ein visuell ansprechendes und performantes Ergebnis erzielt werden.

Eine wesentliche Anforderung war die Animation der internen Zustände des Assistenten. Zustände wie das Warten auf eine Eingabe, die Bearbeitung eines Prompts oder die Ausgabe einer Antwort sollten nahtlos und beliebig ineinander übergehen. Ein Bruch in den Animationsübergängen sollte unbedingt vermieden werden, da dies die Illusion eines lebendigen Organismus sofort ruinieren würde. Um dies zu ermöglichen, werden alle Animationsparameter einer einfachen physikalischen Simulation zugeführt - jeder Parameter wird als ein Partikel mit Masse, Geschwindigkeit und Beschleunigung behandelt. Auf diese Weise folgen die Parameter einem natürlichen Verhalten, wenn sie sich plötzlich ändern müssen.

Prozess
Prozess
Ergebnis

Erstmals dokumentierte Lebensform

Das interaktive Icon ist nur ein kleiner Baustein in der umfangreichen Anwendung von WeMod. Umso wichtiger war es uns, den Entwicklerinnen und Entwicklern von WeMod eine möglichst einfache Integration des Icons zu ermöglichen. Durch regelmäßige Abstimmungen und eine ausführliche Entwicklerdokumentation unserer Icon-Komponente wurde eine reibungslose Integration in das Gesamtsystem erreicht.

Ergebnis: Web Komponente und Entwicklerdokumentation
Ergebnis: Web Komponente und Entwicklerdokumentation