Spiele-Animationstechniken stehlen, um Benutzer zu fesseln

Heutige Websites sind voller Animationen – oft *zu viele*. Sie stören den Inhalt und verlangsamen unsere vielbeschäftigten Benutzer. Aber gleichzeitig: Sie sind wunderbar. Sie erwecken Websites zum Leben, machen Spaß bei der Implementierung und können unglaublich beeindruckend sein. Ich finde sie großartig. Tut mir leid, ungeduldige Benutzer.

Meiner Meinung nach ist das Problem nicht unbedingt, dass Websites zu viele Animationen haben, sondern dass die Animationen nicht zum Inhalt passen, den sie bewerben. Sie passen nicht zu ihrem Thema. Sie wirken gezwungen und bieten keinen zusätzlichen Wert.

Dies ist ein Artikel für Webentwickler, die mit den feinsten Animationen glänzen möchten, aber nicht auf Kosten der Belästigung von Benutzern. Ich zeige Ihnen einige der Möglichkeiten, wie ich persönlich Website-Animationen eingesetzt habe und dabei versucht habe, nur wenige Benutzer zu belästigen. Sie denken vielleicht, dass "Benutzer nicht belästigen" eine sehr niedrige Messlatte ist, die ich gesetzt habe, und nun ja, äh... hmm... ja. Guter Punkt.

Dies ist ein Thema, auf das ich irgendwie gestoßen bin. Ich arbeite als Webentwickler für einen Indie-Videospielverlag namens Devolver Digital. Ich erstelle zusammen mit Vieko Websites für diese Videospiele. Obwohl ich hauptsächlich Entwickler bin, ist ein großer Teil meiner Arbeit, Designs zu konzipieren und zu erstellen. Ich dachte einmal, Design sei nicht so schwer, aber die Wahrheit ist, wie die meisten von Ihnen wahrscheinlich wissen, dass es nicht so einfach ist. Es ist wirklich, wirklich schwer.

Als ich anfing, Videospiel-Websites zu erstellen, skizzierte ich sie in einem Notizbuch. Das war in Ordnung, aber als ich versuchte, das Design in Photoshop zu implementieren, funktionierte es einfach nicht. Ich begann von vorne und versuchte es erneut. Es funktionierte immer noch nicht. Dann versuchte ich, den gesamten Designschritt zu überspringen und direkt in den Code zu springen, in der Hoffnung, dass die Animationen alles zusammenbringen würden. Die Animationen waren cool, aber es war immer noch nicht gut genug. Meine Designfähigkeiten waren mangelhaft.

Aber dann fand ich einen Weg, es zu faken.

Wenn ich meinen Kollegen und Kunden jetzt Website-Konzepte zur Überprüfung vorlege, sagen sie mir, ich sei der beste Designer der Welt, und sie schicken mir Kekse. Sie wissen nicht, dass ich ein schreckliches Geheimnis hüte.

Ich weiß nicht, ob ich dieses Geheimnis preisgeben soll. Webdesigner auf der ganzen Welt werden mich hassen. Meine Kollegen werden ihre Kekse zurückfordern. OK – ich habe die Kekse gegessen. Ich werde euch das Geheimnis verraten. Das Geheimnis ist, dass…

Ich kopiere alles von Videospielen.

Ich kopiere die Farben, die Schaltflächen, die Modal-Boxen und sogar die Kernkonzepte und Spielmechaniken. Ich spiele die Spiele (sie machen Spaß), mache Screenshots, nehme Videos auf und dann stehle ich alles. Vor allem aber stehle ich die Animationen.

Obwohl Videospiele ein perfektes Medium zum Stehlen sind, glaube ich, dass Menschen wie Sie auch aus ihrer jeweiligen Branche stehlen können. Während das Stehlen von Spielen mir als Designer geholfen hat zu schummeln, war es das Stehlen der Animationen, das wirklich das volle Potenzial jeder Website erschloss.

Es ist kostenlose Immobilie

Wir bei Devolver Digital haben eine riesige Auswahl an Spielen. Einige sind beruhigende, narrative Erlebnisse, während andere sehr interessante Gameplay-Elemente haben. Einige haben sehr einfache Grafiken, die tiefe Geheimnisse verbergen, und andere sind Shadow Warrior 3.

Jedes dieser Spiele hat eine einzigartige Art, sich in das Gehirn eines Spielers zu schmiegen und sich dort gemütlich einzurichten. Mit jeder Website versuchen wir, diese Gehirnverbindung zu replizieren und zu nutzen. Die moderne Webtechnologie ist heute an einem Punkt, an dem wir Websites erstellen können, die unsere Benutzer effektiv fesseln und diese Gehirnverbindung herstellen, noch bevor sie einen Gamepad in die Hand genommen haben.

