4. diel - Animuje v Pixel artu

Vitajte u ďalšej lekcie na tému Pixel art. V minulej lekcii, Objekty, pozadia a ďalšie prvky v Pixel artu , sme si povedali niečo bližšie o pozadí a objektoch. V dnešnej lekcii sa zameriame na animácie.

Pixel ART - animuje

Nie je nič milejšího než animovaný sprite. Jeho časová premenlivosť Vám dodá absolútnu zážitok a stotožnenia sa s postavou príbehu. Z množstva hier a postáv si spomeniem napr. Už na dedka Prince z Perzie (1989), ktorého sprite nielen dýchal pri státí a vedel šplhať, ale pri rozbehu a skoku na konci dokonca zabrzdil, aby neprebehol príliš ďaleko. Veď nie je divu, keď predlohou postavičky bol samotný brat tvorca hry, ktorý bol akrobatom.

Animácie

Zjednodušene je animácia vlastne pohyblivý obraz. Nie je to nasnímaný pohyb - záznam, ale pohyb vytvorený vhodným časovaním a usporiadaním jednotlivých obrázkov za sebou. Animovanie je teda vdýchnutie života statickému obrazu alebo jeho časti.

Základom dobrej animácie je pozorovacia schopnosť umelca a určitá skúsenosť. Samozrejme všetko sa dá nahradiť. V tomto prípade stačí použiť záznamové médium, napr. Foťák alebo kameru, a sledovať pohyb reálnych objektov a ich jednotlivých častí.

Rýchlosť

časovanie snímok je tiež kľúčová a v praxi sa nahrádza množstvo snímok použitím rozmazaniu a umelého prechodu jedného obrazu do druhého prelínaním.

Rýchlosť animácie sa udáva v snímkach za sekundu, fps (frames per second). Ideálne animácie pri pohybe napr. Ľudskej postavy je od 12 snímok smerom nahor. Samozrejme daná rýchlosť je diskutabilné, keď sa jedná o špeciálne efekty, prácu s veľkosťou snímky (zoom) a podobne. Podľa tejto rýchlosti je následne možné odvodiť si počet fáz pohybu pre pohyblivý animovaný sprite.

Opätovne sa snažím byť efektívne a podľa charakteru Spritu si určiť, na koľko snímok pohyb rozložím. Keďže som zástanca skôr pestrosti animovaných sprites, som za vyšetrovanie a zvyčajne používam 4 podsprity = 4 snímky na jeden pohyblivý sprite.

Dôležitejšie než presný počet snímok pohybu je ich optimálne spojenie a trvanie!

Chôdza

Najtypickejšie animovaný sprite je chôdza hlavné postavičky hry, na ktorú sa teraz pozrieme krok po kroku.

• 1. Navrhol som si proporciu postavy a postupne překreslil polohu jej nôh.

• 2. Naanimoval som pohyb rúk.

Je dôležité mať na pamäti, že natiahnutie rúk a nôh je rovnaké, teda ak je noha najviac vpredu, ide ruka najviac od tela a naopak. Samozrejme platí to aj pre opačné ruky a nohy a to nám pri chôdzi dodáva rovnováhu. Čiže pravá noha najviac vpredu a pravá ruka najviac vzadu a naopak.

• 3. Následne som dal postavičke plochu. Dobrú animáciu robí pohyb nielen rúk a nôh, ale aj trupu, hlavy a môžeme si dovoliť napríklad i žmurkanie a fórky s ofinkou. Samozrejme taký nízky počet snímok môžeme použiť len pri siluetách. Defacto som vykreslil len preloženie jednej nohy, ale pretože medzi nimi nie je rozdiel, tak zopakovanie snímok vytvorí dojem aj druhého kroku.

Samotná chôdza hlavného hrdinu na celkový dobrý dojem z hry nestačí a preto sa často pod jedným Sprit postavy skrýva niekoľko snímok - fáza chôdza, státie, fáza útoku, zranenie a prípadne i smrť.

Vďaka vplyvu "východu" sa do hier rovnako ako do filmov vnášajú prvky zjednodušujúce animáciu vo forme rôznych dramatických efektov a zamrznutiu v čase. Takúto možnosť som použil pri práci s nástrojom krompáč. Biela šmuha mi nahrádza niekoľko snímok s rôznymi polohami čakany.

