Atlas de sprites
Sprite Sheet Packer
Range plusieurs images dans un seul atlas et produit à côté la feuille CSS ou la carte JSON des positions.
Un atlas et les coordonnées qui le rendent utilisable — parce qu’une planche de sprites sans table d’images n’est qu’une image de quelques icônes. Le packeur indique son taux d’occupation, et c’est le chiffre qui vous dit si l’atlas vaut la peine d’exister.
Déposez les icônes à empaqueter
Un atlas, et la carte des images qui le rend utilisable.
Comment s’en servir
Déposez les icônes
Les noms de fichier deviennent les noms des sprites, et donc les noms de classes CSS ou les clés JSON.
Laissez une gouttière d’au moins deux pixels
C’est ce qui empêche un sprite voisin de déborder quand la planche est dessinée à une autre échelle ou avec un filtrage bilinéaire — la ligne le long du bord d’une icône que personne n’arrive à expliquer.
Choisissez le format de la table
Le CSS est le seul qui n’exige aucun JavaScript. Le JSON suit la forme de hachage de TexturePacker, que les moteurs de jeu courants savent déjà analyser.
Réglez le rapport de pixels si les images sont en @2x
Il divise chaque nombre de la table, si bien que le CSS décrit des pixels CSS plutôt que des pixels de l’appareil.
Questions fréquentes
Que veut dire le chiffre d’occupation ?
Quelle part de l’atlas est du sprite plutôt que du vide. En dessous d’environ la moitié, le rangement se bat avec des sprites de formes très différentes et vous téléchargez beaucoup de transparence ; les séparer en deux planches fait alors le plus souvent mieux.
Faut-il encore utiliser une planche de sprites en HTTP/2 ?
Pour le web, le plus souvent non — le coût des requêtes qui justifiait les atlas a largement disparu, et un sprite SVG ou des fichiers séparés sont plus faciles à maintenir. Pour un jeu en canvas ou en WebGL, c’est toujours la bonne réponse, parce qu’une liaison de texture vaut mieux que cinquante.
Pourquoi l’atlas n’est-il pas une puissance de deux ?
Parce que cela coûte de la place et que la plupart des GPU actuels n’en ont pas besoin. Activez l’option si vous faites du mipmapping ou si vous visez un chemin de texture plus ancien, et acceptez la surface perdue.
À alimenter depuis
Découper une image en morceaux
Image Splitter
Coupe une image en grille de N × M ou en bandes de hauteur fixe et vous rend les morceaux dans un zip.
Éditeur de pixel art
Pixel Art Editor
Dessine sur une grille de pixels avec crayon, pot de peinture, gomme, pipette, palette et symétrie miroir, importe une photo quantifiée sur la grille, et exporte en PNG à une échelle entière ou en SVG.
Compresseur PNG
PNG Compressor
Quantifie la palette et réécrit le flux deflate pour alléger un PNG sans toucher à ses dimensions, sans envoi de fichier, tout dans votre navigateur.
Compresseur JPEG
JPEG Compressor
Réencode un JPEG à la qualité que vous fixez, avec le poids avant et après en direct et une vue des différences.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Formater ou minifier du CSS
CSS Beautifier & Minifier
Met en forme ou minifie du CSS sans rien réordonner, en conservant le flux de jetons à l’identique.
Redimensionner une image
Image Resizer
Redimensionne en pixels, en pourcentage ou sur le plus grand côté visé, avec verrouillage des proportions et préréglages pour un lot entier.
Compresseur PNG
PNG Compressor
Quantifie la palette et réécrit le flux deflate pour alléger un PNG sans toucher à ses dimensions, sans envoi de fichier, tout dans votre navigateur.
Supprimer l’arrière-plan
Background Remover
Détoure un fond uni ou d’une seule couleur dans l’espace OKLab et rend un PNG transparent, avec un pinceau pour reprendre les bords, sans envoi de fichier, tout dans votre navigateur.
Supprimer les données EXIF
EXIF Remover
Efface les données d’appareil, de GPS et de retouche d’une photo sans toucher à un seul pixel, sans envoi de fichier, tout dans votre navigateur.
Générateur de favicon
Favicon Generator
Produit le jeu complet — ICO, PNG, icône Apple touch, manifeste web — accompagné du HTML à coller dans votre page.