Quick Tips: Trigonometri for Flash Game Developers
10
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av
Dette innlegget er en del av en serie som heter You Do The Math.Quick. Tips: Få et tilfeldig nummer innenfor et angitt område Bruke AS3Simulate prosjektil Motion med Actionscript 3.0
I Distribuer en tank i en isometrisk War Zone, lært deg hvordan du lager et objekt roter til ansikt pekeren og bevege seg mot et sted på klikk. I denne hurtig Tip, vil vi ta en generell titt på regnestykket bak det. Trigonometri
Endelig resultat Forhåndsvisning
Dette er det endelige resultatet fra min forrige tutorial. Det gjør bruk av trigonometri prinsippene vi vil dekke i denne hurtig. Tips:
Beveg musen for å gjøre turret sikte på det, og klikk hvor som helst for å komme på tanken å kjøre til det punktet
< p> Alle programmerer, spesielt noen spill programmerer, ansikter et behov for å flytte objekter på skjermen før eller senere. Det er en enkel oppgave hvis du trenger å flytte et objekt i én retning, for eksempel langs x- eller y-aksen. Men antar at du ønsker å gjøre et objekt følger musepekeren uansett hvor du flytter den, eller lage et racingspill hvor du styrer akselerasjon av en bil ved å trykke pil opp og bruk venstre og høyre piltaster for å styre.
La oss si at du trykker på høyre piltast én gang, og det legger 10 grader til bilens rotasjon eiendom, men du likevel vil ha bilen til å gå videre (dvs. akselerere) når du trykker på en pil opp, selv om en bil er slått mot bunnen av skjermen eller en venstre eller høyre side etc. og du ikke vil at det skal se ut som den er skli sidelengs. Så, hvordan ville du gjøre det? Det er der litt trigonometri hjelper!
For de som er flinke i matte det ikke vil være et problem, men det er mange mennesker som ikke forstår det i det hele tatt, eller er selv redd for det . Jeg skal prøve å bryte det ned så tydelig som mulig i denne Quick Tips
Trinn 1:. The Flash koordinatsystem
I utgangspunktet la oss huske det kartesiske koordinatsystem. Høres komplisert ut? Hvis ja, bare se på bildet under, og jeg er sikker på at det vil være kjent:
Det har X og Y-aksene; du kan tydelig se hvor X og Y er positive og negative. Når det kommer til koordinater i Flash, er situasjonen litt annerledes. Flash har også sitt koordinatsystem, men det ser ut som det kartesiske system opp ned:
Det har også X og Y-aksene og Point of Origin, den eneste forskjellen er at Y-aksen er positiv under Alle symbol opprettet i Flash har sin egen innebygde koordinatsystem. Hvis du oppretter et nytt symbol, enten det er et filmklipp eller en knapp, kan du se en "registreringspunktet" eiendom i symbolet etableringen dialogboksen. Hva er dette? Registreringen poeng er et poeng av opprinnelsen til et symbol. Poenget at objektet vil rotere rundt hvis du endrer sin rotasjon eiendom. Merk: opprinnelsen punktet av scenen tilfellet er i sin venstre hjørne. Dette betyr at alle punkter på scenen har positive X og Y-koordinatene I denne hurtig Tips vil vi se på de tre mest brukte trigonometriske funksjoner i Flash.; Sinus, cosinus og ATAN2. Noen mennesker kan spørre, hvordan kan vi bruke disse funksjonene i Flash? Vel, la oss se på noen praktiske eksempler, og forstå hvorfor vi trenger dem og hvordan de kan gjøre livet litt enklere La oss beregne vinkelen mellom to punkter . Opprett en ny Flash-fil (Actionscript 3.0). Velg det første bildet av tidslinjen og traff F9 for å åpne en Handlinger Panel. På dette punktet la oss gjøre noe enkelt. Bare skriv dette inn i prosedyrepanelet: Dette vil gi oss den posisjonen til musepekeren hver gang vi klikker på scenen. Ikke akkurat fascinerende, er det? Ok, nå antar at du ønsker å "fortelle" noen objekt musepekeren koordinater i forhold til dette objektet, og deretter vise den retning å reise for å komme til pekeren posisjon. Lukk Handlinger Panel og gå til Insert > New Symbol eller bare trykke Ctrl + F8. Gi den et navn (eller la et standardnavn) og trykk OK. Den lille trådkorset i midten av skjermen er det registreringspunktet av symbolet eller dets utgangspunktet. Dette blir objektets X- og Y-posisjonene. Nå ta tak i Oval verktøyet (O-tasten) og tegne en sirkel (med Shift-tasten nede) hvor som helst på skjermen. Klikk på sirkelen for å velge den og gå til sin Properties panel > Plassering og størrelse. For W (bredde) type i 20, det samme for H (høyde) og for X og Y posisjon type i (-10). Dette vil gjøre sirkelen 20x20 px og nøyaktig sentrere det til registreringspunktet. Nå avslutte modus symbolet redigering (Klikk Scene 1 ovenfor), ta dette symbolet i biblioteket og bare dra den til scenen (hvor som helst, vil vi få det posisjon dynamisk senere). Når objektet er på scenen, gir det en forekomst navn mCircle. Nå ønsker vi å beregne retning fra vår sirkelens Y og X stilling til musepekeren er Y og X posisjon. Den røde linjen i bildet under er den retningen vi trenger å vite. Det kan bli funnet ved hjelp av en standard Math.atan2 () -funksjonen. La oss gjøre det nå. Slett de "spor" uttalelser fra koden og lage en ny variabel i stedet. Deretter spore denne variabelen for å se hva du får: Merk at e.stageY - mCircle.y er vertikal Du vil være å få disse typer tall i utgangspanelet.: These er de relative vinkler mellom (X-akselinje og den røde linje) i radianer. Hvorfor ikke grader? Vel, bruker Flash radianer å beregne sinus og cosinus, men hvis du ønsker å vite hva disse vinkler i grader du kan alltid formere "myAtan2" med 180 og dele det med Math.PI. Liker du dette: Redaktør: Som en ekstra ressurs, her er et flott sett med funksjoner for grad /radianer konvertering. Det er lagret som et tekstutdrag på snipplr.com, det siste medlemmet av Envato nettverk Som vi kjenner vinkelen mellom to punkter vi kan nå beregne hvor mange piksler må vi legge til sirkelens X og Y-egenskaper hver ramme til den når klikkpunktet. La oss undersøke hva vi trenger å vite her: Den blå linjen er cosinus av vinkelen, og den oransje er sinus til vinkelen. Med andre ord, I stedet for å forklare hvordan Tenk vinkelen mellom to objekter er 45 grader. I dette tilfelle er forholdet mellom sinus og cosinus er 1: 1 (se bildet under), noe som betyr at vi har å øke X- og Y-egenskaper i sirkel med samme beløp hver ramme for å nå målet. For eksempel må du legge til 5 piksler til X og 5 piksler til Y hver ramme. I dette diagrammet har vinkel endret og forholdet mellom sinus og cosinus har endret seg også. Det handler om 1: 2 nå. I dette tilfellet må vi legge til dobbelt så mange piksler til vår sirkelens X eiendom enn å Y. F.eks + X = 10, Y + = 5; Du vil nok spørre hvorfor vi trenger sinus og cosinus om vi allerede vet at klikket punkt koordinater - vi kan bare flytte vår mCircle til dem med en gang? Vel, du kunne ha gjort det på denne måten hvis du ønsket sirkelen (eller et annet objekt) til "teleportere" på et klikk punkt koordinater snarest klikk oppstår. Men hva hvis du vil at den skal bevege seg gradvis i retning av et klikk? For å gjøre dette må du legge til en bestemt mengde piksler til sin X og Y egenskaper, for eksempel hver ramme eller hvert sekund. La oss nå beregne hvor mange piksler vi bør legge til sin X og Y egenskaper basert på sinus og cosinus til vinkelen mellom vårt objekt og et klikk punkt. Husk, Flash kjenner vinkelen mellom dem fra denne operasjonen: For dette formålet vi bør oppdatere vår kode en litt. Legg merke til hva jeg har gjort her: jeg forfremmet alle mine variabler utenfor noen funksjoner, for nå har jeg mer enn én funksjon, og jeg ønsker disse variablene til være tilgjengelig fra alle funksjoner. Scenen har en hendelse lytteren for museklikk, så da klikket skjer, metoden calculateAngle () får ringte og de neste variablene er instansiert: Denne funksjonen legger også en . hendelsen lytteren for angir rammen til scenen, som kaller moveTheCircle () metoden hver ramme Nå, la oss bryte ned vår moveTheCircle () metoden selv. For nå virker det bare to ting: Som du kan se, den første linjen beregner hvor mange piksler det bør legge til X eiendom og andre avtaler med Y. La meg forklare. Math.cos finner cosinus (x eiendom) av "myAtan2" vinkel, gjør tak i Math.sin det samme med sin sinus (y eiendom). Hvis vår myAtan2 vinkel tilsvarer omtrent 0,785 radianer (45 grader) cosinus og sinus vil begge være lik om 0.707 ... Du kan bruke en kalkulator for å sjekke det ut. Et enkelt regnestykke viser hvor mange piksler koden ovenfor vil legge til vår objektets X og Y-egenskaper hvis vinkelen er 45 grader Hvis vinkelen f.eks er. 60 grader da resultatet ville bli som dette: Vel, vi er nesten ferdig. Men det er fortsatt et lite problem med vår kode. Du har kanskje lagt merke til at vårt objekt aldri stopper, selv om det kommer et klikk punktet det fortsatt holder på å flytte. Vi kan fikse dette problemet veldig enkelt. Som vår objekt beveger seg mot klikkpunkt, avstanden mellom dem forkorter så absolutte (Math.abs () svinger negative tall til positive ved ganske enkelt å multiplisere dem med -1. Det gjør ikke noe for å tall som allerede er positive.) Du trenger ikke å legge dette spor uttalelse til koden din, har jeg sette det her bare for å vise deg hvordan du kan se absolutt verdi. I dette tilfellet både i absolutte verdier er mindre enn tre når objektet når klikkpunktet. Så det vi trenger nå, er å legge til en hvis setningen inne i vårt moveTheCircle () -funksjonen. Når den absolutte verdien blir under 3 blir angir rammen lytteren fjernet. Vi må kontrollere både X og Y er absolutte verdier fordi en av dem kan nå 3 selv når den andre ikke har det. Dette betyr at objektene kan stoppe slik: Bildet over viser den versjonen som bare X absolutte verdi er avmerket. The X avstand absolutte verdien er allerede mindre enn tre, så det sluttet å betale noen oppmerksomhet til Y-verdien. Vel, det er det. Jeg håper dette Quick Tips vil hjelpe deg å forstå noen trigonometri brukes i Flash utvikling :) Anmeldelser
X-aksen.
Trinn 2:. Beregning Angle
stage.addEventListener (MouseEvent.CLICK, calculateAngle) -funksjonen calculateAngle (e: MouseEvent): void {trace ("scenen X" + e.stageX); trace ("scenen Y" + e.stageY)}
stage.addEventListener (MouseEvent.CLICK, calculateAngle); Var myAtan2: Number; funksjon calculateAngle (e: MouseEvent): void {myAtan2 = Math.atan2 (e.stageY - mCircle .Y, e.stageX - mCircle.x); trace (myAtan2);}
avstand fra musen til sirkelen, og e.stageX - mCircle.x er horisontal avstand
-2.4190173531283333.01186602469253462.57049594523403261.67265889174239321.02388474955510580.21368467849101092
trace (myAtan2 * 180 /Math.PI) //gir deg vinkelen i grader;
Trinn 3: Forstå sinus og cosinus
Sinus (vinkel) == e.stageY - mCircle.y
cosinus (vinkelen) == e.stageX - mCircle.x
sinus og cosinus arbeid, jeg vil demonstrere hvordan man bruker dem med noen praktiske eksempler. Omsvøp snakker sinus og cosinus er forholdet mellom Y og X i vår vinkel.
Trinn 4: Praktiske eksempler
myAtan2 = Math.atan2 (e.stageY - mCircle.y, e.stageX - mCircle.x);
stage.addEventListener (MouseEvent.CLICK, calculateAngle); //2 er den maksimale mengden av piksler for å legge til objekter X og Y eiendommer hver ramme //du kan bruke så mange du liker Var moveAmount: Number = 2; Var myAtan2: Number; Var mouseClickX: Number; Var mouseClickY: Number; funksjon calculateAngle (e: MouseEvent): void {mouseClickX = e.stageX; mouseClickY = e.stageY; myAtan2 = Math.atan2 (mouseClickY - mCircle.y, mouseClickX - mCircle.x); addEventListener (Event.ENTER_FRAME, moveTheCircle);} funksjon moveTheCircle (e: Hendelses): void {mCircle.x + = Math.cos (myAtan2) * moveAmount; mCircle.y + = tak i Math.sin (myAtan2) * moveAmount;}
Var moveAmount: Number = 2; Var myAtan2: Number; Var mouseClickX: Number; Var mouseClickY: Number;
mouseClickX = e.stageX; mouseClickY = e.stageY; myAtan2 = Math.atan2 (mouseClickY - mCircle.y, mouseClickX - mCircle.x);
addEventListener (Event.ENTER_FRAME, moveTheCircle);
Trinn 5: Beregning Pixels
mCircle.x + = Math.cos (myAtan2) * moveAmount; mCircle.y + = tak i Math.sin (myAtan2) * moveAmount;
cosinus (45 grader) = 0,707 * 2 = 1,414;. Sine ( 45 grader) = 0,707 * 2 = 1,414, så den koden vil trene disse resultatene: mCircle.x + = 1,414 piksler, mCircle.y + = 1,414 piksler;
Cosinus (60 grader) = 0,5 * 2 = 1; Sinus (60 grader) = 0,866 * 2 = 1,732, og koden ville fungere på denne måten: mCircle.x + = 1 pixel; mCircle.y + = 1.732 piksler;
Trinn 6: Fikse et problem med koden
verdi av avstanden minsker også. Vi kan holde styr på det slik:
trace (Math.abs (mCircle.x - mouseClickX)); trace (Math.abs (mCircle.y - mouseClickY));
funksjon moveTheCircle (e: Hendelses): void {mCircle.x + = Math.cos (myAtan2) * moveAmount; mCircle.y + = tak i Math.sin (myAtan2) * moveAmount; //Sjekk om horisontale og vertikale avstander fra sirkelen til muse punktet er svært nær if (Math.abs (mCircle.x - mouseClickX) < 3 & & Math.abs (mCircle.y - mouseClickY) < 3) {removeEventListener (Event.ENTER_FRAME, moveTheCircle); }}
Konklusjon