Dans ce tuto Photoshop, Arzhur Caouissin va nous apprendre à créer un Sprite Sheet.
Ce dernier est une animation représenté à l'aide d'une suite d'images collé dans un seul document. L'objectif est de créer l'image dans un format léger avec lequel on peut facilement interagir. Ici, le personnage saute, il est donc très difficile à reproduire en Java Script ou CSS. Nous allons donc utiliser le document Photoshop pour créer la suite d'images.
Il faut tout de même faire attention que l'image ne soit pas trop grande surtout lorsqu'on développe sur iPad car il a du mal à gérer des animations si l'image est plus grande que sa résolution. Si votre image est trop grande, il va falloir la couper en deux pour que l'iPad puisse la lire correctement.
Grâce au Java Script ou au CSS, on pourra couper le sprite sheet en affichant seulement la partie utile et de décaler dans le temps selon la cadence, l'image pour afficher l'animation.
Éditeurs Photoshop