This side tutorial is rather simple, short, and sweet. I am going to show you how to stop using those pesky bitmap (BMP) files that are too big and don’t support alpha transparency, and to start using other file formats for you surfaces (I personally like PNG). If you have not read my SDL Coordinates and Bliting tutorial, I encourage you to do so now. We will be building off of that tutorial, modifying the OnLoad function of the CSurface class.
The first thing you need to do is download SDL_image, the latest version, from the main SDL website. You can also download this library from the “Libraries” section of this website, under SDL. If you don’t want to worry about finding all these libraries, the SDL package I provide is good for most SDL beginners, as it provides SDL_image, and some other useful libraries. Be sure to put the include files in the same directory as your SDL include files, and your lib files in the same directory as your SDL lib files to make things easier.
Start by opening your project, and going under the linker settings. Add SDL_image after SDLmain, something like:
mingw32
SDLmain
SDL_image
SDL
If you don’t remember where to find all these settings, hope on over to the first tutorial SDL Tutorial Basics to get a refresher on linking.
First, open up CSurface.h, so that we can include an extra header file:
#define _CSURFACE_H_
#include <SDL.h>
#include <SDL_image.h>
Once that is all done, open up CSurface.cpp and look for the OnLoad function. Currently, this is what our code looks like:
SDL_Surface* Surf_Temp = NULL;
SDL_Surface* Surf_Return = NULL;
if((Surf_Temp = SDL_LoadBMP(File)) == NULL) {
return NULL;
}
Surf_Return = SDL_DisplayFormat(Surf_Temp);
SDL_FreeSurface(Surf_Temp);
return Surf_Return;
}
There are two changes to make here, the first is changing SDL_LoadBMP to IMG_Load. The second is changing SDL_DisplayFormat to SDL_DisplayFormatAlpha. Remember I said BMPs don’t support alpha layers? Well, PNGs do! And if you are wanting to keep that alpha layer you’ll need to use SDL_DisplayFormatAlpha instead of SDL_DisplayFormat. So, our code should look like this now:
SDL_Surface* Surf_Temp = NULL;
SDL_Surface* Surf_Return = NULL;
if((Surf_Temp = IMG_Load(File)) == NULL) {
return NULL;
}
Surf_Return = SDL_DisplayFormatAlpha(Surf_Temp);
SDL_FreeSurface(Surf_Temp);
return Surf_Return;
}
Finally, don’t forget to change the filename that the Test Surface is trying to load in CApp_OnInit.cpp:
return false;
}
And we are done! I told you it would be short. Try compiling, and trying out different file formats. Some common formats supported by SDL_image are:
BMP (Go figure)
GIF
PNG
JPG
PCX
TIF
and others…
Please note that there are additional DLL files associated with SDL image that are needed now (about 5 of them). So be sure to include those with your project. You can download these DLL files here, http://www.libsdl.org/projects/SDL_image/ under Binary -> Win32 -> and the Win32 zip (not the VC8). Also, the DLL files are also included in the project files below.
This tutorial inspired by Blommis. 
SDL Image – Tutorial Files:
Win32: Zip, Rar
Linux: Tar (Thanks Gaten), Binary (Thanks Thomas)
Did you like this tutorial/blog post? Feel free to donate to keep more comin', and have more contests.
Thanks Tim, Loving the tutorials.
Years since I played with C, lots of changes!
Have been playing with png files but having some problems:
I note that the order in which images are loaded, and NOT the Surf_Display order, sets the Z-Order, am I missing something(s)?
Adrian,
There is no Z-order anywhere. The only thing that resembles a Z-order, is the order in which you blit the surfaces. The surfaces you blit first will appear on the bottom, while the very last surface blit will appear at the top.
Danny,
Library files are either: .a files or .lib files. .a files are typically found on everything other than Windows, while .lib files are typically found on windows. I say typically, because that’s not always the case. But, the idea is the same, they are both static library files. In other words, they are code compiled into a file. When you are using static libraries, you usually only need two things: the library file(s), and the header files (sometimes you also need a .dll file). The process is usually always the same as well. You link the static library in your project, and #include the header files in your project. If you have dll files, drop them in the same folder as your program. That’s it. If you have other files, like .c/.cpp, make, autogen, etc. – these are files so that if you wanted, you can compile the static library yourself. In that way, you can customize the library to your needs. To quickly point you in the right direction: 1) .a/.lib files go in the lib folder, 2) .h files go in the include folder, 3) .dll files go in the same folder as your program.
In case there are others who are having the same issue I am, I’ll note a few more details to perhaps reach some conclusion of what goes where.
Around comment #26 in the basics tutorial, Tim says the following:
“Notice you have .lib files, not .a files. Also, you don’t use mingw. Hopefully that helps!”
This makes me think that the library files are in fact the .a files. Perhaps the .c and .a files belong in the …\SDL\SDL\lib directory, and the single .h file belongs in the include directory.
I’ll try that at some point within the next two days before going on with the tutorial, but I’m still confused since the content within the lib directory was (if I remember correctly) two .dll files.
Hi, Tim.
I’m a bit confused regarding the location of files within the SDL Image library. I went back and checked out the basics tutorial, but I’m still unclear about which files go where.
The library consists of files that include both .c and a .h file. Within the include directory, I have only .h files. In addition, there are other files in the library, such as “aclocal.m4″, “autogen.sh”, “CHANGES”, and others. Do all these belong in the SDL/include/SDL directory, which I see contains *only* .h files? You also say “and your lib files in the same directory as your SDL lib files to make things easier”. The files in my SDL/lib directory are of .dll.a, .la, and .a format.
Am I barking up the completely wrong tree?
Yes, the .lib files which are VC specific do in fact work with mingw. I have successfully used sdl_mixer, sdl_ttf, and sdl_image with the VC libs on Codeblocks with mingw. Regarding sdl_net, I am not entirely sure if that would work or not.
Hi Tim,
Just to clarify. I’m using Codeblocks 8.02 (mingw) on Windows. So I can use the SDL_image-devel-1.2.6-VC8 libraries? Is this also the case for sdl_mixer, sdl_net and sdl_ttf?
I’m just surprised VC8 libraries are compatible with the mingw linker.
Thanks Gaurav!
Regarding installing the image library, download SDL_image-devel-1.2.6-VC8.zip off of the SDL project site: http://www.libsdl.org/projects/SDL_image/. Inside, you will find the include folder and lib folder. Copy these both to where you have your SDL include folder and lib folder. It will say the directory already exists, just press okay, and it will merge the two folders together. It’s exactly the same process as stated on the first tutorial, I encourage to read that for some additional help.
2 thumbs up for the brilliant set of tutorials, without a doubt the best set of tutorials on SDL I’ve seen for an SDL beginner.
Also, Could you teach how to install the image library on windows from the package on the project site.
There is one specific one made for SDL that I have found. I cannot vouch for any specific one though, as I have not needed to use vector graphics before in SDL:
http://www.linuxmotors.com/SDL_svg/
There are also a few multi-purpose ones out there, that I am sure you can convert the output to an SDL Surface:
http://librsvg.sourceforge.net/
http://www.antigrain.com/
I hope that helps!
Screenshots might be a good idea for all the tutorials, I’ll keep that in the back of my mind. I am trying to finish the next major tutorial though first.
Short and sweet and to the point, very nice. Although might I suggest a screen shot of what it should look like, just as an athesticly pleasing element?
Linux archive here: http://gaten.homelinux.net/sdltuts/sdl_image.tar.gz
Also, do you know about Vector graphics support for SDL? I can’t seem to find any thing about it.