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.

sábado, 3 de julio de 2010

GameLab 2010: Tercer día

image003--200x250 Un día más en The Code Crab hemos asistido al GameLab 2010, y aquí estoy resumiendo el día. Lo primero es decir que hoy viernes, ultimo día, la feria concluía a las 2 del mediodía, y por tanto había menos actividades que los otros días, y una vez más no hay nada nuevo que probar por lo que me centrare en las charlas. Además de esto no he podido asistir a todas las charlas, por lo que resumiré las que pude ver.

A primera hora hubo una mesa redonda sobre las nuevas plataformas, y el modo en que afectan estas a los creadores. Por desgracia no pude asistir, pero mi sorpresa fue grande al ver que la siguiente conferencia, iPad, una oportunidad para los creadores, no fue en realidad una conferencia como indicaba el programa, sino otra mesa redonda en la que apenas se mencionó el iPad. De hecho no asistí a la primera mesa redonda, pero el titulo que tenia encaja definitivamente mucho mas en la mesa redonda que vi (Y no me equivoque de charla yo, que pregunté y todo).

image

En esta improvisada mesa redonda pudimos ver a Xavier Carrillo, Director General de Digital Legends Entertainment, el supuesto ponente, junto con Gonzo Suárez y Igor Pusenjak (No estoy seguro al 100% de que eran ellos, pues como reitero una vez más esta mesa redonda estaba fuera del programa). Se habló de los nuevos medios, y de la importancia de los juegos sociales, descubiertos mediante facebook. ¿Que nos deparara el futuro? Desde luego hay que aprovechar al máximo todos los nuevos medios, cambiando radicalmente la formula tradicional del desarrollo de los videojuegos.

image

Tras esta mesa redonda, hubo otra sobre las diferentes plataformas en el mercado de los juegos móviles, pero tras el desastre(esto es mi opinión, claro) de la supuesta conferencia del iPad no estaba de humor para otra mesa redonda, así que no asistí.

Tras esto Juancho Carrillo, Lead Designer de Tonika Games, junto con Roberto López Yeste y Richard Brown nos ofrecieron una interesante conferencia en la cual se nos presento PlayEnglish.

Tras un rato de publicidad de Sony (y es que tenemos muy claro que los chicos de Sony se encantan a si mismos) nos mostraron el trailer que podéis ver encima (nada exclusivo, es el anuncio de TV).

Este juego es bastante innovador, según nos contaron, pues pese a ser un juego educativo esta más centrado en la diversión que en el aprendizaje, haciendo así que el aprender ingles sea progresivamente, de forma natural y divertida. El jugador tendrá que encarar una serie de pruebas, dignas de cualquier aventura gráfica, en las cuales tendrá que aplicar conocimientos de ingles y adquirir conocimientos nuevos de forma practica. Además de esto el juego cuenta con varios imageniveles de dificultad, y se centra en las partes que dan problemas al jugador, ofreciendo una experiencia personalizada.

Todo esto hace de PlayEnglish un juego bastante interesante y digno de probar, para de paso repasar esos Phrasal  Verbs que tanto dolor de cabeza nos dieron en su día. Tras esto se declaro en exclusiva que el próximo desarrollo del estudio iba a ser… Patito Feo, que pese a lo mal que pueda sonar, seguro que es un gran éxito (orientado a un publico mas concreto claro).

Por ultimo, la ultima conferencia fue de la mano de Gilberto Sánchez, Director Editorial de Virtual Toys, estudio responsable de títulos como Horsez y Imagina Ser. La conferencia hablaba del proceso intermedio que hay entre la finalización de un juego y la publicación del mismo, y se dejo claro que hacer un buen juego solo es un 40% del trabajo.

image

Tras un rato hablando de temas de publicidad, mercados, y demás cosas aburridas, se nos anuncio que el estudio ahora mismo estaba trabajando en Torrente Online 2, el cual dispone de muchas novedades frente al primero, y cuya beta ya estará disponible el próximo 19 de julio.

Con esto (y con un sorteo de una ps3 y una psp go) concluye el GameLab 2010. En cuanto mis impresiones generales del evento, creo que este año se ha batido un record de visitas, pues ha estado algo más orientado al publico que otras veces, más pensado para diseñadores y empresas.

image

