Aplicar transparencias usando la propiedad Alpha Blend

Hola de nuevo a todos, despues del parón del mes de julio aquí vengo con nuevos tutoriales. Este en concreto es bastante sencillo, ya que aprenderemos a usar transparencias  para poder pintar unos objetos sobre otros sin que ocurran problemas visuales.

Pues bien, lo que sucede cuando queremos pintar dos imágenes una sobre otra y no utilizamos algun tipo de transparencia es esto:

sin alphaBlend

Como puede verse, el recuadro azul que contiene a la segunda imagen, en este caso un avion, se muestra por pantalla haciendo que no quede del todo correcto, lo ideal hubiese sido aplicar algún tipo de transparencia para poder evitar esto y conseguir algo como lo siguiente:

alphaBlend

Ahora, el avión se integra perfectamente en la escena y no queda rastro de áquel recuadro azul que teníamos antes🙂

Todo esto se realiza desde el método Draw, como puede verse aquí:

//pintamos primero el fondo sin ningun tipo de efecto
 spriteBatch.Begin(SpriteBlendMode.None);
 spriteBatch.Draw(fondo, Vector2.Zero, Color.White);
 spriteBatch.End();
 //pintamos ahora la nave, pero aplicando el Alpha Blend
 spriteBatch.Begin(SpriteBlendMode.AlphaBlend);
 spriteBatch.Draw(nave, new Vector2(130, 130), Color.White);
 spriteBatch.End();

Y esto ha sido todo, en breve vendrán más tutoriales, y ya sabéis, si tenéis cualquier duda, dejad un comentario o usad el foro😉

EDITADO

Como podéis ver en los comentarios, el amigo Jesús ha propuesto otro método es el siguiente, en vez de tener que llamar dos veces al spritebatch.Begin y End, algo que es costoso hablando de rendimiento, él nos propone que definamos un color que XNA interpretará como transparente, para ello cogí el archivo del avión y le pinté el fondo de rojo:

Nuestro nuevo avión rojo

Nuestro nuevo avión rojo

Ahora los pasos a seguir son los siguientes, añadimos este nuevo fichero a nuestro proyecto y una vez que está importado, hacemos click derecho sobre él y le damos a propiedades (haced click en la imagen para ampliar):

content processor

Una vez tenemos la ventana de propiedades le damos al + que aparece al lado de Content Processor y nos aparecerá lo siguiente:

content processor2

Como podéis ver, aquí tenemos que definir que color será el que remplazará por transparente, en nuestro caso hay que indicarle que será el rojo, por eso lo dejo a 255 poniendo en cero los canales del verde y el azul. También es importante tener activada la opción Color Key Enabled ya que si no, no funcionará, pues bien con todo esto hecho solo hay que sustituir el método Draw que teníamos antes por este otro:

 spriteBatch.Begin();
 spriteBatch.Draw(fondo, Vector2.Zero, Color.White);
 spriteBatch.Draw(nave, new Vector2(130, 130), Color.White);
 spriteBatch.End();

Pues bien, esta es la otra manera de hacerlo, el resultado es el mismo, vosotros decidís, de nuevo, muchas gracias Jesús!🙂

Descarga el Código Fuente

Transparencia Sprites (96Kb)  XNA 3.1

Transparencia Sprites (96Kb)  XNA 4.0

8 pensamientos en “Aplicar transparencias usando la propiedad Alpha Blend

  1. funciona perfecto probé la segunda solución lo que dijo
    Jesus y funciono solo que esta vez pues por lógica se habilito
    el azul solamente y en cero los dos canales restantes de red y green

    Graciass

  2. Muy buen tutotial, yo tengo por costumbre siempre guardar los sprites en png con la transparecia ya puesta, pero este método me a gustado, puede ser muy útil para algunas cosas, gracias a ambos.

  3. Gracias a tí por los excelentes tutoriales David.

    Lo que no se (y me gustaría saber), es como afecta el PNG y su transparencia al performance. Es algo que habrá que investigar algún día… es una de las primeras cosas que pregunté en el foro de XNA cuando lo “descubrí”. La discusión se puso interesante, aunque no se si fué muy concluyente:

    http://forums.xna.com/forums/p/22940/123184.aspx

  4. Hola Jesús, ya había escuchado lo del rendimiento con varios begin y ends, de hecho no me gustaba mucho esta solución, pero era la que venía en el msdn asi que la utilicé jeje.
    En cuanto a lo de indicárselo al pipeline no tenía ni idea de que se podía hacer, voy a trastear un rato a ver, muchas gracias!!😀

    • Pues sí, acabo de probarlo y funciona igualmente🙂 tendré que editar este pequeño tutorial, muchísimas gracias de nuevo!!

  5. hola, interesante tutorial!

    Aunque tengo que decir que hacer sucesivos “begin” y “end” sobre el spritebatch puede afectar al performance de tu juego.

    Tambien se le puede indicar al content pipeline (mediante las propiedades del archivo de imagen -> Content Processor -> Color key) cuál color debe ser tratado como transparente.

    Otra opción es utilizar PNG de 32 bit que ya lleven definida la transparencia alfa en el propio fichero, con lo que el programador no tiene que hacer nada para tratarla.

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