Na úvod je třeba říct, že tento tutoriál se již objevil jinde ještě před vznikem Krevety. Přesto zde pro úplnost nesmí chybět první díl.

Proč pixelart?

Ano, stále dokola je omíláno jak je to neperspektivní způsob. Ale já v něm pořád vidím využití i krásu a zaroveň vidím, že právě začátečníci se na něj obrací ve velké většině, protože je snadno přístupný.

Proč grafický design?

Protože pohled na většinu her tvořené začínajícím, nebo mladým grafikem (či jen programátorem) je tristní a já si myslím, že i bez zkušeností, či dokonce grafického nadání, se dá docílit slušně vypadající hry i bez těchto ctností. Krásným příkladem může být Adamsova 8 venture. Neříkám, že to musí dokázat každý, ale to procento lidí je vyšší.

Seriál bude formou sledování celého procesu tvorby imaginární skákačky. Tak jak bych jí dělal já, ne tak jak je to jediné správné. Případné výtky a jsou vítány.
V tutoriálech se nebudu snažit dostat se hluboko do technik pixelartu, ale spíš se pokusit poradit jak docílit toho aby hra vypadala uceleně a tak nějak slušně :)

1.Díl: Hlavní hrdina

A začnu- tak jako začínám i já (ikdyž většinou se dozvídám, že v tvorbě her začínám spíše odzadu :) hlavní postavou.
Hlavní postavou začínám proto, že se skutečně držím toho slova "hlavní". Tento sprite bude jako jediný viděn po celou dobu hry a tak si myslím, že investice do něj by měli být značná.

Co jsem odtušil, mnoho lidí se bojí animace a tak podle toho zařizují i hlavní postavu. Vynikající příklad tohoto "obcházení" jsou často viděné hlavní postavy jakožto koule s očima a ústy (např. tím u mě lehoulince klesla hra od Kadeta Lost on the island). Neříkám, že je to vyloženě špatné, ale ztratí body hned na začátku. Přitom stačí jen trochu experimetnování, který se nevejde ani za nehet malíčku.



V tomto bodě musíte být sebekritičtí a nebát se zkusit i víc možností. Ne- nakreslit a jít. Protože málokdo nakreslí to co chce, tak jak chce, hned napoprvé. Klidně nakreslit několik návrhů a když si nejsem jistý, poradit se z někým nezávislým.

Na začátku je také třeba si uvědomit kde jsou moje možnosti. Uvědomit si, že celá hra bude v té kvalitě, ve které začnu. Čili je hezké, že se povede detailní koruna stromu, když potom nejsem schopný nakreslit stejně detailně kmen stromu. Povedená koruna potom paradoxně celkový výraz kazí. Je tedy důležité určit si na začátku jakýsi styl kresby, který budu schopen uchovat celou hru. Nemá cenu se přeceňovat.

Animace- ano či ne?

Hlavní postava by měla upoutat a animace je věc, která vám přidá procenta v udržení hráče u klávesnice. Přitom animace může být jednoduchá a přesto efektivní. Nemusí se hned jednat o 16-ti políčkovou realistickou chůzi. Skoro si myslím, že animaci postavy byste si měli dát jako první bojový úkol. :)
Dovolím si půjčovat grafiku z jiných her a na nich poukazovat na časté chyby a jak jim předejít. Nejdřív si vezmu na paškál JayJayovo Kevo. Konkrétně hlavní postavu, kterou je žlutý červ s čapkou Santy clause. Ano je to bizardní, ale pro účely imaginární hry to bude stačit. :)


Vlevo je originál a vpravo tak jak jsem se "popral" se zadáním já. První chyba kterou vidím vlevo je nevýraznost. Červ nemá žádné outliny (obrys) a to v tomto případě (ve většině případů) škodí. Já jsem naopak zvolil outliny té barvy kterou "obléhá", lehce tmavší. Dále jsem využil barvu stínu na světlejší outliny v místech kde dopadá světlo (vpravo). Stejně jsem tak učinil i na čepici. Tato verze působí jemněji. Červík pod ním má obrys celý černý. Je jen na vás nakolik dáte přednost buď výraznosti, nebo jemnosti. Já budu pracovat s tou první variantou.