La presencia de Sony no dejo nada que desear, ofreciéndonos varias novedades como el 3D, el Castlevania LOS, el nuevo SingStar, el Gran Turismo 5 y PlayStation Move, pero sin embargo la presencia de Nintendo fue bastante ligera, en cuanto a que tenia cosas para probar pero ninguna novedad, mientras que Microsoft ni siquiera patrocinaba, solo colaboraba, por lo que ofreció conferencias interesantes pero nada para probar. Con esto quiero decir, que GameLab se está convirtiendo en un pequeño E3, y vamos por buen camino, pero aun no es suficiente, y si Nintendo y Microsoft hubiese colaborado tanto como lo hizo Sony el evento hubiese sido mucho mejor.

En cuanto a las conferencias (y esto es, una vez más, mi opinión, y no un hecho universal), una vez mas se mezclan conferencias muy interesantes, como presentaciones en exclusiva de juegos (Como Castlevania o Kinect), con otras que se repiten año tras año sin ninguna clase de novedad, como una serie de mesas redondas. En mi opinión para seguir avanzando el GameLab debe centrarse más en las novedades. Conferencias sobre diferentes plataformas, presentaciones de juegos, nuevas tecnologías y que nos depara el futuro. Todo esto lo hubo este año, pero por desgracia, solo fue entorno al 50% de las conferencias, siendo el resto bastante menos interesantes.

image image

Por tanto en mi opinión, GameLab, algún año será un pequeño E3 en Asturias, pero aún nos queda un largo camino por recorrer. Sin embargo, ese día cada vez esta más cerca, estoy seguro de que el próximo año estará aún mejor, ¡Lo esperamos con impaciencia Lobo!. Tras la vuelta a la normalidad me pondré a trabajar de nuevo en el tutorial de XNA, así que estad atentos. ¡¡Sed unos cangrejos pacientes!!

jueves, 1 de julio de 2010

GameLab 2010: Segundo día


Un día más en The Code Crab hemos asistido al GameLab 2010, y aquí estoy ofreciendo mi experiencia de nuevo. Dado que no hubo nada más nuevo que poder probar, por desgracia. Por esto hoy me centraré más en las conferencias.
P010710_13.44
A primera hora, Alon Shtruzman, vicepresidente de Playcast Media, nos ha ofrecido una conferencia sobre los videojuegos sin consola y la importancia de los medios, así como la influencia que estos tienen en el contenido. Como ya sabréis es un tema importante estos días, debido al lanzamiento no hace tiempo de OnLive.
El ponente ha previsto un importante cambio en el mercado de los videojuegos, especialmente los casual, abriendo camino para los juegos en la nube o juegos sin consola. Todo este cambio de mercado, según Alon, viene dado por la reciente proliferación de los juegos sociales y familiares, siendo el paso a los juegos sin consolas el próximo paso lógico, acercando más aún los juegos a nuestro salón y al de todo el mundo.

Tras esta interesante charla he asistido a una serie de conferencias sobre XNA, de varias horas de duración que era en paralelo con otras charlas que me perdí. Por desgracia para mi, el 80% de las charlas eran similares a unas que se habían dado en mi facultad hace unos meses. El propósito de las charlas es la presentación de Windows Phone 7, así como una introducción al desarrollo de videoconsola para este valiéndose de XNA, pero que os voy a contar de XNA ya a estas alturas :)
También se anuncio el Imagine Mobile, el cual es un concurso interesante que presenta una gran oportunidad, os aconsejo que si tenéis tiempo participéis.
image
Después de comer al fin llego el momento que todo el mundo estaba esperando, la presentación de Castlevania Lords of Shadow. El juego, se presento en exclusiva en el GameLab solo presentado antes en el E3. Como ya he mencionado antes también hay disponible una demo, a la que tuve la suerte de probar (un par de veces :).
Este juego ha sido diseñado por Mercury Steam, un estudio español anteriormente pequeño, en colaboración con Kojima. El ponente, Enric Álvarez, declaró que cuando recibieron la llamada de Kojima no se lo creían. La conferencia comenzó mostrándonos el vídeo de presentación, ya mostrado en el E3, que podéis ver a continuación.

