SFML Graphics - Images and Sprites

So welcome to your second SFML tutorial. This time we’ll be covering basic graphics: displaying images. First, I provide the videos corresponding to this tutorial. Read on for the textual version.

What are you waiting for? open up your project from the Empty Window tutorial, and get coding!

Well first, we need to load an image. Add this code at the start of our program, before the main loop starts.

sf::Image Image;
if (!Image.LoadFromFile("image.png"))
	return 1;

So we create an object of type sf::Image, which describes actual image data in SFML. We then load image data from a file called image.png. You will have to provide such a file in your project directory – either download mine below or provide your own. You could also use, among others, .jpg, .bmp and .tga files.

The sf::Image::LoadFromFile method returns false if loading failed. Thus we check for failure and exit with failure status in that case. Note that we need not output an error message as SFML does this for us.

But an image is a resource intensive object. You can’t just create them mid frame, nor should you be duplicating them in memory in order to have multiple copies of the same image on screen. Enter the SFML sprite. This type provides a means to display an image. It is lightweight, as it does not actually contain the image data, so you can freely copy them and create them on the fly.

sf::Sprite Sprite;
Sprite.SetImage(Image);

We create an instance of sf::Sprite and then us the sf::Sprite::SetImage method to associate the sprite with the image. Already, we are prepared to draw our image to the screen with the sprite. But first, let’s briefly consider what else we can do to sprites.

Sprites, and indeed all other drawable objects in SFML (such as text), have member functions for setting their colour, position, r0tation and scaling. Let’s use a few now.

Sprite.SetPosition(100.0f, 30.0f);
Sprite.SetRotation(30.0f);
Sprite.SetScale(.5f, .3f);
Sprite.SetColor(sf::Color(255, 0, 0, 128));

Now, the first line sets the sprite’s position, providing two floating point values for the X and Y (horizontal and vertical) positions respectively. Next we set the rotation and then the X and Y scaling factors. Finally, we set our image to it to a red colour, but semi transparent, i.e. a colour with RGBA values of 255, 0, 0, and 128 respectively.

Note that all the functions to manipulate sprites may also be used on text and other drawable objects. You can find the complete list of manipulation functions here - http://sfml-dev.org/tutorials/1.6/graphics-sprite.php.

Now let’s display our sprite. This code should go between the calls to sf::RenderWindow::Clear and sf::RenderWindow::Display.

Window.Draw(Sprite);

Note that this sf::RenderWindow::Draw function works equally well with any other drawable object, such as text.

Remember, I said you should duplicate sprites and not images? Well let’s do that now – we’ll create a second sprite that will allow us to draw the same image in a different location.

So let’s go ahead and code that.

sf::Sprite Sprite2;
Sprite2.SetImage(Image);
Sprite2.SetPosition(200.0f, 200.0f);
Sprite2.SetScale(.8f, .8f);

We associate our second sprite with the same image and then set its position and scaling factors. We then just need to add drawing code for it, next to the other draw call.

Window.Draw(Sprite2);

Now then. Let’s load a second image and associate it with another sprite, just to get feel of things.

sf::Image Image2;
if (!Image2.LoadFromFile("image.jpg"))
	return 1;

sf::Sprite Sprite3;
Sprite3.SetImage(Image2);

Sprite3.SetPosition(100.0f, 50.0f);
Sprite3.SetScale(.4f, .4f);

We load a second image, this time called image.jpg. We associate it with a sprite and set the sprite’s position and scale. Finally we have to add drawing code.

Window.Draw(Sprite3);

Make sure you add this sprite at the top of all the draw calls. That way it will be on the bottom so we will see it blended with the semi transparent sprite.

At this stage, you can compile and run your application to see how the images show up, manipulated by our rotation/position/scale function calls.

Images in SFML also have a function sf::Image::SaveToFile, which allows us to save image data to a file. Why would we want to save an image? Well we might have directly modified the pixel data of the image, but that’s not covered today. On the other hand, we can also load the current contents of the screen into the image. Then we can save it. In other words, we can take screenshots!

Create another image, this time called Screenshot.

sf::Image Screenshot;

Now then, I know I said that images are resource heavy objects and we should not process them on the fly, but this time we’ve not much choice. We want to take a screenshot, so we’ll have to do this in the main loop when the window contains content.

So add the following code inside your main loop after the drawing code:

Screenshot.CopyScreen(Window);

The sf::Image::CopyScreen function copies the contents of the screen into the image as image data. The function accepts two arguments, the first of which is the window to take a screenshot of. The second one (which is not used here) specifies the rectangular area of the screen to capture. By omitting it, we ensure that the entire screen is captured.

Finally, after our main loop we must save the screenshot data to a file.

Screenshot.SaveToFile("screenshot.jpg");

