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 acest prim pas veti invata despre miscarea masinii.

Cu alte cuvinte veti invata cum sa simulati accelerare, viteza, viraj, franare si marsarier.

Asta este, haideti sa incepem lectia.

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

Download racing_part1_step1.fla

1. Miscarea masinilor nu este partea cea mai dificila a unui joc de curse, dar daca vrei sa simulezi o miscare cat mai apropiata de real trebuie sa tii cont de cateva aspecte pe care le vom discuta mai jos.

2. Deschide fisierul racing_part1_step1.fla inclus in aceasta lectie.

3. lick pe primul frame (singurul frame) de pe layer-ul "defs" si apasa F9 pentru a afisa fereastra Actions pentru frame-ul curent. Acum hai sa vedem ce fac variabilele de aici:

car1.code = "player"; //aceasta variabila va decide daca masina specificata este controlata de un jucator uman sau de computer (in partea a doua a acestui tutorial vei invata cum sa adaugi adversari si aceasta variabila va fi folositoare)
acceleration = 0.4; //variabila acceleratie se va aduna la variabila viteza la fiecare eveniment enterFrame (in cazul nostru de 24 de ori pe secunda); o valoarea mai mare va insemna intr-o aceelerare mai rapida a masinii
speedDecay = 0.96; //atunci cand masina nu este accelerata (adica tasta SUS nu este apasata), masina trebuie sa incetineasca usor si atunci trebuie sa inmultim viteza cu aceasta valoare mai mica decat 1; cu cat aceasta valoare este mai mica, cu atat masina va incetini mai repede
rotationStep = 10;//acesta este numarul de grade cu care va creste sau scade rotatia (unghiul) masinii atunci cand tastele stanga sau dreapta sunt apasate
maxSpeed = 10;//aceasta este limita de viteza pe traseul nostru; mareste-l daca vrei ca masina sa mearca mai repede
backSpeed = 1;//aceasta este limita de viteza la mersul inapoi

4. OK! Si acum sa ne intoarcem la scoala :) si sa vedem ce putem face cu variabilele de mai sus.

Click on the first frame of the second layer ("actions") and if the Actions windows is not open, press F9 to display it.

Vom discuta scriptul de aici in cateva momente, dar mai intai hai sa vedem cum "intelege" Flash-ul miscarea si coordonatele.

Putina trigonometri si Flash-ul

Flash-ul foloseste sistemul clasic cartezian de coordonate (un sitem bazat pe o grila cu o axa orizontala OX si o axa verticala OY).

Ai observat deja in imaginea alaturata ca in Flash axa Y este inversata, adica partea negativa a axei Y este pozitionata deasupra partii pozitive. Asadar cu cat o coordonata este mai jos, cu atat valoarea ei va fi mai mare.

Deoarece Flash intelege doar vectori orizontali si verticali va trebui sa calculam componentele verticala si orizontala ale "vitezei" propriuzise.

Deci (cu toate ca nu imi place sa incep cu "deci" :) ), din trigonometrie stim ca:

sin(angle) = speedx/speed si

cos(angle) = speedy/speed

si atunci… cunoastem unghiul (angle=car._rotation) si mai cunoastem viteza. Asta este tot ce ne trebuie. Nu-i asa? Nu :) Trebuie sa mai stim ceva:

Clasa Math implementata in Macromedia Flash nu functioneaza cu unghiuri masurate in grade. In loc de grade va trebui sa folosim unghiuri masurate in radiani (o unitate de masura alternativa pentru unghiuri).

Singura situatie in care vom folosi grade este atunci cand rotim movieclip-urile.

Folosind ecuatia simpla de mai jos vom putea transforma gradele in radiani:

unghi_radiani = unghi_grade * (PI/180)

Acum putem calcula usor componentele pe X si pe Y ale vitezei masinii:

