26. Imágenes transparentes

Es habitual que cuando "creamos" una imagen, ésta tenga fondo negro (o blanco, o de algún otro color). Pero cuando esa imagen con fondo negro pasa por encima de otra, "la tapa", no permitiendo ver qué imagen se encuentra debajo.

Vamos a ver de qué formas se puede hacer que la imagen superior tenga "huecos", de modo que se vea el fondo a través de ella...

Este paso depende de la biblioteca gráfica que usemos en nuestro juego: si empleamos Allegro, que en su versión más extendida utiliza imágenes en formato BMP, las zonas transparentes se indican rellenándolas con un "color clave", un color especial que luego no se dibujará en pantalla; por el contrario, si utilizamos SDL, que permite usar imágenes en formato PNG, será más razonable usar la transparencia propia de este formato.

Crear un PNG con transparencia es más incómodo y menos versátil en XnView que en GIMP: si usamos XnView tendremos que ir al menú "Archivo" y escoger la opción "Guardar como". Si escogemos el formato PNG, podremos indicar cual de los colores de la paleta queremos que se convierta en transparente:

Esto tiene dos inconvenientes: por una parte, tendríamos que saber cual es el color que "sobra" (nos puede ayudar el menú "Imagen", en la opción "Modificar mapa de color", pero si hay varios colores parecidos, puede no ser de gran ayuda). Por otra parte, todo ese color se volvería transparente, y quizá eso no nos interese, sino que queramos que unas zonas sean transparentes y otras no.

Es más cómodo y más potente hacerlo desde GIMP, porque podemos hacer que ciertas zonas sean transparentes y otras no lo sean. Los pasos a seguir serían:

0.- Abrir la imagen en The GIMP.

1.- En la ventana de capas hacer Clic con el botón derecho del ratón sobre la única capa que tiene nuestra imagen, y escoger la opción "Añadir canal alfa":

2.- En la barra de herramientas escoger la herramienta "Borrador":

Si comenzamos a borrar con ella, lo que ya no es parte de la imagen (sino del fondo transparente) debería verse como un trama de cuadraditos grises claros y grises oscuros:

Generalmente será preferible no borrar "a pulso", así que podemos...

3.- Escoger la herramienta de "Selección difusa" (la "varita mágica")

Hacer clic en una parte del fondo que queramos borrar. Todos los píxeles colindantes que sean del mismo color se quedarán seleccionados también, así que podemos usar un pincel más grande para borrar rápidamente:

4.- Cuando la imagen ya está a nuestro gusto, vamos a "Guardar como" (en el menú Archivo) y le damos un nombre que termine en ".png", para que GIMP sepa que queremos usar dicho formato gráfico, que sí permite transparencia, aunque nuestra imagen original fuera un BMP p cualquier otra que no la permitiera:

Y si todo ha ido bien, nos preguntará ciertos detalles adicionales (que normalmente no será necesario cambiar), entre los que está si queremos guardar los datos de transparencia:

(Estos pasos serían muy parecidos si en vez de emplear GIMP, usamos Paint.Net, que es gratuito y aún más sencillo de manejar), o si utilizamos Photoshop (que es comercial y más potente) u otras muchas herramientas de retoque de imágenes.

Ejercicio propuesto: Haz transparente el borde o alguna zona interior de alguna de las imágenes que has capturado para tu juego en el apartado anterior.