1000 Outils

Calculateur de sprite sheet

Planifiez et calculez vos sprite sheets pour animations web et jeux vidéo. Entrez les dimensions d'une frame, le nombre de colonnes et de lignes, et obtenez immédiatement la taille totale de la sprite sheet, le code CSS d'animation avec steps() et les positions background-position pour chaque frame individuelle. Aperçu visuel de la grille inclus.

Dimensions de la sprite sheet

512

Largeur totale (px)

256

Hauteur totale (px)

32

Frames totales

2.67s

Durée animation

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
+8

CSS — Animation de la sprite sheet

.sprite {
  width: 64px;
  height: 64px;
  background-image: url('sprite.png');
  background-repeat: no-repeat;
  animation: play-sprite 2.67s steps(8) infinite;
}

@keyframes play-sprite {
  from { background-position: 0px 0px; }
  to { background-position: -512px 0px; }
}

CSS — Positions des frames (background-position)

.sprite {
  width: 64px;
  height: 64px;
  background-image: url('sprite.png');
  background-repeat: no-repeat;
}

.frame-0 { background-position: 0px 0px; }
.frame-1 { background-position: -64px 0px; }
.frame-2 { background-position: -128px 0px; }
.frame-3 { background-position: -192px 0px; }
.frame-4 { background-position: -256px 0px; }
.frame-5 { background-position: -320px 0px; }
.frame-6 { background-position: -384px 0px; }
.frame-7 { background-position: -448px 0px; }
.frame-8 { background-position: 0px -64px; }
.frame-9 { background-position: -64px -64px; }
.frame-10 { background-position: -128px -64px; }
.frame-11 { background-position: -192px -64px; }
.frame-12 { background-position: -256px -64px; }
.frame-13 { background-position: -320px -64px; }
.frame-14 { background-position: -384px -64px; }
.frame-15 { background-position: -448px -64px; }
/* ... et 16 frames supplémentaires */

Qu'est-ce qu'une sprite sheet ?

Une sprite sheet est une image unique regroupant plusieurs images (frames) d'une animation ou plusieurs éléments graphiques. Elle est largement utilisée dans le développement de jeux vidéo 2D et dans le web design pour les animations CSS. En regroupant plusieurs images en une seule, on réduit le nombre de requêtes HTTP (bénéfique en HTTP/1.1) et on facilite la gestion des assets graphiques.

Animation CSS avec sprite sheet et steps()

La technique CSS pour animer une sprite sheet utilise la propriété animation avec la fonction de temporisation steps(). Le principe : on définit la largeur et la hauteur d'une frame dans le conteneur, puis on anime background-position de 0 à -largeurTotale px en n steps (une step par colonne de frames). La propriété steps() permet de sauter d'une frame à l'autre sans interpolation, créant ainsi l'illusion d'animation image par image.

Questions fréquentes

Outils similaires

🎨

Redimensionner une image

Redimensionnez vos images aux dimensions exactes souhaitées, gratuitement et sans inscription.

🎨

Compresser une image

Compressez vos images pour réduire leur poids sans sacrifier la qualité visuelle.

🎨

Convertir PNG en JPG

Convertissez vos images PNG en JPG instantanément avec le niveau de qualité de votre choix.

🎨

Générateur de palette de couleurs

Générez des palettes de couleurs harmonieuses pour vos projets de design et de développement web.

🎨

Convertir HEX en RGB

Convertissez vos codes couleur HEX en RGB (et inversement) avec prévisualisation instantanée.

🎨

Créer un favicon

Créez un favicon pour votre site web à partir d'une image ou en partant de zéro.