Article original : Learn advanced React patterns by developing a game with sprite animation
Par Pavel Vlasov
Avez-vous déjà voulu apprendre quelques motifs avancés de React ? Ou construire votre propre moteur de jeu ? Si au moins une réponse est oui, alors cet article est pour vous.
Dans ce tutoriel, vous apprendrez comment construire une animation de sprite de base en utilisant React, styles-components, et requestAnimationFrame. À la fin, vous serez capable de créer des personnages comme ceci :
Vous pourriez me demander pourquoi ne puis-je pas l'apprendre d'une autre manière ? Eh bien... Il y a trois raisons à cela :
Alors, commençons ! ?
Commençons par un peu de théorie
Qu'est-ce qu'une animation de sprite ? Wikipedia dit que
En infographie, un sprite est une image bitmap en deux dimensions qui est intégrée dans une scène plus grande.
Donc, fondamentalement, une animation de sprite est une image bitmap en deux dimensions qui change de manière répétée.
Un sprite est généralement représenté comme une image png avec différents états de l'animation :
Image bitmap
Nous commencerons par créer un composant de tuile qui nous montrera une image à la fois et nous permettra de changer d'images avec la propriété state :
En gros, nous devrons montrer une partie de l'image à la fois et cacher le reste. Assez simple.
Tuile
Tout d'abord, nous créerons un composant conteneur pour créer la forme de notre cadre :
width et height représentent la taille de la tuile, et scale augmente la taille de l'image. overflow: hidden cachera la partie inutilisée de l'image et transform-origin permettra au conteneur de garder son haut et sa gauche identiques lorsque nous le mettrons à l'échelle.
Maintenant, nous devons ajuster la position de l'image intérieure. Nous utiliserons la propriété CSS transform: translate pour cela :
Maintenant, combinons tout cela dans le composant de tuile :
- La propriété
srccontient un lien vers l'image tileest l'objet avec les champswidthetheight, représente la taille de la tuilestateindex de l'image- La propriété
scalepour augmenter la taille de l'image (Par exemple,scale = 2est une image 2x)
À l'étape suivante, nous ajouterons un peu de mouvement à notre image.
Sprite
Nous utiliserons requestAnimationFrame pour cela. Vous pourriez me demander pourquoi nous n'utilisons pas setTimeout ou setInterval. Le problème avec les timeouts est que le callback se déclenchera quelque part entre les images, ce qui peut entraîner une animation saccadée.
requestAnimationFrame vs setInterval
De plus, requestAnimationFrame nous permet de synchroniser les animations de différents objets à l'écran. Dans le jeu, vous en aurez beaucoup !
Mettons ensemble un composant Sprite :
Dans la fonction animate, nous devons changer l'state de l'image et demander une nouvelle image d'animation :
Nous utilisons la propriété framesPerStep pour contrôler le nombre d'états par image, afin que notre animation ne soit pas trop rapide.
Et un pistolet ? ?
Maintenant, la seule chose que nous devons faire est de combiner notre sprite avec l'image du pistolet :
Et vous devriez obtenir le résultat suivant :
La meilleure façon d'apprendre quelque chose est de le construire soi-même. Je vous encourage donc à utiliser ce codesandbox :
La version TypeScript est disponible ici également.
En bonus, vous pouvez implémenter différentes animations en utilisant les fichiers du dossier assets.
Vous pouvez trouver le code source ici. J'ai utilisé des actifs de jeu créés par finalbossblues.
J'espère que vous avez apprécié l'article ! ?
Suivez-moi sur Medium et Twitter pour obtenir plus de mises à jour sur les nouveaux articles. De plus, partagez cet article pour aider les autres à le connaître. Partager, c'est prendre soin ?
Détruisez ce bouton d'applaudissements si vous en voulez plus.
Vous pouvez applaudir jusqu'à 50 fois ! ?
Quelques ressources supplémentaires sur le sujet :
Comprendre la méthode requestAnimationFrame() de JavaScript pour des animations fluides
_Publié à l'origine sur react.camp.