¿Habéis notado la canción de Vampire Killer al final del vídeo?
Tras este vídeo, Enric declaro que se intento cuidar al máximo los detalles para procurar una máxima inmersión por parte de los jugadores, con cosas como una gran banda sonora, y una ambientación oscura y sangrienta, de acuerdo con los estándares de los juegos clásicos de la saga, pero con gráficos de ultima generación, así como un arte gráfico impresionante.
Tras varias declaraciones se procedió a enseñarnos dos niveles del juego inéditos (Nada que ver con la demo, que ofrecía un tutorial y dejaba ver un sistema de combate similar a God of War).
En el primero de ellos, vemos una de las partes iniciales del castillo en el cual se deja entrever diferentes aspectos del juego, como un mapa abierto, y un elaborado componente de exploración. Tenemos 2 barras de magia, una roja para hechizos de ataque y otra azul para hechizos defensivos, a parte de los clásicos objetos, y combinaciones entre objetos y magias.
P010710_16.33 P010710_16.20
Enric nos prometió una gran cantidad de secretos, con los cuales podremos obtener entre otras cosas mejoras de salud y magia, y para muchos de los cuales tendremos que volver a una parte anterior del castillo después de conseguir algún poder.
En cuanto a los enemigos, vemos una gran diferencia al pasar de un enemigo a otro, convirtiendo la lucha en algo dinámico. Tras todo esto, se llego a un jefe final, el carnicero del castillo, y vemos que la dificultad, al menos en los jefes, es bastante elevada, ¡Enric no se lo pasó hasta el tercer intento y valiéndose de trampas!
Después observamos la torre del reloj, lo que nos permitió observar un elaborado plataformeo, el cual cambia a lo largo del juego, evitando así una experiencia monótona. Si nos caemos mientras escalamos la torre volveremos a un punto inmediatamente anterior pero perdiendo algo de vida, y por un error de Enric hemos visto el doble salto (con alas, estilo Alucard).
En conclusión, el nuevo Castlevania parece, por fin, una gran adaptación de la saga al entorno 3D, con un juego muy innovador, atractivo y entretenido, pero fiel a los orígenes al mismo tiempo.
P010710_17.43image 
Una vez concluida esta sorprendente presentación, pudimos ver en acción a Kinect (o Proyect Natal, como se conocía hasta ahora), de la mano de David Darnés, Productor de Ubisoft Barcelona, aunque por desgracia no lo pudimos probar, excepto un par de afortunados.
Tras un poco mas de la cantidad de publicidad de Ubisoft recomendada por las autoridades sanitarias, se presento Kinect junto con Motion Sports, un juego lanzado junto al dispositivo de la mano de Ubisoft, evidentemente.

 
Motion Sports ofrece una serie de pequeños juegos de deportes (no me suena de nada esto tampoco), ideales para jugar con amigos, y la principal innovación es el uso de Kinect, por lo que no hace falta ninguna clase de controlador, se controla todo con la voz y el movimiento.
En la demo estaban disponibles los juegos de rugby y esquí, y parecía funcionar bastante bien en general, aunque tenía algunos problemas con los brazos. Además parece fácil salirse del radio, parando el juego. Esto puede suponer alguna molestias para juegos moviditos, pero nada serio.

Tras estas dos geniales conferencias, el evento continuó con una conferencia sobre Basket Dudes y el modelo de micro pagos, de la mano de Fernando Piquer, Fundador y CEO de Bitoon Entertainment, en la cual se nos dejo claro que el modelo se centra en ofrecer una experiencia completa de juego a todos los usuarios, estén dispuestos a pagar o no, pero ofreciendo una serie de ventajas a los jugadores que paguen.
 
Por último, Daniel Sánchez-Crespo, Director General y Jefe de Diseño de Novarama (Empresa desarrolladora del exitoso juego Invizimals) expuso una interesante charla sobre la manera de innovar en el sector del desarrollo de videojuegos.
P010710_19.18
Después de esto nos presento en exclusiva Invizimals Shadow Zone, la continuación del exitoso juego Invizimals, del cual no consigo encontrar imágenes y aún no hay trailer, pero pudimos observar muchas novedades con respecto al primero, en cuanto a nuevos Invizimals, nuevas maneras de capturar y un nuevo sistema de rankings online. Por cierto, que Invizimals se estrenará pronto en USA, seguro que es un gran éxito, igual que aquí :)

Una vez más me detendré antes de lo que me gustaría por que vuelvo a llevar escrito más de lo que debería (Si es que me emociono con el Castlevania). Mañana concluiré con el ultimo día del GameLab, una vez mas resumiendo las conferencias a las que pueda asistir. ¿Que os parece el lavado de cara del blog? Yo creo que sobretodo ahora se lee mejor independientemente de la resolución usada.


Gracias por leer The Code Crab una vez más, y ¡Sed unos cangrejos pacientes!, ¡Mañana más!
Gracias a Sara por el cangrejo una vez más :)

PD: Perdón por la calidad de las fotos, las hago con mi móvil y sacar fotos a un proyector no es la mejor idea.

miércoles, 30 de junio de 2010

GameLab 2010: Primer día