Im Grunde nehmen wir Assets/Animationen/Mechaniken/alles vom Spiel, um dem Benutzer einen Einblick zu geben, wie es wäre, es zu spielen.

Zum Beispiel

Ich möchte mit einem meiner Lieblingsprojekte beginnen. Es ist die Website für ein Spiel namens Olija. Es handelt sich um einen Helden, der mit einem Harpunen bewaffnet feindliche Länder erkundet, um seinen Weg nach Hause zu finden. Das Spiel hat zwei Kernaspekte. Der erste ist seine visuelle Flüssigkeit. Die Pixelgröße seiner Pixel-Art ist ziemlich groß, so dass es schwierig sein kann, die Schönheit dieses Spiels zu vermitteln, ohne es in Bewegung zu sehen. Der zweite Kernaspekt ist seine Geschichte. Es fühlt sich an, als sei das Spiel auf einem bereits existierenden Buch oder einer Fernsehserie basiert.

Das Ziel für die Website war es, diese beiden Kernaspekte aufzugreifen und den Benutzer dazu zu bewegen, sich damit auseinanderzusetzen; ihm das Gefühl zu geben, Teil der Geschichte zu sein, und ihm das Gefühl zu geben, die Kontrolle über die Action zu haben.

Ich springe hier kurz von Olija weg. Das hätte ich früher erwähnen sollen. Websites haben einen Aspekt, der ihnen einen Vorteil gegenüber den meisten anderen Medien verschafft: Sie sind interaktiv (offensichtlich). Das ist großartig, denn wir können diese Interaktivität nutzen, um den Benutzer tiefer in die Seite einzubinden. Das ist entscheidend. Wir haben ein paar Werkzeuge, mit denen wir ihre Erfahrung lebendiger und denkwürdiger gestalten können. Diese Werkzeuge sind Dinge wie Mausbewegung, Maus-Hover, Zeiger-Ein/Aus-Zustände, die Scrollleiste und die Tastatur. Mein Favorit ist die Scrollleiste. Sie wird in meinen Projekten oft verwendet. Ich finde, sie ist am intuitivsten zu bedienen, und ich mag, dass sie wenig Gedanken oder aktive Energie vom Benutzer erfordert.

Zurück zu Olija. Eines der ersten Dinge, die der Benutzer beim Scrollen sieht, ist eine Film-Credits-ähnliche Fade-Animation. Sie ist langsam. Es dauert drei Viewport-Höhen (300vh), um sie vollständig zu durchlaufen, aber sie ist ein kritischer Teil. Sie gibt den Takt vor und zeigt sofort den Ton des Spiels. Es ist eine sehr einfache Animation, aber sie war entscheidend. Der Rest der Seite fühlte sich viel natürlicher an, sobald dieser Abschnitt erweitert und verlangsamt wurde.

Nach den Story-Abschnitten gelangt der Benutzer zu dynamischen Screenshot-ähnlichen Abschnitten. Es gibt einen Abschnitt, in dem der Held über eine lebhafte Waldkulisse rennt. Das Zeigen eines leichteren Moments wie diesem verstärkt die Epik der Geschichte und zeigt den einzigartigen Stil des Spiels.

Einer der kniffligeren Teile für Olija ist, dass Pixel-Art auf Sprite-Sheets basiert. Wir können nicht einfach die `transform`-Eigenschaften eines Elements animieren, um es über den Bildschirm zu bewegen. Wir müssen auch seine aktuelle Position im Sprite-Sheet animieren. Hier ist ein Pen, der zeigt, wie wir es gemacht haben.

Einen ähnlichen Ansatz haben wir bei Ape Out verfolgt. Das Spiel fühlt sich wie ein Actionfilm an. Wie der Titel des Spiels treffend beschreibt, ist der Spieler ein Affe, der versucht, aus verschiedenen Szenarien zu entkommen. Die Idee für die begleitende Website war, eine bereits gespielte Szene zu zeigen, die es dem Benutzer ermöglicht, sich all die Action vorzustellen, die zum epischen Endmoment führt. Wieder steuert er das Tempo der Kamera, die diese Szene mit der Scrollleiste erkundet.

Auf den ersten Blick könnte es wie eine 3D-WebGL-Leinwand aussehen, aber es sind tatsächlich viele Divs, die mit einer 3D-Transformation platziert sind, wobei der entsprechende Perspektivursprung basierend auf der Scroll-Position aktualisiert wird. Ich bin mir nicht sicher, ob es besser oder einfacher ist als die Verwendung von ThreeJS, aber es ist... äh... machbar. Hier ist eine abgespeckte Version davon in CodePen.

