SDL / SDL_Image

Bienvenidos sean a este post, hoy veremos otra forma de manejar imagenes.

SDL solo soporta archivos de tipo BMP como vimos en los posts anteriores pero instalando la extension del titulo podemos lograr que trabajemos con muchos mas tipos.

Para «instalar» esta nueva extension debemos repetir el mismo proceso a cuando «instalamos» a SDL pero con otro repositorio. Para ello, debemos hacer una nueva replica del repositorio, tal como hicimos con SDL. Vayamos a Visual Studio y elegir la opcion Clonar un Repositorio. Cuando aparezca la nueva ventana, en Ubicacion del repositorio deben poner la siguiente URL:

https://github.com/libsdl-org/SDL_image

La ubicacion de destino sera donde lo replicaremos, les recomiendo dejarlo en el valor que nos genera de manera predeterminada, tal como se ve en la siguiente imagen

Le damos al boton Clonar y comenzara con la copia local del repositorio. Una vez finalizada la replica, nos va a quedar de la siguiente manera

Con esto ya tenemos «instalado» a SDL_Image pero esto todavia no termina. Para poder trabajar con esta libreria vamos a utilizar el codigo que utilizamos en el post anterior. Si no lo poseen les dejo un link para descargarlo:

Proyecto Juego

Una vez descargado, extraen el directorio en el PC y pueden abrirlo. Pero deberan revincular a SDL para poder compilarlo correctamente, asumiendo que ya lo tienen «instalado» a SDL. Les dejo este post donde comento como habilitarlo. Y debe quedar de la siguiente manera

Ahora vamos a repetir los mismos pasos que usamos para SDL pero con SDL_Image.

Lo primero que haremos es click con el boton derecho sobre la solucion, en el menu que se nos abre vamos a Agregar y luego a Proyecto Existente. Nos va a abrir otra ventana y aqui debemos ir al nuevo repositorio que clonamos. En ese directorio iremos a VisualC y seleccionaremos a SDL_image.vcxproj, tal como se ve en la siguiente imagen

Una vez seleccionnado solo nos resta presionar Abrir para poder agregarlo. Con este proyecto abierto, la solucion nos quedara de la siguiente manera

Nuestro siguiente paso sera referenciarlo en el programa. Para ello, deben hacer click con el boton derecho sobre el programa. Aqui debemos ir a Agregar, y luego elegimos Referencia. Se abrira una nueva ventana y deben tener dos opciones. Una es SDL, la cual debe estar seleccionada, y SDL_Image. Procederemos a seleccionar como se ve en la siguiente imagen

Le damos a Aceptar y esto lo agregara a nuestro programa y nos quedara de la siguiente manera

Nuestro ultimo paso sera hacer nuevamente click con el boton derecho sobre el programa y seleccionaremos Propiedades. Esto nos abrira una nueva ventana, y en ella iremos a Propiedades de Configuracion, abrimos la opcion de C/C++ y aqui iremos a la propiedad Directorios de inclusion adicionales. Al valor existente le agregaremos el directorio include de SDL_Image. Si utilizaron el path predeterminado para copiarlo, debe ser semejante a este

C:\Users\<usuario de windows>\source\repos\SDL_image\include

Sino deben fijarse donde se encuentra SDL_Image y ahi estara el directorio include. Este path se agrega al existente y para ello lo hacemos con un punto y coma (;). Debe quedar como se ve en la siguiente imagen

Simplemente presionan Aceptar y con esto tenemos todo habilitado para trabajar con SDL_Image.

Pasemos a trabajar con nuestro codigo, pero antes de esto debemos descargar el siguiente archivo:

Descarguen este archivo y deben extraerlo dentro del directorio assets que esta creado dentro del directorio Juego donde esta el programa. Este es el mismo dibujo que utilizamos en el post anterior pero con otro formato. Nuestro siguiente paso sera ir a Juego.h y al inicio junto a las otras librerias agregaremos la siguiente linea:

#include <SDL3_image/SDL_image.h>

Esto nos habilitara a trabajar con SDL_Image, el resto del archivo no necesita ninguna modificacion mas. Pasemos a Juego.cpp, en la funcion iniciar buscaremos la siguiente linea:

SDL_Surface* iSurfaceTemp = SDL_LoadBMP("assets/animate.bmp");

Y la modificaremos de la siguiente manera:

SDL_Surface* iSurfaceTemp = IMG_Load("assets/animate.png");

Cambiamos la funcion encargada de cargar la imagen para ser usada como textura, recuerden que este objeto es solo temporal para usarlo con la siguiente linea y luego liberarlo. Nuestra siguiente modificacion sera en la funcion renderizar donde buscaremos la siguiente linea:

SDL_SetRenderDrawColor(m_pRenderer, 0, 0, 0, 255);

Y la modificaremos de la siguiente manera:

SDL_SetRenderDrawColor(m_pRenderer, 255, 0, 0, 255);

Esto nos establecera como color de fondo al rojo, esto nos servira para algo que veremos un poco mas adelante, y solo nos resta una modificacion mas en esta funcion. Tomemos esta linea:

    SDL_RenderTextureRotated(m_pRenderer, m_pTextura, &m_origenRectangulo, 
        &m_destinoRectangulo,0,0, SDL_FLIP_HORIZONTAL);

Y la modificaremos de la siguiente manera:

    SDL_RenderTexture(m_pRenderer, m_pTextura, &m_origenRectangulo, 
        &m_destinoRectangulo);

Esta modificacion es mas que nada para remover el efecto de inversion que aplicamos en el post anterior y ver la imagen como deberia ser. Compilemos y veamos como trabaja ahora nuestro programa

Como pueden ver logramos lo mismo con un archivo mas pequeño comparado con el BMP pero esto no acaba aca. Porque veremos cual es la otra ventaja de trabajar con esta libreria con respecto a la de base. Para ello vamos a la funcion iniciar e iremos nuevamente a la siguiente linea:

SDL_Surface* iSurfaceTemp = IMG_Load("assets/animate.png");

Y la modificaremos de la siguiente manera:

SDL_Surface* iSurfaceTemp = IMG_Load("assets/animate-alpha.png");

Esto solo nos modificara la imagen que usaremos como textura para la animacion. Si lo compilamos nuevamente y ejecutemos tendremos la siguiene salida

Como pueden ver, quedo una mejor aplicacion de la animacion porque una ventaja que poseen los archivos PNG con respecto a BMP y otros, es que podemos establecer un fondo transparente. Esto nos da la posibilidad de poder usar imagenes sobre otras sin que se superpongan o las obstaculizen de alguna manera. Pero otra particularidad es que maneja una gran cantidad de archivos, los cuales nos permitira aprovechar las ventajas que posee cada formato.

En resumen, hoy hemos instalado una libreria que nos permitira manejar otros tipos de achivos, esto no solo nos ayudara a la hora de aligerar el tamaño de nuestras imagenes porque el BMP no tiene una buena compresion, tampoco tiene la posibilidad de ser transparente, hemos visto todos los pasos para «instalar», y hemos visto como aplicarlo a nuestro proyecto. Espero les haya sido de utilidad y les dejo un link a GitHub donde estan los codigos creados hoy:

SDL_Image / GitHub

Les dejo algunas de mis redes sociales para seguirme o recibir una notificacion cada vez que subo un nuevo post: