Ekstraktor Sprite'ów

Drop files here or click (max 12 MB)

Upuść obraz powyżej, aby rozpocząć wyodrębnianie sprite'ów.

O narzędziu Online Ekstraktor Sprite'ów

Potrzebujesz przekształcić arkusz sprite'ów lub statyczny obraz w pojedyncze sprite'y? Ten Ekstraktor Sprite'ów automatycznie wykrywa regiony sprite'ów, czyści je (z opcjonalnym przycinaniem i dopełnieniem) i eksportuje gotowe do użycia przezroczyste PNG. 🚀 Idealne dla projektów Scratch, prototypów 2D gier, zajęć szkolnych i gier indie. Świetnie działa z grafiką pikselową, elementami UI, ikonami i postaciami.

Dlaczego warto używać tego Ekstraktora Sprite'ów?

  • Automatyczne wykrywanie sprite'ów na podstawie przezroczystości i konfigurowalnych progów
  • Czyste przycinanie z opcjonalnym usuwaniem przezroczystych obramowań wokół każdego sprite'a
  • Kontrola dopełnienia, wyrównania (środek/dół) i opcjonalny jednolity rozmiar wyjściowy
  • Zachowuje przezroczystość (kanał alfa) dla eksportów PNG – idealne dla map kafelkowych i postaci
  • Wizualna galeria wszystkich wykrytych sprite'ów do szybkiego przeglądu przed pobraniem
  • Eksport ZIP po stronie klienta przy użyciu JSZip, zachowując stabilność nazw plików i kolejności sprite'ów
  • Przyjazne dla Scratcha: szybko przekształć pojedynczy arkusz sprite'ów w wiele kostiumów lub zasobów
  • Idealne do ponownego wykorzystania zasobów między silnikami (Scratch, Godot, Unity 2D, Phaser itp.)

🛠️ Jak wyodrębnić sprite'y z arkusza sprite'ów for sprite-extractor

1

1. Prześlij swój obraz

Przeciągnij i upuść arkusz sprite'ów lub obraz w strefę przesyłania, lub kliknij, aby wybrać plik. Dla najlepszych rezultatów użyj PNG z przezroczystym tłem lub wysokim kontrastem między sprite'ami a tłem.

2

2. Uruchom automatyczne wykrywanie

Narzędzie wysyła uproszczoną reprezentację obrazu do punktu końcowego wykrywania, który oblicza prostokąty ograniczające dla każdego sprite'a na podstawie przezroczystości i minimalnego rozmiaru. Prostokąty są nałożone na obraz, abyś mógł szybko zobaczyć, co zostanie wyeksportowane.

3

3. Dostosuj opcje ekstrakcji

Dostosuj dopełnienie, przezroczyste tło vs. jednolity kolor, przycinanie przezroczystych krawędzi, wyrównanie (środek lub dół) oraz opcjonalną jednolitą szerokość/wysokość wyjściową. Narzędzie odpowiednio przebudowuje każdy sprite.

4

4. Podgląd sprite'ów

Przeglądaj galerię wygenerowanych sprite'ów. Każdy podgląd jest tworzony po stronie klienta przy użyciu niewidocznego płótna i może być zmieniany lub usuwany w zależności od opcji interfejsu.

5

5. Pobierz PNG lub ZIP

Eksportuj pojedyncze sprite'y PNG lub pobierz pojedynczy plik ZIP zawierający wszystkie aktualne podglądy. ZIP jest tworzony po stronie klienta przy użyciu JSZip, a nazwy plików mają sekwencyjny wzór, np. <code>sprite_0000.png</code>, <code>sprite_0001.png</code> itd.

Specyfikacje techniczne

Wykrywanie i prostokąty ograniczające

Faza wykrywania działa na dedykowanym punkcie końcowym backendu i zwraca czyste prostokąty ograniczające, których klient używa do budowy finalnych sprite'ów.