speedx = Math.sin(_rotation*(Math.PI/180))*speed;
speedy = Math.cos(_rotation*(Math.PI/180))*speed*-1;

Ei bine, ti-ai dat deja seama de ce componenta pe Y a vitezei este inversata ;)

Si acum sa ne intoarcem la Flash si la fereastra Actions. In continuare voi explica ce este cu functia "step". Functia "step" va fi executata la fiecare eveniment enterFrame (pe layer-ul "stepper" vei gasi un movieclip gol care executa rutina onClipEvent (enterFrame).

function step(who) {

//verifica daca masina este controlata de un jucator sau de computer
if (_root["car"+who].code == "player") {

//vom micsora constant viteza inmultind-o cu o valoare mai mica decat 1, dar doar daca aceasta este mai mare decat 0.3; o valoare mai mica nu va face decat sa consume resurse, iar miscarea nu va fi sesizabila asa ca vom seta viteza la 0
if (this["speed"+who]>0.3) {

this["speed"+who] *= _root.speedDecay;

} else {

this["speed"+who] = 0;

}
//masina va reactiona la anumite apasari de taste pe care noi le vom captura folosind metoda Key.isDown dupa cum urmeaza
//acceleratie – adaugam o anumita valoare la variabila viteza daca tasta SUS este apasata si daca viteza este mai mica decat viteza maxima admisa (120Km/h in localitate :) )
if (Key.isDown(Key.UP) && this["speed"+who]<_root.maxSpeed) {

this["speed"+who] += _root.acceleration;

}
//frana (inapoi) – acelasi lucru, dar aici in loc de adunare avem scadere
if (Key.isDown(Key.DOWN)) {

this["speed"+who] -= _root.backSpeed;

}
//vireaza la stanga – ei bine, am putea pur si simplu sa adunam sau sa scadem un unghi fixat (in grade) la/din rotatia masinii, dar asta nu este suficient de bine. Pentru a simula o miscare naturala, virajul trebuie sa depinda de viteza, altfel vei putea sa rotesti masina chiar daca este aproape oprita si va arata ca o elice de avion :)
if (Key.isDown(Key.LEFT) && this["speed"+who]>0.3) {

_root["car"+who]._rotation -= _root.rotationStep*(this["speed"+who]/_root.maxSpeed);

}
//vireaza la dreapta – stii deja ce se intampla aici
if (Key.isDown(Key.RIGHT) && this["speed"+who]>0.3) {

_root["car"+who]._rotation += _root.rotationStep*(this["speed"+who]/_root.maxSpeed);

}
this["rotation"+who] = _root["car"+who]._rotation;
//calculam componentele vitezei pe X si pe Y – am discutat deja aceasta parte a functiei mai sus
this["speedx"+who] = Math.sin(this["rotation"+who]*(Math.PI/180))*this["speed"+who];
this["speedy"+who] = Math.cos(this["rotation"+who]*(Math.PI/180))*this["speed"+who]*-1;
//aplica componentele pe pozitia masinii – adunam componenta X a vitezei la coordonata X a masinii si componenta Y a vitezei la coordonata Y a masinii
_root["car"+who]._x += this["speedx"+who];
_root["car"+who]._y += this["speedy"+who];
//pozitioneaza umbra masinii – cand masina vireaza, vrem ca masina sa isi pastreze coordonatele pe X si pe Y si intotdeauna sa stea pe aceeasi parte a masinii (oricare ar fi aceea)
_root["shadow"+who]._x = _root["car"+who]._x-4;
_root["shadow"+who]._y = _root["car"+who]._y+2;
_root["shadow"+who]._rotation = _root["car"+who]._rotation;
}

if (_root["car"+who].code == "computer") {

//in urmatorul nostru tutorial "Joc de Curse II" vom adauga oponenti pentru a face jocul mai dinamic si mai interactiv

}

Asta este! Avem deja o masina miscatoare. Acum putem merge mai departe la ciocniri.

Pasul Urmator »