Décrire la géométrie des images et l'ordre des animations
Pour une grille régulière, stockez la largeur et la hauteur des cellules, le nombre de colonnes et l’index de chaque image d’animation. Calculez x source avec (index de l’image modulo le nombre de colonnes) × largeur de cellule, et y source avec l’index de ligne obtenu en arrondissant vers le bas (index de l’image / nombre de colonnes) × hauteur de cellule. Pour les atlas irréguliers, stockez des rectangles source explicites. Séparez l’ordre de l’animation de celui des fichiers ; si les images sont regroupées par pose plutôt que par séquence, une marche de huit images peut utiliser les index [0, 1, 2, 1, 0, 3, 4, 3].
Si les sprites sont rognés pour supprimer les marges transparentes, stockez également la taille de la toile d'origine et le décalage de découpage. Dessinez autour d'un pivot stable, tel que les pieds du personnage, afin que les limites du cadre ne déplacent pas le corps de collision ou le contact visuel avec le sol lorsque l'illustration change.
Utilisez délibérément le rectangle source
Canvas drawImage a une surcharge qui sélectionne un rectangle source et le redimensionne en rectangle de destination. MDN documente la source x, y, la largeur et la hauteur séparément de la destination x, y, la largeur et la hauteur. Utilisez cette séparation pour conserver le recadrage de l'atlas exact tout en modifiant la taille du rendu. Testez les premières, dernières et limites de lignes ; un nombre de colonnes erroné apparaît souvent sous la forme d'un éclat d'un pixel provenant du sprite adjacent à ces limites.
Vérifiez les coutures et le chargement avant de diagnostiquer la géométrie
Si les images voisines débordent lors d’un dessin avec mise à l’échelle, laissez une marge transparente entre les cellules de l’atlas et vérifiez que le filtrage choisi convient au style graphique. Dessinez un rectangle de débogage autour de chaque image de destination et indiquez temporairement son index. Attendez que l’image soit chargée et décodée avant de la dessiner, puis testez à l’échelle réelle du canvas et à la résolution de son tampon interne. Comparez une image non mise à l’échelle à une image mise à l’échelle. Si seule cette dernière présente une couture, vérifiez l’échantillonnage et les marges internes de l’atlas avant de modifier les coordonnées source.
Questions sur rendu de l'atlas des sprites
Pourquoi une partie du sprite voisin apparaît-elle ?
Le rectangle source peut inclure des pixels voisins, ou un échantillonnage mis à l'échelle peut montrer les pixels de bord d'un atlas très compact. Vérifiez le recadrage et ajoutez un espacement adapté entre les cases avant de modifier l'ordre des cadres.
Les boîtes de collision doivent-elles utiliser les limites des sprites découpées ?
Gardez généralement les dimensions de collision liées au personnage du jeu, et non aux pixels transparents accidentels. Un pivot stable et une forme de collision explicite empêchent les images d'animation de modifier la géométrie du jeu.
Pour aller plus loin
Vous avez repéré une information dépassée ? Signaler une correction