Programujete rádi hry aneb jak na kolize objektů?

24. září 2001

•

Verze Flashe číslo 5 nám velmi ulehčila programování her a případných kolizí ve scénách. V následujících řádcích vám ukáži a vysvětlím, jak lze jednoduše ve Flashi naprogramovat kolizi několika objektů. V této první části si vysvětlíme, jak funguje kolize dvou Movie clipů.

Nastavení scény provedeme v okénku Movie Properties (ctrl+M). Velikost plochy ponecháme na standartní velikosti 550x400px, barvu pozadí ponechám bílou. Jenom pro rychlejší přehrávání nastavím počet na 30 framů/s.

obr_1

Pro následující ukázku si připravíme dva Movie clipy (MC). Stisknutím kláves (ctrl+F8) si vytvoříme první MC, který nazveme „koule“. Nástrojem Oval Tool (O) si namalujeme kružnici o libovolné velikosti, neboť její velikost si upravíme po přenesení tohoto MC z knihovny na plochu. Vyplníme přechodovým radiálním gradientem (K). Já jsem si zvolil přechod z černé do bílé. Tuto kuličku vycentrujeme na střed plochy pomocí funkce Align (ctrl+K).

obr_2

Nyní si vytvoříme druhý MC (ctrl+F8), který nazveme „okraj“. Nakreslíme si jednoduchý obdélníček nástrojem čtverec (R) červené barvy. Velikost si opět upravíme na ploše. Tímto jsme si připravili základní stavební prvky a nyní vše přeneseme na plochu a rozpohybujeme. Vrátíme se do hlavní scény. Z knihovny si přeneseme na plochu nejdříve MC „koule“ a v panelu Instance (ctrl+I) jej pojmenujeme „kulicka“.

obr_3

Nastavíme si její velikost v panelu Info (ctrl+alt+i) na hodnoty 20 x 20 px. Nyní si přeneseme druhý MC – „okraj“ do plochy. Protože jej použijeme víckrát, nastavíme si je postupně. Jejich názvy jsem volil podle umístění vzhledem ke středu plochy. Jako první si vytvoříme horní odrazovou plochu, kterou si nazveme v panelu Instance (ctrl+I) „horni“. V panelu Info (ctrl+alt+i) nastavíme její velikost 550 x 20 px a pomocí panelu zarovnání Align (ctrl+K) zarovnáme na střed a nahoru.

obr_4

Postupně si vytvoříme další instance – „dolni“, „vlevo“, „vpravo“. U dvou posledně jmenovaných nastavíme v panelu Info (ctrl+alt+i) velikost 20 x 400 px a zarovnáme je na střed a doleva (příp. doprava).

Nyní si vytvoříme nový layer. Pravým tlačítkem myši nad prvním políčkem si nyní vložíme akce. Nastavíme vstupní hodnoty pro pohyb kuličky.

rychlost_x = 8;
rychlost_y = 8;

Levým tlačítkem myši označíme třetí políčko a stiskem tlačítka F6 si vytvoříme klíčové políčko pro vložení dalších akcí. Tyto akce přemisťují kuličku po ploše a nastavují její polohu – souřadnice.

kulicka._x = getProperty(kulicka,_x)+rychlost_x;
kulicka._y = getProperty(kulicka,_y)+rychlost_y;
gotoAndPlay (_currentframe-1);

Když by jste si v tuto chvíli chtěli zkusit spustit animaci (ctrl+Enter), zjistíte, že kulička vám za chvíli zmizí nenávratně z obrazovky. Co způsobuje, že se nám kulička neodráží v omezeném prostoru? Odpověď budeme hledat v programování kolize dvou objektů. Nyní si pro každý okraj naprogramujeme akce na tomto MC (object actions). Stiskem pravého tlačítka myši nad instancí „horní“ vyvoláme menu a zvolíme si položku Object actions.

obr_5

Nyní zadáme akce na objektu:

onClipEvent (enterFrame) {
if (this.hitTest(_root.kulicka)) {
_root.rychlost_y = -_root.rychlost_y;
kulicka._x = getProperty(kulicka,_x)+rychlost_x;
kulicka._y = getProperty(kulicka,_y)+rychlost_y;
}
}

V druhém řádku dochází k vyhodnocení kolize dvou objektů. MC objekt „horní“ (this) je testován na překrytí druhým objektem, což v tomto případě je MC „kulicka“. Pokuď dojde ke splnění podmínky, platí příkazy ve složené závorce, které mi vrací opačnou hodnotu pro y-rychlost a zároveň dochází k posunu objektu ve směru nových hodnot. Tím je zaručeno, že nám nedojde k neočekávaným posunům, kde testujeme kolizi více MC.

Při testování kolizí vás musím upozornit na následující jev, jak ukazuje následující obrázek. Jak vidíte, ačkoliv nedochází k přímému kontaktu dvou objektů, počítač by tuto situaci vyhodnotil už jako kolizi, protože dochází k překrývání obrysů. S tímto jevem musíte při plánování kolizí počítat a přizpůsobit buď výpočet nebo tvar objektů.

obr_6

Při zadávání akce na objektu postupujeme stejně také v případě MC „dolní“, kde zadáme stejné akce. Pro zadání akcí na objekt „vlevo“, případně „vpravo“ postupujeme obdobným způsobem s tím rozdílem, že potřebujeme vracet opačnou hodnotu pro x-rychlost.

onClipEvent (enterFrame) {
if (this.hitTest(_root.kulicka)) {
_root.rychlost_x = -_root.rychlost_x;
kulicka._x = getProperty(kulicka,_x)+rychlost_x;
kulicka._y = getProperty(kulicka,_y)+rychlost_y;
}
}

Tím máme vše připraveno a můžeme si spustit kontrolu animace klávesami (ctrl+Enter). Zdrojový soubor je možný stáhnout zde.