Sirkulær bevegelse i AS3 Gjør en bevegelig gjenstandssirkel et annet

Å ha en gjenstand bane en annen er en bevegelsesmekaniker som har blitt brukt siden den tidlige spilleraderen, og det forblir hendig til denne dag! I denne Quick Tip vil vi utforske den matematiske funksjonen for bane, se hvordan du endrer den, og se på praktiske bruksområder i selve spilldesign.


Endelig resultatforhåndsvisning

Her er hva vi skal jobbe for:


Trinn 1: Den omløpende ligningen

For å lage en bane må vi definere følgende:

  • Opprinnelse - Objektet eller posisjonen som banen ligger på.
  • Orbiter - Objektet som veksler opprinnelsen.
  • Vinkel - Den nåværende vinkelen til orbiteren.
  • Hastighet - Antall piksler vårt objekt kretser per ramme.
  • Radius - Orbiterens avstand fra opprinnelsen.

Det er også nyttig å merke seg at Flashs koordinatsystem er som et vanlig kartesisk fly, bortsett fra at y-aksen er vendt, slik at verdien øker når vi beveger oss nedover. Det øverste venstre hjørnet av scenen har koordinater (0,0)


I dette bildet, 0, 90, 180 og 270 refererer til vinkler, målt i grader.

En annen ting som vi trenger å forstå er hvordan du konverterer grader til radianer, som lett kan oppnås ved å bruke følgende formel:

Radianer = Grader * (PI / 180)

Her er den faktiske banefunksjonen: den krever to linjer, en for å plassere orbiteren på x-aksen og den andre for å plassere den på y-aksen:

Orbiter X-Coord = Opprinnelse X-Coord + Radius * cos (Radianer)

Orbiter Y-Coord = Opprinnelse Y-Coord + Radius * sin (radianer)

(I et normalt kartesisk fly, synd brukes til x-koord og cos brukes til y-koord, men siden vinklene øker med klokken - på grunn av den omvendte y-aksen - blir de byttet ut.)


Trinn 2: Skrive likningen i kode

Vi kan nå slå logikken inn i den faktiske koden vi kan bruke. Først erklærer du alle variablene:

 offentlig var orbiter: Orbiter = ny Orbiter (); // The MovieClip som Orbits offentlig var opprinnelse: Origin = Ny Origin (); // The MovieClip som er Orbited public var vinkel: Number = 0; // Begynnende vinkling starter fra offentlig varighet: Nummer = 3; // Antall piksler Orbited Per Frame public var radius: Number = 75; // Orbiting Avstand fra opprinnelse

Skriv om igjen ligningen for bruk i AS3 og legg den inn i en ENTER_FRAME hendelseshåndteringsfunksjon:

 var rad: Nummer = vinkel * (Math.PI / 180); // Konvertere grader til radianer orbiter.x = origin.x + radius * Math.cos (rad); // Plasser Orbiter Langs x-aksen orbiter.y = origin.y + radius * Math.sin (rad); // Plasser Orbiter Langs y-aksen

Hvis du tester nå, vil ingenting skje; Dette skyldes at variabelvinkelen ikke øker eller minker. Derfor må vi øke eller redusere verdien:

 vinkel + = hastighet; // Objektet vil bane med urviseren vinkel - = hastighet; // Objektet vil bane mot klokka

Nå, hva hvis vi vil at vår orbiter kontinuerlig står overfor en retning? Vel, jeg har skrevet en ligning for å gjøre nettopp det!

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

Avhengig av hvilken måte du har trukket din orbiter-filmklipp, må du kanskje trekke en viss vinkel (utenfor parentesen) for å få den til å møte den riktige måten.


Trinn 3: Transformere ligningen

Nå kan dette høres galt, men noen av oss vil kanskje ha vårt objekt bane i en ellipse. Dette er lett gjennomførbart; alt vi må gjøre er å formere seg i et bestemt sted i ligningen. Multiplisere cos eller synd funksjoner ved et positivt hele tall vil føre til at sirkelen strekker seg. Hvis du multipliserer det med en desimaltall på mellom 0 og 1, blir det komprimert. Og multiplisere det med en negativ vil føre til at den flipper langs den aksen:

 (2 * Math.cos (rad)); // Strek bane langs x-aksen med en faktor på 2 (0.5 * Math.sin (rad)); // Komprimere bane langs y-aksen med en faktor på 2 (dvs. halvere den) (-3 * Math.cos (rad)); // Vri bane langs x-aksen og strekk den med en faktor på 3

Vi kan også skifte bane i hvilken som helst retning vi ønsker ved å legge til eller trekke fra ligningen på hver akse:

 orbiter.x = (origin.x + radius * Math.cos (rad)) - 50; // Skift bane 50 piksler igjen på x-aksen

Hvis du vil lære mer om cos, synd, og atan2, ta en titt på Trigonometry for Flash Developers.


Trinn 4: Praktiske bruksområder for ligningen

Nå er dette fint og dumt, men hva kan det egentlig brukes til? Et stort utvalg av ting faktisk!

Hvis du noen gang har spilt Mario Kart, ville du ha fått "tre skaller" disse skallene er omløpende ved hjelp av denne svært teknikken. Et annet eksempel er det mye over brukte sirkelpong-spillet, hvor padlen går rundt en ring på utsiden. Et tredje eksempel er fra topp down zombie shooter spill: mange av dem inkluderer en powerup hvor en gruppe tønner kretser rundt spilleren din og knuser noen zombier hvis de blir slått prøver å angripe deg.

Som du kan se bruk for denne teknikken kan brukes i alt fra industri standard spill til casual spill.


Konklusjon

Takk for at du tok deg tid til å lære denne raske tipsen! Hvis du har noen spørsmål, legg igjen en kommentar nedenfor.