Lekce 4 - Animujeme v Pixel artu

Vítejte u další lekce na téma Pixel art. V minulé lekci, Objekty, pozadí a další prvky v Pixel artu, jsme si řekli něco blíže o pozadí a objektech. V dnešní lekci se zaměříme na animace.

PIXEL ART - Animujeme

Není nic milejšího než animovaný sprite. Jeho časová proměnlivost Vám dodá absolutní zážitek a ztotožnění se s postavou příběhu. Z množství her a postav si vzpomenu např. už na dědečka Prince z Persie (1989), jehož sprite nejen dýchal při stání a uměl šplhat, ale při rozběhu a skoku na konci dokonce zabrzdil, aby neproběhl příliš daleko. Vždyť není divu, když předlohou postavičky byl samotný bratr tvůrce hry, který byl akrobatem.

Animace

Zjednodušeně je animace vlastně pohyblivý obraz. Není to nasnímaný pohyb - záznam, ale pohyb vytvořen vhodným časováním a uspořádáním jednotlivých obrázků za sebou. Animování je tedy vdechnutí života statickému obrazu nebo jeho části.

Základem dobré animace je pozorovací schopnost umělce a určitá zkušenost. Samozřejmě vše se dá nahradit. V tomto případě stačí použít záznamové médium, např. foťák nebo kameru, a sledovat pohyb reálných objektů a jejich jednotlivých částí.

Rychlost

časování snímků je také klíčová a v praxi se nahrazuje množství snímků použitím rozmazání a umělého přechodu jednoho obrazu do druhého prolínáním.

Rychlost animace se udává v snímcích za sekundu, fps (frames per second). Ideální animace při pohybu např. lidské postavy je od 12 snímků směrem nahoru. Samozřejmě daná rychlost je diskutabilní, když se jedná o speciální efekty, práci s velikostí snímku (zoom) a podobně. Podle této rychlosti je následně možné odvodit si počet fází pohybu pro pohyblivý animovaný sprite.

Opětovně se snažím být efektivní a podle charakteru spritu si určit, na kolik snímků pohyb rozložím. Jelikož jsem zastánce spíše pestrosti animovaných spritů, jsem za šetření a obvykle používám 4 podsprity = 4 snímky na jeden pohyblivý sprite.

Důležitější než přesný počet snímků pohybu je jejich optimální spojení a trvání!

Chůze

Nejtypičtější animovaný sprite je chůze hlavní postavičky hry, na kterou se nyní podíváme krok po kroku.

• 1. Navrhl jsem si proporci postavy a postupně překreslil polohu jejích nohou.

• 2. Naanimoval jsem pohyb rukou.

Je důležité mít na paměti, že natažení rukou a nohou je stejné, tedy pokud je noha nejvíce vpředu, jde ruka nejvíce od těla a naopak. Samozřejmě platí to také pro opačné ruce a nohy a to nám při chůzi dodává rovnováhu. Čili pravá noha nejvíce vpředu a pravá ruka nejvíce vzadu a naopak.

• 3. Následně jsem dal postavičce plochu. Dobrou animaci dělá pohyb nejen rukou a nohou, ale také trupu, hlavy a můžeme si dovolit třeba i mrkání a fórky s ofinkou. Samozřejmě takový nízký počet snímků můžeme použít pouze při siluetách. Defacto jsem vykreslil jen přeložení jedné nohy, ale protože mezi nimi není rozdíl, tak zopakování snímků vytvoří dojem i druhého kroku.

Samotná chůze hlavního hrdiny na celkový dobrý dojem ze hry nestačí a proto se často pod jedním spritem postavy skrývá několik snímků - fáze chůze, stání, fáze útoku, zranění a případně i smrt.

Díky vlivu "východu" se do her stejně jako do filmů vnášejí prvky zjednodušující animaci ve formě různých dramatických efektů a zamrznutí v čase. Takovou možnost jsem použil při práci s nástrojem krumpáč. Bílá šmouha mi nahrazuje několik snímků s různými polohami krumpáče.

Alternativou k takové frame to frame (po snímcích) animaci je animace, kterou nazývají animátoři tzv. papírková, která vytváří pohyb částí těla přes kód. To znamená, že každá část postavy je tvořena grafikou zvlášť v jedné poloze a je pospojovaná pomocí složitých algoritmů. Nevýhodou je sice komplikovaná tvorba pohybu na začátku (programování pohybu), ale následné varianty postav se pak realizují relativně rychle. Takovou animaci je možné dělat souvisle (relativně mnoho podsnímků) a jde to i při komplikovanější grafice.

Při frame by frame je každý sprite v rukou grafika a jediným urychlením tvorby je změna barevnosti postavy. Celkový nový look postavy vyžaduje stejný rozsah práce jako první sprite. Samozřejmě existují určité kombinace animování, které dokážou urychlit tvorbu a nabídnout optimální variantu pro všechny.

Exploze

Typickým animovaným spritem, kromě chůze postavičky, je animovaná interakce mezi hráči - zásah, ubrání nebo přidání bodů a životů resp. jiná vizuální reakce na podnět. Typické je zasažení postavy s odkazem na ztrátu krve nebo poražení nepřítele. Dalším je exploze. Někdy je to plošné zvětšení perimetru - kružnice nebo animovaný výbuch. Často pak něco podobného nastává i při upozornění, získání expů na vývoj postavy, zvýšení levelu a podobně.

Kromě citů vnáší animace do hry dynamiku. Možnost stavění zážitku na boji s gravitací vytváří možnost zapojení zvuků, které ke spojení obrazu a času neodmyslitelně patří. Samotné příběhy her jsou často na takové dynamice založené. Ať už je to třeba simulátor enduro motocyklu nebo surfaře, možnost ovládání vizuálně zajímavých pohybů, často i pomocí gyroskopických funkcí, zařízení dodávají hrám základní výzvu a následně adrenalin.

V každém případě je animace dalším vodítkem pro hráče k lepší interakci s hrou. Ukazuje mu, co je důležité, ať už rotací nebo "září" kolem jednotlivých objektů - typickým příkladem může být třeba sběratelský item, který se na svou důležitost tímto hráče snaží upozornit. Animace je v podstatě oživení a každý posun k životu dodává hře šťávu.

V čem animovat?

Dnes již většina editorů na tvorbu Pixel artu nabízí možnost animovaných spritů. Často přímo během tvorby řadí obrazy za sebe a nabízejí náhled na animování. Jednou z možností tedy může být například Piskel.

Animace v Piskelu

Zvolíme si create sprite a následně do hlavního okna uprostřed nakreslíme obrázek. Po jeho dokončení si můžeme všimnout zobrazení 1:1 na pravé straně. Nachází se zde náhled animování v případě více framů jakož i možnost nastavení jejího času. A pokud přidáme vlevo new frame, automaticky animaci spustíme.

Po vytvoření spritu nebo animace je pomocí rozmanitých nástrojů vlevo možné uložit si výsledek do své galerie nebo jej exportovat ve formátu .gif nebo .png.

Doporučuji při animování duplikovat původní frame a následně jej upravit.

Více majetní animátoři budou namítat, že to všechno a ještě mnohem víc zvládne i Photoshop a díky překrývání vrstev a možnosti snižování jejich krytí je animování ve Photoshopu jednodušší. Ale ať už budete animovat v čemkoliv - po snímcích a vykreslovat sprity všechny, nebo si zvolíte, jako já, ty klíčové a piskelapp, je na Vás. Všechno má svá pro a proti, důležité je jen mít z tvorby radost a pokračovat v tom dál .

To je pro dnešní lekci vše.