Chapter 2. Drawing in SDL

Graphics are very important to games and they can also be one of the main performance bottlenecks if not handled correctly. With SDL 2.0 we can really take advantage of the GPU when rendering, which gives us a real boost in terms of the speed of rendering.

In this chapter we will cover:

• The basics of drawing with SDL

• Source and destination rectangles

• Loading and displaying textures

• Using the SDL_image extension

Basic SDL drawing

In the previous chapter we created an SDL window but we have yet to render anything to the screen. SDL can use two structures to draw to the screen. One is the SDL_Surface structure, which contains a collection of pixels and is rendered using software rendering processes (not the GPU). The other is SDL_Texture; this can be used for hardware-accelerated rendering. We want our games to be as efficient as possible so we will focus on using SDL_Texture.

Getting some images

We need some images to load throughout this chapter. We do not want to spend any time creating art assets for our games at this point; we want to focus entirely on the programming side. In this book we will use assets from the SpriteLib collection available at http://www.widgetworx.com/widgetworx/portfolio/spritelib.html.

I have altered some of these files to allow us to easily use them in the upcoming chapters. These images are available with the source code download for this book. The first one we will use...

Source and destination rectangles

Now that we have something drawn to the screen, it is a good idea to cover the purpose of source and destination rectangles, as they will be extremely important for topics such as tile map loading and drawing. They are also important for sprite sheet animation which we will be covering later in this chapter.

We can think of a source rectangle as defining the area we want to copy from a texture onto the window:

1. In the previous example, we used the entire image so we could simply define the source rectangle's dimensions with the same dimensions as those of the loaded texture.

   

2. The red box in the preceding screenshot is a visual representation of the source rectangle we used when drawing to the screen. We want to copy pixels from inside the source rectangle to a specific area of the renderer, the destination rectangle (the red box in the following screenshot).

   

3. As you would expect, these rectangles can be defined however you wish. For example, let's open up our Game...

Installing SDL_image

So far we have only been loading BMP image files. This is all that SDL supports without any extensions. We can use SDL_image to enable us to load many different image file types such as BMP, GIF, JPEG, LBM, PCX, PNG, PNM, TGA, TIFF, WEBP, XCF, XPM, and XV. First we will need to clone the latest build of SDL_image to ensure it will work with SDL 2.0:

1. Open up the TortoiseHg workbench and use Ctrl + Shift + N to clone a new repository.

2. The repository for SDL_image is listed on http://www.libsdl.org/projects/SDL_image/ and http://hg.libsdl.org/SDL_image/. So let's go ahead and type that into the Source box.

3. Our destination will be a new directory, C:\SDL2_image. After typing this into the Destination box, hit clone and wait for it to complete.

4. Once you have created this folder, navigate to our C:\SDL2_image cloned repository. Open up the VisualC folder and then open the SDL_image_VS2010 VC++ project with Visual Studio 2010 express.

5. Right-click on the SDL2_image project and then...

Tying it into the framework

We have covered a lot on the subject of drawing images with SDL but we have yet to tie everything together into our framework so that it becomes reusable throughout our game. What we will now cover is creating a texture manager class that will have all of the functions we need to easily load and draw textures.

Creating the texture manager

The texture manager will have functions that allow us to load and create an SDL_Texture structure from an image file, draw the texture (either static or animated), and also hold a list of SDL_Texture*, so that we can use them whenever we need to. Let's go ahead and create the TextureManager.h file:

1. First we declare our load function. As parameters, the function takes the filename of the image we want to use, the ID we want to use to refer to the texture, and the renderer we want to use.

   bool load(std::string fileName,std::string id, SDL_Renderer* pRenderer);

2. We will create two draw functions, draw and drawFrame. They will both take...

Summary

This chapter has been all about rendering images onto the screen. We have covered source and destination rectangles and animating a sprite sheet. We took what we learned and applied it to creating a reusable texture manager class, enabling us to easily load and draw images throughout our game. In the next chapter, we will cover using inheritance and polymorphism to create a base game object class and use it within our game framework.