Generator sprite sheetów — PNG + JSON + CSS

Czym jest sprite sheet i dlaczego pomaga

Sprite sheet łączy wiele małych obrazów — klatki animacji, kafelki gier, ikony UI, emoji lub flagi — w jeden większy obraz. Wczytanie jednego pliku zamiast dziesiątek zmniejsza liczbę żądań HTTP i przełączeń tekstur, dzięki czemu strony internetowe i gry szybciej się ładują i renderują. Każdy pojedynczy sprite jest następnie wyświetlany przez odwołanie do jego prostokąta w arkuszu. Ten generator sprite sheetów tworzy za Ciebie obraz i współrzędne: upuść pliki, wybierz układ i pobierz PNG razem z plikiem danych JSON oraz gotowym do użycia arkuszem stylów CSS.

Cała praca odbywa się w przeglądarce. Obrazy są rysowane lokalnie na canvasie, a pliki współrzędnych generowane w JavaScripcie, więc Twoje grafiki nigdy nie są przesyłane i nie ma limitu tego, ile razy możesz ponownie wygenerować arkusz, eksperymentując z ustawieniami.

Siatka czy układ upakowany

Jednolita siatka daje każdemu sprite'owi komórkę tak dużą jak największy obraz i wyśrodkowuje każdy sprite w jego komórce. Taka przewidywalna struktura jest tym, czego oczekuje większość systemów animacji: klatka n zawsze znajduje się w kolumnie n modulo liczba kolumn. Upakowane wiersze sortują sprite'y według wysokości i wypełniają wiersze do docelowej szerokości, co marnuje znacznie mniej miejsca, gdy obrazy mają różne rozmiary. W obu trybach wartość odstępu dodaje przezroczystą przestrzeń wokół każdego sprite'a, aby zapobiec przenikaniu kolorów podczas skalowania arkusza.

Korzystanie z wyników JSON i CSS

Plik JSON wymienia każdy sprite pod czystą nazwą utworzoną z nazwy pliku, wraz z jego pozycją x i y, szerokością i wysokością, a także całkowitym rozmiarem arkusza. Frameworki do gier, takie jak Phaser i PixiJS, mogą wczytać ten format hash bezpośrednio, a w każdym języku łatwo go sparsować. Plik CSS definiuje klasę bazową, która ustawia arkusz jako obraz tła, oraz jedną klasę na sprite z jego rozmiarem i pozycją tła, więc ikona to po prostu span z dwiema klasami. Zmień prefiks klas, aby pasował do konwencji nazewnictwa w Twoim projekcie, i trzymaj PNG obok pliku CSS lub dostosuj URL.