XNACommunity Blog

Nueva sección en XNACommunity

Cesar Reneses — Sun, 05 Apr 2009 16:21:00 GMT

Se ha incluido una nueva sección en la web de XNACommunity, se trata de un apartado de juegos completamente terminados que podemos descargar para jugar () y ver como están construidos.

De momento están disponibles 5 de los 8 juegos finalistas del concurso de videojuegos del DotNetClub de Alicante.

A continuación os dejo unos pantallazos de los juegos:

Tienen muy buena pinta ¿no creeis? podeis leer la descripción de cada uno de ellos desde aquí.

Saludetes

Componente barra de progreso en XNA

Cesar Reneses — Sat, 04 Apr 2009 18:45:00 GMT

José Manuel Silvestre nos ha dejado esta vez en XNACommunity un componente muy sencillo y fácil de utilizar para nuestros juegos en XNA.

Se trata de una barra de progreso con la que podemos mostrar la carga de las pantallas, la energía, etc.

El componente lo tenéis disponible en XNACommunity.

Saludetes

Componente de LCD para XNA

Cesar Reneses — Sat, 14 Mar 2009 13:26:00 GMT

José Manuel Silvestre nos trae su primer componente hecho en XNA. Se trata de un visor que simula una pantalla de LCD con el que podremos mejorar el aspecto de nuestros juegos.

En el paquete se incluyen los archivos .PSD (PhotoShop) por si queremos crear nuestros propios tipos de dígitos.

Este es el aspecto del componente:

Como siempre podeis descargarlo desde XNACommunity.

Saludetes

Aprende a crear aplicaciones multitouch usando XNA

Cesar Reneses — Sat, 14 Mar 2009 12:47:00 GMT

Aquí tenemos un ejemplo de una aplicación para pantallas multitouch desarrollado con XNA.

En el desarrollo han colaborado: Juliet R. Moreiro Bockhop, Sergio Escalada Beltrán y Javier Cantón Ferrero.

Podeis bajaros el código como siempre desde el repositorio de XNACommunity

Bueno lo mejor de esto es verlo en vivo:

Tambíen tenemos la suerte de contar con los videos de la presentación de este proyecto .

Felicidades al equipo por este proyecto tan chulo.

Saludetes

Sombras omnidireccionales

Cesar Reneses — Thu, 15 Jan 2009 10:04:00 GMT

En este ejemplo se muestran sombras omnidireccionales usando 'dual-paraboloid mapping'.

Este tipo de proyección permite representar las profundidades de todos los puntos de la escena en sólo dos texturas, a diferencia de otros métodos como las sombras hechas con cubemaps que requieren actualizar seis superficies, dando como resultado una técnica bastante óptima aunque con ciertas fallos en la calidad de imagen.

Como siempre video y código:

El código lo podéis bajar de XNACommunity

Saludetes

Empieza a crear tu propio Guitar Hero

Cesar Reneses — Tue, 11 Nov 2008 23:16:00 GMT

¿Ya te has pasado el Guitar Hero mil veces? pues ahora puedes hacerte tu propia versión con ayuda del ejemplo que Javier Cantón ha subido a XNACommunity.

Podeis descargar el archivo con el proyecto desde la web de XNACommunity.

Saludetes

ToonShading o como hacer que tu juego parezca un comic

Cesar Reneses — Tue, 28 Oct 2008 19:05:00 GMT

Pues eso mismo, aquí os dejo la info sobre el último ejemplo que Alex Urbano ha hecho para XNACommunity.

Este ejemplo muestra una mezcla de técnicas destinadas a pintar una escena 3D simulando que es un dibujo animado hecho a mano. Se mezclan cosas tales como cel shading usando una textura para modular la intensidad de la luz, siluetas mediante geometría y detección de las mismas en un post-proceso, y una simulación de trazos a lápiz en las zonas sombreadas.

El ejemplo lo podeis descargar desde XNACommunity en la sección de ejemplos.

Saludetes

Generación de terrenos usando 3D studio max

Cesar Reneses — Sun, 19 Oct 2008 10:36:00 GMT

Bueno la idea de este tutorial es aprender a crear modelos de terrenos para nuestras demos XNA con 3D Studio Max. La generación de Terrains en los videojuegos se suele hacer mediante código durante el tiempo de carga o de forma dinámica durante el juego. Uno de los últimos videojuegos comerciales que presentan un sistema de terrenos muy avanzado es BattleField Bad Company, en el cual los terrenos se modifican en tiempo de juego a causa de explosiones provocadas por las armas de los jugadores.
Sin embargo muchas veces no se necesitan sistemas de generación de terrenos tan complejos, por lo que podemos precalcular estos y añadirlos en forma de content directamente a nuestros proyectos. Y esto precisamente es lo que vamos a explicar en este tutorial.

Manos a la obra

Bueno lo primero que vamos a necesitar será una textura para nuestro terreno, está podéis crearla ustedes o buscar alguna por internet, yo para este ejemplo voy a usar esta:

Bien lo siguiente que vamos a necesitar es una textura de alturas (heightMap), es decir, una textura con tonalidades que van de blanco a negro y que luego usaremos para establecer las alturas de nuestro terreno. Los pixeles negros estarán a nivel de mar y los pixeles de color blanco serán los picos más altos de nuestro terreno. Posiblemente podáis encontrar también algunos heightMap buscando por internet, pero en mi caso voy a generarlo mediante Photoshop.

Bien nos vamos a Photoshop y creamos un nuevo fichero de dimesiones 512x512, ya que nuestro terreno será cuadrado:

Y luego pintaremos el fondo completamente de negro para que inicialmente todo esté a nivel del mar:

El siguiente paso será usar la brocha para pintar las zonas de nuestro terreno que estarán sobre el nivel del mar. Seleccionamos la herramienta y configuramos algunas propiedades para que la brocha al pintar genere degradados en los bordes y de esa forma el terreno que generemos esté suavizado.

Y por último nos ponemos a pintar las alturas, esto es a gusto del consumidor, según lo que necesitéis para vuestro proyecto. Os recomiendo para la mayoría de los casos dibujar una especie de muralla rodeando toda la imagen pero dejando un margen negro, entonces si colocamos una cámara en el centro del terreno nunca veamos el final de este, sino montañas que no nos dejan ver más allá. Yo he dibujado esto XD:

Bien ya tenemos las texturas que necesitábamos, ahora nos vamos al 3d Studio Max y lo primero que vamos a hacer es crear un plano en el centro del mundo. Para ello dentro de la pestaña Create del menú de la derecha y teniendo seleccionada Geometric podremos ver un botón en el que pone Plane.

Presinamos el botón de plane y manteniendo pulsada la tecla control para que nos salga un plano cuadrado, creamos un plano en el centro del mundo.

Para asegurarnos que está en el centro, haremos click con el botón derecho del ratón sobre el botón mover del toolbar superior y en la ventana que nos aparecerá colocaremos todas las coordenadas a 0.

Ahora nos vamos a la pestaña modify y en un cuadro blanco de debajo aparecerá solo plane. Bien más abajo están las propiedades de creación de este plano, las cuales vamos a modificar para darle mayor número de vértices de forma que luego el terreno tenga un aspecto más suavizado. Para ello modificaremos los parámetros length segs y width segs, yo les voy a poner 40 a cada uno pero este valor difiere según el tamaño del terrain y del suavizado que necesitéis, lo óptimo sería tener un vértice para cada pixel de la textura del heigthMap.

Lo siguiente será irnos a la lista de modificadores y añadirle uno a nuestro plano llamado Displace:

Luego en sus propiedades nos iremos a Map y le aplicaremos el heigthMap que hemos generado con el photoshop.

Y por último para apreciar las alturas de nuestro heightMap sobre el plano le indicaremos mediante el parámetro Strength cuál será la altura de aquellos pixeles que esté en blanco:

Bien ya tenemos nuestro terreno generado, solo falta aplicarle la textura. Para ello abrimos el editor de materiales ( la forma más fácil es presionando la tecla ‘M’). Sobre cualquier material por defecto seleccionamos en la pestaña Maps, y le añadimos una textura al canal diffuse.

Y para aplicar la textura al plano realizamos los siguientes pasos que se muestran en la imagen (debemos tener el plano seleccionado).

Ok, pues aquí termina este tutorial, lo único que nos faltaría sería exportar ya dicho modelo en fbx o en el formato que se quiera.

Created by Javier Cantón Ferrero.

Saludetes

Primeros pasos en Inteligencia Artificial

Cesar Reneses — Mon, 13 Oct 2008 10:58:00 GMT

