Movimiento libre en un juego isométrico basado en fichas

¿Existe una manera fácil y razonable de implementar el movimiento libre en un juego isométrico basado en fichas? Lo que significa que el jugador no solo saltaría instantáneamente de una casilla a otra o no sería "encajado" a la cuadrícula (por ejemplo, si el movimiento entre las fichas fuera animado pero se le impediría hacer algo antes de que finalice la animación). Soy un principiante con todo lo relacionado con la programación de juegos, pero con la ayuda de este sitio y algunos otros recursos fue bastante fácil hacer las cosas básicas, pero no he podido encontrar recursos útiles para este problema en particular. .

Actualmente he improvisado algo parecido a esto: http://jsfiddle.net/KwW5b/4/ (movimiento WASD). La idea para el movimiento era usar el mapa del mouse para detectar cuándo el jugador se movió a un mosaico diferente y luego voltear los desplazamientos, y en su mayor parte funciona correctamente (cada esquina hace que el jugador se mueva a una ubicación incorrecta: consulte http: //www.youtube.com/watch?v=0xr15IaOhrI , lo que probablemente se deba a que no pude hacer que el mapa completo del mouse funcionara correctamente), pero no me hago ilusiones de que esté cerca de una solución buena / sensata. Y de todos modos, es principalmente para demostrar qué tipo de cosa me gustaría implementar.

html5 movement isometric html-canvas xtr486
fuente

Ese código se ve muy bien, ¿cuál es exactamente el problema? Eres bastante modesto (en el buen sentido) tu código parece bastante bueno, ¿qué característica falta en la demostración?

AturSams

Lo que quise decir con los problemas de la esquina fue este tipo de comportamiento: youtube.com/watch?v=0xr15IaOhrI . No he podido encontrar ninguna otra solución que no sea hacer muchas comprobaciones si las compensaciones problemáticas, e incluso hay algunos casos especiales en los que el jugador se desplaza a una ubicación incorrecta. Pero, como dije, me preguntaba cómo se implementa este tipo de movimiento, ya que no he visto el método que se me ocurrió utilizar en ningún otro lado.

xtr486

Respuestas:

En primer lugar, le sugiero que cambie las direcciones de: W - arriba-izquierda S - abajo-derecha A - abajo-izquierda D - arriba-derecha

en más intuitivo: W - arriba S - abajo A - izquierda D - derecha

En cuanto a su preocupación, le sugiero que realice dos funciones, una que traduzca las coordenadas de los mosaicos isométricos en coordenadas de cuadrícula, y la segunda al revés. De esa manera, simplemente podría separar MVC y le facilitaría la vida al calcular el mosaico activo: ingrese la descripción de la imagen aquí

Markus von Broady
fuente

Su respuesta parece muy prometedora, pero admito que gran parte de ella se me pasa por la cabeza. Sin embargo, intentaré seguir digiriendo su solución durante los próximos días. ¿Está esto cerca de lo que buscabas? jsfiddle.net/Sd4ZP/18 Tiene algunos errores lógicos (desactivados por uno, etc.) y tal, pero que yo sepa, los mapas de arriba hacia abajo e isométricos tienen el mismo movimiento. Lo que aún no he tenido tiempo es cómo traducir la baldosa desplazamiento desde arriba hacia abajo para isométrica ..

xtr486

¡Eso se ve bien hasta ahora! Lo investigaré en la noche. La cuestión es aplicar transformaciones en el método de dibujo de mosaico isométrico en la función de traducción positionToUser (), e invertirlo en el método positionFromUser ().

Markus von Broady

Veo el problema: estás dibujando una vista izométrica colocando imágenes en lugar de usar la API de dibujo de lienzo. Es bastante lógico, ya que al final sus mosaicos izo serán mucho más que un color sólido. Sin embargo, para la depuración también debe dibujar líneas entre los mosaicos, eso facilitaría mucho su vida. De todos modos, bifurqué su código y creé la función de traducción positionToUser (x, y). Pruébelo centrando el cuadrado negro en un mosaico (porque en vista iso siempre está centrado) y moviendo el mouse sobre el lienzo inferior: se mostrará un punto traducido en el lienzo izo

Markus von Broady

¡Gracias! De hecho, me las arreglé para deducir (bueno, algo así) algo, es decir, el desplazamiento isométrico en la función drawIsometric. Ahora se ve así: jsfiddle.net/P2eKF/4 , que parece hacer exactamente lo que pedí en la pregunta original, así que marcaré su respuesta. :)

xtr486

¡Me alegra que lo hayas hecho! Me gusta cómo las combinaciones de teclas WA, WD, AS, SD alinean el movimiento con ejes isométricos en lugar de ángulos de 45 grados. Buen trabajo.

Markus von Broady

Si entiendo, quieres que el jugador mueva mosaico a mosaico pero sin saltar. Usted puede:

1- Comience con el mosaico t0 y el desplazamiento 0

2- Cuando el jugador se mueve al mosaico t1, establece el desplazamiento = - (t1 - t0)

3- En la actualización del reproductor, si el desplazamiento no es 0, disminuya utilizando el tiempo de actualización y la velocidad del jugador.

amount = deltatime * playerSpeed
deltaoff = sqrt(offsetX*offsetX + offsetY*offsetY)
total = min( amount, deltaoff )
offsetX = offsetX - (total * offsetX / deltaoff)
offsetY = offsetY - (total * offsetY / deltaoff)

4- Yo puede usar el desplazamiento == 0 para saber cuándo el jugador está en el mosaico.

Con esto obtienes un jugador que se mueve libremente en el mapa pero se adhiere a las fichas.

Zhen
fuente