Share
Acest tutorial vă va oferi o alternativă 3D pentru jocurile de curse în ActionScript 3. Nu este necesar un cadru extern pentru acest exemplu de stil vechi.
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Creați un nou set de documente Flash pentru ActionScript 3.0. Voi folosi dimensiunile de 480x320 pixeli, o rată a cadrelor de 30 FPS și un fundal albastru deschis. Salvați fișierul cu un nume la alegere.
Pe lângă FLA, trebuie să creați și o clasă de documente. Creați un nou fișier Actionscript și adăugați acest cod:
pachet import flash.display.MovieClip; clasa publică Extensie principală MovieClip funcția publică principală ()
Salvați acest fișier în același director ca și FLA. Numele eiMain.as.
Pentru a compila codul din Principal clasa, trebuie să o conectăm cu FLA. Pe tineProprietăți panoul FLA, alături de acestaClasă, introduceți numele clasei de documente, în acest caz, Principal.
Apoi, salvați modificările de pe FLA.
Trebuie să începem cu o linie pentru a reprezenta un segment al drumului. presa R pentru a selecta Instrument dreptunghiular. În acest exemplu voi face un dreptunghi gri pentru drumul propriu-zis, două mici dreptunghiuri roșii la fiecare margine a celei gri și dreptunghiuri verzi pentru a umple restul liniei. Cele verzi trebuie să fie chiar mai largi decât scenă, le fac la 1500 de pixeli lățime. Lățimea drumului poate varia în funcție de nevoile dvs., voi folosi una de 245 de pixeli lățime. Nu este necesar ca acestea să fie foarte mari, deoarece vom folosi mai multe situații pentru a desena întregul drum de pe ecran. O să le fac 10px înălțime.
După ce ați atras toate dreptunghiurile, selectați-le pe toate (Ctrl + A) și apăsați F8 pentru a crea un Clip video din acele dreptunghiuri pe care tocmai le-ați făcut. Denumiți-o "Drum", asigurați-vă că Punct de înregistrare este în centru și bifați caseta de selectare "Export pentru ActionScript".
Veți ajunge cu un Road MovieClip în Bibliotecă.
Depinde de dvs. dacă doriți să desenați fiecare dreptunghi pe diferite straturi. Eu o să pun unul gri pe un al doilea strat. Dacă aveți o instanță de drum pe scenă, ștergeți-o. Vom adăuga Road RoadClip după cod mai târziu.
Să ne întoarcem la Principal clasă. Vom folosi asta drum MovieClip pentru a genera iluzia unei piste de curse.
Vom determina adâncimea drumului vizibil, precum și dimensiunile zonei de joacă. De asemenea, în clasa noastră, toate drum instanțele pe care le adăugăm la scenă vor fi accesate dintr-o matrice. Vom folosi o altă matrice (zMap) pentru a determina adâncimea fiecărei linii.
În acest exemplu, voi stabili o adâncime de 150 de linii rutiere într-o zonă de joacă de 480x320 (nu este necesar să fie aceeași dimensiune a scenei, dar din moment ce totul va fi prezentat, voi folosi acele numere).
// Adâncimea drumului vizibil privat Constrângeri: int = 150; // Dimensiunile zonei de joacă. const const const: int = 480; const const: int int = 320; // Linia mașinii jucătorului. const const nuScaleLine: int = 8; // Toate liniile de drum vor fi accesate dintr-o matrice. privat var zMap: Array = []; linii private var: Array = []; private var halfWidth: Număr; linii private varDepth: int; private const width widthStep: număr = 1;
Vom folosi toate variabilele și constantele anterioare din interiorul lui Principal funcţie. Vom schimba fiecare linie în funcție de adâncimea corespunzătoare.
funcția publică Main () // Populați zMap cu adâncimea liniilor de drum pentru (var i: int = 0; i < roadLines; i++) zMap.push(1 / (i - resY / 2)); //We want the line at the bottom to be in front of the rest, //so we'll add every line at the same position, bottom first. lineDepth = numChildren; for (i = 0; i < roadLines; i++) var line = new Road(); lines.push(line); addChildAt(line, lineDepth); line.x = resX / 2; line.y = resY - i; //Scaling the road lines according to their position halfWidth = resX / 2; for (i = 0; i < roadLines; i++) lines[i].scaleX = halfWidth / 60 - 1.2; halfWidth -= widthStep;
daca tu Publica (Ctrl + Enter) documentul în acest moment veți obține o vedere a unui drum drept.
Puteți să jucați cu calculele de scalare pentru a obține rezultate diferite. S-ar putea să doriți un drum mai larg sau o distanță de vizualizare mai lungă.
Chiar acum drumul pare atât de plat încât nu ai putea să-i spui dacă mergem înainte. Avem nevoie de cel puțin două stiluri diferite de segment pentru a distinge cât de repede sau cât de lent ne mișcăm.
Mergeți la Bibliotecă și faceți dublu clic pe drum MovieClip pentru a te întoarce la dreptunghiurile pe care le-ai desenat. Acum apăsați F6 pentru a insera un nou keyframe (dacă aveți mai multe straturi, este posibil să doriți să inserați un nou keyframe pe fiecare strat). Acum, pe baza primului cadru, aveți posibilitatea să modificați culorile dreptunghiurilor sau să le modificați într-un fel. Voi schimba culoarea și adăugând câteva linii de banda la al doilea cadru.
Vom defini o nouă variabilă în Principal clasa pentru a menține coerența pe linia jucătorului (presupunând că va exista o mașină în joc, vom păstra scalarea la 1 pe acea linie)
private var playerZ: Număr;
Apoi, vom modifica Principal funcţie.
Această variabilă va fi utilizată în Principal funcţie. Acum drum liniile vor fi segmentate, unele vor fi afișate cel de-al doilea cadru, iar restul vor afișa primul cadru, sporind iluzia unei piste de curse.
funcția publică Main () pentru (var i: int = 0; i < roadLines; i++) zMap.push(1 / (i - resY / 2)); playerZ = 100 / zMap[noScaleLine]; for (i = 0; i < roadLines; i++) zMap[i] *= playerZ; lineDepth = numChildren; for (i = 0; i < roadLines; i++) var line = new Road(); lines.push(line); addChildAt(line, lineDepth); line.x = resX / 2; line.y = resY - i; halfWidth = resX / 2; for (i = 0; i < roadLines; i++) if (zMap[i] % 100 > 50) linii [i] .gotoAndStop (1); alte linii [i] .gotoAndStop (2); linii [i] .scaleX = halfWidth / 60 - 1.2; halfwidth - = widthStep;
S-ar putea să nu fie necesar să se înmulțească cu 100 pentru a obține segmentele corect, dar acestea sunt numerele pe care le voi folosi în acest exemplu, aveți libertatea de a modifica numerele la gustul dvs. (și dacă ați șterge ceva, aveți aceasta ca referință).
Să începem să facem lucrurile să se miște. Vom seta o variabilă pentru viteză. Aceasta va indica adâncimea pe care o vom avansa în funcție de cadru. Voi începe cu o viteză de 20, puteți utiliza orice număr doriți.
De asemenea, avem nevoie de un indicator pentru segmentele rutiere, care se vor schimba în funcție de viteză.
viteză privată var: int = 20; private var texOffset: int = 100;
Înainte de a putea face ceva cu aceste variabile, trebuie să importăm un nou eveniment la această clasă. Am putea folosi fie un timer, fie un EnterFrame. În acest exemplu voi folosi Evenimentul EnterFrame.
importul flash.events.Event;
Apoi, vom renunța la ultimul condițional din Principal() funcția și mutați-o într-o nouă funcție pe care o creăm. Această nouă funcție va fi declanșată de Evenimentul EnterFrame, așa că vom continua să ne mișcăm pe drum. Să spunem asta cursă().
funcția publică Main () pentru (var i: int = 0; i < roadLines; i++) zMap.push(1 / (i - resY / 2)); playerZ = 100 / zMap[noScaleLine]; for (i = 0; i < roadLines; i++) zMap[i] *= playerZ; lineDepth = numChildren; for (i = 0; i < roadLines; i++) var line = new Road(); lines.push(line); addChildAt(line, lineDepth); line.x = resX / 2; line.y = resY - i; halfWidth = resX / 2; for (i = 0; i < roadLines; i++) lines[i].scaleX = halfWidth / 60 - 1.2; halfWidth -= widthStep; addEventListener(Event.ENTER_FRAME, race);
Acum să aducem înapoi condiționatul care a fost tăiat la funcția nouă, astfel încât să ne mișcăm. texOffset va indica poziția drumului pentru a păstra o iluzie exactă a mișcării.
funcția privată (eveniment: Eveniment): void pentru (var i: int = 0; i < roadLines; i++) if ((zMap[i] + texOffset) % 100 > 50) linii [i] .gotoAndStop (1); alte linii [i] .gotoAndStop (2); texOffset = texOffset + viteză; în timp ce (texOffset> = 100) texOffset - = 100;
daca tu Publica acum, ar trebui să ai un drum animat.
Periculoasele drumuri drepte sunt plictisitoare și există mii de moduri de a face o perspectivă să meargă înainte. Acum, să adăugăm câteva variabile noi care să aibă grijă de curbe în timp ce se află în mișcare.
În acest exemplu voi fi alternante curbe la dreapta cu secțiuni drepte. Drumul următor va fi stocat în nextStretch variabil. De asemenea, vom muta linia " X poziție la curbe.
privat var rx: Număr; // Numărul fiecărei linii x privat var dx: Număr; // Suma curbei pe segment private var ddx: Number = 0.02; // Suma curbei per linie private var segmentY: int = roadLines; private var nextStretch = "Drept";
rx variabila va stoca X poziția fiecărei linii, așa că vom dori să înceapă în centru și să ia curbele de acolo. De asemenea, DDX controlează claritatea curbelor. În acest exemplu îl voi avea la 0,02; este posibil să doriți să modificați valoarea între curbe. Acesta este modul în care noul cursă() funcția va arăta:
funcția privată (eveniment: Eveniment): void rx = resX / 2; dx = 0; pentru (var i: int = 0; i < roadLines; i++) if ((zMap[i] + texOffset) % 100 > 50) linii [i] .gotoAndStop (1); alte linii [i] .gotoAndStop (2); linii [i] .x = rx; dacă (nextStretch == "Drept") if (i> = segmentY) dx + = ddx; altfel dx - = ddx / 64; // Se întoarce ușor de la o curbă la o parte dreaptă. altfel dacă (nextStretch == "Curved") if (i <= segmentY) dx += ddx; else dx -= ddx / 64; rx += dx; texOffset = texOffset + speed; while (texOffset >= 100) texOffset - = 100; segmentY - = 1; în timp ce (segmentY < 0) segmentY += roadLines; if (nextStretch == "Curved") nextStretch = "Straight"; else nextStretch = "Curved";
De data aceasta nu vom atinge Principal funcţie. daca tu Publica acum ar trebui sa obtineti ceva de genul acesta:
S-ar putea să doriți să modificați valoarea Curbei pentru Stânga și Dreapta și să modificați valorile de direcție. În acest moment ar trebui să puteți deja adăuga o mașină în scenă și să controlați viteza manual.
Amintiți-vă că dreptunghiurile pentru drum sunt mai mari de 1 pixel? Asta ar putea să ne ajute să întindem viziunea rutieră în cazul în care ne dorim dealuri în jocul nostru.
Există o metodă de a face dealuri care sunt foarte asemănătoare cu a face curbe. S-ar putea să existe o mulțime de metode diferite, dar acesta este cel pe care îl voi folosi aici. Pentru simplitate, voi recicla cât mai mult din codul pe care îl avem deja și vom adăuga câteva linii pentru acest nou efect. Ca de obicei, dacă nu vă place rezultatele, puteți modifica valorile după dorință.
Tocmai am făcut variabile pentru X poziții ale liniilor rutiere, acum să le facem pentru y poziții.
privat var: Număr; private var dy: Număr; private var ddy: Număr = 0,01; // Un pic mai abrupt decât curbele.
Pentru simplitate, în acest exemplu voi folosi aceleași segmente drepte atât pentru un efect de înălțare cât și pentru curbe atât pentru o curbă cât și pentru un efect de coborâre.
funcția privată (eveniment: Eveniment): void rx = resX / 2; ry = resY; dx = 0; dy = 0; pentru (var i: int = 0; i < roadLines; i++) if ((zMap[i] + texOffset) % 100 > 50) linii [i] .gotoAndStop (1); alte linii [i] .gotoAndStop (2); linii [i] .x = rx; linii [i] .y = ry; dacă (nextStretch == "Drept") if (i> = segmentY) dx + = ddx; dy - = ddy; altceva dx - = ddx / 64; dy + = ddy; altfel dacă (nextStretch == "Curved") if (i <= segmentY) dx += ddx; dy -= ddy; else dx -= ddx / 64; dy += ddy; rx += dx; ry += dy - 1; texOffset = texOffset + speed; while (texOffset >= 100) texOffset - = 100; segmentY - = 1; în timp ce (segmentY < 0) segmentY += roadLines; if (nextStretch == "Curved") nextStretch = "Straight"; else nextStretch = "Curved";
În jocul dvs. trebuie să separați curbele de dealuri și să faceți doi algoritmi diferiți, dar acest exemplu arată cât de asemănători pot fi.
Jocurile de la scoala nu au putut profita de Flash, dar putem. Ceva la fel de simplu ca adăugarea unui gradient la liniile de drum va face o diferență frumoasă. Dacă doriți, puteți utiliza orice filtre și texturi care vă plac, dar în acest exemplu adaug doar niște gradienți simpli, așa că reveniți la drum MovieClip.
Pe cadrul 1, selectați dreptunghiul gri, apoi mergeți la panoul Culoare și alegeți Gradientul liniar din meniul derulant, apoi alegeți Reflectă culoarea ca Flow, astfel încât gradientul va continua înainte și înapoi de la prima la ultima culoare. Nu vă spun să alegeți aceleași culori ca și mine, dar voi folosi # 666666 și # 999999 aici. Dacă aveți nevoie să rotiți gradientul, apăsați F pentru a trece la instrumentul de transformare a gradientului, care vă va permite să vă mutați, să rotiți și să redimensionați gradientul. În acest caz, mișc gradientul la un sfert din dreptunghi și îl redimensionez la jumătate din dimensiunea dreptunghiului, astfel că centrul va fi mai deschis și muchiile vor fi mai întunecate. Folosesc o dimensiune similară pentru partea verde, așa că se va schimba de la verde închis (# 006600) la verde deschis (# 009900) continuu.
Acum mergeți la rama 2 și faceți gradiente noi cu culori diferite. Pentru dreptunghiul gri, am păstrat culoarea mai deschisă și am schimbat culoarea mai închisă la # 777777. Pe partea verde, am schimbat dimensiunea gradientului pentru a încerca să evit aspectul unui șah, iar schimbarea culorilor a fost foarte subtilă (# 007700 și # 008800).
Poate acum veți dori să adăugați un fundal frumos la orizont, sau un grafic pentru cer.
Indiferent dacă sunteți lipsit de resurse pentru cadre 3D sau doriți doar să mergeți la școală veche, acum aveți un exemplu simplu de a face o iluzie de adâncime pentru un joc de curse. Acum depinde de dumneavoastră dacă va fi un Grand Prix de motocicletă sau o cursă de stradă pe o autostradă plină de trafic sau poate ceva ce nu are legătură cu cursele.
Sper că ați găsit acest tutorial util. Vă mulțumim pentru lectură!
Accentsconagua