Assembleur de sprite sheets
Assemblez plusieurs images d’icônes ou de sprites en une seule planche, en générant des cartes de coordonnées (JSON/CSS) côté client. Rapide, sûr hors ligne et gratuit. Simplifiez les ressources de vos jeux et optimisez instantanément les connexions de feuilles de style de votre site.
Pourquoi utiliser notre Assembleur de sprite sheets ?
- 100 % privé et local : vos actifs image sont traités entièrement dans l’espace mémoire de votre navigateur local. Aucun graphique ni métadonnée ne voyage vers des serveurs externes, garantissant une confidentialité de design absolue et une conformité pour les projets personnels et commerciaux.
- Dispositions d’assemblage optimales : dispose les icônes à l’aide d’un algorithme avancé d’assemblage par arbre binaire 2D croissant qui minimise la surface de la planche. Vous pouvez aussi basculer entre les options d’empilement linéaire vertical et horizontal.
- Générateurs CSS et JSON : compile instantanément des classes CSS responsives avec des positions de fond négatives ou exporte des cartes JSON standard compatibles avec les moteurs web et les jeux (comme PixiJS, Phaser et Cocos2d).
- Inspecteur interactif des superpositions : auditez et prévisualisez dynamiquement les coordonnées assemblées. En survolant un sprite dans la carte de coordonnées générée, sa boîte englobante exacte est mise en surbrillance directement sur la planche canvas.
L’avantage des sprite sheets : réduire la surcharge réseau
Les navigateurs limitent le nombre de connexions HTTP simultanées vers un même hôte (souvent plafonné à 6 connexions). Lorsqu’un site web dépend de dizaines de minuscules icônes, les charger individuellement provoque de la latence réseau, des délais de mise en file d’attente et des décalages de mise en page cumulés. Les sprite sheets résolvent cela par la consolidation. Le chargement d’une seule image plus grande combine toutes les charges HTTP en un unique flux de connexion TCP. De plus, cela élimine les désagréables scintillements blancs qui se produisent lorsqu’un navigateur tente de charger une image d’état de survol séparée lors d’une interaction de l’utilisateur.
Comment les algorithmes d’assemblage 2D optimisent la surface de la planche
Assembler plusieurs rectangles arbitraires dans une seule zone englobante avec un minimum de gaspillage est un problème NP-complet. Cet outil utilise un algorithme d’assemblage par arbre binaire 2D croissant. L’assembleur commence avec la taille du premier élément et croît dynamiquement vers la droite ou vers le bas pour accueillir de nouveaux blocs, en choisissant le chemin qui maintient le rapport d’aspect global de la planche proche d’un carré. Trier au préalable les éléments par surface décroissante garantit que les plus grands blocs sont placés en premier, permettant aux plus petits de s’insérer étroitement dans les espaces restants.
Background-position CSS vs cartes de textures JSON
Une fois assemblés, les sprites nécessitent des cartes de coordonnées pour indiquer aux applications où réside chaque icône. Les mises en page web reposent sur des classes de sprites CSS. En assignant une classe partagée avec l’URL de l’image de fond et en appliquant des décalages de fond négatifs individuels (par ex. `background-position: -32px -64px`), les navigateurs rendent le bloc de sous-image spécifique. Pour les systèmes d’applications basés sur canvas et les jeux 2D, les hachages JSON standard mappent chaque fichier nommé à ses coordonnées englobantes exactes, permettant aux moteurs de recadrer et découper les textures dynamiquement dans les viewports WebGL.
Foire aux questions
Un assembleur de sprite sheets est un outil de design hors ligne qui combine plusieurs images ou icônes séparées en un seul fichier image. Il calcule les coordonnées exactes en pixels de chaque graphique d’origine et génère des fichiers de feuille de style ou de données pour que les applications puissent afficher chaque élément correctement.
Lorsque vous chargez des fichiers, votre navigateur les lit en mémoire sous forme d’objets image. L’algorithme d’assemblage calcule la disposition de coordonnées la plus compacte sur une grille virtuelle et dessine les sprites sur un canvas hors écran. Les résultats sont exportés sous forme d’images et de code directement dans votre navigateur.
Oui, notre assembleur de sprite sheets fonctionne entièrement côté client dans votre navigateur local. Aucun de vos fichiers image, dimensions, noms ou designs n’est envoyé à nos serveurs. Toutes les opérations de dessin et d’assemblage de pixels s’exécutent localement sur votre ordinateur, garantissant une confidentialité absolue pour vos actifs de propriété intellectuelle.
L’utilitaire prend en charge trois dispositions d’assemblage. Le mode Arbre binaire exécute un algorithme de partition croissante pour assembler les éléments dans une empreinte proche d’un carré. La disposition Verticale empile les éléments en une seule colonne, et l’Horizontale les dispose côte à côte sur une large ligne.
L’outil génère deux feuilles de mappage courantes. L’onglet CSS fournit des règles de classe avec les dimensions cibles et des coordonnées background-position négatives. L’onglet JSON produit des configurations hash TexturePacker standard, définissant coordonnées, rognages et tailles de planche parfaites pour les frameworks modernes de jeux web.
Oui, vous pouvez configurer un espacement ou une marge personnalisé entre vos sprites. L’outil prend en charge des valeurs de 0px à 32px. Ajouter un espacement est vivement recommandé pour éviter les artefacts de débordement, où des pixels de sprites adjacents se dessinent accidentellement le long des bords de votre disposition.
Vous pouvez configurer des limites maximales jusqu’à 4096px de largeur et de hauteur. Comme tout le traitement s’exécute dans la mémoire du navigateur, les performances dépendent de la RAM de votre appareil. L’utilitaire d’assemblage lèvera une erreur si les configurations de disposition dépassent les limites de taille du canvas cible.