Lekce 3 - TomBenova Akademie v Game Makeru: Animovaný sprite

Snad mi odpustíte, že ještě ani v tomhle díle nezačneme nic programovat. Chci se totiž ještě trochu víc věnovat grafice, protože jsme minule ošidili druhý typ grafiky – sprite.

Jak vytvořit a použít sprite

V minulém díle jsme si zkusili nejstatičtější grafický prvek hry – background. Možnosti pohybu backgrounds jsou velmi omezené. Pokud chceme zajímavější pohyb nebo přímo animaci, potřebujeme sprite. Ten se ovšem nedá jen tak přidat k místnosti jako background. Sprite musí být uvnitř nějakého objektu, ale nebojte se, není to vůbec komplikované.

Jednoduše si založte nový objekt a v jeho okně najdete kromě jiného i výběr sprite. Každý objekt může mít nějaký jeden sprite jako „svůj“ a ten se pak považuje za rozhodující pro mnoho věcí. Pokud tedy máte objekt s nastaveným sprite, bude se s jeho prvním obrázkem (index 0) ukazovat i v seznamu přidávání objektů u všech místností. Udělejte si tedy místnost (zatím používejte jen jednu), vytvořte objekt a nastavte mu sprite. Pak ho v okně místnosti (záložka objects) najdete a vyberete. Pak můžete klikat do plochy místnosti a váš objekt se tam bude sázet s každým tím klikem. Docela vtipně to vypadá. Pozor, je tam zatržítko způsobující automatické odmazání objektu, když přes něj kliknete jiný (Delete underlying).

Zatím tedy můžeme mít místnost plnou objektů reprezentovaných jejich obrázkem, ale pokud si vyrobíme exe nebo spustíme hru uvnitř Game Makeru, nebudou objekty a jejich sprites dočista nic dělat. Budou prostě v místnosti a to je všechno. Jiná věc nastane, pokud použijeme sprite, který má v sobě více obrázků. To pak budou všechny takové objekty automaticky svoje sprites animovat rychlostí room speed, která je v místnosti nastavena ve vlastnostech. Na začátku tam bývá 30 a znamená to 30 snímků za vteřinu.

Rychlost je ovšem garantována jen tehdy, když má Game Maker k dispozici dostatek strojového výkonu z hardware, na kterém hru spouštíte. Pokud chcete ověřit jaká je skutečnost, spusťte místnost v ladicím režimu (debug mode) tak, že místo zelené šipky kliknete na tu červenou.

Získáte okno navíc a do něj lze přidat ručně psaný řádek. Napište tam tři písmena „fps“ a bude vám to psát průběžně aktuální počet snímků, které se Game Makeru podařilo zobrazit. Hodnota ale nikdy nepřekročí tu, kterou jste nastavili jako room speed, proto pro testy nastavte hodně (např. 300).

V ladícím režimu lze aktuální rychlost měnit i přímo, ale k ladění se celkově dostaneme až v některém z dalších dílů.

Cvičení

Schválně si zkuste u přiložené ukázky „Smajl v pohybu“ (ke stažení na konci článku) měnit hodnotu room speed, abyste viděli, jak to reálně funguje a jaká čísla jsou vysoká. U vysokých rychlostí může nastávat stroboskopický jev, kde se pohyb zdá být opačný nebo se zdánlivě zastaví.

Úpravy a tvorba sprite přímo v GM

GameMaker má dvě úrovně editace obrázků. Sprite editor a image editor. První slouží k řazení snímků v animaci a grafické funkce umí udělat najednou pro všechny snímky. Druhý slouží k ručnímu kreslení na bitmapovém základě. Oba editory jsou dost silné na to, abyste nemuseli pro kdejakou blbost zapínat obří software jako GIMP nebo Photoshop. Navíc jednoduchou animaci vyrobíte prostě tak, že založíte několik prázdných snímků a do každého něco namalujete.

Editor vám umí ukázat náhled v různých rychlostech přehrávání. Některé ovládací prvky jsou trochu neobvyklé, a určitě si projděte v helpu klávesové zkratky. Některé funkce mohou být nečekaně účinné a když si je vyzkoušíte všechny postupně, budete příjemně překvapeni.

Na oba editory jsem začal psát návod už dříve, ale ještě jsem ho nikde nepublikoval. Teď si je tady můžete stáhnout. Ti, kteří nebudou dělat vlastní grafiku nebo budou používat jiný software, mohou asi přeskočit větší část návodu na Image Editor. Sprite Editor ovšem budete potřebovat i tak na různé úpravy a rozhodně neškodí se naučit oba. Návody jsou i při stručném popisu jednotlivých funkcí poměrně obsažné, tak si na to nechte dost času a správné duševní rozpoložení.

Návody na Image Editor a Sprite Editor jsou zabaleny v přiloženém zipu a jsou ve formátu .docx (Word 2010). Přiložil jsem i konverze do staršího .doc

(v popisu Sprite Editoru se předpokládá znalost těch funkcí, které jsou v shodné jako v Image Editoru)

Nastavení externího editoru místo zabudované verze