Hoy ha sido el primer día del GameLab 2010, la feria internacional del videojuego y el ocio interactivo. El evento se celebra en Gijón, dentro del palacio de congresos, en el interior del recinto ferial.
He podido observar tras recoger mi acreditación que este año hay más gente que otros años, y hay mayor cantidad de asistentes informales y menos empresas. Esto se debe a que como mencionaron en el acto de presentación, por primera vez este año se ha intentado orientar a todo tipo de asistentes, y no sólo a desarrolladores.
P300610_09.58
Una vez dentro lo primero que observamos es la zona de Sony, que no deja nada que desear. En ella he podido probar muchas cosas interesantes, gran cantidad de las cuales aún no están en el mercado.
P300610_10.30 P300610_10.30[01]
La primera de ellas y la mas llamativa es el poder probar PlayStation Move, con un juego de eye toy play o algo parecido, así como un juego de varios deportes (No nos suena de absolutamente nada). No estaba mal, era algo parecido a los juegos de minijuegos típicos de la wii. El sistema move es definitivamente mas preciso que la consola de nintendo, pero personalmente yo no he notado tanta diferencia como sony nos prometía, aunque quizás otros juegos lo exploten mejor, por lo que no hablare demasiado antes de tiempo.
P300610_10.47
También llamaba la atención el 3D de PS3, el cual me ha resultado bastante satisfactorio, dando la misma sensación que en el cine, aunque evidentemente no es lo mismo en una tele que en una pantalla de cine. De todos modos funciona genial, y pese al ligero mareo al empezar a usarlo, una vez se acostumbran tus ojos la sensación de profundidad esta muy lograda.
P300610_17.25
La tercera gran sorpresa que tuvimos fue una demo de Castlevania Lord of Shadows. Tras una larga cola he podido jugar la demo completa, y he de decir que la demo ofrecida deja ver un sistema de combate que no tiene nada que envidiar a God of war, por no hablar de la ambientación y de la historia que tiene al ser un Castlevania. En mi opinión, si el resto del juego mantiene la exploración y el plataformeo de los Castlevania clásicos va a ser un juego estupendo.
Además de esto en la sala de Sony podemos encontrar juegos que aún no han salido como Gran Turismo 5 y el SingStar nuevo (con guitarra), y otros que ya están en venta como Heavy Rain, God of War 3 y Play english para la psp.
P300610_10.50
Por desgracia, la parte de Nintendo no estaba ni por asomo tan bien como la de Sony, no hemos podido ver la 3DS, ni nada nuevo, sólo una exposición de Shigueru Miyamoto, donde pudimos probar algunos juegos nuevos como el Mario Galaxy 2 y el Smash Bros Brawl y algunos juegos clásicos, como el donkey kong y el super mario bros, pero por desgracia nada que aun no se haya lanzado aún.

En cuanto a la presencia de Microsoft, aún no hay nada, aunque se que mañana organizarán algunos talleres y otras actividades, y corren rumores de que se podrá ver Kinect (Proyect Natal) antes de terminar la feria. Esperemos que sea cierto.
P300610_12.13
También encontramos otras zonas donde podemos probar juegos en el iPad, así como un sensor que mide las ondas cerebrales para saber tu concentración y tu relajación, de la mano de la empresa Neurosky.

En cuanto a las conferencias del primer día, empezamos con una feria sobre la situación actual de los juegos online (MMO), un poco orientada a empresas, a la cual asistí durante solo un rato, por lo que no me entere mucho.
 
Tras esto, tuvimos al fin la inauguración de la feria, donde nos explicaron que el desarrollo de videojuegos es un sector en aumento en España, que no tiene tantas ventajas como otros sectores, pese a su importancia, pero que poco a poco va ganándose el reconocimiento que merece. También se explico que es el primer intento para abrir la feria al publico global y no sólo para desarrolladores, ya mencionado anteriormente.
P300610_16.10 P300610_13.05
Después de esto, se pasó a una mesa redonda, donde varios ponentes, como Gonzo Suárez y Enric Álvarez, hablaron de la situación internacional del desarrollo de videojuegos en España a nivel Histórico.
Después de comer, tuvo lugar la charla que a mí, personalmente, más me ha llamado la atención: Controladores mentales, de la mano del vicepresidente de Neurosky. Se habló de las diferentes generaciones de controladores, siendo los controladores tradicionales la primera generación y los controladores cinéticos, como Wii, Move y Kinect, la segunda generación. Siguiendo este orden según las generaciones avanzan se va estrechando la distancia entre el juego y el cuerpo del jugador.Por ello, la tercera generación de controladores de los videojuegos serían los sensores biológicos. Podemos ver un ejemplo de esto en el futuro sensor para la wii, Wii Vitality Sensor. Neurosky ofrece un sensor, bastante cómodo y accesible que detecta el estado del cuerpo, en concreto, la concentración, la tranquilidad y el parpadeo. Esto es una herramienta enormemente potente a la hora de hacer videojuegos bastante creativos, pudiendo medir en un juego de terror si el jugador esta asustado, por poner un pequeño ejemplo.
P300610_11.47P300610_11.47[01]
Tras esto, hubo varias charlas más, sobre los modelos de desarrollo adecuados para lanzar un juego de móvil exitoso, una charla sobre la administración como fuente de apoyo al desarrollo de proyectos de ocio interactivo, y otra sobre los juegos online, descargables vs juegos en la web.