Alternatívou k takej frame to frame (po snímkach) animácii je animácia, ktorú nazývajú animátori tzv. Papírková, ktorá vytvára pohyb častí tela cez kód. To znamená, že každá časť postavy je tvorená grafikou zvlášť v jednej polohe a je pospájaná pomocou zložitých algoritmov. Nevýhodou je síce komplikovaná tvorba pohybu na začiatku (programovanie pohybu), ale následné varianty postáv sa potom realizujú relatívne rýchlo. Takúto animáciu je možné robiť súvisle (relatívne veľa podsnímků) a ide to aj pri komplikovanejšie grafike.

Pri frame by frame je každý sprite v rukách grafika a jediným urýchlením tvorby je zmena farebnosti postavy. Celkový nový look postavy vyžaduje rovnaký rozsah práce ako prvý sprite. Samozrejme existujú určité kombinácie animovanie, ktoré dokážu urýchliť tvorbu a ponúknuť optimálne variant pre všetkých.

Explózia

Typickým animovaným Sprit, okrem chôdza postavičky, je animovaná interakcia medzi hráčmi - zásah, ubráni alebo pridanie bodov a životov resp. iná vizuálne reakcie na podnet. Typické je zasiahnutí postavy s odkazom na stratu krvi alebo porazení nepriateľa. Ďalším je explózia. Niekedy je to plošné zväčšenie perimetra - kružnice alebo animovaný výbuch. Často potom niečo podobné nastáva aj pri upozornení, získanie expov na vývoj postavy, zvýšenie levelu a podobne.

Okrem citov vnáša animácie do hry dynamiku. Možnosť stavanie zážitku na boji s gravitáciou vytvára možnosť zapojenia zvukov, ktoré k spojeniu obrazu a času neodmysliteľne patrí. Samotné príbehy hier sú často na také dynamike založené. Či už je to potrebné simulátor enduro motocykla alebo surferov, možnosť ovládania vizuálne zaujímavých pohybov, často aj pomocou gyroskopických funkcií, zariadenie dodávajú hrám základné výzvu a následne adrenalín.

V každom prípade je animácia ďalším vodítkom pre hráčov k lepšej interakcii s hrou. Ukazuje mu, čo je dôležité, či už rotáciou alebo "september" okolo jednotlivých objektov - typickým príkladom môže byť napríklad zberateľský item, ktorý sa na svoju dôležitosť týmto hráčov snaží upozorniť. Animácia je v podstate oživenie a každý posun k životu dodáva hre šťavu.

V čom animovať?

Dnes už väčšina editorov na tvorbu Pixel artu ponúka možnosť animovaných spritov. Často priamo počas tvorby radí obrazy za seba a ponúkajú náhľad na animovanie. Jednou z možností teda môže byť napríklad Piskel.

Animácie v Piskelu

Zvolíme si create sprite a následne do hlavného okna uprostred nakreslíme obrázok. Po jeho dokončení si môžeme všimnúť zobrazenie 1:1 na pravej strane. Nachádza sa tu náhľad animovanie v prípade viacerých framov ako aj možnosť nastavenia jej času. A ak pridáme vľavo new frame, automaticky animáciu spustíme.

Po vytvorení Spritu alebo animácia je pomocou rozmanitých nástrojov vľavo možné uložiť si výsledok do svojej galérie alebo ho exportovať vo formáte .gif alebo .png.

Odporúčam pri animovanie duplikovať pôvodné frame a následne ho upraviť.

Viac majetní animátori budú namietať, že to všetko a ešte oveľa viac zvládne aj Photoshop a vďaka prekrývanie vrstiev a možnosti znižovania ich krytie je animovanie vo Photoshope jednoduchšie. Ale nech už budete animovať v čomkoľvek - po snímkach a vykresľovať sprity všetky, alebo si zvolíte, ako ja, ty kľúčové a piskelapp, je na Vás. Všetko má svoje pre a proti, dôležité je len mať z tvorby radosť a pokračovať v tom ďalej .

To je pre dnešné lekciu všetko.