Animation CSS : Pacman CSS16

From scratch

• Création des images SVG : si vous partez de rien, vous allez devoir commencer par dessiner au moins la grille et un fantôme sur un logiciel de dessin vectoriel comme Adobe Illustrator. Pour Pacman, j’ai choisit de le créer entièrement en HTML, mais il peut également être fait en svg, au choix.
• Création d’une grille : pensez le tableau comme une grille, anticipez déjà les futurs déplacements de pacman. En ce qui me concerne, j’ai décidé pour ce tableau que chaque ligne ou colonne allait faire 5% de large et de hauteur. Le fait d’utiliser des pourcentages dans cet exercice pour le dimensionnement des éléments et pour les déplacement complique très clairement les choses, mais cela permettra de faciliter le redimensionnement du tableau par la suite. Le texte sera le seul à être dimensionné en pixel à cause de la police utilisée qui est optimisée pour s’afficher avec des multiples de 8 pixels.
• Identification des balles : pensez également à nommer les formes des balles sous la forme de coordonnées : a1, b4, c10, etc. Cela sera plus simple par la suite lorsque vous allez cibler les balles à faire disparaitre.

Personnalisation de la grille

Cette étape consiste à personnaliser, une grille de base fournie. Comme indiqué au point précédent, la grille en question est quadrillée afin de permettre par la suite des déplacements simples en pourcentage avec un pas de 5%.

• Ajout des murs : vous pouvez ajoutez les murs que vous souhaitez avec un logiciel de dessin vectoriel. Faites attention à bien laisser la place nécessaire pour le passage de Pacman et des fantômes.
• Suppression des balles : supprimez les balles inutiles de la grille, c’est à dire celles qui se retrouvent sous les murs.

Personnalisation de la grille

À cette étape, toutes les images svg sont fournies et prêtes à l’emploi, vous avez donc la grille et un fantôme. L’objectif est donc de construire la page HTML avec tous les éléments.

• Saisie des textes : il faut saisir les textes de démarrage et de fin dans des conteneurs afin de pouvoir les positionner et les animer.
• Création de Pacman : créez le pacman en html. Il est juste composé de deux formes dans un conteneur pour le déplacement.
• Intégration des images : intégrez les images de la grille et des fantômes. Vous pouvez les lier ou intégrer le code directement dans la page HTML.

Positionnement et dimensionnement

Pour cette étape, la page est fournie avec la totalité des éléments à l’intérieur. Il s’agit donc de gérer pour chaque élément sa position initiale et ses dimensions.

Animation

La dernière étape consiste tout simplement à gérer les animations.

• Durée de l’animation : déterminez la durée des deux étapes de votre animation : le temps d’affichage du message « Get ready » et le temps du déplacement de Pacman. Je vous conseille pour le déplacement de Pacman de prévoir un durée simple pour les calculs ultérieurs, par exemple, 10 secondes. Lorsque vous allez faire des images clés, 10% correspondra ainsi à 1 seconde.
• Nombre de cases par seconde : faites des tests pour déterminer le nombre de cases que pacman doit parcourir par seconde. Encore une fois un nombre rond simplifiera les choses. Essayez de déterminer précisemment le % de keyframe correspondant au déplacement d’une case en fonction de la durée de l’animation et de la vitesse.
• Programmation balles : si vous utilisez SCSS, la disparition des billes est facilement programmable.