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

9. července 2002, 00.00 | Výuka pokračuje. Mnohým z vás při těchto slovech naskakuje husí kůže, ale vězte, že my si hlavně hrajeme. Dnešní podtitul: Škola smyků.

V minulém dílu jsme vytvořili základ jednoduché hry. Naše auto reaguje na kurzorové klávesy a pohybuje se po trati ve směru jízdy. Přesněji řečeno pohybuje se trať, auto stojí uprostřed scény.

Začneme od slibovaných smyků. Podstata smyku spočívá v jízdě v jiném směru než je směr auta. Dosáhnout toho můžeme dvojím způsobem:

script na objektu WAY nyní vypadá takto:

onClipEvent (load) {
dir = 180;
// 90 doleva, 270 doprava
smyk = dir;
mspd = 1.11;
// 0.15-0.04?
tire = 1.2;
// 0.5-4
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.RIGHT)) {
dir += spd/1.3;
}
if (Key.isDown(Key.LEFT)) {
dir -= spd/1.3;
}
if (math.abs(spd)>1) {
smyk += (dir-smyk)/math.abs(spd)*tire;
dirX = Math.sin((Math.PI/180)*smyk)*spd;
dirY = Math.cos((Math.PI/180)*smyk)*spd;
this._x += dirX;
this._y -= dirY;
} else {
dirX = 0;
dirY = 0;
}
_root.car._rotation = dir;
_root.sipka._rotation = smyk;
}

Přidaný řádek "smyk += (dir-smyk)/math.abs(spd)*tire;" způsobí, že proměnná smyk se bude měnit v závislosti na měnícím se rotačním úhlu auta dir a co je důležité - bude se měnit pomaleji, než rotace auta. V jakém směru auto pojede, bude záležet právě na této proměnné. Přesněji řečeno na proměnné smyk bude záviset změna souřadnic objektu way (auto se nepohybuje, stojí uprostřed scény). Čím větší bude rychlost, tím pomaleji se bude úhel měnit. Pojede-li auto pomalu, úhel se bude téměř rovnat úhlu rotace auta, neboť proměnná spd bude téměř 1. Naopak pojede-li auto rychle, úhel směru se bude blížit k úhlu rotace pomaleji. Uff ... těžko se to vysvětluje, jestli někdo nechápe - napsat do diskuse.

Také záleží na proměnné tire, která by mohla vyjadřovat kvalitu obutí. Čím větší tire, tím lepší gumy auto má (u druhé metody je to obráceně).

V ukázce můžete otestovat změnu obutí a rychlosti. Brzy zjistíte, že tento způsob smyku je sice jednoduchý, ale při větší akci vypadá tak nějak divně (zkrátka blbě). Zbytek scriptu jsme rozebrali v předchozím dílu seriálu.

Hlavní rozdíl spočívá v tom, že smyk není tvořen v přímé vazbě na směr jízdy, ale na souřadnice x, y. Úhel slouží jen jako cíl změny těchto souřadnic.

Dále jsme přesunuli script z hlavní timeline do objektu way. Tento script se prováděl 12x do vteřiny a my jsme ušetřili výkon PC. Všimněte si ale, že v této 2. metodě je podmínka Key.UP trochu složitější. Flash by musel z hlavní timeline "šahat" do objektu way pro proměnné spd, wayX, wayY a ještě testovat srážku s objektem way. Věřte mi, testoval jsem to a na objektu way je tento kousek scriptu rychlejší než v _root a to i přesto, že běží 24x a ne 12x. Já vím, jsem detailista :-).

Script objektu way vypadá takto:

