salut! Je suis un concepteur d'interface utilisateur senior chez Pixonic, Alexey Morev. Et dans cet article, nous nous concentrerons sur les animations d'interface utilisateur que chacun de nous peut voir dans les jeux.
L'interface du jeu est une collection d'éléments qui aident l'utilisateur à interagir et à contrôler le jeu: boutons, icônes, barres de progression, arrière-plans, cartes, fenêtres pop-up. Pour faciliter l'interaction avec les éléments de l'interface, ils sont animés.
Je vais vous dire comment de telles animations sont créées, dans quels programmes elles sont faites, quelles étapes de développement d'animation existent et pourquoi elles sont généralement nécessaires.
Alors, commençons!
Tout d'abord, définissons ce qu'est l'animation et quels types existent.
En termes simples, l'animation est une séquence d'images qui donne vie à une image. Il est divisé en complet (animation complète) et simplifié (animation limitée). Un exemple d'animation complète est n'importe quel film d'animation complet: Disney's Aladdin, The Jungle Book, The Little Mermaid, etc. La plupart des dessins animés comme Rick et Morty, Gravity Falls, Extreme Space et etc.
Dans le cas d'une animation complète, 24 à 25 images sont dessinées pendant une seconde de minutage et de petits détails du personnage, de l'environnement, etc. sont animés. Dans une animation simplifiée, le nombre d'images par seconde est inférieur et certains éléments insignifiants des personnages et de l'environnement peuvent ne pas s'animer du tout et rester statiques. Il est à noter que ces principes doivent être suivis dans la création de toute animation, que ce soit une interface ou un dessin animé.
Animation complète et simplifiée à l'aide de l'exemple du dessin animé Les Simpsons
Comme vous pouvez le voir, dans la version intégrale de l'écran de démarrage, les animations sont plus fluides et plus détaillées, tandis que dans celle d'ouverture courte, vous pouvez voir comment le nombre d'images est réduit et les détails des personnages ne sont pas animés.
Nous avons compris ce qu'est l'animation. Maintenant, il est logique de passer aux questions suivantes: quel type d'animation utiliser dans l'interface utilisateur? Et est-elle même nécessaire?
Je répondrai d'abord à la seconde. Avons-nous besoin d'animation? Tout semble clair: la fenêtre s'est ouverte, le prix a été reçu, le bouton a été enfoncé. Il n'est pas si important d'utiliser n'importe quel type d'animation, non?
Pas certainement de cette façon. Grâce à l'animation, vous pouvez non seulement diversifier la composante visuelle du jeu, mais aussi aider l'utilisateur à comprendre ce qui se passe à l'écran, où cliquer et quelle action effectuer. C'est l'une des raisons principales de l'utilisation de l'animation UI dans les jeux: attirer l'attention du joueur sur les éléments les plus importants pour le moment.
La deuxième raison est la capacité de l'animation à montrer la dynamique globale et le style de jeu. L'animation de l'interface utilisateur doit correspondre à la dynamique du jeu. Cela contribue à une immersion encore plus grande. L'utilisation d'animations trop lentes dans un jeu au rythme rapide ennuiera les joueurs et affectera l'expérience globale.
Quant au type d'animation utilisé, il ne dépend que de vos ressources et capacités. Si vous et votre équipe pouvez vous permettre la mise en œuvre d'une animation complète et que le style visuel du jeu le permet, il vaut mieux le faire: il en sortira beaucoup plus juteux et plus beau. Dans d'autres cas, il est préférable d'utiliser une animation simplifiée.
Utilisons des exemples du même popup pour voir à quoi il ressemble avec une animation complète, simplifiée et minimale.
Animation complète
Animation simplifiée
Animation minimale
Qui crée l'animation de l'interface utilisateur et comment fonctionne le processus de développement
Habituellement, trois personnes participent au développement de l'animation:
- un designer ou un artiste crée une référence d'animation;
- le concepteur technique transfère cette référence au moteur de jeu;
- les programmeurs font apparaître l'animation au bon moment en fonction d'un déclencheur spécifique.
Parfois, un studio embauche spécifiquement un animateur, mais pas souvent - un concepteur suffit généralement.
La création d'animation peut être divisée en trois étapes: la réflexion, la création d'une référence et la mise en œuvre.
Première étape: idée
Afin d'adapter organiquement l'animation à ce qui se passe à l'écran, vous devez déterminer ce qui doit être animé, ainsi que ce qui se passera avant et après l'animation.
Passons en revue le processus de création d'une animation étape par étape en utilisant l'exemple de l'animation contextuelle ci-dessus.
Au début des travaux, nous effectuerons une recherche de jeux sur des sujets et des styles similaires, puis nous choisirons les options les plus réussies et les plus intéressantes que nous utiliserons comme références. Ainsi, nous gagnons du temps, non pas en réinventant la roue à partir de zéro, mais en partant de ce qui a déjà été fait avant nous. Ensuite, nous décrivons en détail ce qui doit se passer avec l'objet d'animation. Cela se fait principalement pour vous-même, afin de ne rien oublier d'important, ainsi que pour la rédaction de documentation supplémentaire.
À titre d'exemple, prenons le popup suivant et analysons toute la séquence de création d'animation dessus.
Décrivons brièvement l'idée:
- L'apparition d'un pop-up après une longue absence d'un joueur dans le jeu;
- Faites une animation fluide mais suffisamment rapide;
- Utilisez une animation plein écran;
- Animez chaque élément;
- Animez un canon de dinosaure;
- Ajoutez une lueur animée sous le dinosaure.
Lorsque l'objectif devient clair et clairement formulé, vous pouvez passer à la deuxième étape.
Deuxième étape: créer une référence
Nous créons notre propre référence d'animation, qui sera davantage démontrée, affinée et modifiée.
Pour cela, des programmes tels qu'Adobe Animate, After Effects, Spine, etc. À ce stade, peu importe pour nous dans quel programme animer (l'exception peut être Spine, puisque cet éditeur a une exportation d'animation vers de nombreux moteurs), nous choisissons donc ce qui sera le plus pratique et le plus rapide pour nous. Vous pouvez même animer un élément image par image dans Photoshop, mais c'est déjà exotique. Je préfère travailler dans After Effects car c'est l'éditeur le plus flexible en termes d'animations: vous pouvez mettre en œuvre presque toutes les idées qui vous viennent à l'esprit.
N'oubliez pas de prendre en compte les timings pour que tous les éléments de l'interface utilisateur se comportent correctement: sans désynchronisation, délais et dans le bon ordre.
Il ne faut pas oublier la durée de l'animation elle-même. Par exemple, si l'apparition d'une fenêtre prend plus d'une seconde et qu'elle apparaît assez souvent dans le jeu, le joueur se lassera très vite de l'animation étirée et sera agacé. Dans le même temps, si l'apparition d'un élément se produit assez rarement et que cet événement apporte de la joie au joueur (par exemple, recevoir un coffre, un prix ou un exploit), vous pouvez rendre l'animation de l'apparence plus longue et plus colorée.
Troisième étape: mise en œuvre
Ici, nous optimisons tous les graphiques utilisés dans la référence: particules de découpage, lueur, arrière-plan, dinosaure et autres petites choses - en d'autres termes, tous les effets visuels.
Un exemple de découpage optimisé
Un tel découpage d'éléments est nécessaire pour réduire la taille de l'animation finale, car il existe de nombreux autres éléments dans le projet et chaque mégaoctet est important. Si vous n'optimisez pas les éléments découpés, il se peut que votre belle animation ralentisse. Après cela, en utilisant l'animateur du moteur sur lequel le jeu est développé, nous répétons la même animation qui a été faite au stade de référence.
Pourquoi ne pouvez-vous pas tout faire sur le moteur en même temps? La réponse n'est pas évidente, mais assez simple: lorsque vous créez une animation, par exemple dans After Effects, vous ne disposez que du programme d'animation et de ses fonctionnalités. Il n'est pas nécessaire de configurer les caméras dans le jeu pour qu'elles s'affichent correctement dans l'interface utilisateur. Il n'est pas nécessaire d'optimiser les graphiques et de tout diviser en composants: vous pouvez facilement remplacer n'importe quel élément, voire repenser complètement l'animation, en la modifiant complètement. Si vous créez tout en même temps sur le moteur de jeu, vous perdrez beaucoup de temps à optimiser les fichiers, vous serez techniquement pressé et passerez beaucoup de temps à découper des graphiques pour l'animation au stade initial, bien qu'à la fin, cela puisse s'avérer complètement différent.
Conclusion
Enfin, je résumerai le matériel et donnerai quelques petits conseils. Lorsque vous travaillez avec une animation, réfléchissez-y à l'avance, observez les horaires, utilisez une animation complète chaque fois que possible et n'oubliez pas de regarder les animations d'autres projets pour des références possibles.
Si vous avez apprécié cet article, le prochain article est prévu sur la façon dont vous pouvez utiliser les principes de l'animation Disney dans l'interface utilisateur. En savoir plus sur les principes eux-mêmes ici .