Ilu z Was wie, że w Photoshopie można używać skryptów JavaScript do automatyzacji różnych działań i czynności? Ja dowiedziałem się o tym dopiero niedawno i chętnie podzielę się odkryciem - jeśli dobrze o tym wiesz, to plus dla Ciebie. Inni mogą się trochę zdziwić, ale mam nadzieję, że wpis ten spowoduje wzrost zainteresowania takim ułatwianiem sobie życia.

Zacznijmy od źródła odkrycia - w książce Building HTML5 Games with ImpactJS jej autor, Jesse Freeman w jednym z rozdziałów pokazał i opisał krótki plik JavaScript o nazwie LayersToSprite.js, dzięki któremu dzieje się cała magia - elementy z różnych warstw w Photoshopie umieszczane są w odpowiednich odległościach obok siebie na jednej warstwie, dzięki czemu możemy bez problemu zapisać je jako jeden spójny sprite. Oto źródło tego pliku:

// Sprawdzamy czy dokument istnieje

if (documents.length > 0)

{

	// zapisujemy aktywny dokument w zmiennej

	docRef = activeDocument;   



	// obliczamy liczbę warstw

	numLayers = docRef.artLayers.length; 



	// i długość sprite'a

 	var spriteX = docRef.width;

 	

	// naszymi jednostkami miary będą piksele

	app.preferences.rulerUnits = Units.PIXELS;



	// obliczamy długość nowego pliku:

	// ilość warstw razy długość pojedynczego elementu

 	newX = numLayers * spriteX;

 	

 	// dostosowujemy wielkość Canvasa za pomocą

 	// obliczonych zmiennych

 	docRef.resizeCanvas(newX, docRef.height,

 		AnchorPosition.TOPLEFT);

 	 	

	// i przenosimy wszystkie warstwy w odpowiednie miejsca

 	for (i=0; i < numLayers; i++)

 	{ 	

 		docRef.artLayers[i].visible = 1;

  		var movX = spriteX*i;

 		docRef.artLayers[i].translate(movX, 0);

  	}

}

Dzięki niemu posiadając na wejściu wszystkie klatki animacji na kolejnych warstwach nie musimy już mozolnie kopiować wszystkiego ręcznie, układać według grida męcząc się przy tym jeśli akurat wokół grafiki znajdowało się zbyt dużo przezroczystości. Ja tak niestety robiłem, co było dosyć czasochłonne i męczące. Teraz dzięki powyższemu skryptowi cała magia zrobi się sama - po wygenerowaniu sprite'a wystarczy zapisać plik na dysku i jesteśmy gotowi do jego użycia.

Przykład

Przydatność skryptu przetestowałem w warunkach bojowych dosyć szybko - korzystałem z niego podczas obróbki sprite'ów do gry Captain Rogers - pierwszej mobilnej gry HTML5 stworzonej jako studio Enclave Games we współpracy z BlackMoon Design (ja zajmowałem się kodowaniem, a Robert designem). Poniżej znajdują się pliki źródłowe rakiety głównego bohatera na oddzielnych warstwach:

Layer to sprite 1


Aby uruchomić powyższy skrypt z naszego dysku wystarczy w menu Photoshopa kliknąć kolejno na File, następnie Scripts i Browse... - odnajdujemy i wybieramy nasz plik JavaScript, który uruchamia się automatycznie:

Layer to sprite 2


Po potraktowaniu skryptem LayersToSprite elementy automagicznie układają się w odpowiedniej kolejności z równymi odstępami między nimi:

Layer to sprite 3


Proste, łatwe i przyjemne. W połączeniu z TinyPNG (który kompresuje pliki .png ze średnią kompresji na poziomie 60-70%) w ciągu sekund jestem w stanie wyprodukować sprite'a gotowego do użycia w końcowej, produkcyjnej wersji gry.

Podsumowanie

Dla mnie ten mały skrypt jest bardzo przydatny - wszystkie sprite'y w grze Captain Rogers zostały potraktowane tymi dwoma narzędziami. Produktywność znacznie wzrosła, wielkość plików zmalała. Wiem, że istnieją rozbudowane aplikacje ułatwiające tego typu pracę, które pozwalają na znacznie więcej, ale do jednoosobowej pracy przy prostej grze LayersToSprite wystarczy w zupełności.

Ktoś z Was korzystał już z plików JavaScript w Photoshopie? A może macie coś lepszego do polecenia? Zapraszam do dyskusji w komentarzach!