AspektZachowanieUwagi
Punkt końcowy wykrywaniaPOST /api/sprite-extractor/inspectAkceptuje adres URL danych i opcje wykrywania, zwraca tablicę pól sprite'ów.
Wejścia wykrywaniatolerancja, próg alfa, minimalna szerokość, minimalna wysokośćDostosuj te parametry w interfejsie, aby ignorować drobne szumy lub przechwytywać tylko znaczące sprite'y.
Kształt pudełkaProstokąty wyrównane do osiKażdy <code>SpriteBox</code> zawiera <code>x</code>, <code>y</code>, <code>szerokość</code>, <code>wysokość</code> w współrzędnych obrazu źródłowego.
Obsługa przezroczystościUwzględnia kanał alfaPrzezroczyste piksele wpływają na decyzje przycinania, ale mogą być zachowane w wyniku.
Obsługa błędówŁagodne zabezpieczeniaJeśli wykrywanie się nie powiedzie, narzędzie wyświetla czytelny błąd i nie psuje interfejsu.

Przycinanie, Obcinanie & Wyrównanie

Po ustaleniu pól, całe renderowanie sprite'ów odbywa się w przeglądarce przy użyciu kanwy HTML.

KrokImplementacjaSzczegóły
Początkowe przycięciedrawImage(img, box.x, box.y, w, h, 0, 0, w, h)Każdy sprite jest najpierw przycinany z oryginalnego obrazu na tymczasową kanwę.
Obcięcie przezroczystościskanuj kanał alfa przez getImageDataNarzędzie skanuje piksele, aby obliczyć minimalne nieprzezroczyste pole ograniczające, gdy obcinanie jest włączone.
Dopełnieniekonfigurowalne 0–256 pxDopełnienie jest stosowane wokół obciętego lub przyciętego sprite'a, aby zmniejszyć artefakty krawędzi w silnikach.
Wyrównanieśrodek / dółSprite'y mogą być wyśrodkowane lub wyrównane do dołu (przydatne dla postaci stojących na linii bazowej).
Jednolity rozmiar wyjściaopcjonalna spriteWidth / spriteHeightPo włączeniu, wszystkie sprite'y są renderowane na kanwie o stałym rozmiarze w celu ujednolicenia animacji.
Tłoprzezroczyste lub jednolity kolorZachowaj pełną przezroczystość lub wypełnij kanwę wybranym kolorem RGBA.

Wydajność & Ograniczenia

Zaprojektowany do interaktywnego użytku w przeglądarce.

ParametrTypowe ZachowanieUwagi
Maksymalny rozmiar wejściowy~10 MB obrazuWiększe pliki mogą nadal działać, ale będą ładować/wykrywać się wolniej.
Liczba sprite'ówdo ~400 sprite'ówBardzo duże liczby są możliwe, ale renderowanie podglądu i tworzenie ZIP-a zajmie dłużej.
Format eksportuPNG wewnątrz ZIP-a (Blob)ZIP jest generowany całkowicie po stronie klienta przy użyciu JSZip.
Operacje na płótniePrzycinanie i rysowanie dla każdego sprite'aOpiera się na API 2D canvas przeglądarki; wydajność zależy od rozdzielczości i liczby.

Alternatywy wiersza poleceń

Dla ogromnych arkuszy sprite'ów lub zautomatyzowanych potoków, możesz połączyć narzędzia CLI, takie jak ImageMagick, ze skryptowaniem.

Linux / 🍎 macOS

Jednolite przycinanie siatki z ImageMagick

convert spritesheet.png -crop 64x64 +repage sprite_%04d.png

Tnie regularną siatkę 64×64 na pojedyncze pliki PNG.

Spakuj wszystkie sprite'y

zip sprites.zip sprite_*.png

Pakuje wszystkie wygenerowane sprite'y do jednego archiwum.

Windows (PowerShell + ImageMagick)

Przycinanie oparte na siatce

magick spritesheet.png -crop 64x64 +repage sprite_%%04d.png

Tak samo jak powyżej, używając CLI <code>magick</code> w Windows.

Praktyczne zastosowania

Tworzenie gier 2D

  • Wyodrębnij klatki animacji postaci z arkusza sprite'ów dla Godot, Unity 2D, Phaser lub Construct.
  • Wyizoluj elementy interfejsu (przyciski, ikony, paski zdrowia) z projektu graficznego.
  • Podziel zestawy kafelków na pojedyncze kafelki dla edytorów poziomów.
