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.

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

#include <SDL2/SDL_image.h>

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 :

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 a SDL_Texture. As we saw in the previous post, SDL_Texture are hardware optimized, and SDL2 needs the SDL_Renderer to do the actual hardware optimization.

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.

You can also email me : olevegard@headerphile.com

6 thoughts on “[ SDL 2 – Part 7 ] Loading PNG files”

1. Casual Observer says:

Hey, really useful tutorials.

Only 2 points I wanted to note:

2) Maybe pay a little more attention to detail. The source codes are generally spot-on, but sometimes the posted code differs from what you say should be done. Decipherable, but then, if it’s a tutorial should a reader have to do that?

Just things I noticed. Hope it helps. The tutorials have been really helpful overall. Thanks!

1. olevegard says:

Hello and thank you for your suggestions.

1.
Not quite sure what you mean here. When you are at the bottom you should see the “LEAVE A REPLY” heading with the fields for inputting data under ( ? ) It’s basically a wordpress default, but if you have any ides for improvement, I’d be happy to look into it.

2.
I completely agree, the reader shouldn’t have to decipher anything. The goal of my tutorial is to start off simple and explain things well so tha the reader never gets confused.

I’ll look into trying to fix this when I have the time. But if you have any concrete examples, feel free to post them here or email me at olevegard@headerphile.com

I’m glad you’re finding my blog helpful, keeps me motivated to post more : )

2. You wrote as:
SDL_Texturee*

It must be as:
SDL_Texture*