Hola a tod@s, tenemos un nuevo artículo en XNACommunity, en esta ocasión va sobre inteligencia artificial en los videojuegos, se la ha currado Marc García. Podeis también bajaros el código y leerlo en XNACommunity.

Primeros pasos en Inteligencia Artificial:

Modelos de comportamiento usando máquinas de estados

En el mundo de los videojuegos, está muy bien que los enemigos parezca que piensen y actúen en consecuencia a nuestros actos.
Básicamente si no lo hicieran, luchar contra un enemigo o contra una palmera no tendría diferencia alguna (los cocos, quizás).

En este artículo pretendo explicar qué hace decidir a un enemigo actuar de una manera o de otra, y poner un ejemplo práctico.
Mi intención es, que alguien que no sepa nada del tema, después de leer el artículo pueda jugar a un juego y entender porqué ese enemigo viene corriendo hacia mí cuando claramente tengo un bazooka en la mano.

CONTENIDO

Máquinas de Estados
Montando el tinglado

Patrullar
Buscar
Seguir

Conclusiones
Ejemplo

Máquinas de Estados

Me referiré a ellas como autómatas. Hay de muchos tipos, de estados finitos, infinitos, con transiciones lambda/epsilon etc. etc.

La mejor manera de explicar su funcionamiento es con el siguiente diagrama:

Los autómatas cuentan con términos propios (lenguaje, palabra, estado, ...), pero como eso es más complicado, vamos a lo básico.
Simplificando: empezamos en un estado, y cuando se cumple una condición, saltamos a otro estado.
Tanto las condiciones como los estados pueden ser abstracciones de cosas más complejas. De hecho, hasta pueden ser tratados como otros autómatas aparte.

Esto nos puede ayudar a ser organizados y no acabar con tiras y tiras y tiras de papel/hojas de <mi procesador de texto>. Ya sabéis, divide y vencerás.

Sabiendo eso, se puede hacer un esquema parecido al siguiente...

... en el que dejamos externa la parte de inicio/fin. Si además lo llamamos, por ejemplo, 'soldado'... pues supongo que ya se empieza a ver por dónde van los tiros.

Y hasta aquí la parte teórica, que no quiere decir ni por asomo que no exista nada más que explicar (je). Simplemente he contado lo básico que creo que es necesario para entenderlo.
De todos modos, si alguien siente curiosidad, wikipedia es tu amiga ->
http://en.wikipedia.org/wiki/Automata_theory
http://en.wikipedia.org/wiki/Finite_state_machine

Pasemos al ejemplo práctico

Montando el tinglado

Para nuestro ejemplo contamos con un par de modelos, a los que asignaremos diferentes comportamientos.

Ya que el comportamiento puede variar, creamos una clase base, de la que heredarán el resto.

public class CBehaviourModel
{
	public CBehaviourModel() { }
	public virtual void Update(GameTime gameTime, ref Vector3 position, ref Vector3 direction, ref Vector3 rotation) { }
}

El método importante es el Update (bueno, estando sólo el constructor y un método tampoco queda mucho más).
Como alguno de los comportamientos modificará la posición, etc. de su modelo, lo pasamos por referencia en el Update.

Teniendo ya la clase base, podemos crear el resto.
El planning es que uno de los modelos estará en modo patrulla, y el otro estará buscándolo. Cuando lo vea, lo seguirá.

Hacemos 3 clases entonces: CPatroller, CStraightSearcher y CFollower.
Además, hacemos una cuarta CStandStiller, que no hace nada. Realmente es como la clase base, pero con el nombre adecuado a lo que hace, quedarse quieto.

Para las explicaciones me centraré en los métodos "importantes", básicamente los Update. Ya que en los métodos Draw, Load, etc. no hay nada excesivamente raro, no los comentaré.

Patrullar

Se trata de una clase muy simple.
Contiene un array de N posiciones, que le indican la ruta a seguir. El punto N conecta con el primero, de manera que hace un recorrido cerrado.

En el Update, va guardando el tiempo pasado entre frame y frame (cumul_time) para determinar la distancia que avanza.
Hace un Lerp entre 2 vectores: pilla vector1, pilla vector2, y con un factor alpha [0..1] devuelve un nuevo vector. Si alpha = 0.5f, devuelve el vector medio entre v1 y v2. Como va de 0 a 1, usamos el tiempo para determinar alpha.
Una vez llegado al destino (cumul_time = 1), se avanzan los corners (si es el final se vuelve al principio).

public override void Update(GameTime gameTime, ref Vector3 position, ref Vector3 direction, ref Vector3 rotation)
{
	// update time: takes X seconds to go from corner to corner
	cumul_time += (float)gameTime.ElapsedGameTime.TotalSeconds / corner_to_corner_time;
 
	if (cumul_time > 1f)    // reached max?
	{
		cumul_time = 0f;
 
		// Change corners
		++actual_corner;
		rotation.Y -= 90f;
		if (actual_corner >= corner_points.Length)
		{
			actual_corner = 0;
			rotation.Y = 0f;
		}
	}
 
	// patrolling
	int next_corner = actual_corner + 1;
	if (next_corner >= corner_points.Length)
		next_corner = 0;
 
	Vector3 from = corner_points[actual_corner];
	Vector3 to = corner_points[next_corner];
	position = Vector3.Lerp(from, to, cumul_time);
}

Apunte: siempre suelo decir que a la hora de calcular cualquier cosa en videojuegos hay que tener en cuenta tanto los números como los gráficos.
Es decir, que hay que cuadrar los valores de los elementos con los de las meshes que se van a pintar.
Por eso cuando se cambia de esquina se actualiza la rotación del modelo. Si no, iría pululando por el escenario sin más (ver el caso de CFollower).

Buscar

Esta clase está hecha a modo de alarma típica de láser infrarrojo. Tenemos el modelo quieto, que "emite" un rayo; si alguien cruza ese rayo se cambia de comportamiento a CFollower.
Para simular el rayo usaremos dos planos. El segundo se usa para limitar la "altura" del primero, ya que un plano es infinito y por tanto cualquier cosa que estuviera por detrás del modelo se detectaría también.

Aunque no se vea, en la escena tenemos

las rayas de colores son los dos planos.

En el Update se hace la comprobación que el objeto esté por delante del plano rojo, y que intersecte con el plano amarillo.

public bool Intersects(BoundingSphere sphere)
{
	intersection_front = false;
	intersection_straight = false;
 
	// check0: front of plane
	if (Front.Intersects(sphere) != PlaneIntersectionType.Front)
	{
		return false;
	}
 
	intersection_front = true;
 
	// check1: straight plane
	if (Straight.Intersects(sphere) == PlaneIntersectionType.Intersecting)
	{
		intersection_straight = true;
	}
 
	return (intersection_front && intersection_straight);
}

Seguir

Finalmente, esta clase se encarga de seguir una posición con una distancia de seguridad (para no montar un modelo con otro).
Cada Update se ha de actualizar la posición a seguir, por lo que se hace desde el Update del juego principal.

if (dino.Behaviour is CFollower)
{
	((CFollower)dino.Behaviour).TargetPosition = sword.Position;
}
 
dino.Update(gameTime);
sword.Update(gameTime);

y en el update correspondiente, se calcula la nueva posición

public override void Update(GameTime gameTime, ref Vector3 position, ref Vector3 direction, ref Vector3 rotation)
{
	Vector3 dir = target_position - position;
	dir = dir - dir / 10; // security distance = 1/10;
 
	position += dir * (float)gameTime.ElapsedGameTime.TotalSeconds;
	dir.Normalize();
	direction = dir;
}

En este modelo no se actualiza la rotación del modelo, por lo que se ve "mal" cuando se mueve. Este es el ejemplo que comentaba en la clase CPatroller.

Conclusiones

Con todo lo anterior se puede conseguir lo que se ve en el ejemplo, que es muy básico.
Con algo más de complejidad, se podría hacer, por ejemplo, que si un elemento se escapa a más de una distancia X, el otro elemento cambia a CSearcher.
También CStraightSearcher se podría convertir en CSearcher, haciendo no sólo una línea recta, si no que vaya rotando en un arco para ampliar la búsqueda, añadir un cono de visión, etc.

Los controles básicos son WASDZX + mouse para la cámara, espacio para iniciar el comportamiento de patrulla, R para resetear y ESC para salir.

Finalmente, espero que este artículo haya ayudado a alguien a entender, o entender mejor, como funcionan algunas de las Inteligencias Artificiales en los videojuegos.
Hay que tener en cuenta que las máquinas de estados se usaban hace mil millones de años, y que los juegos next-gen usan algoritmos muchos más complejos.
Pero bueno, que de algún lado ha venido todo.

