Mover con el ratón (parte 1)

Motivado por un comentario que me hicieron en un vídeo, muestro en papel una forma rápida de usar el ratón para hacer que un objeto se desplace hasta donde hagamos clic.

Este curso ha sido marcado como anticuado y no está siendo revisado de forma activa. Es posible que la información pueda estar desactualizada o que los enlaces se hayan roto.

Mover un personaje con el ratón es una tarea que, aunque parezca sencilla, requiere un enfoque cuidadoso para lograr un movimiento suave y controlado. En lugar de hacer que el personaje se teletransporte instantáneamente al punto donde hacemos clic, queremos que se desplace de forma natural, recorriendo el camino en un tiempo finito. Para conseguir esto, podemos apoyarnos en un sistema basado en estados y en el cálculo de velocidades.

Imaginemos que nuestro personaje está en una posición inicial con coordenadas PX y PI (para el eje X y el eje Y, respectivamente). Cuando hacemos clic en la pantalla, definimos un punto destino con coordenadas DX y DY. El objetivo es que el personaje se mueva desde su posición actual hasta ese destino, siguiendo un movimiento rectilíneo uniforme.

Para controlar este proceso, introducimos un semáforo con dos estados: stop y mueve. Cuando el semáforo está en stop, el personaje permanece quieto. Al hacer clic, el semáforo cambia a mueve, y el sistema comienza a desplazar al personaje hacia el destino. Una vez que el personaje llega a DX, DY, el semáforo vuelve a stop y el movimiento se detiene.

El cálculo de la velocidad es clave para que el desplazamiento sea uniforme y se complete en un tiempo determinado, que llamaremos T. La fórmula básica que utilizamos es la del movimiento rectilíneo uniforme:

S = S₀ + V × T

Aquí, S es la posición final, S₀ la posición inicial, V la velocidad y T el tiempo transcurrido. Despejando la velocidad, obtenemos:

V = (S - S₀) / T

Aplicando esto a cada coordenada, calculamos las velocidades en X y Y:

VX = (DX - OX) / T;
VY = (DY - OI) / T;

Donde OX y OI son las coordenadas de origen (posición inicial del personaje), y DX y DY las del destino.

Una vez calculadas las velocidades, en cada actualización del juego (por ejemplo, en el método update), incrementamos la posición del personaje sumando la velocidad multiplicada por el tiempo transcurrido desde la última actualización (delta), que suele estar en milisegundos. Así, las nuevas posiciones se calculan como:

PX += VX * delta / 1000.0;
PI += VY * delta / 1000.0;

Este proceso se repite continuamente mientras el semáforo esté en mueve. Cuando detectamos que el personaje ha alcanzado o superado la posición destino (es decir, cuando PX es igual o mayor que DX y PI igual o mayor que DY, considerando la dirección del movimiento), cambiamos el semáforo a stop para detener el movimiento.

Además, cada vez que hacemos un nuevo clic, actualizamos el origen a la posición actual del personaje y el destino a la nueva posición clicada, recalculando las velocidades para iniciar un nuevo desplazamiento.

Este método sencillo nos permite controlar el movimiento del personaje con el ratón de forma fluida y predecible, sin complicarnos con algoritmos complejos de búsqueda de rutas. Más adelante, podremos combinar esta base con técnicas avanzadas para que el personaje navegue por escenarios más complejos, pero por ahora, este sistema de semáforo y cálculo de velocidad es una excelente forma de empezar a mover personajes con clics en pantalla.

Lista de reproducción
  1. 1
    Instalando las herramientas Java
    11 minutos
  2. 2
    Instalando Slick2D
    26 minutos
  3. 3
    Estados e imágenes
    23 minutos
  4. 4
    Respuesta de usuario
    24 minutos
  5. 5
    Colisiones
    25 minutos
  6. 6
    Matemáticas y física
    13 minutos
  7. 7
    SpriteSheet
    13 minutos
  8. 8
    Tilemaps básicos
    23 minutos
  9. 9
    Escalas
    11 minutos
  10. 10
    Animaciones (parte 1)
    14 minutos
  11. 11
    Animaciones (parte 2)
    15 minutos
  12. 12
    Radiografía de un estado
    12 minutos
  13. 13
    Mover con el ratón (parte 1)
    11 minutos
  14. 14
    Mover con el ratón (parte 2)
    13 minutos
  15. 15
    Sonido
    13 minutos
  16. 16
    Música
    14 minutos
  17. 17
    Fuentes
    19 minutos
  18. 18
    Instalar Slick en NetBeans
    6 minutos