Colpisci il bersaglio con un missile a ricerca mortale

Questo tutorial lo farà guida attraverso l'aggiunta di missili homing mortalmente accurati all'arsenale della tua prossima partita.


Anteprima del risultato finale

Diamo un'occhiata al risultato finale su cui lavoreremo:


Passaggio 1: impostare il documento FLA

Crea un nuovo set di documenti Flash per ActionScript 3.0. Userò le dimensioni di 600x400 e una frequenza fotogrammi di 30 FPS. Salva il file con un nome a tua scelta.


Passaggio 2: creare una classe di documenti

Oltre al FLA, abbiamo anche bisogno di creare una classe di documenti. Crea un nuovo file Actionscript e aggiungi questo codice:

 pacchetto import flash.display.Sprite; public class Main extends Sprite public function Main () 

Salva questo file nella stessa directory del nostro FLA. Nome itяMain.as.


Passaggio 3: collega il Principale Classe con il FLA

Per compilare il codice dal Principale classe, abbiamo bisogno di collegarlo con il FLA. On theProprietà pannello del FLA, vicino aClasse, inserisci il nome della classe del documento, in questo caso, Principale.

Quindi, salva le modifiche sul FLA.


Step 4: Disegna un missile

Abbiamo bisogno di un grafico missilistico da mostrare durante le riprese. Puoi importare una bitmap o disegnare una forma proprio lì su Flash. In questo esempio userò una forma minuscola.

Quello che è importante qui è che devi fare il punto del missile direttamente a destra, poiché questo è il punto di origine della rotazione. Quindi 0ш significa puntare dritto a destra, -90ш significa verso l'alto, 90ш significa verso il basso e 180ш punti verso sinistra. In seguito avremo bisogno di ruotare il missile secondo la sua direzione.


Passaggio 5: crea un Movie Clip per il missile

Una volta ottenuto il grafico del missile, selezionalo e premi F8 per creare un filmato. Chiamalo "Missile", assicurati che il Punto di registrazione è al centro e spuntare la casella di controllo "Esporta per ActionScript".

Finirai con un Movie Clip Missile nella Libreria.

Se si dispone di un'istanza di Missile sullo stage, eliminarlo. Aggiungeremo il missile MovieClip in base al codice.


Passaggio 6: Obiettivo

La prima cosa che un missile homing deve sapere è dove si trova l'obiettivo. Imposteremo la rotazione del missile in base alla posizione del cursore del mouse. Lavoriamo con il enterFrame Evento per un aggiornamento costante della rotazione.

Aggiungere un Missile istanza al palco, la sto posizionando al centro (300, 200). Quindi calcola la distanza dal missile al cursore del mouse (lo sto memorizzando in variabili TargetX e targetY). Infine, l'angolo del missile sarà l'arco tangente di entrambi i punti (TargetX, targetY). Il risultato ottenuto sarà espresso in radianti, ma la rotazione funziona in gradi, quindi dovrai eseguire la conversione moltiplicando per 180 / Pi. (Per vedere perché, controlla questo articolo.)

 import flash.events.Event; public class Main estende Sprite miss var privato: Missile = new Missile (); funzione pubblica Main () addChild (missile); missile.x = 300; missile.y = 200; addEventListener (Event.ENTER_FRAME, playGame);  private function playGame (event: Event): void var targetX: int = mouseX - missile.x; var targetY: int = mouseY - missile.y; missile.rotation = Math.atan2 (targetY, targetX) * 180 / Math.PI; 

