Info lectie

Nivel: Incepator/Mediu

Versiune Flash: MX, MX 2004

Timp necesar: 1 & 1/2 Ore

Descriere: Aceasta lectie trateaza un joc de curse "contra timp". Dupa terminare, iti vei putea crea propriul joc de curse cu propriile trasee, ciocniri, recorduri si altele.

Cuprins:

Pasul 1: Miscarea masinii

Pasul 2: Coliziuni

Pasul 3: Tururi si Cronometrare

Pasul 4: Artificii Grafice

Info pasul

In continuare: In aceasta parte a lectiei vei invata despre coliziuni/ciocniri.

Nu coliziuni cu alte masini (nu inca) ci coliziuni cu traseul.

Lectia Joc de Curse in Flash - Partea I Miscare si Coliziuni - Pasul 2

Descarca racing_part1_step2.fla

1. Stim cu totii de ce coliziunile sunt importante intr-un joc de curse... Pentru ca nu vrem ca masina sa paraseasca traseul, pentru ca vrem ca jucatorul sa mearga pe un anumit drum, pentru ca vrem ca el/ea sa evite coliziunile pentru a obtine un timp cat mai bun (sau sa castige cursa).

Coliziunile sunt o parte foarte importanta a unui joc de curse. 70% din succesul si "feeling-ul" jocului depinde de coliziuni bine realizate.

Nu vrem ca masina sa ramana blocata in zonele interzise (ZI), nu vrem ca masina sa piarda toata viteza cand abia atinge aceste zone si cu siguranta nu vrem sa sara inapoi (inversand viteza).

Cu alte cuvinte nu vrem sa facem jucatorului viata grea, ci dimpotriva, vrem sa aducem un joc placut. Asadar cand masina atinge ZI trebuie sa incercam sa ii corectam traiectoria si bineinteles sa aplicam o penalitate de viteza in functie de unghiul coliziunii si de durata acesteia.

2. Deschide fisierul racing_part1_step2.fla care vine cu aceasta lectie.

3. Inainte de a ne intoarce la functia "step", voi explica cum functioneaza coliziunile.

Patru puncte pentru detectarea coliziunilor

Dupa cum poti vedea in imaginea alaturata, vom alege patru puncte, cate unul pe fiecare parte a masinii si vom verifica daca vreunul dintre ele "atinge" ZI.

De exemplu, daca pe partea stanga, Left Side Point este in interiorul ZI (atinge ZI) atunci va trebui sa aplicam o penalizare de viteza si sa crestem unghiul (_rotation) masinii. De ce facem asta? Am discutat mai devreme: trebuie sa incercam sa corectam traiectoria masinii. Deci ceea ce facem aici este sa fortam masina sa vireze la dreapta.

OK, cred ca totul este clar pana la acest punct. Si daca tot vorbim de puncte, hai sa vedem cum le putem calcula coordonatele. Pentru a simplifica lucrurile vom lua ca exemplu punctul din stanga Left Side Point.

Cand rotatia masinii este 0, sarcina noastra este foarte simpla: coordonatele LSP sunt x=car._x-20 (20 de pixel la dreapta fata de centrul masinii) si y=car._y

Dar masina nu va avea mereu unghiul 0. Ei bine, aici vine partea mai delicata. Exista cateva metode prin care se pot calcula coordonatele celor patru puncte chiar daca unghiul nu este 0 (de exemplu putem folosi functiile sinus si cosinus) iar pentru acest tutorial voi alege o metoda simpla (nu stiu daca este metoda optima, dar este cu siguranta foarte simpla):

Definim Left Side Point ca si cand rotatia masinii ar fi 0:

car.pointLeft = {x:-20, y:0}; //acesta este un Object (Obiect)

si transpunem coordonatele punctului din local (legate de clipul masina) in global (relativ la _root, unde vom verifica coliziunile):

car.localToGlobal(car.pointLeft);

Acum avem coordonatele Left Side Point pe care le putem folosi pentru a verifica coliziunile::

car.pointLeft.x si car.pointLeft.y

Poate fi mai simplu de atat? :)

4. Si din nou ne intoarcem la fereastra Actions. Click pe primul frame din layerul "actions" si daca fereastra Actions nu este deschisa apasa F9 pentru a o deschide.

Vei observa ca am adaugat cateva linii la functia "step" si probabil ca deja stii ce fac liniile astea :) dar vom intra totusi in cateva detalii.

//coliziunile //definim cele patru puncte de coliziune _root["car"+who].pointLeft = {x:-20, y:0};
_root["car"+who].localToGlobal(_root["car"+who].pointLeft);
_root["car"+who].pointRight = {x:20, y:0};
_root["car"+who].localToGlobal(_root["car"+who].pointRight);
_root["car"+who].pointFront = {x:0, y:-25};
_root["car"+who].localToGlobal(_root["car"+who].pointFront);
_root["car"+who].pointBack = {x:0, y:25};
_root["car"+who].localToGlobal(_root["car"+who].pointBack);
//hai sa folosim niste nume de variabile mai scurte :) - asta doar pentru a intelege mai bine si pentru a simplifica codul this["lpx"+who] = _root["car"+who].pointLeft.x;
this["lpy"+who] = _root["car"+who].pointLeft.y;
this["rpx"+who] = _root["car"+who].pointRight.x;
this["rpy"+who] = _root["car"+who].pointRight.y;
this["fpx"+who] = _root["car"+who].pointFront.x;
this["fpy"+who] = _root["car"+who].pointFront.y;
this["bpx"+who] = _root["car"+who].pointBack.x;
this["bpy"+who] = _root["car"+who].pointBack.y;
//verificam coliziunile - verificam coliziunile folosind metoda Flash - hitTest. Aceasta metoda poate fi folosita pentru a compara coordonatele x and y cu o forma sau cu "bounding box-ul" unui clip (in cazul nostru _root.terrain), in functie de flag-ul "shape" (al treilea parametru: true-forma / false - bounding box) sau pentru a verifica daca "bounding box-urile" clipului tinta si clipului specificat se intersecteaza/suprapun. Vom folosi prima varianta. if (_root.terrain.hitTest(this["lpx"+who], this["lpy"+who], true)){

//vireaza la dreapta _root["car"+who]._rotation += 5; //penalitate viteza this["speed"+who] *= 0.85;

}
if (_root.terrain.hitTest(this["rpx"+who], this["rpy"+who], true)){

//vireaza la stanga _root["car"+who]._rotation -= 5; //penalitate viteza this["speed"+who] *= 0.85;

}
if (_root.terrain.hitTest(this["fpx"+who], this["fpy"+who], true)){

//opreste masina this["speed"+who] = -1;

}
if (_root.terrain.hitTest(this["bpx"+who], this["bpy"+who], true)){

//opreste masina this["speed"+who] = 1;

}

Greu? Nu e greu :) Iar urmatorul pas este si mai usor.

« Pasul Anterior Pasul Urmator »