El blog de Miguel Díaz
Siguiente

RoboCAUpy

Copia eficiente de archivos, toda la potencia de robocopy con una interfaz sencilla y fácil de usar. Herramienta perfecta para migraciones de equipos y copia masiva de ficheros.Saber mas

Screenshot RoboCAUpy

mRemoto

Administra remotamente equipos, controlalos gráficamente o través de la línea de comandos, envía y recibe archivos, habla con el usuario y mucho mas sin ningún tipo de configuración previa.Saber mas

Screenshot mRemoto
screenshot mRemoto

DNSPropagationChecker

Controla la propagación DNS de cualquier dominio. Con un solo clic conocerás al instante si se ha propagado en los diferentes servidores DNS existentes.Saber mas

Acortador de nombres

Detecta ficheros con nombres largos, acortalos de forma masiva y reduce el tamaño de la ruta a la cantidad de carácteres que quieras.
Saber mas

screenshot Acortador Nombres
Anterior
Jueves 17 de mayo del 2012

El movimiento de los personajes es algo que prácticamente cualquier aventura gráfica tiene, de hecho prácticamente durante todo el juego se está andando a lo largo de los escenarios, por ello es una de las funciones mas importantes dentro del juego y aunque pueda parecer mentira también es de las mas complicadas. Vamos a ver un ejemplo de como debe desarrollarse esta función a lo largo de dos entradas.

El movimiento básico de un personaje en 2.5D: función andar();

Cuando movemos a un personaje en un videojuego hay dos variables básicas: las coordenadas X e Y, es decir la posición horizontal y vertical a la que debe moverse el personaje, así pues definiremos la función:

function andar(personaje, x, y)

Dónde personaje hará referencia al personaje, y a las coordenadas a las que debe ir.

En jQuery, podemos por ejemplo ayudarnos de la función .animate() para mover al personaje, con lo que con algo como

$("#personaje").animate({left: x}, {duration 2000});
$("#personaje").animate({top: y}, {duration 2000});

Podríamos creer que nos es suficiente, pero nada mas lejos de la realidad, debemos tener dos aspectos mas en cuenta como la profundidad recorrida por el personaje para ajustar su tamaño y el tiempo que tarda el personaje en ir de un punto a otro.

Cálculo del tiempo en un movimiento básico

Hablo de movimientos básicos cuando el personaje se mueve de un punto a otro sin verse afectado por la variable de la profundidad. En un escenario en perspectiva caballera esto se produce en movimientos verticales como puede ser subir una escalera de mano, horizontales totales como caminar a lo ancho de la pantalla o en una mezcla de ambos como ver subir una cuesta de perfil una cuesta como veis en el ejemplo de la izquierda.

Para calcular el tiempo del un movimiento debemos tener claro una velocidad en base a la que se partirá, en mi caso será de 100 píxeles cada mil milisegundos.
Luego nada mas nos queda calcular la diferencia entre la posición inicial y la final. Por ejemplo, si se va a mover a la posición horizontal 500 sería algo como posición actual-500, teniendo en cuenta que siempre el resultado nos lo debe dar en unsigned para evitar valores negativos, si nuestro lenguaje no admite valores negativos podemos usar algo como lo siguiente para hacerlo positivo:

if(resultado<0)resultado*=-1

Esta diferencia la aplicamos en una regla de tres (500*1000)/100 y obtendremos que el movimiento lo realizará en en 5 segundos, lo veremos mas claro en el siguiente ejemplo:

posicion_inicial = 100;
posicion_final = 600;
diferencia_posiciones = posicion_final-posicion_inicial; //Calcula la longitud del movimiento
milisegundos = (diferencia_posiciones*1000)/100//Calcula el tiempo del movimiento

Después solo nos queda poner la función encargada de mover al personaje.

$("#personaje").animate({left: posicion_final}, {duration milisegundos});

Y exactamente igual lo haríamos para un movimiento que se realice solo en el eje Y.

Pero si combinamos ambos valores y hacemos un movimiento como el de la imagen no nos valdrá aplicar esta formula dos veces, ya que el movimiento no debe realizarse primero en X y luego en Y si no que se realizará a la vez por lo que la distancia recorrida será menor.
Para calcular la distancia real deberemos aplicar la función trigonometrica:

triángulo
a=sqrt(b^2+c^2)

Así pues supongamos que nuestro personaje cambiará de la posición X=100 Y=100 a la posición X=0 Y=0, por tanto tenemos que B y C son iguales a 100.

distancia_recorrida=sqrt(100^2+100^2)

Lo que nos dará un resultado de 141 píxeles recorridos pro el personaje, ahora aplicamos la formula del tiempo y obtenemos un resultado de 2820 milisegundos.

En la próxima entrega veremos el movimiento combinado de X, Y y Z, siendo Z la profundidad y teniendo por tanto que ajustar tanto tiempo como dimensiones del personaje.

  • Tweet

Acerca de Miguel Díaz

Informático, enamorado de la programación, diseño Web y el deporte.
Categorías: Aventuras gráficas, Programación, Proyectos. Etiquetas: , , , , , , , , .

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

Blog de Miguel Díaz
Diseño Web por Miguel Díaz.