[ SDL2 — Part 3] Drawing rectangles

This part will teach you the basics of the coordinate system in SDL( it’s the same for the “old” SDL and SDL2 ). It will also teach you about a new and very important struct, SDL_Rect. You’ll be using it a lot! And finally we’ll draw something!

Previous part

You can find the previous part here.

The coordinate system

The SDL coordinate system is defined as 0, 0 being the top, left . This means that a higher y value means further down.

The SDL 2 coordinate system

This also means that if you tell SDL2 to draw a rectangle, you’ll specify the top-left position of the rectangle instead of the bottom left rectangle. More about this later

The basic rectangle

In order to draw something, be it textures or plain rectangles or text or anything, you need a rectangle to specify where to draw it and the size of what you are going to draw. And to hold the size and position we use an SDL_Rect

struct SDL_Rect {
    uint16 x// : the x position of the rectangle
    uint16 y// : the y position of the rectangle
    uint16 w // :  the width of the rectangle
    uint16 h //: the height of the rectangle
}

And that’s it. It’s a really simple struct, but it’s very important in SDL2 rendering.

Drawing a rectangle

Now you have enough knowledge to draw some rectangles in SDL2. Let’s start off by looking at a the function for rendering a simple rectangle``

int SDL_RenderDrawRect
(
    SDL_Renderer* renderer,
    SDL_Rect* rectangle
)

Parameters

• SDL_Renderer* : the SDL_Renderer we created in the previous part
• SDL_Rect* : the position and size of the rectangle we want to draw

Return value

• 0 on success

Note that it also takes a pointer to the SDL_Rect, and not the SDL_Rect itself.

“But what about the color?” you might ask. Remember how in last function we looked at int SDL_SetRenderDrawColor()? Well, basically, the color you set with this function will also be the color you render your objects with. ( For simplicity, I will refer to this color as `SDL_DrawColor` from now on. )

And now the fun stuff

Let’s say you have just created and set up your window and renderer like so:

// … After setting up renderer and window
// Set color of renderer to red
SDL_SetRenderDrawColor( renderer, 255, 0, 0, 255 );
// Clear the window and make it all red
SDL_RenderClear( renderer );
// Create a rectangle
SDL_Rect r;
r.x = 50;
r.y = 50;
r.w = 50;
r.h = 50;
// Render our SDL_Rect
// The top left pos of the rect will be at 50, 50
// It will stretch 50 to the left and 50 towards the bottom
SDL_RenderDrawRect( renderer, &r );
// Render the changes above
// ( which up until now had just happened behind the scenes )
SDL_RenderPresent( renderer);

But wait! It’s just a red screen?! As you might have guessed, we forgot to change the color after calling SDL_RenderClear() So the rectangle was drawn with the same color as the background. To make the rectangle visible, we need to change SDL_DrawColor in between SDL_RenderClear() and SDL_RenderDrawRect()

This gives us something like this :

// After setting up renderer and window
// Set color of renderer to red
SDL_SetRenderDrawColor( renderer, 255, 0, 0, 255 );
// Clear the window and make it all red
SDL_RenderClear( renderer );
// Create a rectangle
SDL_Rect r;
r.x = 50;
r.y = 50;
r.w = 50;
r.h = 50;
// Change color to blue!
SDL_SetRenderDrawColor( renderer, 0, 0, 255, 255 );
// Render our SDL_Rect
// The rectangle will now be blue
SDL_RenderDrawRect( renderer, &r );
// Render the changes above
SDL_RenderPresent( renderer);

And now we have a nice little rectangle on our screen.

Filling it up…

The function I showed you earlier will only render the edges of the rectangle. What if you want to render the whole rectangle, and not just the edges? Well there is a nearly identical function for that :

int SDL_RenderFillRect
(
    SDL_Renderer* renderer,
    SDL_Rect rectangle
)

Parameters\

• SDL_Renderer* : the SDL_Renderer we created in the previous part
• SDL_Rect* : the position and size of the rectangle we want to draw

Return value

• 0 on success

As you can see, the only thing that separates the two us the name. If you switch SDL_RenderDrawRect() with SDL_RenderFillRect() in the example above, you will get the same rectangle with the same color, but this time it will be the whole rectangle and not just the edges.

Conclusion

That’s it for today! Feel free to experiment with two new functions. You can draw as many rectangles as you want, both filled and edges. You can also change the color as often as you want. The only thing you need to remember is to put it all between your SDL_RenderClear( renderer ); and SDL_RenderPresent( renderer );

Have fun! Below is a full working example to experiment with. I have taken the liberty of putting things in different functions to make it easier to read.

<script src=”https://gist.github.com/olevegard/011e58e4a0db50d8b734.js"></script>

The comments in the code should explain most of what’s going on. But you need to run the program to really see what’s going on. The code will draw a single blue rectangle on a green background that you can move around on the screen. Don’t worry about the code for moving the player around ( RunGame() ), it’ll be explained in the next post.

Next part

You can find the next part here.