No me entretengo más, siento no haber explicado tanto como me gustaría algunas charlas, pero ya es un post bien largo y además tengo algo de prisa. Mañana actualizaré las charlas que se den más a fondo ya que no tendré que volver a explicar las distintas salas.

En cuanto al tutorial de XNA lamento mi tardanza, pero la detección de colisiones me está dando
más problemas de lo que me esperaba, os prometo que en cuanto acabe el GameLab subo la quinta parte. ¡Sed buenos cangrejos!
PD: Gracias a Sara por el cangrejo ;)

martes, 22 de junio de 2010

Programando videojuegos: Tutorial XNA Game Studio 4.0 parte 4

crab-icon ball c#

Hoy en The Code Crab vamos a poner un fondo animado para nuestro futuro superventas. La técnica que vamos a seguir es bien sencilla: Tendremos una imagen que tenga el mismo ancho que la pantalla pero mucho mas alta, y la empezaremos a dibujar por abajo, subiendo poco a poco, hasta llegar a la parte superior que será similar a la parte inferior. Cuando pasa esto volvemos a la parte de abajo y ya tenemos efecto de scroll.

Dado que XNA solo soporta imágenes de resolución X x Y, donde ni X ni Y rebasan los 2000 y pico pixeles (no se cuantos exactamente) es posible que para un scroll largo haga falta dividir el fondo en diferentes imágenes. No vamos a dar un ejemplo de ese caso, pero que sepáis que sería exactamente lo mismo pero un poco mas complicado. Lo más importante es que si tenemos 3 imágenes A, B y C, para hacer una transición fluida de una a otra la ultima parte que se dibuje de una tiene que ser equivalente a la primera de la siguiente, esto es, el final de A y el principio de B coinciden, el final de B y el principio de C coinciden y el final de C y el principio de A coinciden.

Una vez tenemos claro lo que queremos hacer, necesitamos saber la resolución de nuestra ventana para preparar la imagen. Para ello, como recordareis, tenemos las propiedades PreferredBackBufferHeight y PreferredBackBufferWidth de graphics. Aunque si queréis se pueden alterar, yo no lo voy a hacer, voy a dejar la resolución por defecto. Como no la altero, voy a imprimir estos datos por pantalla, para saber que resolución tiene nuestra ventana:

 protected override void Initialize()
{
Console.WriteLine(graphics.PreferredBackBufferHeight + "x" + graphics.PreferredBackBufferWidth);
_fondo = new Fondo(graphics.PreferredBackBufferHeight, graphics.PreferredBackBufferWidth);
_nave = new Nave(graphics.PreferredBackBufferHeight, graphics.PreferredBackBufferWidth);
this.Window.Title="Space Burst";
base.Initialize();
}


Con esto, ejecutamos nuestro proyecto, y no ha cambiado nada, pero si vamos a la ventana de resultados veremos algo así:



image No os olvidéis de borrar la línea ahora que ya sabéis el tamaño de la ventana. Con esto ya sabemos la resolución de la ventana, 480x800, con lo que ahora necesitamos una imagen loquesea x 800 donde los primeros y los últimos 480 px sean iguales. A partir de una imagen real del espacio, algo de photoshopeo cutre (se me da fatal) y algo de paciencia, yo he conseguido esto, aunque si os apetece podéis haceros vuestro propio fondo.



spaceBackgr Con esto, tenemos ya un fondo de 1700x800 con el principio y el final igual (Hay que pinchar en la imagen para verla completa). Lo metemos en la carpeta y lo agregamos a los recursos del proyecto, como venimos haciendo con todas las imágenes. Tras esto ya estamos preparados para crear la clase Fondo (esta es bastante sencillita):



 private const int anchoImagen = 800;
