Generator Sprite Sheet
Łącz obrazy w sprite sheet z przeciąganiem do zmiany kolejności, układem siatki, paddingiem, trybami skalowania. Eksportuj PNG/WebP/JPG z danymi JSON atlas dla silników gier i CSS.
Co to jest sprite sheet i dlaczego warto go używać?
Sprite sheet to pojedynczy plik obrazu zawierający wiele mniejszych obrazów (sprite'ów) ułożonych w siatce. Używanie sprite sheets zmniejsza żądania HTTP, poprawia wydajność ładowania strony i sprawia, że renderowanie gier jest bardziej wydajne.
Jakie formaty obrazów są obsługiwane?
Możesz przesyłać obrazy PNG, JPG, GIF, SVG i WebP. Narzędzie obsługuje przesyłanie wsadowe i wklejanie ze schowka (Ctrl+V) dla szybkiego przepływu pracy.
Jakie formaty eksportu są dostępne?
Eksportuj sprite sheets jako PNG (z przezroczystością), WebP (nowoczesny format z mniejszym rozmiarem pliku) lub JPG (najlepszy dla zdjęć bez przezroczystości). Wybierz w zależności od wymagań platformy docelowej.
Jak zmienić kolejność obrazów w sprite sheet?
Przeciągnij i upuść miniatury obrazów, aby zmienić ich kolejność w sprite sheet. Możesz także wklejać obrazy bezpośrednio ze schowka za pomocą Ctrl+V.
Czym są dane JSON atlas i jakie silniki je obsługują?
Dane JSON atlas zawierają pozycję, rozmiar i informacje o klatce dla każdego sprite'a. Są kompatybilne z popularnymi silnikami gier takimi jak Phaser, PixiJS, Unity, Cocos2d i wieloma innymi do automatycznego wyodrębniania sprite'ów.
Jakie są różne tryby skalowania?
Dopasuj zachowuje proporcje. Wypełnij pokrywa komórkę i przycina. Rozciągnij deformuje aby wypełnić.
Czy narzędzie obsługuje przezroczystość?
Tak, PNG i WebP zachowują przezroczystość. Można też ustawić niestandardowy kolor tła, co jest przydatne dla eksportów JPG, które nie obsługują przezroczystości.
Jak padding wpływa na sprite sheet?
Padding dodaje przestrzeń między poszczególnymi sprite'ami w arkuszu, zapobiegając wizualnemu przenikaniu podczas próbkowania tekstur. Jest to szczególnie ważne dla silników gier używających filtrowania liniowego.
Czy mogę używać sprite sheets dla CSS?
Tak, sprite sheets świetnie sprawdzają się jako sprite'y CSS. Dane JSON atlas mogą być używane do generowania reguł CSS background-position, zmniejszając żądania HTTP i poprawiając wydajność ładowania strony.
Jakie są najlepsze praktyki dla wymiarów sprite sheets?
Utrzymuj wymiary jako potęgi 2 (256x256, 512x512, 1024x1024) dla optymalnej obsługi tekstur GPU. Większość silników gier preferuje te wymiary dla lepszej wydajności i kompatybilności.
Jak sprite sheets poprawiają wydajność gier?
Sprite sheets zmniejszają wywołania rysowania, grupując wiele sprite'ów w pojedynczej teksturze. Minimalizuje to zmiany stanu GPU, zmniejsza narzut pamięci i umożliwia bardziej wydajne renderowanie.
Jaka jest różnica między sprite sheets a atlasami tekstur?
Sprite sheets zazwyczaj układają klatki w jednolitej siatce, podczas gdy atlasy tekstur mogą bardziej wydajnie pakować sprite'y o nieregularnych kształtach za pomocą algorytmów takich jak bin packing.
Jak korzystać z Generator Sprite Sheet
Połącz kilka obrazów w jeden arkusz sprite'ów bezpośrednio w przeglądarce. Przeciągaj, aby zmieniać kolejność klatek, precyzyjnie ustaw siatkę i odstępy, a następnie wyeksportuj atlas PNG/WebP/JPG z danymi JSON dla silników gier i sprite'ów CSS. Całość działa lokalnie.
- Dodaj swoje obrazy i użyj przycisków + oraz −, aby ustawić Columns i Rows siatki.
- Ustaw Padding (px), aby zrobić miejsce między sprite'ami i uniknąć przeciekania tekstur.
- Zostaw Sprite Size na Auto, aby dopasować do największej klatki, albo wpisz stałe wymiary dla równych komórek.
- Wybierz Scale Mode — Fit, Fill lub Stretch — decydując, jak każdy obraz mieści się w komórce.
- Wybierz Background (Transparent, White, Black lub Custom), ustaw Format na PNG, WebP lub JPG i nadaj nazwę pliku w Filename.
- Przeciągnij miniatury, aby zmienić kolejność klatek — współrzędne atlasu zaktualizują się same — a potem wyeksportuj arkusz razem z JSON-em.
Zostaw co najmniej 2 px odstępu, żeby sąsiednie sprite'y nie zlewały się, gdy silnik przeskaluje lub przefiltruje tekstury.
Powiązane narzędzia
- Kalkulator Chmod Darmowy kalkulator chmod online do wizualizacji i obliczania uprawnień plików Linux za pomocą pól wyboru. Natychmiastowa konwersja między notacją liczbową (755, 644) a symboliczną (rwxr-xr-x). Obsługuje specjalne uprawnienia jak setuid, setgid, sticky bit.
- Tabela ASCII Kompletna referencja kodowania znaków ASCII z kodami dziesiętnymi, szesnastkowymi, ósemkowymi, binarnymi, encjami HTML i opisami znaków. Natychmiastowe wyszukiwanie i filtrowanie.
- Tester Żądań HTTP Testuj API REST bezpośrednio w przeglądarce. Wysyłaj żądania GET, POST, PUT, DELETE z niestandardowymi nagłówkami, ciałem i parametrami. Natychmiast widz status, nagłówki i ciało JSON odpowiedzi.
- Generator .htaccess Generuj reguły .htaccess Apache dla przekierowań, przepisań, nagłówków bezpieczeństwa, buforowania i więcej.
- Generator Robots.txt Darmowy generator robots.txt online. Twórz i dostosowuj pliki robots.txt, aby kontrolować skanowanie przez wyszukiwarki, zarządzać dostępem robotów i optymalizować SEO swojej witryny.
- Generator Sitemap Darmowy generator sitemap XML online. Dodawaj URL, ustawiaj priorytety i częstotliwości, twórz sitemapy SEO natychmiast.
- GIF Rozdziel Klatki Wyodrębnij i pobierz pojedyncze klatki z animacji GIF jako PNG lub sprite sheet. Darmowe narzędzie online z podglądem i eksportem ZIP.
- GIF Odwrócony Odwróć kolejność odtwarzania animacji GIF online za darmo. Prześlij, podglądaj i pobierz natychmiast.