Voler des techniques d'animation de jeu pour engager les utilisateurs

Les sites Web modernes sont inondés dans les animations - souvent, trop . Ils peuvent encombrer le contenu et frustrer les utilisateurs. Pourtant, les animations possèdent un charme indéniable; Ils respirent la vie sur des sites Web, sont amusants à créer et peuvent être incroyablement impressionnants. Le problème n'est pas nécessairement la quantité , mais plutôt la pertinence des animations pour le contenu du site Web. Les animations mal intégrées se sentent forcées et ne ajoutent aucune valeur.

Cet article cible les développeurs Web visant à incorporer des animations sophistiquées sans aliéner les utilisateurs. Je partagerai des techniques que j'ai utilisées pour créer des animations engageantes tout en minimisant la frustration des utilisateurs. Vous pourriez penser que "les utilisateurs non ennuyeux" est une barre basse, et ... vous auriez raison.

Mon approche est quelque peu non conventionnelle. En tant que développeur Web pour l'éditeur de jeu indépendant Devolver Digital (en collaboration avec Vieko), je suis impliqué dans le développement et la conception. Au départ, j'ai eu du mal avec le design. Les croquis se traduisent rarement bien dans les implémentations de Photoshop, conduisant à d'innombrables redémarrages. Les tentatives de contournement de la conception et de sauter directement dans le code, s'appuyant sur des animations pour compenser, se sont révélées tout aussi infructueuses. Mes compétences en conception manquaient.

Ensuite, j'ai découvert un raccourci.

Lors de la présentation de concepts de sites Web, mes collègues et clients ravent sur mes compétences en conception (et envoyez des cookies - que j'ai mangés, désolé!). Mon secret?

J'emprunte massivement aux jeux vidéo.

J'émule les couleurs de jeu, les boutons, les boîtes modales, les concepts de base et même les mécanismes de gameplay. Je joue aux jeux (ils sont amusants!), Capturent des captures d'écran et des images, puis… j'adapte des éléments. Plus important encore, j'adapte les animations.

Alors que les jeux vidéo offrent une riche source d'inspiration, cette approche peut être appliquée dans toutes les industries. Pour moi, l'adaptation des animations de jeu a débloqué le plein potentiel de chaque site Web.

Une mine d'or d'inspiration

Devolver Digital possède une bibliothèque de jeux diversifiée: des expériences narratives apaisantes aux côtés des titres pleins d'action; Des jeux visuellement simples avec des profondeurs cachées et des jeux comme Shadow Warrior 3. Chaque jeu engage uniquement les joueurs, créant une expérience mémorable. Nous visons à reproduire cet engagement sur nos sites Web, en tirant parti de la technologie Web pour forger une connexion avant même que les utilisateurs ne touchent un contrôleur. Nous «empruntions» essentiellement des actifs, des animations et des mécanismes pour offrir aux utilisateurs un avant-goût du gameplay.

Études de cas

Commençons par Olija, un jeu sur un héros brandissant du harpon. La fluidité visuelle du jeu et la profondeur narrative étaient des aspects clés à mettre en évidence. Le site Web devait attirer les utilisateurs, les immerger dans l'histoire et leur donner un sentiment de contrôle.

Les sites Web offrent un avantage: l'interactivité. Nous levons en levant à travers les mouvements de la souris, les planches, les barres de défilement et l'entrée du clavier. Je préfère les barres de défilement pour leur nature intuitive.

La conception d'Olija comprend une animation de fondu de style crédits lent et de films de films couvrant trois hauteurs de fenêtres. Cela établit le rythme et le ton. Les sections ultérieures, y compris des éléments dynamiques en forme d'écran (comme le héros qui traversent une forêt), renforcent l'histoire et mettent en valeur le style du jeu. Animer l'art de pixels, basé sur des feuilles de sprite, a nécessité l'animation de la position de la feuille de sprite aux côtés des propriétés de transformation.

APE Out, avec sa sensation de film d'action, a inspiré un site Web présentant une scène terminée, permettant aux utilisateurs d'imaginer l'action précédente. La barre de défilement contrôle l'exploration de la caméra. Bien qu'il puisse sembler être une toile Webgl 3D, il est en fait intelligemment positionné des divs avec des transformations 3D.

Entrez sur le site Web de Gungeon célèbre les expériences des joueurs, en utilisant la nostalgie pour promouvoir les jeux connexes.

Éléments de jeu uniques

Loop Hero, avec sa boucle de gameplay simple mais engageante, a inspiré un site Web de défilement infiniment. La barre de défilement est temporairement désactivée lors des batailles, présentant la progression du jeu. Les résultats de la bataille sont dynamiques, ajoutant la relecabilité.

Les sites Web de Boomerang X et Shadow Warrior intègrent directement des séquences de gameplay, créant des éléments interactifs. Le contenu de Shadow Warrior secoue avec des impacts dans le jeu; Le logo de Boomerang X reflète le mouvement de Boomerang en jeu.

Le mécanisme de tulert de Devolver Stump Time a présenté un défi important. Les premières tentatives utilisant MatterJS ont échoué; En fin de compte, ThreeJS a été utilisé pour atteindre la fluidité souhaitée.

Une plongée plus profonde: Phantom Abyss

Le site Web de Phantom Abyss, ne pesant que 4 Mo, présente plusieurs de ces techniques. Des animations subtiles (blocs de change, des fantômes décolorants, des cascades animées, des particules de poussière, etc.) ajoutent de la profondeur et suggèrent subtilement la complexité cachée du jeu. SVGATOR a été utilisé pour animer les SVG (torches, cheveux, yeux).

Inspiration de l'intérieur

Ces exemples mettent en évidence notre approche de l'animation. Le catalogue de jeux diversifié de Devolver Digital fournit une inspiration sans fin (consultez Ragnorium, Heave Ho et Gato Roboto). Le travail de Vieko sur Minit and Sludge Life illustre également cette approche.

Nous utilisons principalement Vercel, NextJS, Framer Motion et React-Three-Fibre. Bien qu'il existe de nombreux autres outils, ceux-ci ont simplifié notre flux de travail.

L'abondance d'outils et de techniques peut être écrasante, conduisant à l'imitation plutôt qu'à l'innovation. Au lieu de nous concentrer sur la réplication du travail des autres, nous devons hiérarchiser la création d'animations profondément connectées au contenu lui-même, en forgeant des expériences utilisateur uniques et mémorables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!