private const int altoImagen = 1700;
private int altoVentana;
private Texture2D imagen;
private Rectangle rectangulo;
public Fondo(int altoVentana, int anchoVentana)
{
rectangulo = new Rectangle(0, altoImagen - altoVentana, anchoVentana, altoVentana);
this.altoVentana = altoVentana;
}


En cuanto a las propiedades, a estas alturas no os sorprenderá mucho, así que iré rápido. Guardamos el ancho y el alto de la imagen, así como el alto de la ventana (para saber cuanto tiene que medir el rectángulo) que será pasado en el constructor. También almacenamos un rectángulo con la sección de la imagen que se dibujara, empezando por la parte inferior de la imagen y un Texture2D con la imagen en sí.



        public void LoadContent(ContentManager Content)
{
imagen = Content.Load("spaceBackgr");
}
public void Update()
{
rectangulo.Y -= 1;
if (rectangulo.Y <= 0)
rectangulo.Y = ((altoImagen - altoVentana) -15);
}
public void Draw(SpriteBatch spbtch)
{
spbtch.Draw(imagen, new Vector2(0, 0), rectangulo, Color.White);
}


En cuanto a los métodos, tendremos los 3 tradicionales de XNA que ya conoceréis. LoadContent y Draw son iguales que en Nave, por lo que no merece mucho la pena pararse (en cuanto a Draw la única diferencia es que lo dibujamos en (0,0), ya que queremos que ocupe toda la pantalla).



Lo importante aquí (relativamente, pues es bastante simple en realidad) es el método Update, en el cual disminuimos en 1 la coordenada Y de rectángulo, para subir hacia arriba el rectángulo y crear un efecto scroll. A mi personalmente me gusta el efecto que queda al disminuir en 1 cada Update, pero si se aumenta el numero aumentara la velocidad del scroll. Eso queda a gusto de cada uno. También controlamos que si Y es 0 o menos, volvemos al principio, volviendo a mostrar la parte de abajo de la imagen, que como ya mencioné anteriormente debería ser igual. Ese –15 extra se debe a que si ponemos las coordenadas iniciales sin mas se apreciara un rebote, dado a que la imagen se esta moviendo constantemente, y que probablemente la parte de arriba y la de abajo no sean exactamente iguales pixel a pixel. A base de prueba y error para el caso de esta imagen he sacado que el numero apropiado son 15 px, pero si usáis otra imagen esto cambiara.



Ahora que ya tenemos lista la clase Fondo, solo nos queda agregar una instancia en la clase principal Game1, y las invocaciones a todos los métodos necesarios:



    public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
Nave _nave;
Fondo _fondo;

public Game1()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
}

protected override void Initialize()
{
//Recordar comentar la siguiente linea
//Console.WriteLine(graphics.PreferredBackBufferHeight + "x" + graphics.PreferredBackBufferWidth);
_fondo = new Fondo(graphics.PreferredBackBufferHeight, graphics.PreferredBackBufferWidth);
_nave = new Nave(graphics.PreferredBackBufferHeight, graphics.PreferredBackBufferWidth);
this.Window.Title="Space Burst";
base.Initialize();
}

protected override void LoadContent()
{
// Create a new SpriteBatch, which can be used to draw textures.
spriteBatch = new SpriteBatch(GraphicsDevice);
_fondo.LoadContent(Content);
_nave.LoadContent(Content);
}

protected override void UnloadContent()
{
// TODO: Unload any non ContentManager content here
}

protected override void Update(GameTime gameTime)
{
// Cuidado con esto, no usamos mando.
if (Keyboard.GetState().IsKeyDown(Keys.Escape))
this.Exit();
_fondo.Update();
_nave.Update();

base.Update(gameTime);
}

protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.Black);

spriteBatch.Begin();
_fondo.Draw(spriteBatch);
_nave.Draw(spriteBatch);
spriteBatch.End();

base.Draw(gameTime);
}
}


Es importante recordar, que como se menciono anteriormente, para que la imagen A se dibuje por encima de la imagen B, hay que dibujar primero B y luego A. Por tanto, el Fondo debe ser lo primero en dibujarse, o sino tapara el resto de objetos. Por lo demás, nada nuevo.



image



Tras ejecutar vemos el efecto obtenido. ¿Que os parece? Yo creo que no esta mal, queda un poco raro la nave pixelada con la imagen real del espacio, pero bueno, siempre podéis cambiar vuestro fondo por otro :P



Podéis descargaros el código fuente del tutorial hasta este momento en el siguiente enlace: http://www.megaupload.com/?d=RB2TYYLJcangrejus guaperus