This function saves the image data to the file screenshot.jpg. You can now build and run and you’ll notice that when moving the window about, it’s a lot less smooth than before. This is the price we pay for putting image processing code in the main loop.

Next time, when I introduce more advanced event handling, I’ll show you how to only execute the screenshot operation when a key is pressed. For now, however, we only have the option of doing it every frame (which is clearly a bad idea…).

You can find the screenshot.jpg file and you’ll see that it does indeed contain the contents of the window.

A final point to be made is this: the sf::Image::CopyWindow and sf::Image::SaveToFile do in fact return bool just as sf::Image::LoadFromFile does. Therefore, you could and probably should, test for errors when calling these functions just as we did for sf::Image::LoadFromFile.

Finally, we’ll see how to fit a sprite to the whole client area of the window. Let’s do this to Sprite2. So replace the current position and scale lines for Sprite2 with the following:

	Sprite2.SetPosition(0.0f, 0.0f);
	Sprite2.SetScale((float)Window.GetWidth()/(float)Image.GetWidth(), (float)Window.GetHeight()/(float)Image.GetHeight());

Now, you can build and run this right away, and in the current program it will work. Notice the ratios I used to appropriately scale the sprite. Note also that the width and height are associated with the image, not the sprite.

However, I have purposefully added a couple of problems to this so I can explain why to avoid coding it as we just did.

Problem 1 - We have resized the sprite to fit the client area of the window, rather than the actual viewport size. The viewport was defined by our video mode: sf::VideoMode VMode(800, 600, 32). By default our render window thus had a client area of 800 x 600 pixels, but this need not be the case. If the window is a different size to the viewport, the view is automatically scaled to fit the window. Thus we need only scale the sprite to fit the viewport size.

Problem 2 - We accessed the image width and height through the image itself. Now suppose we changed the image the sprite is associated with. Then we would be resizing it incorrectly as we would be getting the wrong image width and height. Instead we should get a pointer to the image from the sprite and get the width and height via that.

So then, our new, improved code:

Sprite2.SetScale((float)VMode.Width/(float)Sprite2.GetImage()->GetWidth(), (float)VMode.Height/(float)Sprite2.GetImage()->GetHeight());

It does exactly the same thing as the other sample, but it resolves the two issues discussed above. Well there we saw how to resize a sprite the hard way. I did that first so you saw what the scale factors were. Now, the easy way.

Sprite2.Resize((float)VMode.Width, (float)VMode.Height);

In fact, the sprite has a Resize function which simply takes two floating point values and resizes the sprite to that size for us.

Finally, there is one point to be made. Because we scale the sprite to the viewport, and the rendered image from the viewport is automatically scaled to the client area of the window, our sprite will stay fitted to the window even if we resize it!

Anyway, that’s all for today. As I’ve said, the next lesson will be on event handling!

 Source Code

For your reference, here is the complete source code used in this tutorial.

#include <SFML/Graphics.hpp>

int main()
{
	sf::VideoMode VMode(800, 600, 32);
	sf::RenderWindow Window(VMode, "SFMLCoder Tutorial - Empty Window");

	sf::Image Image;
	if (!Image.LoadFromFile("image.png"))
		return 1;

	sf::Sprite Sprite;
	Sprite.SetImage(Image);
	Sprite.SetPosition(100.0f, 30.0f);
	Sprite.SetRotation(30.0f);
	Sprite.SetScale(.5f, .3f);
	Sprite.SetColor(sf::Color(255, 0, 0, 128));

	sf::Sprite Sprite2;
	Sprite2.SetImage(Image);
	Sprite2.SetPosition(0.0f, 0.0f); // to reveal other sprites, change the values to 200.0f, 200.0f
	Sprite2.Resize((float)VMode.Width, (float)VMode.Height); // to reveal other sprites, change the values to .8f, .8f

	sf::Image Image2;
	if (!Image2.LoadFromFile("image.jpg"))
		return 1;

	sf::Sprite Sprite3;
	Sprite3.SetImage(Image2);

	Sprite3.SetPosition(100.0f, 50.0f);
	Sprite3.SetScale(.4f, .4f);

	sf::Image Screenshot;

	while (Window.IsOpened())
	{
		sf::Event Event;
		while (Window.PollEvent(Event))
		{
			switch (Event.Type)
			{
			case sf::Event::Closed:
				Window.Close();
				break;
			default:
				break;
			}
		}

		Window.Clear(sf::Color(0, 255, 255));

		Window.Draw(Sprite3);
		Window.Draw(Sprite);
		Window.Draw(Sprite2);

		Window.Display();

		Screenshot.CopyScreen(Window);
	}

	Screenshot.SaveToFile("screenshot.jpg");

	return 0;
}

Related articles

• SFML Graphics – Images and Sprites (sfmlcoder.wordpress.com)
• A guide on how to impliment 2D sprites in a Java game. (blog.knolif.com)

About these ads