Share
De două ori pe lună, revizuim câteva postări preferate ale cititorilor noștri de-a lungul istoriei Activetuts +. Acest tutorial a fost publicat pentru prima oară în mai 2009.
În acest tut va descrie cum să creați o scenă 3D de bază folosind opțiunile native 3D ale Flash Player 10. Apoi voi explica cum să adăugați interactivitate elementelor și să configurați un joc de pong de bază. Sa mergem?
Să pregătim scena și să creăm scena 3D. Într-un joc regulat de pong, mingea se învârte de pe partea de sus și de jos a ecranului, dar din moment ce adăugăm o anumită perspectivă amestecului, va trebui să oferim și aceste frontiere. Există cinci muzee necesare: podeaua și cele patru pereți (două dintre acestea fiind de fapt padele). Punctele de înregistrare ale zidurilor trebuie să fie situate pe podea. Puteți crea toate acestea pur și simplu cu ajutorul instrumentului dreptunghi sau utilizați o imagine bitmap importată (nu uitați să activați "Permiteți netezirea" în proprietăți). Faceți un movieclip din fiecare perete și dați-le un nume de instanță (le-am numit "wallTop", "wallBottom", "wallLeft" și "wallRight" și se va referi mai târziu la acestea). Denumiți fundalul "podea".
Selectați toți pereții și podeaua, creați un mare movieclip din acestea și denumiți-l "bg".
Pentru a afișa scorul mai târziu, vom avea nevoie și de două câmpuri de text dinamice. Dacă le plasați în "bg" movieclip, acestea vor avea și perspectiva 3D. Denumiți aceste "scoreLeft" și "scoreRight" apoi încorporați fonturile.
Creați mingea utilizând instrumentul oval și gradient de pe scenă. Nu plasați mingea în interiorul "bg" movieclip sau va fi distorsionată de perspectivă. Nu vom da proprietățile 3D realiste ale mingii, dar facem să acționeze ca și cum ar fi 3D. Plasați mingea în centrul ecranului și dați-i un nume de exemplu "minge".
Acum vom seta scena 3D utilizând noile proprietati rotationX, Y și Z care au fost adăugate în Flash Player 10. Cu toate acestea, înainte de a putea executa un cod ActionScript, trebuie să creăm clasa de documente. Creați un site principal Main.as și completați-l cu codul de mai jos.
pachet import flash.display.MovieClip; public class Main extinde MovieClip funcția publică Main (): void // Înlocuiți acest comentariu cu codul mai târziu
Acum, pentru a folosi acest lucru ca clasă principală putem completa "Main" în caseta de intrare "Class:" a proprietăților documentelor.
Să încercăm rotația. Adăugați această linie la funcția Main () pentru a da totul o perspectivă:
bg.rotationX = -30;
După cum puteți vedea, toate movieclips-urile sunt acum rotite în jurul axei x.
Fiecare dintre pereți are nevoie de o rotație de 90 ° pentru a se ridica. După cum puteți vedea, am schimbat și modul de amestecare a pereților pentru a "afișa", astfel încât pantele să arate mai bine. Următorul cod este numai pentru scopul de previzualizare, deoarece îl vom înlocui cu tweens în pasul următor (așa că scoateți-l după testare).
bg.wallTop.rotationX = 90; bg.wallBottom.rotationX = -90; bg.wallRight.rotationY = 90; bg.wallLeft.rotationY = -90;
Pentru a adăuga un efect pereților, va trebui mai întâi să creați un buton de pornire. Creați un videoclip cu textul "Faceți clic aici pentru a începe". Din nou, puteți plasa acest lucru în interiorul "bg" dacă doriți să aibă și perspectivă. Dați-i un nume de instanță ca "startText". Acum îl putem referi în cod și adăugăm un eventlistener la acesta. De asemenea, setați buttonMode la true, care va returna un cursor de mână atunci când mouse-ul se deplasează peste buton. Când se face clic, se apelează funcția de pornire și butonul este ascuns. De asemenea, ascundem indicatorul mouse-ului deoarece utilizatorul va controla peretele drept cu mouse-ul.
funcția publică Main (): void bg.rotationX = -30; startText.addEventListener (MouseEvent.MOUSE_UP, start); startText.buttonMode = true; începerea funcției private (_e: Event): void startText.buttonMode = false; startText.visible = false; Mouse.hide (); // Aceasta va conține tweens
Putem folosi TweenLite pentru a alinia pereții de la 0 la 90 de rotație. Desigur, orice motor de tweening va face, dar prefer acest lucru. Următorul cod va fi între pereți în 2 secunde și va fi folosit funcția de relaxare "Bounce.easeOut". De asemenea, pentru a adăuga valoarea alfa a zidurilor, trebuie să le setăm inițial la 0. Puteți face acest lucru în Flash, setând alfa la 0 în setările de culoare. După terminarea acestor tweens, jocul ar trebui să înceapă, adică adăugați o proprietate "onComplete" la unul dintre tweens și atașați un nume de funcție la acesta (puteți lăsa acest lucru pentru testare, deoarece funcția nu există încă).
funcția privată de pornire (_e: Event): void startText.buttonMode = false; startText.visible = false; Mouse.hide (); noul TweenLite (bg.wallRight, 2, rotationY: 90, alfa: 1, usurinta: Bounce.easeOut); noul TweenLite (bg.wallLeft, 2, rotationY: -90, alfa: 1, ușurință: Bounce.easeOut); noul TweenLite (bg.wallTop, 2, rotationX: 90, alfa: 1, ușurință: Bounce.easeOut); noul TweenLite (bg.wallBottom, 2, rotationX: -90, alfa: 1, ușurință: Bounce.easeOut, onComplete: goBall);
Înainte de a putea începe jocul, va trebui să adăugăm interactivitate pereților din stânga și dreapta și mingii. Să începem cu zbaturi jucătorului. Creați o nouă clasă "Player.as" și adăugați următorul cod.
pachet import flash.display.MovieClip; importul flash.events.MouseEvent; clasa publică Player extinde MovieClip funcția publică Player (): void stage.addEventListener (MouseEvent.MOUSE_MOVE, moveAlong); funcția privată moveAlong (_e: MouseEvent): void var mousePos: Number = stage.mouseY - parent.y; dacă (mousePos < 0 ) y = 0; else if ( mousePos > 340) y = 340; altfel y = mousePos;
În constructor (funcția Player) adăugăm un scenarist pentru a verifica când mouse-ul se mișcă și apela funcția "moveAlong" ori de câte ori o face. În funcția moveAlong se calculează poziția locală a mouse-ului (doar poziția y, deoarece noi doar mergem pe verticală). Apoi verificăm dacă mouse-ul iese din limite și resetează poziția dacă se află. Am găsit valoarea 340 prin încercare și eroare deoarece "parent.height - height" nu întoarce valoarea așteptată când folosim perspectiva 3D.
Înainte de a schimba proprietățile wallRight movieclip; bifați "Export pentru ActionScript" și setați clasa la "Player". Lăsați "Clasa de bază" goală.
Crearea AI este foarte asemănătoare cu crearea playerului. Numai de data aceasta vom face să se deplaseze spre valoarea y a mingii, dar cu o viteză puțin mai mică decât mingea. Creați o altă clasă "AI.as":
pachet import flash.display.MovieClip; importul flash.events.Event; public class AI extinde MovieClip funcția publică AI (): void addEventListener (Event.ENTER_FRAME, followBall); funcția privată followBall (_e: Eveniment): void var ball: MovieClip = MovieClip (parent.parent) .ball; dacă (ball.xspeed || ball.yspeed) var newy: Number = ball.y - înălțime; dacă (newy> 345) newy = 345; daca eu <= newy ) y += 9; else y -= 9;
Mai întâi trebuie să putem face referire la minge. Deoarece movieclipul wallLeft este în interiorul "bg" movieclip, apelul "parent" se va referi la "bg". Din acest motiv, trebuie să folosim "parent.parent". Prima declarație "if" verifică dacă mingea are x sau yspeed. Acestea sunt variabilele publice ale mingii pe care o vom seta mai târziu. Verificarea împiedică deplasarea AI înainte de începerea jocului. Valoarea "newy" deține valoarea y a mingii minus înălțimea peretelui. Aceasta este valoarea la care ar trebui să se miște pentru a lovi mingea. Ca și înainte, schimbați Class of wallLeft la "AI".
Bilele au nevoie de cele mai multe funcționalități: trebuie să se deplaseze, să se răstoarne pe pereți, să vadă o lovitură cu padele și să-și actualizeze propria adâncime, deoarece nu este un obiect 3D.
pachet import flash.display.MovieClip; importul flash.events.Event; clasa publica Ball extinde MovieClip public var xspeed: Number = 0; public var yspeed: Number = 0; funcția publică Ball (): void funcția publică funcțională (): void xspeed = -12; yspeed = 12; addEventListener (Event.ENTER_FRAME, moveBall); funcția privată moveBall (_e: Event): void depth (); coliziune(); x + = xspeed; y + = yspeed; funcția privată adâncimea (): void // Scala mingii bazată pe poziția y coliziune privată (): void // Faceți mingea sări
În primul rând, dăm mingii un x și un yspeed. Acestea sunt publicate astfel încât să putem verifica de la alte obiecte dacă mingea se mișcă. Apoi adăugați un eveniment "onenterframe" la funcția de pornire. Atunci când se numește funcția de pornire, mingea va începe să se miște în fiecare cadru. Am dat mingea cu o viteză de pornire de 12 pixeli pe cadru. Puteți schimba acest lucru pentru a accelera jocul, dar puteți, de asemenea, de până framerate. Funcția moveBall îmbunătățește, de fapt, valorile x și y ale mingii pe baza valorilor x și yspeed. De asemenea, se apelează funcțiile de adâncime și coliziune pe fiecare cadru.
Deoarece mingea nu este un obiect 3D și nu are valoarea z, acesta nu va apărea mai mic odată ce valoarea y se modifică. Cu cât mingea este mai mare pe ecran (valoarea y scăzută), cu atât mai mic ar trebui să apară. Putem schimba acest lucru prin simpla ajustare pe baza poziției sale:
funcția privată adâncime (): void var mai mic: număr = ((y / stage.stageHeight) * 0.6) + 0.6; scaleX = scaleY = mai mică;
Funcția de "coliziune" va decide cum și când mingea va sări de pe alte obiecte. În prima declarație "if", verificăm pur și simplu valoarea y pentru a afla dacă mingea lovește peretele de sus sau de jos. Din nou, am găsit aceste valori prin încercare și eroare, deoarece mingea trebuie să sări într-o manieră plauzibilă. Dacă verificarea este adevărată, rezultă schimbarea vitezei, astfel încât bila să schimbe direcția verticală.
funcția privată coliziune (): void if (y> = 463 || y <= 105 ) yspeed *= -1;
Verificarea limitelor x nu este la fel de ușoară din cauza perspectivei și a paletelor care se mișcă în jur. Putem efectua un "hitTest" cu pereții și trimitem mingea înapoi dacă este adevărat. HitTest-urile sunt greu de făcut, deci nu trebuie să le folosiți prea mult. Cu toate acestea, pentru că avem de-a face cu un joc simplu de pong, acesta nu va încetini considerabil jocul. Am adăugat însă o verificare suplimentară; pentru a vedea dacă valoarea mingii x se află pe partea stângă sau dreaptă a scenei și verificați peretele în consecință. Acest lucru vă asigură că este nevoie doar de un singur hitTest pentru fiecare cadru în loc de două.
dacă ((x> stage.stageWidth / 2 && hitTestObject (MovieClip (părinte) .bg.wallRight)) || (x < stage.stageWidth / 2 && hitTestObject( MovieClip(parent).bg.wallLeft)) ) xspeed *= -1;
În cele din urmă trebuie să aflăm dacă mingea este încă pe platformă. Putem afla dacă verificăm dacă un punct de pe fundul mingii este încă situat pe "podea". Punctul exact are valoarea x a mingii și valoarea y plus raza. Dacă este adevărat, aflăm dacă mingea a dispărut pe partea stângă sau pe dreapta (din nou, prin compararea valorii x cu centrul ecranului) și actualizând scorul în mod corespunzător. În final, setați valorile x și y ale mingii înapoi în centru, astfel încât jocul să poată continua.
dacă (! MovieClip (părinte) .bg.floor.hitTestPoint (x, y + (înălțime / 2 * scaleY), true)) if < stage.stageWidth / 2 ) MovieClip(parent).bg.scoreRight.text = Number(MovieClip(parent).bg.scoreRight.text) + 1; else MovieClip(parent).bg.scoreLeft.text = Number(MovieClip(parent).bg.scoreLeft.text) + 1; y = stage.stageHeight / 2; x = stage.stageWidth / 2;
Schimbarea clasei mingii la "Ball".
Acum, că am creat atât padele, cât și mingea, tot ce este necesar este să setați jocul în acțiune. Adăugați această funcție la clasa principală și asigurați-vă că funcția onComplete utilizată la pasul 6 face referire la această funcție.
funcția privată goBall (): void ball.start ();
După ce scorul a fost actualizat, mingea se va întoarce în centru și va începe din nou. Trebuie să animăm ușor mingea când ne întoarcem înainte să înceapă din nou jocul.
Înlocuiți acest cod în funcția de coliziune a mingii:
y = stadiul. etapa ridicată / 2; x = stage.stageWidth / 2;
De:
xspeed = yspeed = 0; removeEventListener (Event.ENTER_FRAME, moveBall); y = - înălțime; x = stage.stageWidth / 2; var scară: număr = (0,5 * 0,6) + 0,6; noul TweenLite (acest 1.5, y: stage.stageHeight / 2, scaleX: scale, scaleY: scale, ease: Bounce.easeOut, onComplete: start);
Acest lucru va împiedica mai întâi mișcarea. Apoi setează poziția mingii chiar deasupra ecranului, dar centrată pe orizontală. Dacă vom folosi apoi funcția Bounce Easing, va apărea ca și cum mingea va cădea de sus chiar înainte de a reporni jocul.
Sper că ați reușit să urmați fără prea multe probleme. Jocul așa cum este acum este foarte simplu și poate utiliza unele îmbunătățiri. Mingea, de exemplu, întoarce întotdeauna colțurile de 90 °, ceea ce face ca mișcarea să fie foarte previzibilă.
Dacă doriți să o luați mai departe, puteți încerca să modificați x și yspeed în funcție de locul unde mingea atinge paleta (comparați valorile y). Detectarea coliziunii cu padele nu este niciodată aproape perfectă, dar vă arată o modalitate de bază de a verifica o lovitură. În cele din urmă, dacă nu ați folosit gradienți pentru pereți, veți observa că mingea pare să se rostogolească peste peretele de jos, în loc să dispară sub ea. Pentru a rezolva acest lucru, puteți separa cu ușurință obiectele care ar trebui să apară deasupra mingii și să le plasați într-un nou corp de film care distorsionează la fel de mult ca și "bg" movieclip și aranja mai mult decât mingea în Flash.
Accentsconagua