jueves, 8 de julio de 2010

Programando videojuegos: Tutorial XNA Game Studio 4.0 parte 5

crab-icon ball c#

¿Que tal pequeños cangrejillos? Disculpad la tardanza de esta quinta parte del tutorial, pero me ha dado mas problemas de los que me esperaba, y además he andado algo ocupadillo. En esta parte de tutorial vamos a aprender a manejar detección de colisiones, parte fundamental de prácticamente cualquier videojuego, así que nos ponemos serios, que empieza lo difícil. Empecemos por la teoría.

Existen numerosas técnicas de detección de colisiones entre sprites (no exclusivas de XNA, son comunes en el mundo del desarrollo de videojuegos). Lo más fácil y eficiente (de cara a procesamiento y obtención de buenos resultados de performance) es utilizar rectángulos, detectando colisión cuando estos se intersecan.

           

El problema obvio es la imprecisión en la detección de la colisión. Según esto, un impreciso acercamiento entre los dos objetos ya supondría una colisión, como se puede ver en las imágenes anteriores.

En muy pocas ocasiones, pues, esta técnica tan simple nos valdrá. Aunque existen otras variantes más precisas, y todavía eficientes, basadas en la detección de colisiones mediante rectángulos. Una de ellas sería dividir cada uno de los sprites en rectángulos más pequeños, y englobarlos todos en uno más grande. Entonces, primero intentaríamos detectar la colisión mediante los rectángulos grandes, y solo si esta es afirmativa, intentaríamos detectar la colisión entre los rectángulos más pequeños (y estos son los que decidirían si hay colisión o no).

           colisiones1

Como esta existen muchas variantes de la misma técnica, basadas en diferentes formas geométricas, y si bien esta técnica es mucho mas precisa que la anterior, aun puede ser más precisa, aplicando la detección de colisiones denominada “Perfecta” o Pixel a Pixel, en la cual se obtendrá precisión perfecta, activándose solo cuando se colisione a nivel de pixel.

La principal desventaja de esta técnica es que es más complicada que las anteriores, y por tanto tiene un coste computacional mucho mayor. Sin embargo en nuestro caso vamos a adoptar una solución intermedia, comprobando solo la colisión pixel a pixel solo si se detecta colisión con rectángulos. Evidentemente el rendimiento no es igual que con las técnicas más simples, pero se mejorará muchísimo.

Fuente: http://geeks.ms/blogs/jbosch/archive/2009/08/08/xna-pixel-perfect-collision-con-xna-en-base-a-un-mapa-de-colisiones-2d.aspxEnemigoBasico

Pues explicado esto, vamos al tema. Lo primero que habrá que hacer es una clase para crear enemigos. Esta parte voy rápido que no hay nada nuevo. Añadimos la imagen del enemigo como siempre (metiéndola en la carpeta content y arrastrándola al VS). Una vez esta esto, creamos la clase Enemigo1, algo así:



