Flash 5: škola hrou - Grafika.cz - vše o počítačové grafice

Navigace:  » Úvodní stránka  » Rubriky  » Webdesign  

1. července 2002, 00.00 | 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.

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 :-)