Share
Hier is een eenvoudig codefragment dat altijd van pas komt: hoe u een object van het ene punt naar het andere verplaatst, in een vloeiende, vloeiende, continue beweging. We gebruiken de afstand van Pythagoras en een beetje ontspanning om te voorkomen dat dingen schokkerig worden.
Notitie: Hoewel deze tutorial met JavaScript is geschreven, zou je in bijna elke game-ontwikkelomgeving dezelfde technieken en concepten moeten kunnen gebruiken.
In sommige games wil je misschien een personage verplaatsen naar de positie van de muis. Soms zul je dit willen doen wanneer de speler klikt, andere keren zul je willen dat het personage constant naar de positie van de muis beweegt en tot rust komt zodra het dezelfde positie bereikt als de muis. We zullen dit laatste doen in deze tutorial, maar dit aanpassen om met muisklikken te werken, zal triviaal zijn.
Om de entiteit naar de positie van de muis te verplaatsen, moeten we eerst weten hoe ver de entiteit van de muis verwijderd is.
Om dit te doen zullen we de afstandsformule gebruiken. Dit maakt gebruik van de stelling van Pythagoras en wordt als volgt berekend voor coördinaten (x1, y1) en (x2, y2):
\ [d = \ sqrt (\ Delta x) ^ 2 + (\ Delta y) ^ 2 = \ sqrt (x_2-x_1) ^ 2 + (y_2-y_1) ^ 2 \]
Met andere woorden, u tekent het verschil tussen de x-coördinaten vierkant, vierkant het verschil tussen de y-coördinaten, voegt de twee vierkanten samen toe en neemt de vierkantswortel van de som.
Om te helpen begrijpen hoe dit werkt, heb ik de volgende afbeelding gemaakt.
In de bovenstaande afbeelding is de x-afstand 7 en de y-afstand is 6. Door de stappen heen werkend komen we op een afstand van ongeveer 9.21 uit.
\ [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 \]
Om dit in code te implementeren, nemen we de x- en y-coördinaten van zowel onze muiscursor als onze entiteit (wat in dit geval een ruimteschip is). Vervolgens zullen we de afstandsformule toepassen en de entiteit verhogen of verlagen X en Y posities, zolang de afstand groter is dan 1.
Hieronder is een code om dit te illustreren:
function gameLoop () var xDistance = mouseX - ship.x; var yDistance = mouseY - ship.y; var distance = Math.sqrt (xDistance * xDistance + yDistance * yDistance); if (afstand> 1) ship.x + = xDistance * easingAmount; ship.y + = yDistance * easingAmount;
Ik heb een demo gecodeerd die dit in actie laat zien:
Je hebt misschien gemerkt dat we in de stap hierboven de xDistance en yDistance bij een easingAmount.
Dit maakt onze entiteit langzamer naarmate het doel nadert, in plaats van dezelfde afstand op elke vink van de spellus te verplaatsen. Dit staat bekend als versoepelen.
Probeer de waarde van aan te passen easingAmount in de jsFiddle van de demo hierboven, en zie welk effect het heeft. Je zou ook kunnen experimenteren met de code in de Kruis aan() functie.
Ik heb een heel eenvoudige demo gecodeerd om je te laten zien hoe dit kan worden toegepast op een echt spel. Experimenteer met de code en kijk wat je kunt bedenken!
(Afbeeldingen van Everaldo Coelho, Sneh Roy en onze eigen Jacob Zinman-Jeanes.)
In deze korte Quick Tip heb je geleerd hoe je een entiteit verplaatst naar de muispositie. Kijk of je de code zo kunt aanpassen dat de entiteit naar de laatste positie gaat waar de speler heeft geklikt, in plaats van continu de muis te volgen. Ik hoop dat je dit nuttig hebt gevonden - bedankt voor het lezen!
Accentsconagua