Spiele -Animationstechniken stehlen, um Benutzer zu engagieren

Moderne Websites sind in Animationen überflutet - oft, zu viele . Sie können Inhalte überladen und Benutzer frustrieren. Animationen besitzen jedoch einen unbestreitbaren Charme; Sie werden Websites Leben einhauchen, machen Spaß zu kreieren und können unglaublich beeindruckend sein. Das Problem ist nicht unbedingt eine Menge , sondern die Relevanz von Animationen für den Inhalt der Website. Schlechte integrierte Animationen fühlen sich gezwungen und fügen keinen Wert hinzu.

Dieser Artikel zielt auf Webentwickler ab, die darauf abzielen, ausgefeilte Animationen zu integrieren, ohne Benutzer zu entfremden. Ich werde Techniken weitergeben, mit denen ich ansprechende Animationen erstellt habe und gleichzeitig die Frustration der Benutzer minimiert habe. Sie denken vielleicht, "nicht ärgerliche Benutzer" ist eine niedrige Balken, und ... Sie hätten Recht.

Mein Ansatz ist etwas unkonventionell. Als Webentwickler für den Indie -Game -Verlag Devolver Digital (Zusammenarbeit mit Vieko) bin ich sowohl für Entwicklung als auch an Design beteiligt. Anfangs hatte ich mit Design zu kämpfen. Skizzen, die selten gut in Photoshop -Implementierungen übersetzt wurden, was zu unzähligen Neustarts führt. Versuche, das Design zu umgehen und direkt in den Code zu springen und sich auf Animationen zu stützen, um sie zu kompensieren, erwies sich als gleichermaßen erfolglos. Meine Designfähigkeiten fehlten.

Dann entdeckte ich eine Abkürzung.

Bei der Präsentation von Website -Konzepten schwärmen meine Kollegen und Kunden von meinen Designfähigkeiten (und senden Cookies - die ich gegessen habe, sorry!). Mein Geheimnis?

Ich leihe mich stark von Videospielen aus.

Ich emuliere Spielfarben, Schaltflächen, Modalboxen, Kernkonzepte und sogar Gameplay -Mechaniken. Ich spiele die Spiele (sie haben Spaß!), Fangen Sie Screenshots und Filmmaterial auf und dann ... ich adapnee Elemente. Vor allem passe ich die Animationen an.

Während Videospiele eine umfangreiche Inspirationsquelle bieten, kann dieser Ansatz in Branchen angewendet werden. Das Anpassung von Spielanimationen hat für mich das volle Potenzial jeder Website freigeschaltet.

Eine Goldmine der Inspiration

Devolver Digital bietet eine vielfältige Spielbibliothek: Beruhigende narrative Erlebnisse neben actionreichen Titeln; Visuell einfache Spiele mit versteckten Tiefen und Spielen wie Shadow Warrior 3. Jedes Spiel beauftragt die Spieler einzigartig und schafft ein unvergessliches Erlebnis. Wir wollen dieses Engagement auf unseren Websites replizieren und die Web -Technologie nutzen, um eine Verbindung herzustellen, bevor Benutzer überhaupt einen Controller berühren. Wir "leihen" Vermögenswerte, Animationen und Mechaniken im Wesentlichen, um den Benutzern einen Vorgeschmack auf das Gameplay zu bieten.

Fallstudien

Beginnen wir mit Olija, einem Spiel über einen harpunen schwierigen Helden. Die visuelle Fließfähigkeit und die narrative Tiefe des Spiels waren wichtige Aspekte, die hervorgehoben wurden. Die Website musste Benutzer anregen, in die Geschichte eintauchen und ihnen ein Gefühl der Kontrolle geben.

Websites bieten einen Vorteil: Interaktivität. Wir nutzen dies durch Mausbewegungen, Schwebe, Scrollbarnen und Tastatureingaben. Ich bevorzuge Schriftrollen für ihre intuitive Natur.

Olijas Design enthält eine langsame Animation im Filmstil im Film, die drei Ansichtsfenster überspannt. Dies setzt das Tempo und den Ton. Nachfolgende Abschnitte, darunter dynamische Screenshot-ähnliche Elemente (wie der Held, der durch einen Wald führt), verstärken die Geschichte und präsentieren den Stil des Spiels. Animationspixelkunst, basierend auf den Sprite -Blättern, erforderte die Animation der Sprite -Blattposition neben Transformationseigenschaften.

Ape Out inspirierte mit seinem Action-Movie-Gefühl eine Website, auf der eine fertiggestellte Szene vorgestellt wurde und die Benutzer die vorhergehende Aktion vorstellen können. Die Bildlaufleiste steuert die Erkundung der Kamera. Es scheint zwar eine 3D -Webgl -Leinwand zu sein, aber es ist tatsächlich geschickt positionierte Divs mit 3D -Transformationen.

Betreten Sie die Website des Gungeon feiert Spielerlebnisse und verwenden Sie Nostalgie, um verwandte Spiele zu werben.

Einzigartige Gameplay -Elemente

Loop Hero inspirierte mit seiner einfachen, aber ansprechenden Gameplay -Schleife eine unendlich scrollende Website. Die Scrollbar ist während der Schlachten vorübergehend deaktiviert und zeigt den Fortschritt des Spiels. Die Kampfergebnisse sind dynamisch und fügen die Wiederholbarkeit hinzu.

Die Websites von Boomerang X und Shadow Warrior integrieren direkt Gameplay -Filmmaterial und erstellen interaktive Elemente. Inhalt von Shadow Warrior zittert mit Auswirkungen des Spiels. Das Logo von Boomerang X spiegelt die Bewegung des In-Game-Boomerang wider.

Der Tumbler -Mechaniker von Devolver Tumble Time stellte eine bedeutende Herausforderung dar. Erste Versuche, die MatterJs unter Verwendung von Materie fehlten; Letztendlich wurden dreiJS verwendet, um die gewünschte Fluidität zu erreichen.

Ein tieferer Tauchgang: Phantom Abyss

Die Phantom Abyss -Website mit einem Gewicht von nur 4 MB zeigt viele dieser Techniken. Subtile Animationen (Verschiebung von Blöcken, Verblassen von Phantomen, animierten Wasserfällen, Staubpartikeln usw.) fügen Tiefe hinzu und schlagen subtil auf die verborgene Komplexität des Spiels hin. SVGator wurde zum Animieren von SVGs (Fackeln, Haare, Augen) verwendet.

Inspiration von innen

Diese Beispiele unterstreichen unseren Ansatz zur Animation. Der vielfältige Spielkatalog von Devolver Digital bietet endlose Inspiration (siehe Ragnorium, Heave Ho und Gato Roboto). Viekos Arbeit zum Minit- und Schlammleben veranschaulicht diesen Ansatz ebenfalls.

Wir verwenden hauptsächlich Vercel, NextJs, Framer Motion und React-Drei-Faser. Während viele andere Tools existieren, haben diese unseren Workflow vereinfacht.

Die Fülle von Werkzeugen und Techniken kann überwältigend sein, was eher zu Nachahmung als zu Innovation führt. Anstatt sich darauf zu konzentrieren, die Arbeit anderer zu replizieren, sollten wir priorisieren, dass Animationen, die tief mit dem Inhalt selbst verbunden sind, und einzigartige und unvergessliche Benutzererlebnisse erstellen.

Das obige ist der detaillierte Inhalt vonSpiele -Animationstechniken stehlen, um Benutzer zu engagieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!