Blog de Miguel Díaz » Aventuras gráficas http://www.blogdemigueldiaz.com Blog sobre Informática, programación y diseño Web Fri, 14 Jun 2013 19:00:38 +0000 es-ES hourly 1 http://wordpress.org/?v=3.6.1 Programando mi propia aventura gráfica (II): Aspectos a tener en cuenta en el movimiento en 2.5D http://www.blogdemigueldiaz.com/2012/05/programando-mi-propia-aventura-grafica-aspectos-a-tener-en-cuenta-en-el-movimiento-en-2-5d/?utm_source=rss&utm_medium=rss&utm_campaign=programando-mi-propia-aventura-grafica-aspectos-a-tener-en-cuenta-en-el-movimiento-en-2-5d http://www.blogdemigueldiaz.com/2012/05/programando-mi-propia-aventura-grafica-aspectos-a-tener-en-cuenta-en-el-movimiento-en-2-5d/#comments Thu, 17 May 2012 20:25:11 +0000 Miguel Díaz http://www.blogdemigueldiaz.com/?p=1690 Continuar leyendo ]]> 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.

]]>
http://www.blogdemigueldiaz.com/2012/05/programando-mi-propia-aventura-grafica-aspectos-a-tener-en-cuenta-en-el-movimiento-en-2-5d/feed/ 0
Programando mi propia aventura gráfica. http://www.blogdemigueldiaz.com/2012/05/programando-mi-propia-aventura-grafica/?utm_source=rss&utm_medium=rss&utm_campaign=programando-mi-propia-aventura-grafica http://www.blogdemigueldiaz.com/2012/05/programando-mi-propia-aventura-grafica/#comments Sun, 13 May 2012 19:11:48 +0000 Miguel Díaz http://www.blogdemigueldiaz.com/?p=1657 Continuar leyendo ]]> Desde pequeño dos juegos han marcado parte de mi infancia: Por un lado Prince of Persia, el cual me encantaba no se si por sus movimientos reales, por su parecido con la película de Aladdín que era de mis favoritas o quizás por las peleas de espadas o una mezcla de todo junto. Por otro lado Monkey Island y es que este último me alucinó por la forma de interactuar con todo, por la sensación de ser libre, fué la primera aventura gráfica a la que he jugado y seguramente sea la mejor a un guión y justo por este último me animé hace unos pocos días a crear una aventura gráfica.

En mi cabeza rondaban ideas vagas sobre lo que quería, solo tenía claro que el protagonista sería un niño y en el juego aparecería un tren, nada mas. En un viaje junto a mi hermana le comenté esto y entre los dos fuimos ideando parte de la historia, poco después ella me dibujó algunos de los personajes ya que yo soy un negado en esto de dibujar.

Solo llevo al rededor de una semana con el, pero ya tengo claro que va a ser uno de los proyectos mas grandes (junto a Ralliza) que he programado por afición: Dibujar, escanear y digitalizar cada escenario, programar las acciones posibles con cada elemento del escenario, programar a cada uno de los personajes del juego, crear diálogos diferentes, mezclar todo y que encima funcione: Meses de trabajo que espero valgan la pena.

Empezando a programar la aventura: Decidiendo qué tecnología utilizar.

Empecé a leer y la verdad es que me sorprendí de la cantidad de juegos independientes que hay, la mayoría cortos y de no mas de un par de horas de juego, casi todos usan AGS Editor, un programa que facilita la creación de este tipo de juegos incluso sin tener idea de programación, pero en mi caso no servía y lo descarté rápidamente: Tengo que evitar las limitaciones que tiene el software desarrollado por terceros, además necesito algo totalmente multiplataforma y que no precise ninguna instalación por parte del usuario, así que he optado por usar lenguaje Web, estará en su totalidad realizado en AJAX, aunque la mayor parte del juego se ejecutará directamente en el cliente y serán pocas las interactuaciones con el servidor, guardar las partidas, descargar los escenarios y poco mas.

Esto ha sido un gran problema ya que no existen o al menos yo no he visto ningún framework para la creación de aventuras gráficas Web y es normal, por que es muy raro lo que pido… Pero si no existe.. pues me creo yo mis propias API y herramientas para hacerlo.

Tiempo estimado.

Sin duda lo mas difícil es la creación y perfeccionamiento de las API’s básicas, movimiento de personajes, inventario, acciones, carga y descarga de escenarios, guardado de partida… Todo esto estimo en que se tenga listo en quizás un par de meses contando que no me tome alguno sabático, pero la tarea de programación no es toda, tambien queda la del diseño de escenarios y personajes desde distintas vistas diferentes posiciones, creación de dialogos y diseño de los diferentes “puzles” del juego… Muchísimo trabajo, yo creo que sin contar temporadas sabáticas que seguro que las hay puede estar listo en diciembre de este año.

Espero en una futura entrega poder mostraros un par de bocetos de la aventura en funcionamiento, de sus escenarios y algún personaje aunque la trama me la guardo para mas adelante ;-)

]]>
http://www.blogdemigueldiaz.com/2012/05/programando-mi-propia-aventura-grafica/feed/ 0