Flash 5: škola hrou

Flashové hry jsou dnes velmi aktraktivní součástí webdesignu. Jak složitá je jejich příprava? Pojďme si tvorbu jedné hry projít krok za krokem.

01.07.2002   Luděk Salamánek   Webdesign   Tutoriál  

Jistě jste se setkali s nějakou více či méně zdařilou hrou a možná vás zajímá, jak se vlastně dá něco podobného vytvořit. Pokud ano, nejste první ani poslední, mne samého se pár lidí ptalo - je to složité? Dokážu to také? V našem seriálu se na pár zdařilejších kousků podíváme, rozebereme je do detailu, aby porozuměl i začátečník. Těch bude asi většina.

Říká se, že hry patří mezi nejnáročnější aplikace. Pojďme se tedy podívat, jak to ve skutečnosti je.
A začněme od klasiky – autíčka. Tvořit budeme toto:

Je to poměrně jednoduchá věc - zatím toho moc neumí, časem ji budeme měnit k dokonalosti. Klepněte na hru myší, aby auto reagovalo na stisky kurzorových kláves vaší klávesnice a můžete testovat. Velikou předností flashe je minimální velikost souborů. Tento má 1,6 KB!

Zdrojový soubor si stáhněte: rally.fla

Vytvořit se dá snadno: scéna o velikosti 450x450, frame rate nastaven na 24 fps (CTRL+M). Nakreslíme trať, vytvoříme z ní movie clip jména WAY (F8), instanci pojmenujeme WAY (CTRL+I), na pozici frame 12 vložíme stiskem F5 další frame - a trať bude přístupná pro prvních 12 framů. Vložíme novou vrstvu (insert/layer), nakreslíme v ní auto, vytvoříme z něj MC CAR, instanci pojmenujeme stejně, ať se nám to neplete. Opět protáhneme do frame 12. Vložíme další vrstvu a ...

... a zábava začíná:

Flash provádí příkazy action scritpu uvedené na snímcích 10-12. Snímek 12 jej vrací na snímek 10 a je tedy vytvořena smyčka - neustále se provádějí příkazy snímků 10, 11, 10, 11, 10, 11... až do zblbnutí ... pardon - do nekonečna, já zapomněl - počítač nezblbne. Kam se poděl snímek 12? Flash jej sice provede (jinak by se nedostal na desítku), ale tak nějak zároveň s desítkou. Ale to je detail, kterým se teď rozhodně zabývat nebudeme.

FRAME 10:

if (Key.isDown(Key.UP)) {
way.spd += 1;
}
if (Key.isDown(Key.DOWN)) {
way.spd -= 1;
}

Proč jsme začali až na frame 10? Protože jednou budeme chtít vytvořit nějaký úvod, intro, preloader, a budeme tedy potřebovat trochu místa. Action script daného snímku si zobrazíte stiskem CTRL+ALT+A. Obsahuje jednoduchou podmínku:

když (je stlačena klávesa/klávesa.nahoru/) {
    pokračuj zde;
}
atd...

přeložím do lidštiny: je-li stlačena odpovídající klávesa, stane se toto:
- proměnná spd, která je použita v objektu way, se zvýší/sníží o hodnotu 1

Pozn.: Je-li nějaká proměnná použita v nějakém objektu (není na hlavní ose) a my na ni odkazujeme z jiného objektu nebo z hlavní časové osy (náš případ), musíme na ni odkázat tímto způsobem. Kdybychom to neudělali, flash by danou proměnnou hledal v místě, ze kterého na ni odkazujeme - na hlavní časové ose (v našem případě). Pokud neodkazujeme z hlavní časové osy, musíme odkazovat na _root.way.spd. Ti zkušenější se začínají nudit, takže pokračujeme.

 FRAME 11:

way.hitTest(225, 225, 1) ? way.spd /= way.mspd : way.spd /= 1.4;

Jde o další podmínku, tentokrát ve zkráceném tvaru - díky tomu je rychleji zpracována a o to nám přeci jde. Výkonu počítače není nikdy dost!

Syntaxe podmínky:

podmínka ? je-li splněna proveď toto : není-li splněna proveď toto;