Imagino que a estas alturas sabréis por donde van los tiros. 40 y 57 son las dimensiones de la imagen. Además de los atributos de siempre vemos que tenemos un Rectangle, llamado bounds, en el que almacenamos el rectángulo que representa la imagen dibujada en pantalla y lo mantenemos actualizado (en update). Además añadimos varias propiedades para poder acceder a imagen, _posicion y bounds sin necesidad de implementar un método get (Gracias a esto se podra acceder simplemente con enemigo.Imagen o enemigo.Bounds. Este nuevo atributo, así como las diferentes propiedades también tienen que ser añadidas a las clases Nave y Disparo, pues nos hará falta para la detección de colisiones:







Solo muestro las partes que cambio por evitar hacer un post enorme, así que cuidado si copiáis pegáis. Con esto añadimos las nuevas propiedades, el nuevo atributo, y mantenemos actualizado este atributo. Es importante darse cuenta de la diferencia entre este rectángulo (bounds) que muestra el rectángulo ocupado por la imagen en la ventana, y el otro rectángulo que ya teníamos en Nave, que representa que parte de la imagen se va a dibujar.



Ahora que esta todo preparado, lo primero que hay que hacer es mostrar los enemigos por pantalla. Esto lo manejaremos en la clase Game1 de momento (En la próxima parte del tutorial se hará una pequeña reestructuración).





Añadimos a los atributos una lista de enemigos, que luego instanciamos en el constructor, además de un int para contar los frames (ahora veréis para que). Después, en Update, añadimos UpdateEnemigos, que hará varias cosas. Lo primero será aumentar frameCounter para así saber cuando pasan 60 frames.



Si el contador es mayor que 60 procederemos a añadir un nuevo enemigo (Con esto evitamos añadir sabedioscuantos enemigos por segundo). Para ello, instanciamos un objeto Random, y creamos un enemigo con una coordenada X aleatoria (Con la anchura de la pantalla de máximo) y –57 de coordenada Y para que entre poco a poco a la pantalla. Añadimos este enemigo recién creado a la lista enemigos, controlamos el evento FueraDePantalla (De igual manera que lo hacemos con los disparos, para borrar los enemigos que se salgan de la pantalla). Por ultimo ponemos el contador de frames a 0.



Después, fuera del If (esto se tiene que ejecutar siempre, no solo cada 60 frames) se invocara a Update de todos los enemigos. Una vez más no utilizamos foreach por que es posible que se dispare FueraDePantalla y que cambie enemigos, lo que haría que un foreach diese un error en tiempo de ejecución, pero la expresión lambda utilizada en esencia hace lo mismo.



image



Tras esto podemos probar a ejecutar y veremos que ya tenemos una serie de enemigos en pantalla cada X tiempo. ¿Va cogiendo forma no?. Ahora que ya está todo preparado podemos empezar con la detección de colisiones, manejada una vez mas desde Game1 temporalmente:





Añadimos a Update otro método en el cual manejaremos las colisiones. Como ya mencionamos anteriormente no se puede eliminar la lista que se este iterando dentro de un iterador foreach, pero esta vez no podremos usar una expresión lambda, así que utilizaremos un tag y unas variables locales para saber cuando se encuentra una colisión y borrar tanto el disparo como el enemigo después de salir del bucle.



En el método colisión enemigo disparo, usado por el método anterior, comprobamos si hay una colisión rectangular, y en caso de que sea así pasamos a ver si hay colisión pixel a pixel. En caso de que sea así devolvemos true y si no devolvemos false.



En cuanto al método estático ColisionPixel, almacenamos los datos de los pixeles en los arrays bitsA y bitsB, buscamos los limites del espacio que vamos a manejar, con las coordenadas x1, x2, y1 y y2. Con todo esto recorremos los arrays bitsA y bitsB con dos bucles for en los cuales comprobamos en cada iteración el canal Alpha de transparencia de las dos imágenes en un punto concreto. Por esto en caso de que ninguna de las dos imágenes sea transparente en cualquier punto significa que hay colisión, por lo que devolveremos true.



image image



Con esto la detección de colisiones esta completa, y lo podemos ver ejecutando el juego, aunque no se aprecie en la captura :P La colisión de los enemigos con las nave la pondremos mas adelante, cuando se añadan las vidas y la pantalla de gameover. No obstante esto empieza a coger forma ya, ¿no? Podéis bajar el código hasta ahora en el siguiente enlace:  http://www.megaupload.com/?d=OE6KUY4S



En la próxima entrega del tutorial menú, pantalla de pausa y pantalla de gameover. No os lo perdáis y ¡Sed buenos cangrejos!





EDIT: He cambiado algunas cosas en el código respecto a la parte 5 del tutorial original con la intención de obtener un código más limpio. Quite todas las _ de las variables, y me asegure de que todas las propiedades estaban en mayúscula. A parte de esto también cambie algunos puntos donde se accedía a las variables mediante las propiedades desde dentro de la misma clase.



Para los que hagan el tutorial a partir de ahora (22/09/2010) no lo notarán, pues ya esta actualizado, pero los que ya han hecho el tutorial que se bajen mi código, ya que esta corregido. Es posible que se me colase alguna errata, en tal caso hacédmelo saber.

30 comentarios:

  1. Hola soy Juan Antonio,sigo emocionado con tu blog,jej,despues de realizar el modulo superior de ASI donde solamente programabamos algo en C,esto me resulta un poco complicado,pero con tu ayuda se entienden bastante las cosas..Gracias..

    Por cierto,pasate por el post de Junio,tengo una pequeña duda, a ver si me puedes ayudar, saludos..

    ResponderEliminar
  2. buenas!
    primero de todo me gustaria felicitarte por este impresionante tutorial y agradecerte mucho todo este trabajo. como bien decias en otro apartado, google sabe mucho pero en cada sitio dicen cosas distintas asi que al final la cosa se vuelve bastante liosa de hacer.

    dicho esto me gustaria hacerte un par de preguntas a ver si sabrias responderme el porqué:

    1- estoy siguiendo el tutorial y me falta el tema de poner las naves y eso de modo que le he pasado a un amigo la carpeta donde estan los ficheros para que lo pruebe y bueno, le pedia una version actualizada del framework (la ha actualizado) y luego al abrir el archivo le dice: el programa dejó de funcionar. sabes si hay que hacer alguna cosa (empaquetar alguna libreria) para que la otra gente pueda probarlo?

    2- sabes como añadir las bibliotecas de la directx a un proyecto de c#? es que en las otras versiones vas a añadir referencia y te deja buscarlas pero en el vs2010 no me sale nada para buscar. he instalado el paquete de la directx que salio hace poco pero no pasa nada :S

    perdona por acapararte de esta forma.

    PD: difundire este blog por mi facultad (ingenieria) para que tengas mas seguidores que te lo mereces =)

    ResponderEliminar
  3. En cuanto a la primera pregunta, creo que se por que es. Tu amigo necesitara instalarse xna y no solo el .net framework para que funcionen los programas desarrollados en xna. Es una putada, pero al fin y al cabo xna esta mas pensado para xbox y para moviles que para pc en mi opinion. En cuanto a lo segundo lo siento pero no tengo ni idea, soy tan nuevo como tu con el vs2010, y ya en los antiguos era complicado. Perdona x tardar tanto en contestar pero han sido unas laaargas vacaciones xD tengo que volver a ponerme con los tutoriales

    ResponderEliminar
  4. Hola,mi pregunta era la misma que la que planteaba joan marc,simplemente que el programa no me funciona en pc's que no tienen instalado el vs2010.Aunque por bueno,supongo que las librerías solamente las llevará el visual studio y por eso no funcionará en otros pc's.

    Y otra cosa,ya que poseo una X360,como puedo ejecutar el programa allí?ya que los ejecutables de la X360 si mal no recuerdo tienen extensión .xex,tampoco es una cosa que me preocupe,pero me pica la curiosidad jeje.

    Gracias por tu atención y por tu tiempo y
    Sigue así con tus tutos Wardamo,que estan muy interesantes,intentaré difundir este blog por clase lo mas que pueda.
    Gracias por tu ayuda crack!!
    Saludos

    ResponderEliminar
  5. Para ello hay que seguir unos cuantos pasos en tu proyecto, modificando algunas cosillas como los controles y los sonidos, y tb cambiar el tipo de proyecto. Lo tienes bastante bien explicado aquí, no debería ser dificil: http://blogs.msdn.com/b/coding4fun/archive/2007/03/23/1938626.aspx

    ResponderEliminar
  6. jajaja! no te preocupes hombre, en verano todos tenemos la obligación de descansar. lo del XNA lo tendré en cuenta para cuando se lo pase a los amigos (mayoritariamente se lo pasaré a 2 con los que queremos empezar a hacer juegos).

    y el tema de las librerias.. da igual, por lo que tengo visto de XNA creo que no me hará falta recurrir a ellas.

    Ánimo con los tutoriales!!

    ResponderEliminar
  7. Si, no hace falta agregar ninguna, me parecio raro pero imagine que lo usarias para otra cosa, pero usando las libreriass de xna y tal no hace falta agregar nada

    ResponderEliminar
  8. De lujo Wardamo,jeje,voy a hecharle el guante ya mismo,gracias por el enlace ,voy a ver que saco.
    Seguiremos atentos al blog,esta interesantísimo jeje..
    Saludos

    ResponderEliminar
  9. He hecho algunos cambios en esta ultima parte, revisad el comentario que puse al final del blog los que han hecho anteriormente esta parte del tutorial. Perdon por mi grán ausencia este tiempo, pero tengo clase de tarde, y por la mañana cuesta más mentalizarse de hacer esas cosas. Pronto continuare con el tutorial de xna, con otras 2 partes más al menos (entramos en la recta final ^^)

    ResponderEliminar
  10. eso eso cangrejo padre, esperamos la parte 6

    ResponderEliminar
  11. buenisimo tu blog la verdad xD te felicito por tu trabajo y por compartir tus conocimientos
    saludos desde mexico !

    ResponderEliminar
  12. espero pronto la parte 6 y por favor si por algún motivo ya no tienes tiempo, publica algunas paginas donde podamos terminar el proyecto o si ya lo tienes no dudes en poner el link del proyecto.

    ResponderEliminar
  13. El proyecto esta tal como lo teneis vosotros, pues lo voy haciendo según hago el tutorial. En cuanto a otras paginas, hay muchos tutoriales de XNA por ahi, aunque no se si los habrá tan completos (por eso me puse a hacer este) Con mi horario me es muy dificil continuar pero lo intentare, tened un poco de paciencia :)

    ResponderEliminar
  14. Oye me gusto tus tutoriales ojala puedieras poner mas ya que soy nuevo en esto de programacion en xna y me familiarizo, me quede en el 5 eperando el 6ojala se pueda dar pronto XD gracias por tu entrega

    ResponderEliminar
  15. Hola, me gustaria pedirte consejo para empezar en esto de programar videojuegos. Mi situacion es que estoy en la universidad estudiando informatica y se me da bastante bien el tema de la programacion y lo disfruto, y siempre he querido trabajar en el mundo de los videojuegos ya que es mi hobby nº1, asi que aqui estoy, buscando informacion hasta que he llegado a tu blog. El caso es que he encontrado por internet un libro en ingles que tiene buenas referencias y he pensado en usarlo como base para empezar a aprender por mi cuenta y no solo lo que me enseñen en la universidad, que evidentemente no esta orientado a los videojuegos.

    En mi universidad he aprendido a programar en java con el eclipse. Mi intencion es aprender C++ ya que parece ser la mejor opcion, y me encontre con este libro : "Beginning C++ Game Programming - Michael Dawson". Pero nada mas empezar a leerlo me ha surgido la duda de: qué programa/entorno/IDE uso??? EL libro aconseja Dev-C++, pero segun he visto en internet esta anticuado y la mejor opcion (pensando en Windows) parece ser Visual Studio 2010. Uso este ultimo? O sigo con eclipse para C++??

    Alguna recomendacion??

    P.D: Siento el caos que he liado en mi comentario pero es que no paro de darle vueltas al tema en mi cabeza y a lo mejor no he expresado algo bien o no lo he explicado lo suficiente para hacerme entender.

    ResponderEliminar
  16. Hola unosinemule. Visual Estudio siempre es una buena opción, pero esta el tema de que no es exactamente c++, sino .net c++, es decir, es una version ligeramente distinta y eso te puede dar guerra a la hora de incluir algunas librerias si estan pensadas para c++ puro, pero por lo que se es bastante raro, asi que si no te dan problemas las librerias usa VS.
    Tengo un tutorial de los primeros de como incluir librerias en VS c++, por que era un lio, pero me temo que es para una version antigua de VS.

    Un saludo, espero haberte ayudado

    ResponderEliminar
  17. felicidades por tu tutorial esta muy bueno... estamos a la espera de la parte 6.. Gracias por este aporte tan bueno y bien explicado

    ResponderEliminar
  18. Muy buen aporte, veo que hace un año no posteas nada, please queremos aprender mas, ya tengo las colisiones entre disparo y enemigo, trate d hacer la colisión entre nave y enemigo pero no me sale :(, ayuda!!!!

    ResponderEliminar
  19. Muy buenos los tutoriales, los estoy siguiendo y ayudan mucho, una pregunta, tienes planeado seguir con ellos?

    ResponderEliminar
  20. a la espera de la parte 6 :( por fa!!! queremos aprender mas

    ResponderEliminar
  21. Amigo, que tutorial tan bueno! por los comentarios todos estamos esperando el tutorial No. 6, se q andas ocupado, pero, lo haras???

    espero ansioso el siguiente! :D

    ResponderEliminar
  22. Muy buen tutorial!! Esperando la parte 6 =)

    ResponderEliminar
  23. Muchas gracias por el tutorial. Haras pronto el 6? Gracias!!

    ResponderEliminar
  24. esperando que continues con este magnifico tutorial!

    ResponderEliminar
  25. Muy bueno el tutorial
    esperando la parte 6
    espero la subas pronto :)

    ResponderEliminar
  26. Excelente Tutorial

    Soy uno más que espera en algún momento publiques la sexta parte o algún otro tutorial con otro proyecto de videojuegos.

    Muchas Gracias
    Saludos

    ResponderEliminar
  27. Que paso hermano te fuiste y abandonas el barco (tu blog), acaso no te das cuenta que ya hay muchos pasajeros adentro!!

    ResponderEliminar
  28. Alguien sería tan amable de resubir el código a algún servidor funcional (no solo de esta parte, también de las anteriores) muchas gracias de antemano...

    ResponderEliminar