Share
Her er en enkel kodekode som kommer til nytte hele tiden: Hvordan flytte et objekt fra ett punkt til et annet, i en jevn, flytende, kontinuerlig bevegelse. Vi bruker den pythagoranske avstanden og litt lettelse for å stoppe ting som blir jittery.
Merk: Selv om denne opplæringen er skrevet med JavaScript, bør du kunne bruke de samme teknikkene og konseptene i nesten hvilket som helst spillutviklingsmiljø.
I noen spill kan du ønske å flytte et tegn til musens posisjon. Noen ganger vil du ønske å gjøre dette når spilleren klikker, andre ganger vil du at tegnet alltid skal bevege seg mot museposisjonen og komme til hvile når den når samme posisjon som musen. Vi vil gjøre sistnevnte i denne opplæringen, men det vil være trivielt å justere dette til arbeid med museklikk.
For å flytte enheten til posisjonen til musen, må vi først vite hvor langt unna enheten er fra musen.
For å gjøre dette vil vi bruke avstandsformelen. Dette bruker Pythagoras teorem og beregnes som følger, for koordinater (x1, y1) og (x2, y2):
\ [d = \ sqrt (\ Delta x) ^ 2 + (\ Delta y) ^ 2 = \ sqrt (x_2-x_1) ^ 2 + (y_2-y_1) ^ 2 \]
Med andre ord, firkant du forskjellen mellom x-koordinatene, firkant forskjellen mellom y-koordinatene, legg de to rutene sammen, og ta kvadratroten av summen.
For å forstå hvordan dette virker, har jeg laget følgende bilde.
I bildet ovenfor er x-avstanden 7 og y-avstanden er 6. Gjennom trinnene kommer vi til en avstand på ca 9,21.
\ [D = \ sqrt (x_2-x_1) ^ 2 + (y_2-y_1) ^ 2 \\
d = \ sqrt (10-3) ^ 2 + (3-9) ^ 2 \\
d = \ sqrt (7) ^ 2 + (- 6) ^ 2 \\
d = \ sqrt 49 + 36 \\
d = \ sqrt 85 \\
d \ approx9.21 \]
For å implementere dette i koden vil vi ta x- og y-koordinatene til både musemarkøren og vår enhet (som i dette tilfellet er et romskip). Deretter vil vi bruke avstandsformelen, og øke eller redusere enhetens x og y posisjoner, så lenge avstanden er større enn 1.
Nedenfor er noen kode for å illustrere dette:
funksjon gameLoop () var xDistance = mouseX - ship.x; var yDistance = mouseY - ship.y; var avstand = Math.sqrt (xDistance * xDistance + yDistance * yDistance); hvis (avstand> 1) ship.x + = xDistance * easingAmount; ship.y + = yDistance * easingAmount;
Jeg har kodet opp en demo som viser alt dette i aksjon:
Du har kanskje lagt merke til at i trinnet ovenfor vi multipliserte xDistance og yDistance av en easingAmount.
Dette gjør vår enhet tregere når den nærmer seg sitt mål, i stedet for å flytte den samme avstanden på hvert kryss i spillsløyfen. Dette er kjent som lettelse ut.
Prøv å justere verdien av easingAmount i jsFiddle av demoen over, og se hvilken effekt den har. Du kan også eksperimentere med koden inne i sett kryss() funksjon.
Jeg har kodet en veldig enkel demo for å vise deg hvordan dette kan brukes til et ekte spill. Eksperimenter koden og se hva du kan komme med!
(Grafik fra Everaldo Coelho, Sneh Roy, og vår egen Jacob Zinman-Jeanes.)
I denne korte raske tipsen lærte du hvordan du flyttet en enhet til museposisjonen. Se om du kan justere koden slik at enheten beveger seg til den siste posisjonen der spilleren klikket, i stedet for å fortsette å følge musen. Jeg håper du fant dette nyttig - takk for å lese!
Accentsconagua