Con esto concluye esta parte del tut orial. En la siguiente parte nos ponemos serios, introduciendo enemigos y detección de colisiones, no os lo perdáis. ¡Sed buenos cangrejos!



PD: ¡¡Gracias a Sara por el aporte del cangrejo!!



Etiquetas de Technorati: ,,,,,

sábado, 19 de junio de 2010

Programando videojuegos: Tutorial XNA Game Studio 4.0 parte 3

crab-icon ball c#

Bueno, tras un pequeño intervalo de tiempo volvemos con el tutorial sobre XNA, pues ya va siendo hora que nuestra navecita pueda disparar. Lo primero que necesitamos es un sprite del disparo. En mi caso voy a utilizar este, pero bueno, este es un país libre.

weapons

Para introducirlo en el proyecto tenemos que repetir lo que ya aprendimos en la primera parte del tutorial. Copiamos la imagen a la carpeta del proyecto y la arrastramos a Content en el VS.

Una vez que tenemos la imagen dentro de Content necesitaremos crear una nueva clase que almacene toda la información de cada disparo, como por ejemplo la clase Disparo.

¿Que atributos necesita esta clase? Necesita los siguientes:

	private const int anchoImagen = 6;
private const int altoImagen = 22;
private Texture2D imagen;
private Vector2 _posicion;
public event EventHandler FueraDePantalla;


Como podéis ver, ya que Disparo va a representar a un Sprite que se moverá por la pantalla tiene atributos bastante similares a Nave, excepto por el Rectangle (Los disparos no tendrán animación). El único atributo nuevo es el evento FueraDePantalla, que se disparará cuando el disparo se salga de la pantalla, para avisar a la clase que contenga los disparos (Estarán almacenados dentro de una lista en Nave) de que debe borrar el disparo. ¿Por que? Es sencillo, si a lo largo del juego vamos añadiendo cada vez mas disparos, aunque se salgan de la pantalla seguirán existiendo, por lo que estarán consumiendo recursos inútilmente. Este evento se disparará en el método Update que definiremos mas adelante. En cuanto al resto de atributos, son equivalentes a los de Nave, si tenéis dudas podéis mirar atrás.



Necesitamos un constructor acorde con estos atributos, algo parecido a esto:



	public Disparo(Vector2 posicion, int anchoNave, ContentManager Content)
{
_posicion = posicion;
//movemos un poco la posicion del disparo, para que salga desde el centro de la nave y no desde una esquina
_posicion.X += (anchoNave / 2);
//lo que acabamos de centrar es la esquina superior izquierda del disparo. Así situaremos el centro alineado con el centro de la imagen
//los 3 pixeles extra es por que la imagen del disparo no esta perfectamente centrada.
_posicion.X -= (anchoImagen / 2)+3;
//Ya que los disparos pueden surgir en cualquier momento, y no al principio de la ejecución no tiene sentido tener un método
//LoadContent que cargue las imágenes. En vez de eso las cargaremos en el constructor.
imagen = Content.Load("weapons");
}


En el constructor vemos como se inicializa la posición del disparo en función de la posición de la nave (pasada por parámetro) Además utilizamos el ContentManager pasado para inicializar la imagen. Recordad que no hay que poner terminación. Más tarde habrá que modificar la clase nave para que almacene ContentManager, y así poder pasar el parámetro al crear los disparos.



Además de esto necesitaremos un método Update que haga avanzar el disparo y un método Draw que lo dibuje por pantalla:



	public void Update()
{
_posicion.Y-=5;
if (_posicion.Y <= 0)
FueraDePantalla(this, null);
}
public void Draw(SpriteBatch spbtch)
{
spbtch.Draw(imagen, _posicion, new Rectangle(0,0,anchoImagen, altoImagen), Color.White);
}


Como se puede observar en el método Update disminuimos 5 puntos el eje Y de la posición. Variando esto se podrá modificar la velocidad de los disparos (Recordad que la posición se expresa en pixeles). Además de esto si la posición se hace menor que 0 lanzara el evento antes mencionado, que será manejado por Nave para borrar el disparo.



En cuanto a Draw, nada nuevo.



Tras esto ya tenemos lista la clase Disparo. Deberemos añadir una lista de disparos a los atributos de Nave y inicializarla en el constructor:



        private Rectangle rectangulo;
