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.

miércoles, 17 de febrero de 2010

Programación de un juego 2D con XNA I

Estando en 2º de enseñanza media, allá por el año 95(UF!) programé un par de juegos en Pascal. Nada muy complejo la verdad, consideremos que la programación de videojuegos no era algo que se enseñara en el colegio, no señor, eran solo aventuras personales en las que un par de amigos tan faltos de vida social y atractivo para el sexo opuesto como yo se embarcaba.

Ahí nos conseguíamos un IBM 25(el de la foto) y nos quedábamos despues de clase en el liceo con alguna fotocopia que hubiesemos conseguido sobre como crear TPU's con pascal o cosas similares, nuestros borradores de lo que habiamos avanzado en nuestros programas(porque primero programabamos a lapiz pues no habia un pc casa por medio) y nuestros disquetes de 3 y media pulgadas ojalá sin virus.

Aprovecho para mandarle un par de chuchadas al malnacido que hizo ese virus que colocaba la frase "You are here CPW!"(Info del virus) que me hizo perder tantas horas de pega y disquetes en aquel entonces. Aunque debo admitir que tambien tenía montón de ganas de hacer un virus(El que esté libre de pecado que tire la primera piedra).

Bueno, el punto es que entre los juegos que programé, uno de los mas divertidos era un shooter de un helicoptero que tenía que exterminar a la horda de extraterrestres(los trulululus... si, ya sé que el nombre era harto penca) que invadía la tierra.

La estructura del programa era algo así

Inicio del Juego
Inicialización de variables
Repetir
Determinar posiciones
Determinar posicion de helicoptero
Determinar posicion de naves enemigas
Determinar posicion de misiles del helicoptero
Determinar posición de misiles enemigos
Determinar Colisiones
Determinar si helicoptero choca con nave enemiga
Determinar si helicoptero es alcanzado por misil
Determinar si nave enemiga es alcanzada por misil
Dibujar
Dibujar Fondo
Dibujar Helicoptero
Dibujar Naves enemigas
Dibujar misiles
Lectura de dispositivos
Determinar si el usuario presionaba:
una flecha del teclado
la tecla de disparo
la tecla de abandono de juego
Determinar nuevas posiciones
de Helicoptero
de naves enemigas
de misiles
del fondo
Hasta que Helicoptero es destruido o usuario presiona tecla de salida


Bueno, lo anterior bien a grandes rasgos. Todo esto muy procedural, con Turbo pascal 5 y nada de orientación a objetos que no la enseñaban(menos mal, despues de todo es una materia un tanto abstracta para chicos de 15 años antes de internet).

Recuerdo que llegar a esa estructura me habrá tomado al menos unas 2 semanas de cabeceo.

Afortunadamente la cosa ahora va algo mas simple. Si abres ahora tu XNA studio y creas un nuevo proyecto del tipo Windows Game verás que este tiene una algunas estructuras en común con la que acabo de describir. A saber, cuando creas un proyecto de este tipo XNA crea automáticamente parte del código y en este la siguiente estructura:

Tenemos una clase principal que es Game1(), nuestro juego con todo lo que contiene y en este algunos métodos que se irán ejecutando en el transcurso del juego.

Tenemos, por ejemplo el Initialize() que es donde debiécemos establecer nuestros parámetros iniciales, el Update() que es donde debiesemos actualizar los valores de nuestras variables y status, asçi com tambien tenemos el método Draw() que es donde debiésemos "dibujar" lo que el usuario verá en este momento.

A propósito de dibujar. En aquel entonces los computadores a los que tenía acceso no tenían ni la velocidad de procesador que tenemos hoy,(recuerdo que el año 96 en una softel vi el primer computador de 100 MHZ y era caro como una casa... casi me oriné cuando corrieron un DIR de DOS y se demoró menos de un segundo en desplegar la información) ni tarjetas de video especializadas para videojuegos ni nada por el estilo por lo que el proceso de dibujar podía hacerse realmente lento. En mis primeros intentos usé la graph.tpu(una librería de pascal con herramientas para dibujar contenido en pantalla) y resultó asquerosamente lento por lo que finalmente opté por usar ascii art. Así teniamos un helicoptero mas o menos así:

----+---
+----/ \
=====

Sí, ríanse nomas. Era mejor dibujado, pero ya no me acuerdo de todos los caracteres ascii que usaba(había que aprenderse la tabla ascii de memoria o usar programas que ayudasen, como sidekick... que gran programa aquel). Aún así, esto iba mas allá, en cada ciclo de juego el helicoptero cambiaba con lo que daba la idea de algún grado de animación.

Ejemplo:
----+----
+----/ \
=====

--+--
x----/ \
=====

---+---
+----/ \
=====

Ja, ahora sí que han de estar riéndose a mandíbula batiente.

Créase o no, resultaba bastante efectivo.

Afortunadamente, en XNA no haremos esa bestialidad sino que usaremos otras características que nos permitirán mostrar figuras complejas con una gran facilidad y excelente desempeño.

Pero eso ya lo veremos en la próxima entrega.

Como siempre, saludos.

Manuel Gatica Holtmann

-__-