Příkaz hitTest testuje, je-li bod na souřadnicích 225x225 (uprostřed scény) v kontaktu s objektem way. Pokud ano, změní se hodnota proměnné spd v objektu way na spd/mspd.

Proč to testujeme? Protože v prostředku máme auto a nepojede-li auto po trati, tak ho trochu přibrzdíme. Naše mspd má hodnotu 1,11 - pomocí této proměnné můžeme regulovat maximální rychlost auta (proto mspd - jako max speed).

 Nechci vás zbytečně zatahovat do podrobností, takže detaily o příkazu hitTest si povíme jindy.

FRAME 12:

gotoAndPlay (10);           //jdi na frame 10 a pokračuj

Než se pustíme dál, shrneme si předchozí. Podle kláves nahoru/dolu bude růst/klesat hodnota proměnné spd. Pokud bude auto na trati, dovolíme mu určitou omezenou rychlost. Bude-li mimo trať, trochu je přibrzdíme.

Zatím jsme se věnovali frame scriptu. Scripty mohou být také na objektech. Myší klepněte na objekt way a vyvolejte script (CTRL+ALT+A).

Jen klid - to je skutečně jednoduchý script. Akce na objektech mají tu vlastnost, že se provádějí při každém snímku časové osy. A taky jsou mírně rychlejší (za jistých předpokladů - o tom až jindy).

Takže co tady máme:

onClipEvent (load) {
dir = 180;
// 90 doleva, 270 doprava
mspd = 1.11;
// 1.15-1.04?
}

Tato část scriptu se provede jen jednou - při načtení objektu. Konkrétně jde o část mezi { }. To, co je za // jsou poznámky - flash je při výkonu ignoruje. Proměnné dir jsme přiřadili hodnotu 180, proměnné mspd hodnotu 1.11.

onClipEvent (enterFrame) {
if (Key.isDown(Key.RIGHT)) {
dir += spd/1.3;
}
if (Key.isDown(Key.LEFT)) {
dir -= spd/1.3;
}
if (spd>1) {
dirX = Math.sin((Math.PI/180)*dir)*spd;
dirY = Math.cos((Math.PI/180)*dir)*spd;
this._x += dirX;
this._y -= dirY;
}
_root.car._rotation = dir;
}

Opět se provádí část mezi { }, a to při každém snímku hlavní časové osy, kde je náš objekt dostupný (frame 1-12). Je-li stlačena klávesa vpravo ... proč se ale namáhám, vždyť tohle už umíte!

Další podmínka:

když spd>1 {
...

Do proměnné dirX se pomocí funkce sinus vypočte změna polohy tratě v ose X v závislosti na směru auta (proměnná dir) a na rychlosti (proměnná spd).

this._x += dirX;   znamená, že souřadnice osy X tohoto objektu (jsme na objektu instance way) se změní o hodnotu proměnné dirX.

_root.car._rotation = dir;   znamená, že objekt car (odkazujeme z objektu na jiný objekt ležící v rootu, proto je použit odkaz _root.car) vytvoří úhel podle hodnoty proměnné dir.

Toto vše se provádí za předpokladu, že spd>1. Vyhneme se tím podivuhodnostem při velmi pomalé jízdě.

V tomto objektu by mohl být umístěn script z hlavní časové osy - nemuseli bychom na ní vytvářet smyčku. Proměnné použité na hlavní časové ose jsou stejně umístěny v objektu way, takže by výpočet mohl být i trochu rychlejší. Ovšem oba snímky hlavní timeline by se prováděly najednou v každém frame, tzn. 24x do vteřiny. V našem případě jsme ušetřili něco málo výkonu PC, každý frame se vypočte 12x do vteřiny a navíc to není na hře samé vůbec poznat. Teď si asi říkáte - to jsme toho teda ušetřili. Časem uvidíte, že se vyplatí na podobných místech šetřit výkon - čím více scriptů, tím více úspory. Kromě toho hlavní časovou osu stejně využijeme pro psaní jiných scriptů.

Na začátek to bude stačit. V příštím díle autu naordinujeme trochu smyků. Máte-li nějaké dotazy/připomínky - sem s nimi...
... vlastně do diskuse s nimi :-)