>_ DevTrendspl

Język

Strona główna

Języki

Sekcje

Frontend Backend Mobilne DevOps AI / ML GameDev Blockchain Systemy wbudowane Bezpieczeństwo
JavaScript

Uniwersalny generator pikselowych postaci LPC — jak złożyć spritesheet do gry 2D w kilka minut

Rysowanie sprite'ów do pikselowego RPG to żmudne i czasochłonne zadanie. Gdy potrzebujesz tuzina różnych postaci z animacjami chodu, zamachów mieczem, strzał z łuku i śmierci, praca mnoży się błyskawicznie. Jeszcze trudniej jest zadbać o to, by cała odzież, fryzury i zbroja nakładały się prawidłowo na siebie w każdej klatce.

W 2012 roku społeczność OpenGameArt wraz z Creative Commons i Mozilla uruchomiła konkurs Liberated Pixel Cup. Cel był prosty: ustanowić zunifikowany otwarty standard graficzny dla gier 2D. Ten konkurs przerodził się w projekt Universal LPC Spritesheet Character Generator. To aplikacja webowa i zestaw wzajemnie kompatybilnych sprite'ów, z których można składać gotowych bohaterów.

Jak działa generator

Narzędzie działa bezpośrednio w przeglądarce. Wybierasz bazowy model ciała, dodajesz ubrania, zbroję, wybierasz fryzurę i broń. Aplikacja nakłada wszystko w odpowiedniej kolejności i generuje pojedynczy obraz spritesheet.

Przykład wygenerowanych sprite'ów

To podejście ma dwie główne zalety:

  • Każdy szczegół jest wstępnie animowany dla standardowego zestawu ruchów (chód, atak mieczem, bieganie, zamach, otrzymywanie obrażeń).
  • Elementy w stylu LPC różnego pochodzenia pasują do siebie pod względem proporcji i siatki pikseli.

Jeśli potrzebujesz strażnika w pełnej zbroi z halabardą lub chłopa w lnianej koszuli, składasz ich z gotowych elementów w trzech kliknięciach.

Licencje i niuanse prawne

Różni autorzy tworzyli zasoby dla projektu na różnych licencjach. Pojedynczy spritesheet może zawierać elementy z licencjami CC0, CC-By, CC-By-SA, OGA-By i GPL nakładającymi się na siebie.

Główne wyzwanie otwartej grafiki to konieczność wymieniania wszystkich autorów. Jeśli wziąłeś niestandardową brodę od jednego artysty, a tarczę od drugiego, musisz ich wymienić w creditsach.

Autorzy generatora to ułatwili. Wraz z końcowym obrazem serwis udostępnia plik tekstowy lub CSV z listą autorów wszystkich użytych warstw.

Zrzut ekranu eksportu licencji

Wystarczy dołączyć CREDITS.csv do gry lub wyświetlić nazwy w menu creditsów w grze. Jeśli planujesz wydanie na platformach z DRM (jak Steam czy App Store), deweloperzy zalecają ostrożność z zasobami na licencji CC-By-SA i wybieranie wariantów z CC0 lub OGA-By.

Pod maską

Frontend projektu jest zbudowany przy użyciu Vite i TypeScript. Ciekawym szczegółem jest system zmiany kolorów elementów.

Wcześniej przefarbianie włosów lub zbroi było wykonywane na CPU poprzez piksel po pikselu wymianę kolorów w Canvas API. Na dużych spritesheetach powodowało to opóźnienia podczas przełączania suwaków w interfejsie. Deweloperzy przepisali ten krytyczny mechanizm przy użyciu shaderów WebGL.

Teraz paleta jest przekazywana do shadera fragmentów jako tekstura, a przefarbianie odbywa się na GPU. Czas generowania podglądu spadł z 200 milisekund do 90. Jeśli przeglądarka lub karta graficzna nie obsługuje WebGL, aplikacja automatycznie wraca do starego renderowania CPU.

Możesz kontrolować tryb renderowania bezpośrednio z konsoli przeglądarki:

// Проверить текущий режим
getPaletteRecolorConfig();

// Принудительно включить CPU для отладки
setPaletteRecolorMode("cpu");

// Вернуть WebGL
setPaletteRecolorMode("webgl");

Do śledzenia wydajności w kodzie wbudowany jest profiler. W trybie lokalnego programowania mierzy on FPS, użycie pamięci i czas rysowania warstw na Canvas.

Uruchomienie lokalne i integracja z silnikami

Jeśli chcesz wdrożyć generator lokalnie lub dodać własne sprite'y, projekt łatwo uruchomić lokalnie:

git clone https://github.com/LiberatedPixelCup/Universal-LPC-Spritesheet-Character-Generator.git
cd Universal-LPC-Spritesheet-Character-Generator
npm install
npm run dev

Po tym aplikacja jest dostępna pod adresem http://localhost:5173.

Dla popularnego silnika Godot zostały stworzone gotowe wtyczki (dla wersji 3.5 i 4.2), które mogą importować LPC spritesheety i automatycznie dzielić je na ścieżki animacji. Społeczność tworzy również pakiet startowych wtyczek dla RPG Maker MZ.

Kto skorzysta z tego projektu

Uniwersalny generator spritesheetów LPC to ratunek dla niezależnych deweloperów i uczestników game jamów. Gdy nie ma budżetu na grafika 2D, to narzędzie zaspokoi twoje potrzeby dotyczące postaci zarówno w prototypie, jak i w pełnym retro RPG.

Grafika ma tutaj specyficzny charakter, z własnym rozpoznawalnym stylem gier 16-bitowych z lat 90. Ale jeśli ten styl pasuje do twojej gry, zaoszczędzisz setki godzin pracy nad sprite'ami.

Powiązane projekty