onClipEvent (load) {
dir = 180;
// 90 doleva, 270 doprava
mspd = 1.11;
// 0.15-0.04?
tire = 1.2;
// 0.5-4
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.RIGHT)) {
dir += 2+spd/2;
}
if (Key.isDown(Key.LEFT)) {
dir -= 2+spd/2;
}
if (Key.isDown(Key.UP)) {
spd += 0.9;
} else if (this.hitTest(225, 225, 1)) {
spd = Math.sqrt((wayX*wayX)+(wayY*wayY))/1.1;
}
if (Key.isDown(Key.DOWN)) {
spd /= 1.6;
}
if (spd>0.2) {
dirX = Math.sin((Math.PI/180)*dir)*spd;
dirY = Math.cos((Math.PI/180)*dir)*spd;
wayX += (dirX-wayX)/spd/tire;
wayY += (dirY-wayY)/spd/tire;
this._x += wayX;
this._y -= wayY;
this.hitTest(225, 225, 1) ? spd /= mspd : spd /= 1.4;
}
_root.car._rotation = dir;
_root.sipka._rotation = 70+Math.sqrt((wayX*wayX)+(wayY*wayY))*15
}

Začíná to vypadat děsivě. Zrychlený popis scriptu:

dir - směr auta při startu hry
mspd - max. rychlost
tire - koeficient kvality gum
...
...
když je stisknuta klávesa UP {
    zvyšuj rychlost
} jinak když (way protíná bod uprostřed scény - auto na trati) {
    úprava rychlosti - auto pomalu zastavuje
}
...
když (spd>0,2) {
    - určení nové polohy do proměnných dirX a dirY v závislosti na spd a dir
    - určení nové polohy do proměnných wayX a wayY v závislosti na dirX, dirY, spd a tire
    - změna polohy tohoto objektu (jsme v objektu way) podle wayX a wayY
    - stanovení rychlosti podle toho, je-li auto na trati nebo mimo trať.
}
- stanovení rotace podle proměnné dir
- stanovení rotace objektu sipka podle vzorce pro výpočet vzdálenosti dvou bodů (Pythagorova věta a² + b² = c² ). Těmito body je předchozí a současná poloha objektu way, která se každý snímek mění o velikost wayX (v ose X) a wayY (v ose Y).

Popis použití hitTest

Jak již víte, hitTest detekuje kolize dvou movie clipů. Např. _root.way.hitTest(225, 225, 1) bude vracet hodnotu 1 v případě, že objekt way bude v bodě určeném souřadnicemi 225 X 225. Třetí parametr příkazu má hodnotu 1 (pravda) nebo 0 (nepravda), a určuje, zda se při testování bere v úvahu grafický tvar objektu (1), nebo ohraničující obdélník (0).

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

Tento příklad je podmínka, která by se také dala zapsat takto:
this.hitTest(225, 225, 1) == 1 ? spd /= mspd : spd /= 1.4;

nebo třeba takto:
if (this.hitTest(225, 225, 1)) {
    spd /= mspd;
} else {
    spd /= 1.4;
}

Podmínka zkrátka testuje, zda testovaný výraz je pravda. Existuje ještě jeden způsob použití hitTest. Např. way.hitTest(car) bude pravda v případě, že ohraničující obdélníky objektů car a way budou protnuty.

Co dodat? Druhá metoda vypadá mnohem lépe, ale procesor se při ní víc zapotí. První metoda se dá použít v případě drobných smyků - nebude nic poznat. V ukázce druhé metody je vidět počet snímků za vteřinu. Jde o objekt fps se scriptem přímo v objektu. Stáhněte si rally4.fla, nastavte přehrávání flashe na 120 fps a můžete testovat, jak rychle je PC schopen hru přehrávat. Na mém PIII 880 Mhz běží na cca 60 fps.

Výše popsané postupy nemusí být ty nejideálnější. Je to prostě to nejlepší, co mne napadlo a pokud má někdo jiný nápad, doufám, že se o něj podělí se spolužáky :-).

Příště zjistíme, jak zamezit zkracování tratě, jak počítat ujetá kola, čas a možná ještě něco navíc. Pokud vás napadne nějaké lepší téma, svěřte se prosím v diskusi.