Share
Ecco un semplice frammento di codice che è sempre utile: come spostare un oggetto da un punto a un altro, in un movimento fluido, continuo e continuo. Useremo la distanza pitagorica e un po 'di attenuazione per impedire che le cose diventino nervose.
Nota: Sebbene questo tutorial sia scritto usando JavaScript, dovresti essere in grado di utilizzare le stesse tecniche e concetti in quasi tutti gli ambienti di sviluppo di giochi.
In alcuni giochi potresti voler spostare un personaggio nella posizione del mouse. A volte vorrai farlo quando il giocatore fa clic, altre volte vorrai che il personaggio si muova costantemente verso la posizione del mouse e si fermi una volta raggiunta la stessa posizione del mouse. Lo faremo in questo tutorial, ma adattarlo per funzionare con i clic del mouse sarà banale.
Per spostare l'entità nella posizione del mouse, dobbiamo prima sapere quanto l'entità è lontana dal mouse.
Per fare ciò useremo la formula della distanza. Questo utilizza il teorema di Pitagora e viene calcolato come segue, per le coordinate (x1, y1) e (x2, y2):
\ [d = \ sqrt (\ Delta x) ^ 2 + (\ Delta y) ^ 2 = \ sqrt (x_2-x_1) ^ 2 + (y_2-y_1) ^ 2 \]
In altre parole, piazza la differenza tra le coordinate x, piazza la differenza tra le coordinate y, aggiungi i due quadrati e prendi la radice quadrata della somma.
Per aiutare a capire come funziona ho creato la seguente immagine.
Nell'immagine sopra la x-distanza è 7 e la distanza y è 6. Lavorando attraverso i passaggi arriviamo a una distanza di circa 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 \]
Per implementare questo codice, prenderemo le coordinate xey del nostro cursore del mouse e della nostra entità (che in questo caso è un'astronave). Quindi, applicheremo la formula della distanza e aumenteremo o diminuiremo l'entità X e y posizioni, purché la distanza sia maggiore di 1.
Di seguito è riportato un codice per illustrare questo:
function gameLoop () var xDistance = mouseX - ship.x; var yDistance = mouseY - ship.y; var distance = Math.sqrt (xDistance * xDistanza + yDistanza * yDistanza); if (distance> 1) ship.x + = xDistance * easingAmount; ship.y + = yDistance * easingAmount;
Ho programmato una demo che mostra tutto questo in azione:
Potresti aver notato che nel passaggio sopra abbiamo moltiplicato il xDistance e yDistance da un easingAmount.
Ciò rallenta la nostra entità non appena si avvicina al bersaglio, piuttosto che spostando la stessa distanza su ogni zecca del ciclo di gioco. Questo è noto come calmarsi.
Prova a regolare il valore di easingAmount nel jsFiddle della demo sopra, e vedere quale effetto ha. Potresti anche sperimentare con il codice all'interno del tick () funzione.
Ho codificato una demo molto semplice per mostrarti come questo potrebbe essere applicato a un vero gioco. Sperimenta con il codice e guarda cosa puoi inventare!
(Grafica di Everaldo Coelho, Sneh Roy e il nostro Jacob Zinman-Jeanes.)
In questo breve suggerimento è stato spiegato come spostare un'entità nella posizione del mouse. Verifica se puoi regolare il codice in modo che l'entità si sposti nell'ultima posizione in cui il giocatore ha fatto clic, invece di seguire continuamente il mouse. Spero che tu abbia trovato questo utile - grazie per la lettura!
Accentsconagua