3. diel - TomBenova Akadémie v Game Makeru: Animovaný sprite

Snáď mi odpustíte, že ešte ani v tomto diele nezačneme nič programovať. Chcem sa totiž ešte trochu viac venovať grafike, pretože sme minule okradli druhý typ grafiky - sprite.

Ako vytvoriť a použiť sprite

V minulom dieli sme si skúsili nejstatičtější grafický prvok hry - background. Možnosti pohybu backgrounds sú veľmi obmedzené. Ak chceme zaujímavejšie pohyb alebo priamo animáciu, potrebujeme sprite. Ten sa však nedá len tak pridať k miestnosti ako pozadie. Sprite má byť vnútri nejakého objektu, ale nebojte sa, nie je to vôbec komplikované.

Jednoducho si založte nový objekt a v jeho okne nájdete okrem iného aj výber sprite. Každý objekt môže mať nejaký jeden sprite ako "svoj" a ten sa potom považuje za rozhodujúci pre mnoho vecí. Ak teda máte objekt s nastaveným sprite, bude sa s jeho prvým obrázkom (index 0) ukazovať aj v zozname pridávaní objektov u všetkých miestností. Urobte si teda miestnosť (zatiaľ používajte len jednu), vytvorte objekt a nastavte mu sprite. Potom ho v okne miestnosti (záložka objects) nájdete a vyberiete. Potom môžete klikať do plochy miestnosti a váš objekt sa tam bude vsádzať s každým tým klikom. Docela vtipne to vyzerá. Pozor, je tam zatržítko spôsobujúca automatické odmazanie objektu, keď cez neho kliknete iný (Delete lower).

Zatiaľ teda môžeme mať miestnosť plnú objektov reprezentovaných ich obrázkom, ale ak si vyrobíme exe alebo spustíme hru vnútri Game Makeru, nebudú objekty a ich sprites dočista nič robiť. Budú proste v miestnosti a to je všetko. Iná vec nastane, ak použijeme sprite, ktorý má v sebe viac obrázkov. To potom budú všetky takéto objekty automaticky svoje sprites animovať rýchlosťou room speed, ktorá je v miestnosti nastavená vo vlastnostiach. Na začiatku tam býva 30 a znamená to 30 snímok za sekundu.

Rýchlosť je však garantovaná len vtedy, keď má Game Maker k dispozícii dostatok strojového výkonu z hardware, na ktorom hru spúšťate. Ak chcete overiť aká je skutočnosť, spustite miestnosť v ladiacom režime (debug mode) tak, že namiesto zelenej šípky kliknete na tú červenú.

Získate okno navyše a do neho možno pridať ručne písaný riadok. Napíšte tam tri písmená "fps" a bude vám to písať priebežne aktuálny počet snímok, ktoré sa Game Makeru podarilo zobraziť. Hodnota ale nikdy neprekročí tú, ktorú ste nastavili ako room speed, preto pre testy nastavte veľa (napr. 300).

V ladiacim režime možno aktuálnu rýchlosť meniť aj priamo, ale k ladenie sa celkovo dostaneme až v niektorom z ďalších dielov.

Cvičenie

Schválne si skúste u priložené ukážky "smajl v pohybe" (k stiahnutiu na konci článku) meniť hodnotu room speed, aby ste videli, ako to reálne funguje a aké čísla sú vysoká. U vysokých rýchlostí môže nastávať stroboskopický jav, kde sa pohyb zdá byť opačný alebo sa zdanlivo zastaví.

Úpravy a tvorba sprite priamo v GM

Game maker má dve úrovne editácie obrázkov. Sprite editor a image editor. Prvé slúži na radenie snímok v animácii a grafické funkcie vie urobiť naraz pre všetky zábery. Druhý slúži na ručné kreslenie na bitmapové základe. Oba editory sú dosť silné na to, aby ste nemuseli pre kadejakú blbosť zapínať obrie softvér ako GIMP alebo Photoshop. Navyše jednoduchú animáciu vyrobíte jednoducho tak, že založíte niekoľko prázdnych snímok a do každého niečo namaľujete.

Editor vám vie ukázať náhľad v rôznych rýchlostiach prehrávanie. Niektoré ovládacie prvky sú trochu neobvyklé, a určite si prejdite v helpu klávesové skratky. Niektoré funkcie môžu byť nečakane účinné a keď si ich vyskúšate všetky postupne, budete príjemne prekvapení.

Na oba editory som začal písať návod už skôr, ale ešte som ho nikde nepublikoval. Teraz si ich tu môžete stiahnuť. Tí, ktorí nebudú robiť vlastnú grafiku alebo budú používať iný softvér, môžu asi preskočiť väčšiu časť návodu na Image Editor. Sprite Editor však budete potrebovať aj tak na rôzne úpravy a rozhodne neškodí sa naučiť obaja. Návody sú aj pri stručnom popise jednotlivých funkcií pomerne obsiahle, tak si na to nechajte dostatok času a správne duševné rozpoloženie.

Návody na Image Editor a Sprite Editor sú zabalené v priloženom zipsu a sú vo formáte .docx (Word 2010). Priložil som aj konverzia do staršieho .doc

(V popise Sprite Editore sa predpokladá znalosť tých funkcií, ktoré sú v zhodné ako v Image Editore)

Nastavenie externého editora miesto zabudované verzie