// Przykład w Godot: wczytaj wiele klatek\nvar frames = []\nfor i in range(0, 8):\n    frames.append(load(\"res://sprites/hero_walk_\" + str(i).pad_zeroes(2) + \".png\"))

Scratch i projekty klasowe

  • Przekształć pojedynczy arkusz sprite'ów w wiele kostiumów dla postaci w Scratchu.
  • Przygotuj tematyczne pakiety zasobów (zwierzęta, planety, ikony) dla warsztatów programowania.
  • Pozwól uczniom projektować arkusze sprite'ów w narzędziu do rysowania, a następnie wyodrębniaj je do Scratcha.
// Pseudokod w stylu Scratcha dla prostej animacji\nwhen green flag clicked\nforever\n  next costume\n  wait 0.1 seconds

Grafika pikselowa i biblioteki zasobów

  • Podziel stare arkusze pikselowej grafiki na przeszukiwalną bibliotekę pojedynczych sprite'ów.
  • Wyodrębnij tylko potrzebne zasoby z dużych komercyjnych lub otwartych pakietów.
  • Ujednolic wypełnienie i wyrównanie sprite'ów z różnych źródeł.

❓ Frequently Asked Questions

❓Czy wykrywanie sprite'ów jest w pełni automatyczne?

Narzędzie wykonuje automatyczne wykrywanie na podstawie przezroczystości i konfigurowalnych progów (tolerancja, próg alfa, minimalna szerokość/wysokość). W wielu przypadkach 'po prostu działa', ale dla skomplikowanych arkuszy możesz potrzebować dostosować opcje lub przeprowadzić drugie przejście.

📏Czy ekstraktor zmienia mój oryginalny obraz?

Nie. Twój oryginalny obraz pozostaje nienaruszony. Narzędzie tylko odczytuje go do pamięci w kanwie, przycina obszary do nowych kanw, a następnie eksportuje nowe sprite'y w formacie PNG.

🎯Czy mogę kontrolować wypełnienie i wyrównanie?

Tak. Możesz skonfigurować wypełnienie (w pikselach), wybrać między przezroczystym a jednolitym tłem, włączyć przycinanie przezroczystych krawędzi oraz wyrównać sprite'y do środka lub do dołu w kanwie wyjściowej.

🔒Czy moje obrazy są przechowywane na serwerze?

Krok wykrywania wysyła twój obraz (jako adres URL danych) do dedykowanego punktu końcowego w celu obliczenia pól sprite'ów, ale same sprite'y są budowane i pakowane w twojej przeglądarce. Usługa jest zaprojektowana do przetwarzania tymczasowego, nie do długotrwałego przechowywania. Jak zawsze, unikaj używania narzędzi stron trzecich dla zasobów, które muszą pozostać ściśle prywatne.

🧊Czy przezroczystość zostanie zachowana w eksportowanych sprite'ach?

Tak. Domyślnie kanwa wyjściowa pozostaje przezroczysta, a twoje sprite'y zachowują swój kanał alfa. Opcjonalnie możesz wybrać jednolity kolor tła, jeśli twój docelowy silnik preferuje nieprzezroczyste zasoby.

Pro Tips

Best Practice

Użyj niewielkiego wypełnienia (2–4 px) wokół każdego sprite'a, aby zapobiec prześwitywaniu krawędzi podczas skalowania lub obracania w twoim silniku.

Best Practice

Nazywaj sprite'y konsekwentnie (np. <code>hero_run_0001.png</code>, <code>hero_run_0002.png</code>), aby uprościć import animacji i skrypty.

Best Practice

W warunkach szkolnych zacznij od bardzo prostych arkuszy sprite'ów (kilka dużych sprite'ów, czyste tło), aby uczniowie od razu zobaczyli efekty.

Best Practice

Przechowuj eksportowany ZIP razem z plikami źródłowymi projektu, abyś mógł łatwo ponownie generować lub dostosowywać animacje później.

Additional Resources

Scratch Wiki – Sprite'y
Documentation
Dokumentacja Godot – Animacja 2D Sprite'ów
Documentation
Podręcznik Unity – Sprite'y 2D
Documentation

Other Tools