Als letztes Beispiel für Story-getriebene Erlebnisse möchte ich die Website von Enter the Gungeon erwähnen. Es ist eine Mischung aus den Ideen von Olija und Ape Out, aber anstatt die Erzählung des Spiels einzufangen, versucht es, die Zeit zu feiern, die die Spieler damit verbracht haben. Das Ziel war es, zu entschleunigen und den Benutzer sich erinnern zu lassen, und dann diese Nostalgie zu nutzen, um die Spiele Exit the Gungeon und House of the Gundead zu bewerben.

Alleinstellungsmerkmal

Manchmal haben Spiele einen einzigartigen Haken oder ein Gameplay-Element, und die Website ist der perfekte Ort, um es zu präsentieren. Ein großartiges Beispiel ist Loop Hero. Es ist auf den ersten Blick ein sehr einfaches Spiel. Der Held reist automatisch entlang eines sich wiederholenden Pfades und kämpft gegen die Monster, denen er begegnet.

Der Spieler kontrolliert die Ausrüstung des Helden und ob er den Pfad verlässt, um ins Dorf zurückzukehren. Dies machte die unendliche Schleife zu einem klaren Konzept für die Website. Wenn der Benutzer das Ende der Seite erreicht, wird er nahtlos zurück zum Anfang transportiert und die Seite wird zurückgesetzt. Die Szene im Viewport ist genau dieselbe, sodass der Benutzer nichts davon merkt.

Es gibt noch ein paar andere Konzepte auf dieser Seite, die direkt aus dem Spiel übernommen wurden. Sobald der Benutzer zum Kampf-Trigger-Bereich scrollt, wird die Scrollleiste deaktiviert (Entschuldigung, ich weiß, es ist schlecht) und er wird gezwungen, den Kampf zu beobachten. Der Held und die Monster haben jeweils Lebenspunkte, Angriffsgeschwindigkeit und Angriffskraftwerte mit zufälliger Variation. Das bedeutet, dass die Kampfergebnisse nicht hartkodiert sind. Jedes Mal, wenn der Benutzer die Seite durchläuft, wird die Hintergrundkarte mit neuen Kacheln aktualisiert, um zu zeigen, wie das Spiel voranschreitet und sich entwickelt.

Eines meiner Lieblingsfeatures der Loop Hero Website ist der Fade-Effekt zwischen dem oberen Bereich und dem darunter liegenden Schleifenstraßenbereich. Der Spieleentwickler von Four Quarters hat mir den Shader-Code (geschrieben mit Hilfe von @kartonnnyi) und das Perlin-Noise-Bild für diesen Effekt geschickt. Ich kann nicht sagen, dass ich alles vollständig verstehe, aber ich konnte es mit gl-react zusammenfügen.

Menschen mit einem tiefen Verständnis für das Schreiben von Shadern haben meinen tiefsten Respekt. Ich glaube nicht, dass ich sie jemals vollständig durchschauen werde. Die Sachen auf Shadertoy hauen mich um.

Boomerang X und Shadow Warrior sind ähnliche Websites, die Gameplay-Aufnahmen als direkten Weg nutzen, um das Spiel zu präsentieren. Beide fesseln den Benutzer mit Elementen, die mit dem Hintergrundvideo verbunden sind. Der Inhalt der Shadow Warrior-Website wackelt bei einem Aufprall im Video und Blut sammelt sich langsam auf den Menüs/Logos. Das Boomerang X-Logo schnellt zusammen mit dem Bumerang des Spielvideos hin und her. Das Logo ist weiter mit dem Benutzer verbunden, indem es auf die Mausposition des Benutzers reagiert.

So, jetzt erzähle ich Ihnen von Devolver Tumble Time. Ich denke, die meisten Webentwickler würden bei der Gelegenheit, eine Website für dieses Spiel zu erstellen, den Drang verspüren, die Tumbler-Mechanik zu replizieren. Aus erster Hand kann ich sagen, dass es nicht so einfach ist, wie es aussieht. Ich wusste, dass es entscheidend war, den Tumbler so flüssig wie möglich laufen zu lassen, sonst würde es das Spiel schlecht widerspiegeln und die Leute abschrecken.

Ich begann mit MatterJS. Es schien die offensichtliche Wahl zu sein. Der Tumbler ist zweidimensional, also wähle die beliebteste 2D-Engine, richtig? Nun, es stellt sich heraus, dass der Tumbler nicht 2D ist und ich glaube nicht, dass Zentrifugalkraft in MatterJS existiert. Ich, wie eine andere Seele vor mir, versuchte, sie hineinzuhacken. Ich habe versucht, ihren Versuch erfolglos zu implementieren.

