Generator sprite sheet

Jak działa układ

Generator używa jednego, przewidywalnego układu: jednolitej siatki. Ustalasz liczbę kolumn, a liczba wierszy to zaokrąglenie_w_górę(obrazy / kolumny). Każda komórka ma ten sam kwadratowy rozmiar (wybrany rozmiar kafelka), więc każdy obraz jest skalowany, by zmieścił się w swojej komórce z zachowaniem proporcji, i jest wyśrodkowany. Obrazy o różnych rozmiarach trafiają do jednakowych komórek, dokładnie tego oczekują sprite’y CSS z background-position.

Postać wygenerowanego CSS

Każdy obraz staje się klasą nazwaną od pliku (.spr-<nazwa>), o rozmiarze kafelka i przesunięty na swoją komórkę. Przy czterech kolumnach, rozmiarze kafelka 128 px i bez odstępu arkusz wygląda tak:

.spr-idle  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -0px; }
.spr-walk  { width: 128px; height: 128px; background: url(spritesheet.png) -128px -0px; }
.spr-run   { width: 128px; height: 128px; background: url(spritesheet.png) -256px -0px; }
.spr-jump  { width: 128px; height: 128px; background: url(spritesheet.png) -384px -0px; }
.spr-fall  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -128px; }

Przesunięcie zmienia się w dwóch wymiarach: sprite’y wypełniają każdy wiersz od lewej do prawej, a potem przechodzą do następnego wiersza. Zapisz PNG jako spritesheet.png obok swojego CSS (albo zmień url(...), aby pasowało do Twojej ścieżki).

Odstęp i zlewanie

Sprite’y spakowane krawędź w krawędź mogą się zlewać, gdy przeglądarka skaluje arkusz (niecałkowite proporcje pikseli, transformacje CSS). Dodaj 2 do 4 pikseli odstępu między komórkami, aby sąsiednie piksele nie przenikały.

Ekrany o wysokiej gęstości (retina)

Nie ma automatycznego eksportu 2x, ale ostrzejszy arkusz zrobisz prosto: wybierz większy rozmiar kafelka (na przykład 256 px zamiast 128 px), aby każdy sprite niósł więcej pikseli, a potem wyświetl go w połowie rozmiaru CSS. Dzięki temu masz ostre sprite’y na ekranach o dużej gęstości bez osobnego przebiegu.

Sprite sheety a alternatywy

• Sprite sheety: klasyczne zestawy ikon w CSS, klatki gier HTML5 i strony, które zyskują na połączeniu wielu małych obrazów w jeden plik.
• Sprite’y SVG (symbol): lepsze do nowoczesnych ikon interfejsu, skalują się bez strat, przyjmują fill w CSS, bez żonglowania background-position.
• Fonty ikon: ograniczone, ale wciąż używane do maleńkich jednokolorowych ikon.
• Osobne pliki z HTTP/2 lub HTTP/3: multipleksowanie sprawia, że liczba żądań znaczy mniej niż kiedyś.