private const int anchoImagen = 42;
private const int altoImagen = 44;
private Texture2D imagen;
private Vector2 posicion;
private int altoVentana;
private int anchoVentana;
private List<Disparo> disparos;
private int frameCounter = 0;
private ContentManager _content;
public Nave(int altoVentana, int anchoVentana)
{
this.altoVentana = altoVentana;
this.anchoVentana = anchoVentana;
posicion = new Vector2(altoVentana - altoImagen * 2, (anchoVentana - anchoImagen) / 2);
CrearRectangulo(anchoImagen, altoImagen * 2);
disparos = new List<Disparo>();
}
public void LoadContent(ContentManager Content)
{
this._content = Content;
imagen = Content.Load<texture2d>("battleship");
}


Como podemos ver hay varias cosas nuevas. En cuanto a la lista antes mencionada, podemos ver que se inicializa en el constructor. También almacenamos el ContentManager que obtenemos en el método LoadContent por que lo necesitaremos para inicializar los disparos.



En cuanto al int frameCounter, lo utilizaremos para que no se pueda disparar demasiado rápido. Me explico. Si no ponemos ninguna clase de restricción de este estilo al crear los disparos, si mantenemos pulsado el botón se creara un disparo cada vez que se pulse el botón Update. Esto serán una cantidad enorme de disparos. Si tenemos un contador, que cada vez que se llame a Update se le suma 1, y que cada vez que creamos un disparo se ponga a 0 podemos decir que si el contador esta mas bajo que 7 no se cree ningún disparo, haciendo así que los disparos se creen mucho mas lentos. Yo he puesto 7, pero el numero se puede alterar al gusto, claro. Esta técnica es indispensable aplicarla a cualquier botón que se utilice que no sean los de movimiento.



Una vez explicado esto, veremos como queda nuestro método Update tras manejar los disparos:



        public void Update()
{
UpdateShots();
UpdatePosition();
UpdateRectangle();
}
private void UpdateShots()
{
frameCounter++;
if (Keyboard.GetState().IsKeyDown(Keys.Z) && disparos.Count < 6 && frameCounter > 7)
{
Disparo s = new Disparo(posicion, anchoImagen, _content);
disparos.Add(s);
s.FueraDePantalla += new EventHandler(FueraDePantallaHandler);
frameCounter = 0;
}
disparos.ForEach(x => x.Update());
}


Como se puede ver, hemos añadido un método mas a Update donde se manejan los disparos. Lo primero que se hace es aumentar frameCounter, tras lo cual si la tecla está pulsada, hay menos de 6 disparos y framecounter está a 7 o más crearemos un nuevo disparo. Lo de la limitación de 6 disparos en la pantalla es totalmente opcional, depende del poder que le queráis dar a vuestra nave :).



Una vez se cumplen todas estas condiciones se crea un nuevo disparo, se añade a la lista y frameCounter se pone a 0. Además de esto también empezamos la escucha del evento, con lo cual, una vez se dispare el evento FueraDePantalla se invocará automáticamente al método FueraDePantallaHandler, que definiremos ahora, en el cual se eliminara el disparo que ha enviado el evento por que este se ha salido de la pantalla.



En cuanto a la última línea del método es una expresión lambda que básicamente recorre disparos y llama a Update de cada disparo. Lo más intuitivo sería hacer un foreach para que realice esto, pero dado que durante la ejecución del bucle puede cambiar el tamaño de disparos, si usamos foreach saltara una excepción, mientras que usando esta expresión Lambda no pasara. Otra solución sería recorrer la lista manualmente valiéndose de un bucle convencional como for.



En cuanto al manejador de eventos que borrara los disparos sobrantes, será algo tan sencillo como esto:



	private void FueraDePantallaHandler(Object sender, EventArgs args)
{
disparos.Remove((Disparo)sender);
}


Por ultimo, solo nos queda llamar al método Draw de cada disparo dentro del método Draw de Nave:



        public void Draw(SpriteBatch spbtch)
{
spbtch.Draw(imagen, posicion, rectangulo, Color.White);
DrawShots(spbtch);
}
private void DrawShots(SpriteBatch spbtch)
{
foreach (Disparo s in disparos)
{
s.Draw(spbtch);
}
}


Tras esto, podemos probar a ejecutar el programa, y veremos que nuestra nave ya esta dotada de un armamento temible.



imageY eso es todo por hoy. Podéis bajaros el código fuente de lo que tenemos hasta ahora en el siguiente enlace:image http://www.megaupload.com/?d=SQ0VIX0T



En la próxima parte del tutorial veremos como añadir a nuestro juego un fondo animado con scroll. No os lo perdáis y ¡¡Sed unos cangrejos pacientes!!









Etiquetas de Technorati: ,,,,,