Pokud zvolíte externí editor, je možné ho v GM nastavit na automatické otvírání místo toho interního. Výsledek vypadá tak, že kliknutím v Game Makeru na editaci se přesunete například do GIMPu. Toto nastavení najdete v preferences->editors. A funguje nejen pro grafiku, ale i zvuky a psaní kódu. Já osobně ale tenhle princip nepoužívám. Radši s plným vědomím uložím a načtu. Je to čistě věc zvyku.

Snazší cvičení

Pokud třeba nemáte představu, jak byste vůbec začali s kreslením vlastní grafiky a navíc ještě animované, je pro vás tohle cvičení to pravé. Ostatní se alespoň přesvědčí, že to jde i snadno.

V první řadě je třeba říct, že animace nemusí mít mnoho jednotlivých obrázků. Vlastně stačí dva cyklovat dokola. Kromě ukázky, kde se používá zrcadlení vlevo-vpravo, je celá řada pohybů, kde vystačíte se dvěma snímky. (např. vyskočení a ukrytí, jojo pohyb, otevření-zavření atd.) Zkuste nad tím popřemýšlet. Vyberte si nějaký námět a zkuste si nakreslit dva obrázky podle následujícího postupu:

• Nakreslete obrys Game Maker, Photoshop, GIMP, cokoli...
  800x800 plátno, ostrá tužka velikost 20
• Vybarvení v Game Makeru: crop 0, stretch ( High Quality ) na 10%,
  vybarvit pomocí wand ( tolerance 44% )
• Stínování ( trochu ošizené, ale lepší než drátem do oka )
  v Game Makeru: glow Black Inside žádná Opacity (255) Size 4
• Nastavte sprite s dvěma obrázky do nového objektu
• Položte do místnosti, kde nastavíte rychlost na něco okolo 3.

Pokud jde zrovna o stranové převrácení, to se udělá takto: Nakreslíte nebo načtete jeden obrázek. Ve sprite editoru dejte ctrl+c a ctrl+v, aby tam byly dva stejné snímky s indexy 0 a 1. Jeden z zrcadlově převraťte ( Mirror Horizontally ) bez zatržítka Apply to all.., které by to provedlo oběma obrázkům. Možná budete muset podle obsahu trochu zaexperimentovat s parametry, ale v zásadě by to mělo fungovat dobře. V přiložené ukázce „PixelArt“ je příklad, jak to má vypadat.

Těžší cvičení

Do tohoto pokusu se pusťte, pokud jste se úspěšně prokousali i těmi Wordovskými návody, co jsem tady nechal ke stažení. Jinak by to nemělo valný smysl dokonce i v případě, že byste uspěli. Je třeba si především uvědomovat, co vlastně děláte. Pokud jste jen zvědavi na výsledek, je to v příloze už hotové jako „Animace Kruhy“.

Příprava základního sprite

Využijeme toho, že přímo v Game Makeru je možné celkem slušně vytvářet jednoduché obrázky přímo jako animované sprites. Vytvořte nový sprite veliký cca 200x200 a proklikejte se do editace obrázku. Nakreslete sytě modrou kružnici nástrojem z menu tak, aby kružnice byla přesná (ne od ruky), pod barevnou paletou najdete průhlednost (opacity), tam dejte hodnotu 100, čili o něco méně než poloviční. Pak použijte z menu funkci Glow (znamená záře) v bleděmodré barvě, průhlednost 255 (plná viditelnost), tloušťka 15 a nesmíte zatrhnout zatržítko Place Inside, aby se záře vytvořila vně kružnice. Pak dávejte funkci Blur (rozmazání) v nastavení Large několikrát opakovaně, až bude kružnice solidně rozostřená. Mělo by to vypadat nějak takto:

Animace funkcemi sprite editoru v Game Makeru

>Tip: Pokud chcete kreslit kružnici od středu držte Ctrl

Po vytvoření kružnice vylezte z kreslení i ze Sprite editoru (pomocí zelených zatržítek, aby se to rovnou ukládalo). Z pravé myši dejte na sprite 3x funkci Duplicate.

Měli byste mít 4 stejné sprity (prostě je zduplikujete). Otevřete první z nich a z menu postupně dejte na 22 snímků funkci Shrink->Center, pak Disappear, Reverse, Disappear. Tím se udělá zvětšující se kruh, který je na začátku a na konci zcela průhledný. U dalšího sprite udělejte totéž na 25 snímků a u třetího na 27. Jeden si nechte jako zálohu. Pokud si zapnete náhled, vidíte animaci přímo ve sprite editoru.

Teď vytvořte tři nové objekty. Dejte jim ten záložní sprite a poklikejte jich do místnosti kolik zvládnete. Prostě s nimi tu místnost zaplňte. Mějte jich tam od každého z nich prostě plno. Když je jich dost, změňte jim sprite na ty animované kousky, které máte hotovy. Nebudou najednou vidět, protože první snímek je u všech zcela průhledný. Rychlost místnosti (room speed) nastavte na 18.

No a pusťte si to. Bude to dělat animovaná kola jedno přes druhé. Takovým efektem už můžete podložit například hlavní menu – bude rozhodně vypadat zajímavěji, když se tam bude něco dít. Vše máte níže ke stažení.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.