Další problém tu je ve stínování. Zde je třeba buď představivosti a nebo nějakých zkušeností, jak se světlem pracovat. Zatímco vlevo těžko určíte nějaký tvar pomocí stínu byť je zde použita celé škála barev i s ditheringem, protože stínování je použito bez rozmyslu.
Já jsem namísto toho použil jednobarevný stín, kterým jsem zvýraznil tvar červa. Světlo svítí zprava, takže první na ráně je hlava, která je téměr celá světlá a navíc je to umocněno decentním odleskem. Každý další kulatý "faldík" je tmavší a s menším odleskem, tím jak ustupuje ze světla. Díky tomu jsem zvýraznil ustupující tělo. (postava není vidět přímo z boku).
Samotný tvar JayJayova Keva je celkem beztvarý. Takový žlutý flíček. Já jsem zvolil kulatější tvary, kterých se mohu krásně chytit a držet se jich celou hru. Pokuste se za každou cenu vyhnout té začátečnické kostrbatosti. A hrajte si s každým pixelem dokud nebude ladná (v některých programech křivku vytvoříte podobně jako rovnou čáru).
Nakonec jsem přidal očička pro přidání výrazu. Nepoužil jsem černou barvu, ale hodně tmavě žlutou. Do rohů jsem přidal antialiasing ve formě čtyř teček u každého oka, které ho zakulatili.

Animujme

A teď ona hrůzostrašná animace. Uvidíte sami, že je to směšně lehké. Stačí si dát reálné cíle. Červík je krásným příkladem.


A jak jsem dospěl k takové, pro někoho "nedosažitelné" animaci? Celkem má animace 16 obrázků (framů), ale základ tvoří 4.
Řekl jsem si, že pohyb červa nejlépe znázorním píďalkovitým pohybem. Odsouváním a přitahováním. Čili červ se postupně ve čtyřech framech zplošťuje a zároveň protahuje. Docílil jsem toho prostým přesouváním již hotového obrázku + dokreslováním vzniklých mezer. Tento proces ale musíte trochu promyslet, aby animace vypadala co nejvíce přirozeně.


První obrázek je neupravená statická verze. Černé linky jsou místa kde jsem obrázek posouval a šipka určuje směr. Šipky ukazují, že jsem se snažil postupovat při ubírání systematicky a rovnoměrně.
Tento základ stačí obrátit (reverse) a zkopírovat vložit za tyto čtyři. Animace se začne celkem přirozeně vracet na začátek (GM editor: tam stačí kliknout na animation- add reverse). Takto bychom mohli skončit, ale mě to nedá a přidám dva detaily, které animaci povznesou o level výše a nestojí zas tolik námahy. Jsou to oči (hýbající se hlava) a čapka (kýve se).

Začneme očima. Zde je jednoduchý fígl, který často používám. Stejně jako s vlastním tělem stačí oči jen postupně posouvat. Třetí frame jsem oči posunul o jeden pixel doprava a čtvrtý ještě o jeden- všimněte si, že levé oko je ted vidět více z úhlu a tedy je jakoby zploštělé (toto celé dělám pochopitelně jen se čtyřmi framy a pak opět použijeme add reverse- tak aby zbylo osm okének). Červík teď otáči hlavou doleva.

Udělat pohyblivou čapku bude o něco složitější, ale ne o moc. Opět třetí frame posuneme bílou kouli doleva (pokud otočíte hlavu doleva, koule letí doprava- z pohledu červa). A podle nové polohy dokreslíme čepici. A čtvrtý frame posuneme opět kouli a opět překreslíme konec čepice. Nezapomeneme, že koule je teď na světle a podle toho jí dokreslíme.


I teď bychom mohli skončit, ale mě to nedá a udělám stejným postupem jen opačně další animaci kde se červík otáčí (z jeho pohledu doprava) a oči jdou tedy doleva (pozor, levé oko je teď vidět zpříma a nakreslíme ho nezkreslené) a bambule čepice letí logicky na druho stranu a skryje se. (Tohle vše samozřejmě aplikujeme už na hotový základ 4 framů, které jsem si předtím pro jistotu nechali stranou.)


Tyto dvě animace spojíme buď ručně, nebo např. v programu beneton gif movie. A je to :)


Tak tohle je jen jedna z x milionu možností jak udělat hlavního hrdinu.



Příští díl: prostředí hry- tilesy.