The SFML RenderWindow class allowed us to create our window object to take care of all the functionality that our game's window needs.

We will now explore two more SFML classes, which will take care of drawing sprites to the screen. One of these classes, perhaps unsurprisingly, is called Sprite. The other class is called Texture. A texture is a graphic stored in memory on the Graphics Processing Unit (GPU).

An object made from the Sprite class needs an object made from the Texture class in order to display itself as an image. Add the following highlighted code. Try and work out what is going on as well. Then we will go through it one line at a time:

int main() 
{ 
   // Create a video mode object 
   VideoMode vm(1920, 1080); 
 
   // Create and open a window for the game 
   RenderWindow window(vm, "Timber!!!", Style::Fullscreen); 
 
   // Create a texture to hold a graphic on the GPU   
   Texture textureBackground;   

   // Load a graphic into the texture
   textureBackground.loadFromFile("graphics/background.png);   

   // Create a sprite
   Sprite spriteBackground;   

   // Attach the texture to the sprite
   spriteBackground.setTexture(textureBackground);   

   // Set the spriteBackground to cover the screen
   spriteBackground.setPosition(0,0); 
 
    
   while (window.isOpen()) 
   { 

First, we create an object called textureBackground from the SFML Texture class.

Texture textureBackground; 

Once this is done, we can use the textureBackground object to load a graphic from our graphics folder, into the textureBackground, like this:

textureBackground.loadFromFile("graphics/background.png"); 

Next, we create an object called spriteBackground from the SFML Sprite class with this code:

Sprite spriteBackground; 

Then, we can associate the texture object textureBackground with the Sprite object spriteBackground, like this:

spriteBackground.setTexture(textureBackground); 

Finally, we can position the spriteBackground object in the window object at coordinates 0,0:

spriteBackground.setPosition(0,0); 

As the background.png graphic in the graphics folder is 1920 pixels wide by 1080 pixels high, it will neatly fill the entire screen. Just note that this previous line of code doesn't actually show the sprite. It just sets its position ready for when it is shown.

The object, backgroundSprite, can now be used to display the background graphic. Of course you are almost certainly wondering why we had to do things in such a convoluted way. The reason is because of the way that graphics cards and OpenGL work.

Textures take up graphics memory and this memory is a finite resource. Furthermore, the process of loading a graphic into the GPU's memory is very slow. Not so slow that you can watch it happen, or that you will see your PC noticeably slow down while it is happening, but slow enough that you can't do it every frame of the game loop. So it is useful to dissociate the actual texture textureBackground from any code that we will manipulate during the game loop.

As you will see when we start to move our graphics, we will do so using the sprite. Any objects made from the Texture class will sit happily on the GPU, just waiting for an associated Sprite object to tell them where to show themselves. In later projects we will also reuse the same Texture object with multiple different Sprite objects, which makes efficient use of GPU memory.

In summary:

So all we need to do now is use our double-buffering system, provided by our window object, to draw our new Sprite object (spriteBackground), and we should actually get to see our game in action.

Finally we need to draw that sprite, and its associated texture, in the appropriate place in the game loop.

Add the highlighted code:

/* 
**************************************** 
Draw the scene 
**************************************** 
*/ 
       
// Clear everything from the last run frame 
window.clear(); 
 
// Draw our game scene here 
window.draw(spriteBackground);           
 
// Show everything we just drew 
window.display(); 

The new line of code simply uses the window object to draw the spriteBackground object, in between clearing the display and showing the newly drawn scene.

Run the program now and you will see the first signs that we have a real game in progress.

It's not going to get Greenlit on Steam in its current state, but we are on our way at least!

Let's take a look at some of the things that might go wrong in this chapter, and as we proceed through the book.