Quantcast
Channel: Blog de Miguel Díaz » Aventuras gráficas
Viewing all articles
Browse latest Browse all 2

Programando mi propia aventura gráfica (II): Aspectos a tener en cuenta en el movimiento en 2.5D

0
0

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.


Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles





Latest Images