Share
Aquí hay un simple fragmento de código que es útil todo el tiempo: cómo mover un objeto de un punto a otro, en un movimiento continuo y fluido. Usaremos la distancia pitagórica y un poco de alivio para evitar que las cosas se pongan nerviosas..
Nota: Aunque este tutorial está escrito con JavaScript, debes poder usar las mismas técnicas y conceptos en casi cualquier entorno de desarrollo de juegos.
En algunos juegos es posible que desee mover un personaje a la posición del mouse. A veces, desearás hacer esto cuando el jugador haga clic, otras veces querrás que el personaje se mueva constantemente hacia la posición del mouse y se detenga una vez que alcance la misma posición que el mouse. Haremos lo último en este tutorial, pero ajustar esto para que funcione con los clics del mouse será trivial.
Para mover la entidad a la posición del mouse, primero necesitamos saber qué tan lejos está la entidad del mouse..
Para ello utilizaremos la fórmula de distancia. Esto usa el teorema de Pitágoras y se calcula de la siguiente manera, para coordenadas (x1, y1) y (x2, y2):
\ [d = \ sqrt (\ Delta x) ^ 2 + (\ Delta y) ^ 2 = \ sqrt (x_2-x_1) ^ 2 + (y_2-y_1) ^ 2 \]
En otras palabras, cuadrar la diferencia entre las coordenadas x, cuadrar la diferencia entre las coordenadas y, sumar los dos cuadrados y tomar la raíz cuadrada de la suma.
Para ayudar a entender cómo funciona esto, he creado la siguiente imagen.
En la imagen anterior la distancia x es 7 y la distancia y es 6. Trabajando a través de los pasos llegamos a una distancia de aproximadamente 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 \]
Para implementar esto en el código, tomaremos las coordenadas x e y de nuestro cursor del mouse y nuestra entidad (que en este caso es una nave espacial). Luego, aplicaremos la fórmula de distancia y aumentaremos o disminuiremos la X y y posiciones, siempre que la distancia sea mayor que 1.
A continuación hay un código para ilustrar esto:
function gameLoop () var xDistance = mouseX - ship.x; var yDistance = mouseY - ship.y; var distance = Math.sqrt (xDistance * xDistance + yDistance * yDistance); if (distancia> 1) ship.x + = xDistance * easingAmount; ship.y + = yDistance * easingAmount;
He codificado una demostración que muestra todo esto en acción:
Es posible que haya notado que en el paso anterior estábamos multiplicando la xDistancia y y distancia Por una easingAmount.
Esto hace que nuestra entidad se ralentice a medida que se acerca a su objetivo, en lugar de moverse a la misma distancia en cada tic del bucle de juego. Esto se conoce como relajándose.
Intenta ajustar el valor de easingAmount en el jsFiddle de la demo anterior, y vea qué efecto tiene. También puedes experimentar con el código dentro de la garrapata() función.
He codificado una demostración muy simple para mostrarle cómo se puede aplicar esto a un juego real. Experimente con el código y vea lo que puede hacer!
(Gráficos de Everaldo Coelho, Sneh Roy y nuestro propio Jacob Zinman-Jeanes).
En esta breve Sugerencia rápida, aprendió a mover una entidad a la posición del mouse. Vea si puede ajustar el código para que la entidad se mueva a la última posición en la que el jugador hizo clic, en lugar de seguir continuamente el mouse. Espero que hayan encontrado esto útil - gracias por leer!
Accentsconagua