Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!
Zadejte Vaši e-mailovou adresu:
Kamarád fotí rád?
Přihlas ho k odběru fotomagazínu!
Zadejte e-mailovou adresu kamaráda:
-
10. července 2024
-
5. září 2024
Matrixmedia - Obsluha a tisk na velkoformátových digitálních tiskárnách
-
15. července 2024
-
9. srpna 2024
-
10. září 2024
Kompakty
Flash 5: škola hrou
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 :-)
Obsah seriálu (více o seriálu):
- Flash 5: škola hrou
- Flash 5: Škola hrou II.
- Flash 5: Škola hrou III.
- flash 5: Škola hrou IV
- Flash MX: škola hrou V.
- Flash MX: Škola hrou VI.
- Flash MX: Škola hrou VII.
-
14. května 2014
Jak vkládat snímky do galerií a soutěží? Stručný obrazový průvodce
-
23. dubna 2014
Konica Minolta přenesla výhody velkých zařízení do kompaktních modelů
-
12. června 2012
-
9. dubna 2014
-
29. listopadu 2013
-
6. září 2004
OKI snižuje ceny barevných laserových tiskáren C3100 a C5200n
-
13. května 2004
-
19. ledna 2004
QuarkXPress Passport 6: předvedení nové verze na konferenci Apple Forum 27.1.2004
-
6. února 2001
-
30. listopadu 2014
Nový fotoaparát α7 II: první plnoformát s pětiosou optickou stabilizací obrazu na světě
-
5. srpna 2024
Bubnový scanner na 4000dpi optické rozlišení + PC + software
-
8. září 2024
-
22. září 2024