So far we have only been loading BMP image files. This is all that SDL supports without any extensions. We can use SDL_image
to enable us to load many different image file types such as BMP, GIF, JPEG, LBM, PCX, PNG, PNM, TGA, TIFF, WEBP, XCF, XPM, and XV. First we will need to clone the latest build of SDL_image
to ensure it will work with SDL 2.0:
TortoiseHg
workbench and use Ctrl + Shift + N to clone a new repository.C:SDL2_image
. After typing this into the Destination box, hit clone and wait for it to complete.C:SDL2_image
cloned repository. Open up the VisualC
folder and then open the SDL_image_VS2010
VC++ project with Visual Studio 2010 express.SDL2_image
project and then click on Properties. Here we have to include the SDL.h
header file. Change the configuration to All Configurations, navigate to VC++ Directories, click on the Include Directories drop-down, and then on <Edit…>. Here we can put in our C:SDL2include
directory.C:SDL2lib
folder. Now navigate to Linker | Input | Additional Dependencies and add SDL2.lib
.SDL2.lib
, so we can remove the SDL.lib
and the SDLmain.lib
files from the SDL_image
project. Locate the files in the solution explorer, right-click and then remove the files. Change the build configuration to release and then build.Release
folder inside our C:SDL2_imageVisualC
folder. Open it and copy the SDL_image.dll
to our game's executable folder.SDL2_image.lib
file into our original C:SDL2lib
directory. Also copy the SDL_image
header from C:SDL2_image
to the C:SDL2include
directory.SDL_image-1.2.12-win32.zip
file (or the x64 if you are targeting a 64 bit platform) from http://www.libsdl.org/projects/SDL_image/. Extract all and then copy all of the .dll
files apart from SDL_image.dll
into our game's executable folder.SDL2_image.lib
.SDL_image
and can start to load all kinds of different image files. Copy the animate.png
and animate-alpha.png
images from the source downloads to our games assets folder and we can start loading PNG files.So we have the library installed, now how do we use it? It is simple to use SDL_image in place of the regular SDL image loading. In our case we only need to replace one function and also add #include <SDL_image.h>
.
SDL_Surface* pTempSurface = SDL_LoadBMP("assets/animate.bmp");
The preceding code will be changed as follows:
SDL_Surface* pTempSurface = IMG_Load("assets/animate.png");
We are now loading a .png
image. PNG files are great to work with, they have a small file size and support an alpha channel. Let's perform a test. Change our renderer clear color to red.
SDL_SetRenderDrawColor(m_pRenderer, 255,0,0,255);
You will see that we still have our black background from the image we are using; this is definitely not ideal for our purposes.
When using PNG files, we can resolve this by using an alpha channel. We remove the background from the image and then when we load it, SDL will not draw anything from the alpha channel.
Let's load this image and see how it looks:
SDL_Surface* pTempSurface = IMG_Load("assets/animate-alpha.png");
This is exactly what we want:
18.224.73.175