Ak zvolíte externý editor, je možné ho v GM nastaviť na automatické otváranie namiesto toho interného. Výsledok vyzerá tak, že kliknutím v Game Makeru na editáciu sa presuniete napríklad do GIMPu. Toto nastavenie nájdete v preferences-> editors. A funguje nielen pre grafiku, ale aj zvuky a písania kódu. Ja osobne ale tento princíp nepoužívam. Radšej s plným vedomím uložím a načítajú. Je to čisto vec zvyku.

Ľahšie cvičenia

Ak napríklad nemáte predstavu, ako by ste vôbec začali s kreslením vlastnej grafiky a navyše ešte animované, je pre vás toto cvičenie to pravé. Ostatní sa aspoň presvedčí, že to ide aj ľahko.

V prvom rade treba povedať, že animácia nemusí mať mnoho jednotlivých obrázkov. Vlastne stačí dva cyklovať dokola. Okrem ukážky, kde sa používa zrkadlenie vľavo-vpravo, je celý rad pohybov, kde vystačíte s dvoma snímkami. (Napr. Vyskočenie a ukrytie, jojo pohyb, otvorenie-zatvorenie atď.) Skúste nad tým porozmýšľať. Vyberte si nejaký námet a skúste si nakresliť dva obrázky podľa nasledujúceho postupu:

• Nakreslite obrys Game Maker, Photoshop, GIMP, čokoľvek ... 800x800 plátno, ostrá ceruzka veľkosť 20
• Vyfarbenie v Game Makeru: crop 0, stretch (High Quality) na 10%, vyfarbiť pomocou wand (tolerancia 44%)
• Tieňovanie (trochu ochudobnené, ale lepšie ako drôtom do oka) v Game Makeru: glow Black Inside žiadna Opacity (255) Size 4
• Nastavte sprite s dvoma obrázkami do nového objektu
• Položte do miestnosti, kde nastavíte rýchlosť na niečo okolo 3.

Pokiaľ ide zrovna o stranové prevráteniu, to sa urobí takto: kreslite alebo načítate jeden obrázok. Vo sprite editora dajte ctrl + ca ctrl + v, aby tam boli dva rovnaké snímky s indexmi 0 a 1. Jeden z zrkadlovo prevráťte (Mirror Horizontally) bez začiarknutia Apply to all .., ktoré by to vykonalo obom obrázkom. Možno budete musieť podľa obsahu trochu zaexperimentovať s parametrami, ale v zásade by to malo fungovať dobre. V priloženej ukážke "PixelArt" je príklad, ako to má vyzerať.

Ťažšie cvičenie

Do tohto pokusu sa pustite, ak ste sa úspešne prehrýzli aj tými Wordovskými návody, čo som tu nechal na stiahnutie. Inak by to nemalo veľký zmysel dokonca aj v prípade, že by ste uspeli. Treba si predovšetkým uvedomovať, čo vlastne robíte. Ak ste len zvedaví na výsledok, je to v prílohe už hotové ako "Animácia Kruhy".

Príprava základného sprite

Využijeme toho, že priamo v Game Makeru je možné celkom slušne vytvárať jednoduché obrázky priamo ako animované sprites. Vytvorte nový sprite veľký cca 200x200 a preklikajte sa do editácie obrázka. Nakreslite sýto modrú kružnici nástrojom z menu tak, aby kružnica bola presná (nie od ruky), pod farebnou paletou nájdete priehľadnosť (opacity), tam dajte hodnotu 100, čiže o niečo menej ako polovičná. Potom použite z menu funkciu Glow (znamená žiara) bledomodrá, priehľadnosť 255 (plná viditeľnosť), hrúbka 15 a nesmiete zatrhnúť zatržítko Place Inside, aby sa žiara vytvorila von z kruhu. Potom dávajte funkciu Blur (rozmazanie) v nastavení Large niekoľkokrát opakovane, až bude kružnice solídne rozostrena. Malo by to vyzerať nejako takto:

Animácie funkciami sprite editora v Game Makeru

> Tip: Ak chcete kresliť kružnici od stredu držte Ctrl

Po vytvorení kružnice vylezte z kreslenia aj zo Sprite editora (pomocou zelených zafajknutí možností, aby sa to rovno ukladalo). Z pravej myši dajte na sprite 3x funkciu Duplicate.

Mali by ste mať 4 rovnaké sprity (proste je zduplikujete). Otvorte prvý z nich az menu postupne dajte na 22 snímok funkciu Shrink-> Center, potom Disappear, Reverse, Disappear. Tým sa urobí zväčšujúce sa kruh, ktorý je na začiatku a na konci úplne priehľadný. U ďalšieho sprite urobte to isté na 25 snímok au tretieho na 27. Jeden si nechajte ako zálohu. Ak si zapnete náhľad, vidíte animáciu priamo vo sprite editore.

Teraz vytvorte tri nové objekty. Dajte im ten záložný sprite a poklikajte ich do miestnosti koľko zvládnete. Proste s nimi tú miestnosť zaplňte. Majte ich tam od každého z nich proste plno. Keď je ich dosť, zmeňte im sprite na tie animované kúsky, ktoré máte hotové. Nebudú naraz vidieť, pretože prvá snímka je u všetkých úplne priehľadný. Rýchlosť miestnosti (room speed) nastavte na 18.

No a pustite si to. Bude to robiť animovaná kolesá jedno cez druhé. Takým efektom už môžete podložiť napríklad hlavné menu - bude rozhodne vyzerať zaujímavejšie, keď sa tam bude niečo diať. Všetko máte nižšie k stiahnutiu.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.