Um den Tumbler zum Laufen zu bringen, brauchte ich zwei Richtungen für die Schwerkraft. Die Gegenstände sollten die Y-Achse hinunterfallen, aber sie müssen auch durch Schwerkraft/Reibung auf der Z-Achse an einer sich drehenden Scheibe "haften" können. Ich verbrachte ein Wochenende damit, den Tumbler-Code in ThreeJS zu refaktorieren und erreichte die gewünschte Flüssigkeit.

Tief in den Abgrund

Ich möchte diesen Artikel mit einem kleinen Deep-Dive in die Website von Phantom Abyss abschließen. Sie vereint viele der Techniken, die in den letzten Projekten verwendet wurden, und wiegt nur 4 MB.

Die Website mag recht einfach aussehen, aber je länger der Benutzer auf die Seite schaut, desto mehr gibt es zu sehen. Die sich verschiebenden Blöcke und die verblassenden Phantome sollten offensichtlich sein, und dann bemerkt der Benutzer vielleicht, dass die Wasserfälle animiert sind, zusammen mit einigen Staubpartikeln, den Fackeln, den Haaren und der Peitsche der Frau und schließlich den Augen des Phantoms über dem Logo, einem Glanz auf einigen Reliquien und den Feuern und Vögeln im fernen Hintergrund.

Ich erwarte zwar definitiv nicht, dass viele Benutzer all diese kleinen Details bemerken, aber sie verleihen der Seite Tiefe. Sie fesseln den Benutzer und lassen ihn unbewusst verstehen, dass das Spiel Geheimnisse und Tiefe birgt.

Dies ist das erste Projekt, bei dem ich SVGator verwendet habe, ein wirklich tolles Werkzeug zum Animieren von SVGs. Ich habe es für die Fackeln, die Haare/Peitsche der Frau und die blinzelnden Augen des Phantoms verwendet.

Die Fackeln waren nicht einfach. Mein erster Versuch sah aus wie gruselige, wilde Tentakel, die versuchten, alles zu greifen, was sie finden konnten. Mein zweiter Versuch war besser, aber noch nicht ganz da. Mein dritter Versuch war immer noch nicht gut genug, aber das Hinzufügen von Unschärfe und einigen Funken brachte es auf den Stand, den es heute hat. Wenn man sehr genau hinsieht, sehen die Fackeln immer noch ein bisschen wie Tentakel aus. In meinem nächsten Projekt sah ich, dass die Key-Art viele Tentakel enthielt. Ich wusste, was ich tun musste.

Innen starten

Dies sind nur einige der Beispiele für Animationstechniken, die wir auf Websites verwendet haben. Devolver Digital hat einen endlosen Katalog von Spielen und von dieser Seite aus können Sie sich andere Websites ansehen, die wir erstellt haben. Ragnorium, Heave Ho und Gato Roboto sind einige unserer Seiten, die viel von ihren Spielen gestohlen haben. Volle Anerkennung auch an Vieko, da er mit seinen Seiten für Minit und Sludge Life der ursprüngliche Spiele-Animationsdieb war.

Unsere Seiten werden größtenteils auf Vercel ❤ mit NextJS 👌 gehostet. Wir verlassen uns auch stark auf Framer Motion 🤩 und oft auf react-three-fiber 🎆. Es gibt Dutzende von alternativen Tools, die ebenfalls großartig sind, aber wir lieben diese und sie haben uns das Leben viel leichter gemacht.

Heute haben wir Entwickler Zugang zu einer immensen Auswahl an Werkzeugen und Techniken, von denen ständig neue angekündigt werden. Es ist sehr einfach, sich in dem, was andere talentierte Entwickler tun, zu verlieren und dann zu versuchen, ihre Effekte zu replizieren. Das ist nicht unbedingt ein schlechter Ansatz, aber es kann dazu führen, dass man verschlossen und repetitiv wird. Das führt dazu, dass wir Animationen erstellen, die Benutzer bereits Dutzende Male gesehen haben.

Anstatt andere Entwickler und ihre Arbeit für inspirierende Animationen und Übergänge zu betrachten, sollten wir uns den Inhalt und das Thema ansehen, das wir präsentieren. Erfinden Sie völlig neue Animationen. Wir sollten einen Schritt zurücktreten und wirklich darüber nachdenken, wie wir die Benutzer fesseln können, um sich mit unseren Websites zu verbinden und ihre Erlebnisse zu vertiefen.