Lo dicho, que espero que haya sido útil.

Saludetes

Nuevos recursos en XNACommunity

Cesar Reneses — Wed, 24 Sep 2008 18:59:00 GMT

Tenemos nuevos recursos en esta nuestra comunidad de XNA.

Concretamente es un componente de menú para añadir a nuestros videojuegos y además un artículo en el que se explica como se ha hecho.

Por poner algo más el autor es César Reneses que por una vez se ha dejado la vaguería en el cajón y se ha puesto a escribir

La dirección del componente es esta, y la dirección del artículo aquí.

Saludetes

Actualización del componente Skydome

Cesar Reneses — Sun, 14 Sep 2008 18:42:00 GMT

Pues eso, que Alex Urbano ha actualizado su componente que permite añadir un skydome con efecto de atmospheric scattering y transición día/noche. En esta actualización se han añadido sencillas nubes generadas con Perlin Noise en la GPU.

El enlace aquí

Saludetes

XNA y Windows Forms

Cesar Reneses — Sun, 07 Sep 2008 10:55:00 GMT

Ya tenemos un nuevo tutorial en XNACommunity gentileza de Javier Cantón .

En este tutorial aprenderemos a crear aplicaciones Windows Forms que usen XNA a las que podríamos catalogar como aplicaciones “híbridas”. Este tipo de aplicaciones se están volviendo cada vez más y más común en el mundo de la informática.

Empezaremos comentando que el framework de XNA no viene preparado para que se pueda usar junto con Windows Forms, ya que el graphicsDeviceManager que es el que se encarga de crear la ventana sobre la que pinta XNA y de inicializar el device no nos permite especificar el handle de la superficie sobre la que queremos pintar. Tenemos la opción inicializar nosotros a mano nuestro device, pero estaríamos perdiendo gran parte de la funcionalidad que nos aporta el graphicsDeviceManager, como puede ser el ContentManager. En la página de ejemplos de Microsoft http://creators.xna.com podemos encontrar dos ejemplos en los que utilizan Windows Forms junto con XNA. En el primero llamado WindowsForms Series 1: Graphics Device podemos aprender a crear el device a mano y a poder usarlo para pintar un triangulo:

El problema que nos encontramos con este ejemplo es que hemos perdido con ContentManager (no podemos cargar contenido como texturas, modelos, sonidos, etc usando los contentloaders de XNA) y por lo tanto tenemos que crear ese triangulo a mano. Esto nos llevaría a desaprovechar gran parte del Framework de XNA. Sin embargo en el siguiente ejemplo WinForms Serie 2: Content Loading que proponen en dicha web podemos ver como cargan un FBX con textura:

Y si nos vemos el código de dicho ejemplo es mucho más extenso que el del anterior ya que han creado se crean sus propias clases encargadas de hacer unos de ContentBuilder. ¿Y esto en qué consiste?, pues en coger todos los ficheros de content que hay en nuestro proyecto, usar el loader adecuado para compilarlo y generar los ficheros xnb en el directorio de trabajo de nuestra solución.

Personalmente tras ver estas dos propuestas no me convenció ninguna de las dos, ya que en la primera desperdicias el framework y para eso usas directamente DirectX, y en la segunda en la implementación que haces uso del ContentBuilder me parece muy engorroso. Tras investigar un poco encontré una solución parcialmente buena, su principal característica es que es bastante sencilla de implementar y puedes seguir usando el ContentManager por defecto.

Pongámonos manos a la obra para explicar cómo sería este nuevo método, bien lo primero que tenemos que hacer es crear un nuevo proyecto XNA, el cual si lo ejecutamos pues ya nos creará una ventana en donde pintará con XNA. Pero nosotros no queremos pintar en esa ventana, nosotros queremos crear por ejemplo un editor en donde lo que necesitamos es que XNA pinte sobre un panel de nuestra ventana. Por ello lo primero que vamos a hacer es añadir un formulario a nuestra solución y como una imagen vale más que mil palabras:

Y ahora le añadiremos el aspecto de un pequeño editor con un menuStrip, un propertyGrid a la izq y un panel a la derecha separados por un splitter para luego poder redimensionar el espacio, todo esto quedaría de la siguiente forma:

