Hallo! Ich bin ein leitender UI-Designer bei Pixonic, Alexey Morev. In diesem Artikel konzentrieren wir uns auf Benutzeroberflächenanimationen, die jeder von uns in Spielen sehen kann.
Die Spieloberfläche ist eine Sammlung von Elementen, mit denen der Benutzer interagieren und das Spiel steuern kann: Schaltflächen, Symbole, Fortschrittsbalken, Hintergründe, Karten, Popup-Fenster. Um die Interaktion mit den Oberflächenelementen zu vereinfachen, werden sie animiert.
Ich werde Ihnen sagen, wie solche Animationen erstellt werden, in welchen Programmen sie erstellt werden, welche Phasen der Animationsentwicklung existieren und warum sie im Allgemeinen benötigt werden.
Also fangen wir an!
Lassen Sie uns zunächst definieren, was Animation ist und welche Arten davon existieren.
Einfach ausgedrückt ist Animation eine Folge von Frames, die ein Bild zum Leben erwecken. Es ist unterteilt in vollständige (vollständige Animation) und vereinfachte (begrenzte Animation). Ein Beispiel für eine vollständige Animation ist ein Animationsfilm in voller Länge: Disneys Aladdin, Das Dschungelbuch, Die kleine Meerjungfrau usw. Beispiele für vereinfachte Animationen sind die meisten Cartoons wie Rick und Morty, Gravity Falls, Extreme Space und etc.
Bei einer vollständigen Animation werden 24 bis 25 Bilder pro Sekunde des Timings gezeichnet und kleine Details des Charakters, der Umgebung usw. werden animiert. Bei einer vereinfachten Animation ist die Anzahl der Bilder pro Sekunde geringer, und einige unbedeutende Elemente von Zeichen und Umgebung werden möglicherweise überhaupt nicht animiert und bleiben statisch. Es ist erwähnenswert, dass diese Prinzipien bei der Erstellung von Animationen befolgt werden sollten, sei es eine Benutzeroberfläche oder ein Cartoon.
Vollständige und vereinfachte Animation am Beispiel des Simpsons-Cartoons
Wie Sie sehen können, sind die Animationen in der Vollversion des Begrüßungsbildschirms flüssiger und detaillierter, während Sie in der kurzen Eröffnungsansicht sehen können, wie die Anzahl der Frames reduziert und die Details der Charaktere nicht animiert werden.
Wir haben herausgefunden, was Animation ist. Nun ist es logisch, mit den folgenden Fragen fortzufahren: Welche Art von Animation soll in der Benutzeroberfläche verwendet werden? Und wird sie überhaupt gebraucht?
Ich werde den zweiten zuerst beantworten. Benötigen wir Animation? Alles scheint klar zu sein: Das Fenster hat sich geöffnet, der Preis wurde erhalten, der Knopf wurde gedrückt. Es ist nicht so wichtig, irgendeine Art von Animation zu verwenden, oder?
Nicht sicher so. Dank der Animation können Sie nicht nur die visuelle Komponente des Spiels diversifizieren, sondern dem Benutzer auch helfen, zu verstehen, was auf dem Bildschirm geschieht, wo er klicken und welche Aktion ausgeführt werden muss. Dies ist einer der Hauptgründe für die Verwendung von UI-Animationen in Spielen: um die Aufmerksamkeit des Spielers auf die Elemente zu lenken, die im Moment am wichtigsten sind.
Der zweite Grund ist die Fähigkeit der Animation, die allgemeine Dynamik und den Spielstil zu zeigen. Die Benutzeroberfläche sollte der Dynamik des Spiels entsprechen. Dies trägt zu einem noch stärkeren Eintauchen bei. Die Verwendung von Animationen, die in einem schnellen Spiel zu langsam sind, stört die Spieler und beeinträchtigt das Gesamterlebnis.
Die Art der verwendeten Animation hängt nur von Ihren Ressourcen und Fähigkeiten ab. Wenn Sie und Ihr Team sich die Implementierung einer vollständigen Animation leisten können und der visuelle Stil des Spiels dies zulässt, ist es besser, dies zu tun: Es wird viel saftiger und schöner. In anderen Fällen ist es besser, eine vereinfachte Animation zu verwenden.
Lassen Sie uns Beispiele desselben Popups verwenden, um zu sehen, wie es mit vollständiger, vereinfachter und minimaler Animation aussieht.
Vollständige Animation
Vereinfachte Animation
Minimale Animation
Wer erstellt eine UI-Animation und wie funktioniert der Entwicklungsprozess?
Normalerweise sind drei Personen an der Entwicklung einer Animation beteiligt:
- Ein Designer oder Künstler erstellt eine Animationsreferenz.
- Der technische Designer überträgt diesen Verweis auf die Spiel-Engine.
- Programmierer lassen die Animation im richtigen Moment entsprechend einem bestimmten Auslöser erscheinen.
Manchmal stellt ein Studio speziell einen Animator ein, aber nicht oft - normalerweise reicht ein Designer aus.
Die Erstellung von Animationen kann grob in drei Phasen unterteilt werden: Denken, Erstellen einer Referenz und Implementieren.
Erste Stufe: Idee
Um die Animation organisch an das anzupassen, was auf dem Bildschirm geschieht, müssen Sie festlegen, was animiert werden muss und was vor und nach der Animation geschehen soll.
Lassen Sie uns anhand des oben gezeigten Beispiels der Popup-Animation Schritt für Schritt durch den Prozess des Erstellens einer Animation gehen.
Zu Beginn der Arbeit werden wir Spiele zu ähnlichen Themen und Stilen untersuchen und dann die erfolgreichsten und interessantesten Optionen auswählen, die wir als Referenz verwenden werden. So sparen wir Zeit, indem wir das Rad nicht von Grund auf neu erfinden, sondern von dem ausgehen, was bereits vor uns getan wurde. Anschließend beschreiben wir ausführlich, was mit dem Animationsobjekt geschehen soll. Dies geschieht in erster Linie für Sie selbst, um nichts Wichtiges zu vergessen, sowie um weitere Unterlagen zu schreiben.
Nehmen wir das folgende Popup als Beispiel und analysieren die gesamte Sequenz der Animationserstellung darauf.
Beschreiben wir kurz die Idee:
- Das Erscheinen eines Popups nach langer Abwesenheit eines Spielers im Spiel;
- Erstellen Sie eine flüssige, aber schnell genug animierte Animation.
- Verwenden Sie die Vollbildanimation.
- Animieren Sie jedes Element.
- Animieren Sie eine Dinosaurierkanone.
- Fügen Sie animiertes Leuchten unter dem Dinosaurier hinzu.
Wenn das Ziel klar und klar formuliert ist, können Sie mit der zweiten Stufe fortfahren.
Zweiter Schritt: Erstellen einer Referenz
Wir erstellen unsere eigene Animationsreferenz, die weiter demonstriert, verfeinert und geändert wird.
Dazu Programme wie Adobe Animate, After Effects, Spine usw. Zu diesem Zeitpunkt spielt es für uns keine Rolle, in welchem Programm wir animieren möchten (die Ausnahme kann Spine sein, da dieser Editor Animationen in viele Engines exportiert). Daher wählen wir aus, was für uns bequemer und schneller sein soll. Sie können ein Element in Photoshop sogar Frame für Frame animieren, dies ist jedoch bereits exotisch. Ich arbeite lieber in After Effects, weil es in Bezug auf Animationen der flexibelste Editor ist: Sie können fast jede Idee implementieren, die Ihnen in den Sinn kommt.
Vergessen Sie nicht, die Timings zu berücksichtigen, damit sich alle UI-Elemente angemessen verhalten: ohne Desynchronisation, Verzögerungen und in der richtigen Reihenfolge.
Wir dürfen die Dauer der Animation selbst nicht vergessen. Wenn zum Beispiel das Erscheinen eines Fensters länger als eine Sekunde dauert und es im Spiel ziemlich oft erscheint, wird der Spieler die langwierige Animation sehr schnell satt und ist verärgert. Wenn das Erscheinungsbild eines Elements recht selten auftritt und dieses Ereignis dem Spieler Freude bereitet (z. B. das Erhalten einer Truhe, eines Preises oder einer Leistung), können Sie die Animation des Erscheinungsbilds länger und bunter gestalten.
Stufe drei: Implementierung
Hier optimieren wir alle in der Referenz verwendeten Grafiken: Partikel schneiden, leuchten, Hintergrund, Dinosaurier und andere kleine Dinge - mit anderen Worten, alle visuellen Effekte.
Ein Beispiel für optimiertes Schneiden
Ein solches Schneiden von Elementen ist erforderlich, um die Größe der endgültigen Animation zu verringern, da das Projekt viele andere Elemente enthält und jedes Megabyte wichtig ist. Wenn Sie die geschnittenen Elemente nicht optimieren, kann es vorkommen, dass Ihre schöne Animation langsamer wird. Danach wiederholen wir mit dem Animator der Engine, auf der das Spiel entwickelt wurde, dieselbe Animation, die in der Referenzphase erstellt wurde.
Warum kann man nicht alles auf einmal am Motor machen? Die Antwort ist nicht offensichtlich, aber ganz einfach: Wenn Sie beispielsweise in After Effects eine Animation erstellen, haben Sie nur das Animationsprogramm und seine Funktionen. Es ist nicht erforderlich, Kameras im Spiel zu konfigurieren, damit sie in der Benutzeroberfläche korrekt angezeigt werden. Es ist nicht erforderlich, die Grafiken zu optimieren und alles in Komponenten zu unterteilen: Sie können jedes Element einfach ersetzen oder die Animation sogar komplett überdenken und vollständig ändern. Wenn Sie alles auf einmal in der Spiel-Engine erstellen, verschwenden Sie viel Zeit mit der Optimierung von Dateien, werden technisch gequetscht und verbringen viel Zeit damit, Grafiken für die Animation in der Anfangsphase zu schneiden, obwohl es sich am Ende möglicherweise als völlig anders herausstellt.
Fazit
Abschließend werde ich das Material zusammenfassen und einige kurze Tipps geben. Denken Sie bei der Arbeit mit Animationen im Voraus darüber nach, beobachten Sie die Zeitabläufe, verwenden Sie nach Möglichkeit die vollständige Animation und vergessen Sie nicht, Animationen aus anderen Projekten nach möglichen Referenzen zu durchsuchen.
Wenn Ihnen dieser Artikel gefallen hat, ist im nächsten Artikel geplant, wie Sie die Prinzipien der Disney-Animation in der Benutzeroberfläche verwenden können. Erfahren Sie mehr über die Prinzipien selbst hier .