Share
Iată un fragment simplu de cod care vine la îndemână tot timpul: cum să mutați un obiect dintr-un punct în altul, într-o mișcare netedă și continuă. Vom folosi distanța pitagoreană și puțină ușurare pentru a opri lucrurile.
Notă: Deși acest tutorial este scris folosind JavaScript, ar trebui să puteți utiliza aceleași tehnici și concepte în aproape orice mediu de dezvoltare a jocului.
În unele jocuri, poate doriți să mutați un personaj în poziția mouse-ului. Uneori veți dori să faceți acest lucru atunci când jucătorul face clic, de altă dată, veți dori ca personajul să se deplaseze în mod constant spre poziția mouse-ului și să se odihnească odată ce atinge aceeași poziție cu mouse-ul. Vom face acest lucru în acest tutorial, dar ajustarea acestui lucru pentru a lucra cu click-urile mouse-ului va fi banală.
Pentru a muta entitatea în poziția mouse-ului, trebuie mai întâi să aflăm cât de departe este entitatea de la mouse.
Pentru a face acest lucru vom folosi formula de distanta. Aceasta utilizează teorema lui Pythagoras și se calculează după cum urmează, pentru coordonate (x1, y1) și (x2, y2):
\ (d) \ \ sqrt (\ Delta x) ^ 2 + (\ Delta y) ^ 2 = \ sqrt (x_2-x_1) ^ 2 +
Cu alte cuvinte, ați pătrat diferența dintre coordonatele x, ați pătrat diferența dintre coordonatele y, adăugați cele două pătrate împreună și luați rădăcina pătrată a sumei.
Pentru a înțelege cum funcționează, am creat următoarea imagine.
În imaginea de mai sus distanța x este 7 și y-distanța este 6. Lucrând prin pași ajungem la o distanță de aproximativ 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 \]
Pentru a implementa acest lucru în cod, vom lua coordonatele x și y ale cursorului mouse-ului și al entității noastre (care în acest caz este o navă spațială). Apoi, vom aplica formula de distanță și vom mări sau micșora entitatea entității X și y poziții, atâta timp cât distanța este mai mare de 1.
Mai jos este un cod pentru a ilustra acest lucru:
funcția gameLoop () var xDistance = mouseX - ship.x; var yDistance = mouseYY - ship.y; var distanța = Math.sqrt (xDistance * xDistance + yDistance * yDistance); dacă (distanța> 1) ship.x + = xDistance * easingAmount; nava.y + = yDistance * easingAmount;
Am codificat un demo care arată toate acestea în acțiune:
S-ar putea să fi observat că în pasul de mai sus am înmulțit xDistance și yDistance de un easingAmount.
Acest lucru face ca entitatea noastră să încetinească în timp ce se apropie de țintă, mai degrabă decât să se deplaseze la aceeași distanță pe fiecare bifă a jocului. Acest lucru este cunoscut sub numele de relaxare.
Încercați să ajustați valoarea easingAmount în fișierul jsFiddle al demo-ului de mai sus și vedeți ce efect are. De asemenea, puteți experimenta codul din interiorul lui tick () funcţie.
Am codificat o demonstrație foarte simplă pentru a vă arăta cum ar putea fi aplicată aceasta într-un joc real. Experimentați codul și vedeți ce puteți face!
(Grafica de la Everaldo Coelho, Sneh Roy și Jacob Zinman-Jeanes.)
În acest scurt Quick Tip, ați învățat cum să mutați o entitate în poziția mouse-ului. Vedeți dacă puteți ajusta codul astfel încât entitatea să se mute în ultima poziție în care a făcut clic pe player, mai degrabă decât să urmărească continuu mouse-ul. Sper că ați găsit acest lucru util - mulțumesc pentru citire!
Accentsconagua