Una vez que tenemos esto ahora tenemos que hacer que XNA pinte sobre nuestro panel. Para ello primero nos dirigiremos al código de nuestro formulario y le añadiremos la siguiente propiedad:

public Control Panel
{
   get { return splitContainer.Panel; }
}

Después de hacer esto lo único que nos hace falta saber es que existe una forma de cambiar el handle de la superficie sobre la que pinta el device de XNA, y esta es:

GraphicsDeviceInformation.PresentationParameters.DeviceWindowHandle

Propiedad que intersectaremos justo cuando la cuando el Graphics esté preparando los parámetros para crear el device. Los cambios que vamos a realizar a continuación serán sobre el fichero program.cs y sobre el game.cs.

Empecemos por el program:

    static class Program
    {
        static Game1 game;
 
        [STAThread]
        static void Main(string[] args)
        {
            Main form = new Main();
            form.Disposed += new EventHandler(form_Disposed);
            using (game = new Game1(form))
            {
                form.Show();
                form.TopMost = true;
                game.Run();
            }
        }
 
        static void form_Disposed(object sender, EventArgs e)
        {
            game.Exit();
        }
    }

Como se puede ver hemos creado una variable static de tipo Game1, y luego dentro del Main hemos inicializado nuestro formulario. Hemos suscrito un método al enveto Disposed de nuestro formulario ya que vamos a dejar que Game lleve el thread de nuestra aplicación mediante el Game.Run () y por lo tanto tendremos que avisarle de que queremos salir de esta cuando el usuario cierre el formulario.

Luego hemos creado una instancia de nuestra clase Game1 a la que como véis se le pasa el formulario como parámetro, hemos mostrado el formulario, activado la opción TopMost de este y llamado a Game.Run(). La pregunta que todos os podréis hacer aquí es porque hemos activado la opción TopMost, vayamos a explicar esto antes de continuar. El graphicsDeviceManager creará una ventana por defecto al arrancar pero no es esta sobre la que queremos que pinte pero sin embargo dicha ventana se creará y podrán verse las dos ventanas abiertas en nuestra pantalla, para disimular esto vamos a hacer un pequeño truco que consistirá en decirle a nuestro formulario que se cree en pantalla por encima de todas las ventanas de forma que la ventana por defecto quedará escondida detrás de la nuestra, en ese momento ya le habremos cambiado a XNA el handle sobre el que debe pintar y por lo tanto pintará sobre el panel de nuestro formulario. Y como no existe forma de decirle a el graphicsDeviceManager que no cree su ventana por defecto pues una vez que esta reciba el foco del sistema la pondremos invisible mediante mediante la propiedad Visible y restauraremos la propiedad TopMost de nuestro formulario a false.

Si no hacéis este pequeño truco se notará un pequeño parpadeo al arrancar la aplicación que consistirá en la ventana de XNA que se crea y desaparece rápidamente, por este motivo cuando hable de esta solución la califiqué como parcialmente buena pero es la única pega.

Bueno pues una vez que lo tenemos todo claro solo queda escribir código en Game. Para empezar necesitamos un atributo del tipo de nuestro formulario, que inicializaremos en nuestro constructor:

Main form;
public Game1(Main form)
{
   this.form = form;

Una vez que tenemos esto tenemos que realizar tres tareas importantes:
- Cambiar el handle sobre el que pintará XNA.
- Cuando la ventana por defecto reciba el foco hacerla invisible y cambiar la propiedad TopMost de nuestro formulario.
- Y adaptar el device y el aspectRatio de la cámara cada vez que el tamaño del panel del formulario cambia, para no perder las proporciones.

Cambiar el handle sobre el que pintará XNA

La constructor de Game la añadimos la siguiente línea para suscribirnos al evento de preparación de parámetros del device:

graphics.PreparingDeviceSettings += new EventHandler<PreparingDeviceSettingsEventArgs>(graphics_PreparingDeviceSettings);

Luego dentro del método cambiamos el handle sobre el que el device pintará:

void graphics_PreparingDeviceSettings(object sender, PreparingDeviceSettingsEventArgs e)
{
    e.GraphicsDeviceInformation.PresentationParameters.DeviceWindowHandle = form.Panel.Handle;
}

Cuando la ventana por defecto reciba el foco hacerla invisible y cambiar la propiedad TopMost de nuestro formulario

En el constructor escribiremos lo siguiente para obtener el puntero a la ventana que XNA crea por defecto:

Form xnaWindow = (Form)Control.FromHandle((this.Window.Handle));

Y después nos suscribiremos al método GotFocus un método que se encargará de poner la ventana invisible y de volver a cambiar la propidad TopMost de nuestro formulario:

xnaWindow.GotFocus += new EventHandler(xnaWindow_GotFocus);
void xnaWindow_GotFocus(object sender, EventArgs e)
{
    ((Form)sender).Visible = false;
    form.TopMost = false;
}

Y adaptar el device y el aspectRatio de la cámara cada vez que el tamaño del panel del formulario cambia, para no perder las proporciones

En el constructor añadimos también la suscripción al evento Resize del panel, para después cambiar las propiedades de tamaño del device y las del aspectRatio de la cámara:

form.Panel.Resize += new EventHandler(Panel_Resize);
void Panel_Resize(object sender, EventArgs e)
{
   graphics.PreferredBackBufferWidth = form.Panel.Width;
   graphics.PreferredBackBufferHeight = form.Panel.Height;
   aspectRatio = (float)form.Panel.Width / form.Panel.Height;
   graphics.ApplyChanges();
}

Bien pues ya está todo implementado para hacer uso de XNA y su ContentManager para crear aplicaciones hibridas junto con Windows Forms, aquí os dejo un pequeño ejemplo en donde se pone en práctica todo lo explicado.

El código de ejemplo lo podeis descargar de aquí.

Saludetes

Nuevo Componente: Skydome con atmospheric scattering

Cesar Reneses — Mon, 25 Aug 2008 19:24:00 GMT

Aquí tenemos un nuevo componente que permite añadir en tu juego un skydome con efecto de atmospheric scattering y transición día/noche.

Verdaderamente esta muy trabajado y lo mejor que podéis hacer es bajarlo y probarlo, Aunque como siempre aquí tenéis unas capturas y un vídeo:

Pulsa aquí para ver el video.

El componente está hecho por Alex Urbano y podéis encontrar aquí.

Saludetes

Making of Blue Dragon

Cesar Reneses — Tue, 19 Aug 2008 23:16:00 GMT

Bueno la idea de escribir este artículo surgió del foro de XNACommunity, donde se preguntó cómo se podría hacer en XNA una situación parecida a la de las luchas que aparecen en Blue Dragon, donde aparecen los luchadores y a la izquierda una pequeña pantalla que enfoca en primer plano a alguno de estos. Aquí podéis ver una imagen en donde veréis mejor a que me refiero:

Manos a la obra
Bien lo primero será tener claro que es lo que queremos hacer, simplemente haremos dos renders de la escena, uno desde una posición cercana a alguno de los luchadores y otra desde un punto de vista más global. Por lo que necesitaremos dos cámaras y dos superficies sobre las que pintar, empezaremos hablando sobre las superficies.
Sobre un renderTarget pintaremos la imagen desde cámara zoom, que será la que recoja un primer plano de alguno de los luchadores, para ello nos creamos un atributo de tipo RenderTarget:

RenderTarget2D RT;

Inicializamos el renderTarget dentro de método Initialize, con unos parámetros habituales y con un tamaño de 512 pixeles.

protected override void Initialize()
{
 base.Initialize();
 
 RT = new RenderTarget2D(GraphicsDevice, 512, 512, 1, SurfaceFormat.Color);
}

Ahora para la otra superficie usaremos directamente el target buffer, por lo que no hace falta nada más.
Ahora necesitamos crear dos cámaras que capten la escena desde cada uno de los puntos de vista que queremos. Para ello crearemos una clase camera dentro de un nuevo fichero camera.cs, este será una cámara muy simple con unos atributos habituales. Para más información mirar directamente el fichero en el ejemplo, nosotros ahora solo le echaremos un vistazo al constructor para conocer sus parámetros:

public Camera(Vector3 position, Vector3 lookat, float nearPlane, float farPlane, float aspectRatio, float fieldOfView)

Bien una vez que tenemos esto ya podemos crear las dos cámaras que necesitábamos, e inicializarlas con los parámetros correctos:

Camera camera;
Camera cameraZoom;
 
protected override void Initialize()
{
    base.Initialize();
 
    RT = new RenderTarget2D(GraphicsDevice, 512, 512, 1, SurfaceFormat.Color);
 
    camera = new Camera(new Vector3(0, 20, 50), Vector3.Zero, 1, 10000,
        GraphicsDevice.Viewport.Width / GraphicsDevice.Viewport.Height, MathHelper.PiOver4);
    cameraZoom = new Camera(new Vector3(0, 10, 1), new Vector3(5, 10, 0), 1, 10000, 1, MathHelper.PiOver4);
}

Ok, el siguiente paso será usar la cámara normal para renderizar la escena:

protected override void Draw(GameTime gameTime)
{
    RenderScene();
 
    base.Draw(gameTime);
}
 
private void RenderScene()
{
    GraphicsDevice.Clear(ClearOptions.Target | ClearOptions.DepthBuffer, Color.CornflowerBlue, 1, 0);
 
    DrawTerrain(camera);
 
    DrawMD3();
 
    DrawText();
}

El resultado de nuestra escena en estos momentos es:

Bien el siguiente paso será renderizar sobre el rendertarget la escena desde el punto de vista de camerazoom. Para ello crearemos un método llamado DrawCameraZoom, que se encargará de hacer esto:

protected override void Draw(GameTime gameTime)
{
    DrawCameraZoom();
 
    RenderScene();
 
    base.Draw(gameTime);
}
 
private void DrawCameraZoom()
{
    GraphicsDevice.SetRenderTarget(0, RT);
 
    GraphicsDevice.Clear(Color.CornflowerBlue);
 
    DrawTerrain(cameraZoom);
 
    models[0].render(GraphicsDevice,
                        getLocalWorld(new Vector3(40, 70, 0), new Vector3(-MathHelper.PiOver2, -MathHelper.PiOver2, 0), 0.1f),
                        cameraZoom.View,
                        cameraZoom.Projection); 
 
    GraphicsDevice.SetRenderTarget(0, null);
}

Como se puede ver en el código, lo primero que hacemos es configurar el GraphicsDevice para que renderize sobre nuestro renderTarget, después limpiamos la escena y renderizamos esta. Como solo va a aparecer un modelo en pantalla será este el único que dibujemos y por último configuramos otra vez el device para que pinte sobre el target por defecto.

Bien en este momento ya tenemos dentro de RT.GetTexture() almacenada la siguiente imagen:

Que es precisamente con la que vamos a texturizar el plano que vamos a colocar en la escena con forma de pantalla. Por lo que añadiremos un nuevo método DrawPlane() al método RenderScene():

private void RenderScene()
{
    GraphicsDevice.Clear(ClearOptions.Target | ClearOptions.DepthBuffer, Color.CornflowerBlue, 1, 0);
 
    DrawPlane();
 
    DrawTerrain(camera);
 
    DrawMD3();
 
    DrawText();
}

En este método renderizaremos el plano y utilizando basicEffect le aplicaremos la textura de nuestro renderTarget:

private void DrawPlane()
        {
            foreach (ModelMesh mesh in plane.Meshes)
            {
                foreach (BasicEffect effect in mesh.Effects)
                {
                    effect.EnableDefaultLighting();
                    effect.Texture = RT.GetTexture();
                    effect.TextureEnabled = true;
                    effect.World = getLocalWorld(new Vector3(-100, 140, 50), new Vector3(MathHelper.PiOver2, MathHelper.Pi / 2.5f, 0), 0.12f);
                    effect.View = camera.View;
                    effect.Projection = camera.Projection;
                }
                mesh.Draw();
            }
        }

Ahora ya tenemos la escena terminada:

En el juego BlueDragon esta pantalla aparece y desaparece durante las luchas, pero eso ya lo dejo en vuestras manos XD. Espero que os haya ayudado este artículo y el ejemplo en donde se aplica todo lo explicado.

Bueno, todo este artículo y el código correspondiente lo podéis encontrar en XNACommunity. Todo gentileza de Javier Cantón.

Saludetes

Nuevo ejemplo: Metaballs

Cesar Reneses — Mon, 11 Aug 2008 09:25:12 GMT

Este ejemplo muestra un efecto de metaballs (también conocidas como blobs o isosuperficies) generado como un postproceso. Se pierde algo de sensación de tridimiensionalidad, pero el efecto es muy rápido.

By Alex Urbano, lo podeis encontrar todo aquí

Saludetes