(Non sono sicuro di cosa Math.atan2 () è per? Dai un'occhiata a questo articolo sulla trigonometria.

Se tu Pubblicare (Ctrl + Invio) il documento a questo punto, dovresti ottenere qualcosa del genere:

Muovi il mouse vicino al missile per vederlo ruotare.


Step 7: Cerca

Abbiamo ottenuto la rotazione, ora abbiamo bisogno del movimento. Il missile deve cercare il bersaglio, indipendentemente dal fatto che si tratti di un bersaglio fermo o in movimento. Quello che faremo è calcolare il movimento in base alla rotazione corrente del missile. Impostiamo un valore per la velocità e rendiamo il missile chase dopo il cursore del mouse.

Includeremo un paio di nuove variabili per calcolare la velocità (vx, vy). Quando il missile punta a destra, il suo angolo è inferiore a 90 ° e superiore a -90 °, quindi è sempre inferiore al valore assoluto di 90 °. Quando punta a sinistra, il suo angolo ha un valore assoluto superiore a 90 °. Questo determinerà vx secondo quanto velocità, poi vy sarà la differenza di velocità e vx.

 velocità var privata: int = 10; funzione pubblica Main () addChild (missile); missile.x = 300; missile.y = 200; addEventListener (Event.ENTER_FRAME, playGame);  private function playGame (event: Event): void var targetX: int = mouseX - missile.x; var targetY: int = mouseY - missile.y; missile.rotation = Math.atan2 (targetY, targetX) * 180 / Math.PI; // La velocità in x è relativa all'angolo, quando è 90ø o -90ø, vx dovrebbe essere 0. var vx: Number = speed * (90 - Math.abs (missile.rotation)) / 90; var vy: Number; // La velocità in y è la differenza di velocità e vx. se (missile.rotation < 0) vy = -speed + Math.abs(vx);//Going upwards. else vy = speed - Math.abs(vx);//Going downwards. missile.x += vx; missile.y += vy; 

Avrai un missile che insegue il tuo cursore.

Puoi usare una velocità diversa se vuoi.


Passaggio 8: creare un lanciamissili

I missili non escono dal nulla, vengono lanciati dai lanciamissili. Facciamo un Movie Clip che rappresenta un cannone (userò un semplice rettangolo) e lo nominerò Cannone. Ho intenzione di aggiungere un Cannone istanza per codice, quindi terrò vuoto il palco.


Passaggio 9: sparare

Ora, invece di aggiungere un missile, aggiungerò un cannone e un missile verrà aggiunto alla posizione del cannone quando clicco sul palco. Aggiungeremo un booleano per verificare se il missile è stato sparato e anche una nuova funzione per le riprese dopo il clic.

 import flash.events.MouseEvent; public class Main estende Sprite miss var privato: Missile = new Missile (); velocità var privata: int = 10; cannone var privato: Cannon = new Cannon (); private var missileOut: Boolean = false; // Il missile è stato sparato? funzione pubblica Main () addChild (cannon); cannon.x = 50; cannon.y = 380; addEventListener (Event.ENTER_FRAME, playGame); stage.addEventListener (MouseEvent.CLICK, shoot);  private function playGame (event: Event): void if (missileOut) var targetX: int = mouseX - missile.x; var targetY: int = mouseY - missile.y; missile.rotation = Math.atan2 (targetY, targetX) * 180 / Math.PI; var vx: Number = speed * (90 - Math.abs (missile.rotation)) / 90; var vy: Number; se (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;  

Questo è ciò che otterrai:

Questo non sembra carino. Dobbiamo anche far ruotare il cannone o forzare il missile a salire verso l'alto subito dopo essere stato colpito. Poiché l'opzione n. 1 è l'approccio più semplice, prenderemo l'opzione n.


Passaggio 10: minore precisione per look migliori

Se il cannone è verticale, ci aspetteremmo che il missile si avvii verso l'alto e poi si avvia verso il suo obiettivo. L'approccio che userò per raggiungere questo obiettivo è di dare al missile un angolo iniziale di -90 ° (puntato verso l'alto), e ruotare dolcemente per andare in linea con il cursore del mouse. Aggiungeremo un alleviare variabile per determinare la levigatezza o la nitidezza della rotazione. Quindi creeremo un'altra variabile per tenere traccia della rotazione effettiva che punta direttamente al bersaglio, mentre la rotazione del missile cambierà in base al alleviare prepariamo (alleviare = 1 si comporterà come prima, qualsiasi cosa più alta farà una svolta più fluida).

Poiché metà dei valori di rotazione sono negativi, in alcuni casi dovremo calcolarli rispetto a 360 per ottenere la differenza effettiva tra l'angolo di mira e la rotazione del missile.

 private var ease: int = 10; funzione pubblica Main () addChild (cannon); cannon.x = 50; cannon.y = 380; addEventListener (Event.ENTER_FRAME, playGame); stage.addEventListener (MouseEvent.CLICK, shoot);  private function playGame (event: Event): void if (missileOut) var targetX: int = mouseX - missile.x; var targetY: int = mouseY - missile.y; var rotation: int = Math.atan2 (targetY, targetX) * 180 / Math.PI; if (Math.abs (rotation - missile.rotation)> 180) if (rotation> 0 && missile.rotation < 0) missile.rotation -= (360 - rotation + missile.rotation) / ease; else if (missile.rotation > 0 && rotazione < 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  

Controlla:

Notare cosa succede quando si sposta il mouse fuori dal file SWF e come questo è diverso dall'esempio precedente.


Step 11: Missile Hits, Missile Explodes

oltre al Missile Filmato, abbiamo bisogno di un'animazione esplosiva. Nel mio caso, creerò un MovieClip separato con una semplice interpolazione di un cerchio che si espande. Lo sto esportando come Esplosione. stampa O per selezionare il Strumento ovale, e tenere premuto Cambio mentre disegna l'ovale per ottenere un cerchio.

Per un effetto visivo più gradevole, inserirò il cerchio all'interno di un altro filmato e assegnarlo a angolo filtro per ottenere un colore più scuro nella parte inferiore e un colore più chiaro nella parte superiore. Successivamente, andrò al frame 10 e premerò F6 creare un fotogramma chiave, quindi fare clic con il pulsante destro tra il frame 1 e 10 e creare a Tween classico. Torna al fotogramma 10, premi Q per selezionare il Strumento di trasformazione gratuito e allargare il cerchio.

Quindi, creane un altro Tween classico per inquadrare 20, aggiungerò a blur effetto filtro.

Infine, fallo sparire in un ultimo Tween Classico per incorniciare 30 con un Alfa effetto del colore che va a 0.


Passaggio 12: ripulire lo stage

L'animazione di esplosione deve essere rimossa una volta completata, oppure verrà interrotta indefinitamente. Aggiungi un nuovo livello e premi F6 sull'ultimo fotogramma, quindi premere F9 per aprire il Azioni pannello e aggiungi questo codice:

 Stop();
parent.removeChild (questo);

Questo renderà il Esplosione l'istanza si rimuove dopo l'animazione.


Passaggio 13: esplodere

Ora quando il missile incontra il cursore, lo sostituiremo con un Esplosione esempio. Abbiamo solo bisogno di aggiungere un nuovo condizionale nel gioca() funzione.

 private function playGame (event: Event): void if (missileOut) if (missile.hitTestPoint (mouseX, mouseYY)) var explosion: Explosion = new Explosion (); addChild (esplosione); explosion.x = missile.x; explosion.y = missile.y; removeChild (missile); missileOut = falso;  else var targetX: int = mouseX - missile.x; var targetY: int = mouseY - missile.y; var rotation: int = Math.atan2 (targetY, targetX) * 180 / Math.PI; if (Math.abs (rotation - missile.rotation)> 180) if (rotation> 0 && missile.rotation < 0) missile.rotation -= (360 - rotation + missile.rotation) / ease; else if (missile.rotation > 0 && rotazione < 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;   

Guarda:


Step 14: Qualcos'altro da far saltare in aria

Inseguendo il cursore del mouse era divertente, ma è inutile in una partita; dobbiamo fare un obiettivo. Ho intenzione di disegnare un gruppo di cerchi per formare un Bersaglio Un filmato.


Step 15: Spara al bersaglio

Ora aggiungeremo un Bersaglio esempio per il missile di avere un obiettivo più tangibile. Quindi sostituiremo qualsiasi riferimento del cursore del mouse per la posizione del bersaglio. Inoltre, non testeremo per un hit point, ma un oggetto.

 target var privato: Target = new Target (); funzione pubblica Main () addChild (cannon); cannon.x = 50; cannon.y = 380; addEventListener (Event.ENTER_FRAME, playGame); stage.addEventListener (MouseEvent.CLICK, shoot); addChild (target); target.x = 550; target.y = 50;  private function playGame (event: Event): void if (missileOut) if (missile.hitTestObject (target)) var explosion: Explosion = new Explosion (); addChild (esplosione); explosion.x = missile.x; explosion.y = missile.y; removeChild (missile); missileOut = falso;  else var targetX: int = target.x - missile.x; var targetY: int = target.y - missile.y; var rotation: int = Math.atan2 (targetY, targetX) * 180 / Math.PI; if (Math.abs (rotation - missile.rotation)> 180) if (rotation> 0 && missile.rotation < 0) missile.rotation -= (360 - rotation + missile.rotation) / ease; else if (missile.rotation > 0 && rotazione < 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  

Il hitTestObject () il metodo in realtà controlla solo una sovrapposizione tra i riquadri di delimitazione dei due oggetti (ad esempio, le caselle blu che appaiono quando si fa clic su un'istanza dell'oggetto nello stage), quindi fare attenzione; non è il rilevamento delle collisioni perfetto per i pixel. Tuttavia, fa il lavoro bene qui.

Puoi provare a posizionare il bersaglio in posizioni diverse, oltre al cannone.


Step 16: Moving Target

Abbiamo già visto che il missile inseguirà un bersaglio in movimento, come il cursore del mouse, quindi ora facciamo il Bersaglio l'istanza si muove un po '.

Questa non è una fisica realistica, sto solo facendo rimbalzare il bersaglio verticalmente. Selezionerò un punto di riferimento come livello di terra e aggiungerò un valore di gravità per influenzare il bersaglio. E per renderlo più dinamico, aumenterò la velocità del missile a 15.

 piano privato var: int = 385; gravità var privata: Number = 0.5; private var targetVY: Number = 0; // Velocità verticale corrente della funzione pubblica di destinazione Main () addChild (cannon); cannon.x = 50; cannon.y = 380; addEventListener (Event.ENTER_FRAME, playGame); stage.addEventListener (MouseEvent.CLICK, shoot); addChild (target); target.x = 550; target.y = 50;  private function playGame (event: Event): void if (missileOut) if (missile.hitTestObject (target)) var explosion: Explosion = new Explosion (); addChild (esplosione); explosion.x = missile.x; explosion.y = missile.y; removeChild (missile); missileOut = falso;  else var targetX: int = target.x - missile.x; var targetY: int = target.y - missile.y; var rotation: int = Math.atan2 (targetY, targetX) * 180 / Math.PI; if (Math.abs (rotation - missile.rotation)> 180) if (rotation> 0 && missile.rotation < 0) missile.rotation -= (360 - rotation + missile.rotation) / ease; else if (missile.rotation > 0 && rotazione < 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 > piano) target.y = piano; targetVY = -18; 

Se tu Pubblicare questo ora, dovresti ottenere un bersaglio mobile.


Conclusione

Sia che tu voglia un missile homing preciso, o preferirai un'animazione fluida, puoi ottenere entrambi i risultati sulla base di questo esempio. Ora hai una nuova arma da aggiungere nel tuo arsenale, forse potresti provare a creare un gioco simile a Worms, o persino usare l'algoritmo su qualcosa di diverso da un missile, come una strana zanzara che segue il tuo personaggio.

Spero tu abbia trovato utile questo tutorial. Grazie per aver letto!