XNA: librería para realizar effecto de “Fade Out”

noviembre 26, 2011



A pesar de tener últimamente bastante abandonado parado el desarrollo de cualquier tema con XNA estas semanas pasadas he estado trabajando en la creación de una librería para realizar el efecto de “Fade Out” de un modo sencillo y fácil para el desarrollo de juegos con XNA.

Realizar el efecto ha sido relativamente fácil gracias a los consejos de Agustín Rosso para realizar efectos de Pixel Shader con XNA. Poder ver el ejemplo y analizarlo para poder realizar proyectos propios ha sido de gran ayuda y sin duda se merece mi reconocimiento.

Pero no todo ha sido tarea sencilla. Quería que el efecto estuviese incluido en la librería y así evitar que se tuviese que incluir el efecto en el proyecto y que su funcionamiento fuese lo más trasparente posible. Y es aquí donde surgieron los problemas. No he trabajado mucho con librerías y el incrustar archivos en una librería era sin duda la mayor dificultad para conseguir mi objetivo. Para ello seguí los consejos de Keith Elder para incrustar archivos en una librería y trabajar con ellos.

Así pues paso a explicar las partes más importantes para crearla:

Para que no se tuviese que incluir el efecto en el Content para que se compilara a .XNB había que incluir el efecto ya compilado a la librería y así no habrá problemas al respecto. Una vez incluido hay que marcarlo como recurso incrustado para que no se cree el archivo sino que quede dentro de la librería y se pueda trabajar con ella sin que el usuario tenga constancia de su existencia.

El siguiente paso es recuperar el archivo y trabajar con el efecto para incluirlo en el Content de proyecto XNA. Para ello se recupera el archivo del Assembly y se crea el archivo en la carpeta del Content para así cargarlo.

//FadeOut.xnb está como incrustado y lo cargamos así
System.Reflection.Assembly asm = System.Reflection.Assembly.GetExecutingAssembly();
System.IO.Stream strem = asm.GetManifestResourceStream("FadeOutLib.FadeOut.xnb");
Byte[] buffer = new Byte[strem.Length];
strem.Read(buffer, 0, (int)strem.Length);
//Una vez cargado lo guardamos en el directorio Content
if (File.Exists(Game.Content.RootDirectory + @"\FadeOut.xnb"))
File.Delete(Game.Content.RootDirectory + @"\FadeOut.xnb");
File.WriteAllBytes(Game.Content.RootDirectory + @"\FadeOut.xnb", buffer);
//Cargamos el archivo en el Game.Content
this.effect = Game.Content.Load("FadeOut");

Una vez explicado el proceso básico de la librería explicaré como se utiliza en el proyecto XNA:

La librería es un GameComponent y se trabaja con él como tal. Pero antes de crear la instancia hay que compartir como Service el SpriteBatch que utilizamos para el dibujado.
// Create a new SpriteBatch, which can be used to draw textures.
spriteBatch = new SpriteBatch(this.GraphicsDevice);
Services.AddService(typeof(SpriteBatch), spriteBatch);

Ahora ya podemos crear la instancia y agregarla a los Components del juego dentro del método Update().
if (bFadeOut)
{
bFadeOut = false;
List logo = new List();
List iTime = new List();
logo.Add(this.Content.Load(@"images/xna-logo"));
iTime.Add(2000);
logo.Add(this.Content.Load(@"images/151_Logo"));
iTime.Add(2000);

this.Components.Add(gFadeOut =
new GFadeOut(this, logo, iTime, 1000, color));
}

if (GamePad.GetState(PlayerIndex.One).Buttons.Start == ButtonState.Pressed ||
gFadeOut != null && gFadeOut.bEnd)
{
this.Components.Remove(gFadeOut);
gFadeOut = null;
color = Color.Black;
}

Como se puede observar se le indica el tiempo que dura el efecto (iTime) por cada imagen que deseemos incluir en el trascurso, el tiempo de duración de la imagen en pantalla sin efecto y tipo de “Fade Out” (blanco o negro). Sólo recordar que el fondo del juego debe ser el mismo que el del efecto.

Podéis descargar: la librería | código fuente

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: