Share
Här är en enkel kodbit som hela tiden kommer till nytta: hur man flyttar ett objekt från en punkt till en annan i en jämn, flytande och kontinuerlig rörelse. Vi använder Pythagoreas avstånd och lite lättnad för att stoppa saker att bli jittery.
Notera: Även om denna handledning skrivs med JavaScript bör du kunna använda samma tekniker och begrepp i nästan vilken spelutvecklingsmiljö som helst.
I vissa spel kanske du vill flytta ett tecken till musens position. Ibland vill du göra det när spelaren klickar, andra gånger vill du att tecknet ständigt rör sig mot muspositionen och kommer vila när det når samma position som musen. Vi kommer att göra det senare i denna handledning, men justering av detta för att fungera med musklick kommer att vara trivialt.
För att flytta enheten till musens position måste vi först veta hur långt enheten är från musen.
För att göra detta använder vi avståndsformeln. Detta använder Pythagoras teorem och beräknas enligt följande, för koordinater (x1, y1) och (x2, y2):
\ [d = \ sqrt (\ Delta x) ^ 2 + (\ Delta y) ^ 2 = \ sqrt (x_2-x_1) ^ 2 + (y_2-y_1) ^ 2 \]
Med andra ord, kvadrerar du skillnaden mellan x-koordinaterna, kvadrerar skillnaden mellan y-koordinaterna, lägger de två rutorna samman och tar kvadratroten av summan.
För att förstå hur det här fungerar har jag skapat följande bild.
I bilden ovan är x-avståndet 7 och y-avståndet är 6. Arbeta genom stegen vi anländer på ett avstånd av 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 \]
För att implementera detta i kod tar vi x- och y-koordinaterna för både vår muspekare och vår enhet (vilket i detta fall är ett rymdskepp). Då ska vi tillämpa avståndsformeln och öka eller minska enhetens x och y positioner, så länge som avståndet är större än 1.
Nedan finns en del kod för att illustrera detta:
funktion gameLoop () var xDistance = mouseX - ship.x; var yDistance = mouseY - ship.y; varavstånd = Math.sqrt (xDistance * xDistance + yDistance * yDistance); om (avstånd> 1) ship.x + = xDistance * easingAmount; ship.y + = yDistance * easingAmount;
Jag har kodat upp en demo som visar allt detta i åtgärd:
Du kanske har märkt att i steget ovan multiplicerade vi xDistance och yDistance av en easingAmount.
Detta gör att vår enhet saktar ner när den närmar sig sitt mål, snarare än att flytta samma avstånd på varje kryss i spelslingan. Detta är känt som lättare ut.
Försök att justera värdet på easingAmount i jsFiddle of demo ovan, och se vilken effekt det har. Du kan också experimentera med koden inuti bock() fungera.
Jag har kodat för en mycket enkel demo för att visa dig hur det här kan tillämpas på ett riktigt spel. Experimentera med koden och se vad du kan komma med!
(Grafik från Everaldo Coelho, Sneh Roy, och vår egen Jacob Zinman-Jeanes.)
I den här snabba Snabbtipset lärde du dig hur du flyttar en enhet till muspositionen. Se om du kan justera koden så att enheten flyttar till det sista läget där spelaren klickade, i stället för att fortsätta följa musen. Jag hoppas att du fann det här användbart - tack för att du läste!
Accentsconagua