Movimento circolare in AS3 crea un oggetto in movimento con un'altra ancora

Avere un'orbita di un altro oggetto è una meccanica del movimento che è stata utilizzata sin dall'era dei primi giochi, e rimane a portata di mano fino ad oggi! In questo suggerimento rapido esploreremo la funzione matematica per l'orbita, vediamo come modificarlo e guardiamo gli usi pratici nella progettazione del gioco reale.


Anteprima del risultato finale

Ecco a cosa lavoreremo:


Passaggio 1: l'equazione in orbita

Per creare un'orbita, dobbiamo definire quanto segue:

  • Origine: l'oggetto o la posizione su cui si concentra l'orbita.
  • Orbiter - L'oggetto che orbita attorno all'origine.
  • Angolo: l'angolo corrente dell'orbiter.
  • Velocità: il numero di pixel delle nostre orbite oggetto per fotogramma.
  • Raggio - La distanza dell'orbita dall'origine.

È anche utile notare che il sistema di coordinate di Flash è come un normale piano cartesiano, tranne che l'asse y è capovolto, quindi il valore aumenta man mano che ci spostiamo verso il basso. L'angolo in alto a sinistra del palco ha le coordinate (0,0)


In questa immagine, 0, 90, 180 e 270 si riferiscono agli angoli, misurati in gradi.

Un'altra cosa che dobbiamo capire è come convertire i gradi in radianti, che possono essere facilmente ottenuti usando la seguente formula:

Radianti = Gradi * (PI / 180)

Ecco la funzione orbitale effettiva: richiede due linee, una per posizionare l'orbiter sull'asse xe l'altra per posizionarla sull'asse y:

Orbiter X-Coord = Origine X-Coord + Raggio * cos (Radianti)

Orbiter Y-Coord = Origine Y-Coord + Radius * sin (Radians)

(In un normale piano cartesiano, peccato è usato per x-coord e cos è usato per la coordinata y, ma poiché i nostri angoli aumentano in senso orario - a causa dell'asse Y invertito - i loro spazi vengono scambiati).


Passaggio 2: scrivere l'equazione nel codice

Ora possiamo trasformare la logica in codice reale che possiamo usare. Innanzitutto, dichiara tutte le variabili:

 var orbiter pubblico: Orbiter = new Orbiter (); // MovieClip That Orbits public var origine: Origin = new Origin (); // L'angolo var pubblico di MovieClip That Is Orbited: Number = 0; // Inizia l'orbita dell'angolo iniziale Dalla velocità var varata: Number = 3; // Numero di pixel raggio per raggio pubblico per frame: Number = 75; // Orbita distanza dall'origine

Quindi riscrivi l'equazione per l'uso in AS3 e inseriscila in un ENTER_FRAME funzione del gestore di eventi:

 var rad: Number = angle * (Math.PI / 180); // Conversione di gradi in radianti orbiter.x = origine.x + raggio * Math.cos (rad); // Posiziona l'orbiter lungo l'asse x orbiter.y = origin.y + raggio * Math.sin (rad); // Posiziona l'Orbiter lungo l'asse y

Se provi ora, non accadrà nulla; questo perché l'angolo variabile non sta né aumentando né diminuendo. Pertanto, dobbiamo aumentare o diminuire il valore:

 angolo + = velocità; // L'oggetto andrà in orbita in senso orario - = velocità; // L'oggetto andrà in orbita in senso antiorario

E se vogliamo che il nostro orbiter affronta continuamente una direzione? Bene, ho scritto un'equazione per fare proprio questo!

 orbiter.rotation = (Math.atan2 (orbiter.y-origin.y, orbiter.x-origin.x) * 180 / Math.PI);

A seconda del modo in cui hai disegnato il tuo clip mobile in orbita, potresti dover sottrarre un certo angolo (fuori dalle parentesi) per farlo affrontare nel modo corretto.


Passaggio 3: trasformazione dell'equazione

Ora questo può sembrare folle, ma alcuni di noi potrebbero desiderare di avere la nostra orbita dell'oggetto in un'ellisse. Questo è facilmente fattibile; tutto ciò che dobbiamo fare è moltiplicare in un posto specifico nell'equazione. Moltiplicando il cos o peccato funzioni di un numero intero postivo farà sì che il cerchio si allunghi. Moltiplicandolo per un decimale compreso tra 0 e 1, si comprimerà. E moltiplicandolo per un negativo lo farà ruotare lungo quell'asse:

 (2 * Math.cos (rad)); // Allunga l'orbita lungo l'asse x di un fattore 2 (0.5 * Math.sin (rad)); // Comprime l'orbita lungo l'asse y di un fattore 2 (cioè dimezzala) (-3 * Math.cos (rad)); // Capovolgi l'orbita lungo l'asse x e allungala di un fattore 3

Possiamo anche spostare l'orbita in qualsiasi direzione desideriamo aggiungendo o sottraendo dall'equazione su entrambi gli assi:

 orbiter.x = (origine.x + raggio * Math.cos (rad)) - 50; // sposta l'orbita di 50 pixel a sinistra sull'asse x

Se vuoi saperne di più cos, peccato, e atan2, dai un'occhiata a Trigonometry per gli sviluppatori Flash.


Passaggio 4: usi pratici per l'equazione

Ora è tutto bello e dandy, ma per cosa può essere effettivamente usato? Una grande varietà di cose in realtà!

Se hai mai giocato a Mario Kart avresti ottenuto il powerup "tre conchiglie"; quelle conchiglie sono in orbita usando questa stessa tecnica. Un altro esempio è il gioco del pong circolare ampiamente usato, dove la pagaia orbita lungo un anello all'esterno. Un terzo esempio è dato dai giochi sparatutto in alto e in basso: molti di questi includono un powerup in cui un gruppo di barili orbita attorno al tuo giocatore e schiaccia gli zombi se vengono colpiti cercando di attaccarti.

Come puoi vedere l'uso di questa tecnica può essere utilizzato in qualsiasi cosa, dai giochi standard del settore ai giochi casual.


Conclusione

Grazie per aver dedicato del tempo per imparare questo suggerimento rapido! Se hai qualche domanda lascia un commento qui sotto.