Share
Acest tutorial va ghid prin adăugarea de rachete precise de predare mortale la arsenalul următorului tău joc.
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 600x400 și o rată de cadre de 30 FPS. 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.Sprite; clasa publică principală se extinde Sprite 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.
Avem nevoie de o grafică a rachetelor care să fie afișată la fotografiere. Puteți importa un bitmap sau puteți desena o formă chiar acolo pe Flash. Voi folosi o mică formă pe acest exemplu.
Ceea ce este important aici este că trebuie să faci punctul de rachetă drept spre dreapta, deoarece acesta este punctul de origine pentru rotație. Deci, 0s înseamnă să îndrepți direct spre dreapta, -90μ înseamnă în sus, 90ș înseamnă în jos și 180º puncte spre stânga. Mai târziu, va trebui să rotim racheta în funcție de direcția sa.
După ce aveți graficul cu rachete, selectați-l și apăsați F8 pentru a crea un clip video. Denumiți-o "rachetă", asigurați-vă că Punct de înregistrare este în centru și bifați caseta de selectare "Export pentru ActionScript".
Veți sfârși cu un raster MovieClip din Bibliotecă.
Dacă aveți o instanță de rachetă pe Stadiu, ștergeți-o. Vom adăuga filmul cu rachete prin cod.
Primul lucru pe care o rachetă trebuie să-l cunoască este locul unde se află țintă. Vom seta mai întâi rotația rachetei în funcție de poziția cursorului mouse-ului. Să lucrăm cu enterFrame Eveniment pentru o actualizare constantă de rotație.
Adauga o rachetă de exemplu la scenă, îl pun în centru (300, 200). Apoi calculați distanța de la rachetă la cursorul mouse-ului (îl stochez în variabile targetX și targetY). În cele din urmă, unghiul rachetei va fi arcul tangent al ambelor puncte (targetX, targetY). Rezultatul pe care îl veți obține va fi în radiani, dar rotația funcționează în grade, deci va trebui să faceți conversia prin înmulțirea cu 180 / Pi. (Pentru a vedea de ce, verificați acest articol.)
importul flash.events.Event; clasa publică principală extinde Sprite rachetă privată var: Missile = new Missile (); funcția publică principală () addChild (rachetă); rachetă.x = 300; missile.y = 200; addEventListener (Event.ENTER_FRAME, playGame); funcția privată playGame (eveniment: Eveniment): void var targetX: int = mouseX - missile.x; var targetY: int = mouseY - rachetă.y; rachetă.ro = Math.atan2 (targetY, targetX) * 180 / Math.PI;
(Nu stii sigur ce Math.atan2 () este pentru? Consultați acest articol despre trigonometrie.
daca tu Publica (Ctrl + Enter) documentul în acest moment, ar trebui să obțineți ceva de genul:
Mutați mouse-ul lângă rachetă pentru a vedea rotirea.
Avem rotația, acum avem nevoie de mișcare. Racheta trebuie să caute țintă, indiferent dacă este o țintă constantă sau în mișcare. Ceea ce vom face este să calculam mișcarea în funcție de rotația actuală a rachetei. Să stabilim o valoare pentru viteză și să facem urmărirea rachetelor după cursorul mouse-ului.
Vom include câteva variabile noi pentru a calcula viteza (vx, vy). Când racheta este îndreptată spre dreapta, unghiul său este mai mic de 90ș și mai mare de -90ș, deci este întotdeauna mai mic decât valoarea absolută de 90ș. Când arată spre stânga, unghiul său are o valoare absolută mai mare decât 90ș. Acest lucru va determina vx în acord cu viteză, atunci vy va fi diferența dintre viteză și vx.
viteză privată var: int = 10; funcția publică principală () addChild (rachetă); rachetă.x = 300; missile.y = 200; addEventListener (Event.ENTER_FRAME, playGame); funcția privată playGame (eveniment: Eveniment): void var targetX: int = mouseX - missile.x; var targetY: int = mouseY - rachetă.y; rachetă.ro = Math.atan2 (targetY, targetX) * 180 / Math.PI; // Viteza in x este relativa la unghiul, atunci cand este 90s sau -90ψ, vx ar trebui sa fie 0. var vx: Number = viteza * (90 - Math.abs (missile.rotation)) / 90; var vy: Number; // Viteza în y este diferența de viteză și vx. dacă (missile.rotation < 0) vy = -speed + Math.abs(vx);//Going upwards. else vy = speed - Math.abs(vx);//Going downwards. missile.x += vx; missile.y += vy;
Vei primi o rachetă care-ți urmărește cursorul.
Puteți utiliza o viteză diferită dacă doriți.
Rachetele nu ies din aer subțire, sunt împușcate din lansatoare de rachete. Să facem un filmClip care să reprezinte un tun (voi folosi un dreptunghi simplu) și să îl numesc Tun. Voi adăuga o Tun de exemplu prin cod, așa că voi ține scena goală.
Acum, în loc să adaug o rachetă, voi adăuga doar un tun și o rachetă va fi adăugată la poziția tunului atunci când fac clic pe scenă. Vom adăuga un Boolean pentru a verifica dacă racheta a fost împușcată, precum și o nouă funcție de fotografiere după clic.
importul flash.events.MouseEvent; clasa publică principală extinde Sprite rachetă privată var: Missile = new Missile (); viteză privată var: int = 10; privat var cannon: Cannon = nou Cannon (); private var missileOut: Boolean = false; // A fost împușcat racheta? funcția publică principală () addChild (cannon); cannon.x = 50; cannon.y = 380; addEventListener (Event.ENTER_FRAME, playGame); stage.addEventListener (MouseEvent.CLICK, trageți); funcția privată playGame (eveniment: Eveniment): void if (missileOut) var targetX: int = mouseX - missile.x; var targetY: int = mouseY - rachetă.y; rachetă.ro = Math.atan2 (targetY, targetX) * 180 / Math.PI; var vx: Număr = viteză * (90 - Math.abs (missile.rotation)) / 90; var vy: Număr; dacă (missile.rotation < 0) vy = -speed + Math.abs(vx); else vy = speed - Math.abs(vx); missile.x += vx; missile.y += vy; private function shoot(event:MouseEvent):void if (!missileOut) addChild(missile); swapChildren(missile, cannon);//missile will come out from behind cannon missileOut = true; missile.x = cannon.x; missile.y = cannon.y;
Aceasta este ceea ce veți obține:
Acest lucru nu pare frumos. Trebuie fie să facem tunul să se rotească, fie să forțeze racheta să meargă în sus imediat după ce a fost împușcată. Deoarece opțiunea # 1 este cea mai ușoară abordare, vom lua opțiunea nr. 2.
Dacă tunul este vertical, ne-am aștepta ca racheta să lanseze în sus și apoi să ajungă pe linia țintă. Abordarea pe care o voi folosi pentru a obține acest lucru este să dau rachetei un unghi de pornire de -90º (îndreptat în sus) și să se rotească ușor pentru a ajunge pe urmele cursorului mouse-ului. Vom adăuga un uşura variabilă pentru a determina netezimea sau claritatea rotației. Apoi vom crea o altă variabilă pentru a urmări rotația reală care indică direct țintă, în timp ce rotația rachetei se va schimba în funcție de uşura noi am stabilit (uşura = 1 se va comporta ca si inainte, oricare ar fi mai mare va face o viraje mai neteda).
Deoarece jumătate din valorile de rotație sunt negative, în unele cazuri va trebui să le calculam contra 360 pentru a obține diferența reală dintre unghiul țintă și rotația rachetei.
privat var ușurință: int = 10; funcția publică principală () addChild (cannon); cannon.x = 50; cannon.y = 380; addEventListener (Event.ENTER_FRAME, playGame); stage.addEventListener (MouseEvent.CLICK, trageți); funcția privată playGame (eveniment: Eveniment): void if (missileOut) var targetX: int = mouseX - missile.x; var targetY: int = mouseY - rachetă.y; var rotație: int = Math.atan2 (targetY, targetX) * 180 / Math.PI; dacă (Math.abs (rotație - rachetă.ro)> 180) if (rotire> 0 && missile.rotation < 0) missile.rotation -= (360 - rotation + missile.rotation) / ease; else if (missile.rotation > 0 && rotație < 0) missile.rotation += (360 - rotation + missile.rotation) / ease; else if (rotation < missile.rotation) missile.rotation -= Math.abs(missile.rotation - rotation) / ease; else missile.rotation += Math.abs(rotation - missile.rotation) / ease; var vx:Number = speed * (90 - Math.abs(missile.rotation)) / 90; var vy:Number; if (missile.rotation < 0) vy = -speed + Math.abs(vx); else vy = speed - Math.abs(vx); missile.x += vx; missile.y += vy; private function shoot(event:MouseEvent):void if (!missileOut) addChild(missile); swapChildren(missile, cannon);//missile will come out from behind cannon missileOut = true; missile.x = cannon.x; missile.y = cannon.y; missile.rotation = -90;//missile will start pointing upwards
Verifică:
Observați ce se întâmplă atunci când mutați mouse-ul din SWF și cum este diferit de exemplul anterior.
Pe lângă rachetă Movie Clip, avem nevoie de o animație de explozie. În cazul meu, voi face un film separat cu un simplu tween al unui cerc care se extinde. Eu o export Explozie. presa O pentru a selecta Instrument Oval, și țineți Schimb în timp ce trageți ovalul pentru a obține un cerc.
Pentru un efect vizual mai plăcut, voi pune cercul în interiorul altui film clip și îl voi da Bevel pentru a obține o culoare mai închisă în partea de jos și o culoare mai deschisă în partea de sus. Apoi, voi merge la rama 10 și apăsați F6 pentru a crea un cadrelor cheie, apoi faceți clic dreapta între cadrele 1 și 10 și creați a Clasic Tween. Înapoi pe cadrul 10, apăsați Q pentru a selecta Instrumentul de transformare gratuit și măriți cercul.
Apoi, creați un altul Clasic Tween la rama 20, voi adăuga a Estompa efect filtru.
În cele din urmă, face să dispară într-o ultimă clasică Tween la frame 30 cu un Alfa efect de culoare mergând la 0.
Animația de explozie trebuie să fie îndepărtată după terminarea acesteia sau se va lăsa la nesfârșit. Adăugați un nou strat și apăsați F6 pe ultimul cadru, apoi apăsați F9 pentru a deschide acţiuni panou și adăugați acest cod:
Stop();
parent.removeChild (aceasta);
Acest lucru va face Explozie instanța se elimină după terminarea animației.
Acum, când rachetă întâlnește cursorul, o vom înlocui cu un Explozie instanță. Trebuie doar să adăugăm o condiție nouă în joaca jocul() funcţie.
funcția privată playGame (eveniment: Event): void if (missileOut) if (missile.hitTestPoint (mouseX, mouseY)) var explozie: Explozie = explozie nouă; addChild (explozie); exploion.x = rachetă.x; exploion.y = rachetă; removeChild (rachete); missileOut = false; altfel var targetX: int = mouseX - missile.x; var targetY: int = mouseY - rachetă.y; var rotație: int = Math.atan2 (targetY, targetX) * 180 / Math.PI; dacă (Math.abs (rotație - rachetă.ro)> 180) if (rotire> 0 && missile.rotation < 0) missile.rotation -= (360 - rotation + missile.rotation) / ease; else if (missile.rotation > 0 && rotație < 0) missile.rotation += (360 - rotation + missile.rotation) / ease; else if (rotation < missile.rotation) missile.rotation -= Math.abs(missile.rotation - rotation) / ease; else missile.rotation += Math.abs(rotation - missile.rotation) / ease; var vx:Number = speed * (90 - Math.abs(missile.rotation)) / 90; var vy:Number; if (missile.rotation < 0) vy = -speed + Math.abs(vx); else vy = speed - Math.abs(vx); missile.x += vx; missile.y += vy;
Aruncati o privire:
Chasing după cursorul mouse-ului a fost distractiv, dar este inutil într-un joc; trebuie să facem o țintă. Voi desena o grămadă de cercuri pentru a forma o Ţintă Clip video.
Acum vom adăuga o Ţintă exemplu pentru ca racheta să aibă un obiectiv mai tangibil. Deci vom înlocui orice referință a cursorului mouse-ului pentru poziția țintă. De asemenea, nu vom testa pentru un punct de criză, ci pentru un obiect.
target privat var: Target = new Target (); funcția publică principală () addChild (cannon); cannon.x = 50; cannon.y = 380; addEventListener (Event.ENTER_FRAME, playGame); stage.addEventListener (MouseEvent.CLICK, trage); addChild (țintă); target.x = 550; target.y = 50; funcția privată playGame (eveniment: Event): void if (missileOut) if (missile.hitTestObject (țintă)) var explozie: Explozie = explozie nouă; addChild (explozie); exploion.x = rachetă.x; exploion.y = rachetă; removeChild (rachete); missileOut = false; altfel var targetX: int = target.x - missile.x; var țintă: int = target.y - missile.y; var rotație: int = Math.atan2 (targetY, targetX) * 180 / Math.PI; dacă (Math.abs (rotație - rachetă.ro)> 180) if (rotire> 0 && missile.rotation < 0) missile.rotation -= (360 - rotation + missile.rotation) / ease; else if (missile.rotation > 0 && rotație < 0) missile.rotation += (360 - rotation + missile.rotation) / ease; else if (rotation < missile.rotation) missile.rotation -= Math.abs(missile.rotation - rotation) / ease; else missile.rotation += Math.abs(rotation - missile.rotation) / ease; var vx:Number = speed * (90 - Math.abs(missile.rotation)) / 90; var vy:Number; if (missile.rotation < 0) vy = -speed + Math.abs(vx); else vy = speed - Math.abs(vx); missile.x += vx; missile.y += vy; private function shoot(event:MouseEvent):void if (!missileOut) addChild(missile); swapChildren(missile, cannon); //missile will come out from behind cannon missileOut = true; missile.x = cannon.x; missile.y = cannon.y; missile.rotation = -90;//missile will start pointing upwards
hitTestObject () metoda verifică efectiv doar o suprapunere între casetele de delimitare a celor două obiecte (adică casetele albastre care apar când faceți clic pe o instanță a obiectului din etapă), deci aveți grijă să faceți acest lucru; nu este o detectare a coliziunii perfect pixel. Cu toate acestea, lucrează bine aici.
Puteți încerca să plasați țintă în locații diferite, precum și tunul.
Am văzut deja că racheta va urmări o țintă în mișcare, cum ar fi cursorul mouse-ului, așa că acum să facem acest lucru Ţintă instanță mutați puțin.
Aceasta nu este o fizică realistă, voi face doar să atingă ținta verticală. Voi alege un punct de referință ca nivel al solului și voi adăuga o valoare gravitațională pentru a afecta ținta. Și pentru ao face mai dinamică, voi mări viteza rachetelor la 15.
privat var pod: int = 385; privat var gravitate: Number = 0.5; private var targetVY: Number = 0; // Viteza curentă verticală a funcției publice țintă Main () addChild (cannon); cannon.x = 50; cannon.y = 380; addEventListener (Event.ENTER_FRAME, playGame); stage.addEventListener (MouseEvent.CLICK, trage); addChild (țintă); target.x = 550; target.y = 50; funcția privată playGame (eveniment: Event): void if (missileOut) if (missile.hitTestObject (țintă)) var explozie: Explozie = explozie nouă; addChild (explozie); exploion.x = rachetă.x; exploion.y = rachetă; removeChild (rachete); missileOut = false; altfel var targetX: int = target.x - missile.x; var țintă: int = target.y - missile.y; var rotație: int = Math.atan2 (targetY, targetX) * 180 / Math.PI; dacă (Math.abs (rotație - rachetă.ro)> 180) if (rotire> 0 && missile.rotation < 0) missile.rotation -= (360 - rotation + missile.rotation) / ease; else if (missile.rotation > 0 && rotație < 0) missile.rotation += (360 - rotation + missile.rotation) / ease; else if (rotation < missile.rotation) missile.rotation -= Math.abs(missile.rotation - rotation) / ease; else missile.rotation += Math.abs(rotation - missile.rotation) / ease; var vx:Number = speed * (90 - Math.abs(missile.rotation)) / 90; var vy:Number; if (missile.rotation < 0) vy = -speed + Math.abs(vx); else vy = speed - Math.abs(vx); missile.x += vx; missile.y += vy; targetVY += gravity; target.y += targetVY; if (target.y > podea) target.y = podea; targetVY = -18;
daca tu Publica acum, ar trebui să obțineți o țintă în mișcare.
Indiferent dacă doriți o rachetă precisă sau dacă preferați o animație netedă, puteți obține ambele rezultate pe baza acestui exemplu. Acum aveți o nouă armă pentru a vă adăuga arsenalul, poate puteți încerca să faceți un joc asemănător Worms sau chiar să folosiți algoritmul pe altceva decât o rachetă, ca un țânțar ciudat care urmează personajul tău.
Sper că ați găsit acest tutorial util. Vă mulțumim pentru lectură!
Accentsconagua