viernes, 19 de febrero de 2010

Programación de un juego 2D con XNA II

OK. en la entrega anterior les contaba de aquel juego un juego que desarrollé con Pascal en una 8086 hace como mil años.

Pues bien, para desarrollar aquel juego necesitaba que el bendito helicóptero se moviese por la pantalla.

mmmhhh...

Al final descubrí que tanto como "mover" un helicoptero por la pantalla no era posible. Al menos no con las herramientas que disponía(turbo 5 y ascii art). No obstante, era posible conseguir que el usuario se convenciera de estar viendo un helicóptero que se mueve. El truco es el mismo que se usaba en el cine: Superponer imágenes y aprovechar el retardo que tiene el cerebro para procesar las imágenes y dar al final la sensación de movimiento.

Entonces esto se reducía a:

  1. Limpiar pantalla
  2. Imprimir imagen 1
  3. Dar un retardo en milisegundos
  4. Limpiar pantalla
  5. Imprimir imagen 2
  6. Dar un retardo en milisegundos
  7. Limpiar pantalla
  8. Imprimir imagen 3
  9. Dar un retardo en milisegundos

Así sucesivamente.

Gracias hermanos Lumiere.

Para efectos de ejemplo, he escrito en C# una pequeña aplicación de consola que muestra un caracter moviendose de izquierda a derecha y viceversa.

El código es el siguiente:

Ejecutándolo, el resultado es el siguiente:



OK, estamos de acuerdo, hasta aquí, parece que de XNA no hemos visto cosa alguna, pero lo cierto es que hay elementos comunes.

En un juego 2D en XNA no moveremos un caracter, sino un objeto, por ejemplo: una imagen de un helicóptero. A estos objetos los llamaremos Sprites.

Para mover estos sprites tendremos que establecer su posición dentro de un plano.

Supongo que recordarán de sus ramos matemáticos el concepto:"Plano Cartesiano".

Para los que no, un plano cartesiano es un espacio de dos dimensiones donde es posible ubicar un punto con su coordenada en el eje vertical y el eje horizontal(X,Y o columna, fila).

Entonces, la posición de cada punto está definido por un par de números(par ordenado) .

A modo de ejmplo, aquí pongo un plano cartesiano:
Bien, según el plano del ejemplo, el punto A estaría en la posición (2,2), el B en la (5,5) y el C en la (4,-4).

Para ubicar ya sea un caracter o de aquí en adelante un sprite, usaremos tambien un sistema de coordenadas, solo que no estará basado en el centro de nuestra pantalla, sino que nuestro punto (0,0) estará en la esquina superior izquierda de nuestra pantalla. Entonces, mientras mas a la derecha queramos ubicar nuestro Sprite nuestro X del par ordenado debiese incrementarse y mientras mas abajo quisiésemos ubicarlo respecto de la esquina superior izquierda, mas debiésemos incrementar nuestro Y.

Entonces, si tuviésemos los siguientes puntos.

A=(0,0)
B=(10,1)
C=(10,5)

podríamos decir que el punto A está en la esquina superior izquierda, el punto B está 10 posiciones(píxeles en el caso de un sprite, caracteres en el caso de la aplicación de consola) mas a la derecha que el punto A y que el punto C está 4 posiciones mas abajo que el punto B.

Nuestro tope tanto hacia la derecha como hacia abajo estará determinado por la resolución de pantalla con la que estemos trabajando. Por ejemplo, cuando trabajaba con caracteres en Pascal, tenía un tope de 80 columnas contra 24 filas, pero con XNA podríamos estar trabajando con resoluciones de 320 pixeles en horizontal y 240 pixeles en vertical, o 640*480(640 pixeles horizontal, 480 vertical), 800*600 o los que estimen y sean soportados por la tarjeta de video y monitor.

Para establecer estas posiciones en XNA usaremos la clase Vector2.

Así como usé el Thread.Sleep para definir los milisegundos de espera antes de limpiar la pantalla y volver a imprimir, en XNa deberemos definir la cantidad de FPS(Frames Per Second) que indicarán cuantas veces por segundo ha de refescarse el contenido de la pantalla. A mayor FPS podríamos llegar a tener movimientos mas fluidos y detallados, pero esto podría ir en desmedro del desempeño por lo que habrá que ser cuidadoso en la definición de este parámetro.

Pero bueno, por hoy ya ha sido bastante.

Como siempre, saludos y espero que les haya sido útil.

Manuel Gatica Holtmann.

No hay comentarios:

Publicar un comentario

-__-