lørdag 14. juni 2014

[ SDL 2 - Part 7 ] Using PNG files

Using PNG


In the previous post we learned how to load .bmp files. Which is not optimal. The .bmp format means the files grow large and there is no alpha layer ( no transparency. ) Which means you end up with ugly single-colored edges instead of transparency

Original with .bmp images


SDL2_image


Up until now, we've only been using the standard SDL2.0. But the standard SDL2.0 doesn't support loading of .png files. But fortunately, there is a second SDL library that does this. And since it's still SDL, it will work perfectly with or other SDL code!

Installing is almost exactly the same as installing SDL2 itself; you just follow the instructions in part 1 of my tutorial. But instead of installing SDL2, you install SDL2_image.

New version with png files.
Note: I apologize for vague and not very thorough descriptions in the below points. I will update them when I have access to Windows and Mac. I also apologize for the horrible background and sprites.

Linux


For Linux you can use need to install -lSDL2_image- or -libSDL2_image- ( the actual name might be different in different distributions. )

The linker flag is -lSDL2_image

The process is more or less identical to that of setting up SDL2 base. For more information, see my blog post about setting up SDL2.

Windows


Similar to setting up SDL2 base.

The difference is that you have to download the development files for SDL2_image

And similarly add SDL2_image.lib to library includes and add SDL2_image.lib to the library flags ( where you previusly added SDL2.lb )

And with that, it should work.

Mac


See the first part of my tutorial. Just install SDL2_image instead of SDL2

Again; I apologize for my poor description on this. I don't run Mac and have no experience with it. I hope my short descriptions is of any hope, though.

Loading PNGs using SDL2_image


In order to use SDL2_image, you need to add the header file, like so :

#include

The actual loading of .png files is just as easy as loading .bmp files. But since it uses an extension library, we have to use a different function :

SDL_Texture* IMG_LoadTexture
(
     SDL_Renderer* renderer,
     const char *file
);


This function will load a file and return it as a SDL_Texture*. This means we don't have to convert it, so we can just do:



Note that this function, unlike the one for loading bmps, needs a pointer to the SDL_Renderer this is because it returns an SDL_Texture SDL_Textures are hardware optimized, and SDL2 needs the SDL_RendererIMG_LoadTexture() can handle several types of images. And because I'm lazy and didn't change the .bmp files that don't need transparency.

Running it


Just like last time, I'm not gonna show the entire code as one long gist ( too much code, and there are images too. )

Here is a link to the code in .zip form

Linux / Max


If you are compiling using the compiler, you have to add -lSDL2_image to the compile string like so :
clang++ main.cpp -std=c++11 -o Game -lSDL2 -lSDL2_image

If you want to run it, you simply do
./Game

Feel free to comment if you have anything to say or ask questions if anything is unclear. I always appreciate getting comments.

For a full list of my tutorials / posts, click here.

1 kommentar:

  1. I use IMG_Load to load png surface, and then blit them on the window. The problem is that the top image's alpha transparency isn't working (i.e. I can't see thru it to the bottom image).

    How can you superimpose a png with transparency on top of another png file?

    SvarSlett