[ SDL2 – Part 3 ] Drawing rectangles

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!

Note


This part assumes you have SDL2 up and running on your computer, and that you have read the previous part. If you haven’t, please scroll down to part1 and use it to install SDL2 before reading on.

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.

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

SDL_Rect


Data members :

  • 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 

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 look 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:

But wait! It’s just a red screen?! As you might have guessed, we forgot to change the color after calling SLD_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 :

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 :

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. =)

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.


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 “[ SDL2 – Part 3 ] Drawing rectangles”

    1. Thank you, positive comments like this helps inspiring me too! I’ve been kinda busy lately, but I’m gonna start writing again very soon.

  1. Hey,this tutorial about SDL2 really helps me a lot.And you made it interesting to me.But in the final code you wrote in part 3,I can’t understand why you create a function called”SetUpRenderer()”,but it’s not used in the program.And I’m confused about these two concepts:
    SDL_RenderClear() SDL_RenderPresent()
    Could you tell me what’s their difference and how they are related?

    1. Hello

      SetupRenderer() is used in the InitEverything() function, at least in the example on this page.

      SDL_Clear() basically clears the screen and covers it with the color you have set with SDL_SetRenderDrawColor(). So it basically just removes what we drew the previous frame so that we can render the next frame with a clean, single coloured, background.

      SDL_RenderPresent() just updates the screen with what we have drawn this frame.

      So basically : SDL_Clear() is used at the beginning of each frame to clear it. And SDL_RenderPresent() is used when we’re down et drawing to get it on the screen.

      Hope that helps 🙂

  2. What do you mean by “The code will draw a green-red check board pattern with 2 x 2 tiles inside a blue rectangle. Under the check board, there will be a rectangle that’s twice as long to show that the SDL_Rect doesn’t have to be a square.” Where exactly in the code does this happen? As far as I can see this description doesn’t have any chance of happening as the code only ever renders a green backround with a blue rectangle as the “player” which you can move around with the arrow keys, even setting the color to red makes no sense as you override it with green later. Can you explain what you mean?

    Friendly Regards
    //David

    1. Hello

      Thank you for informing me about this! It’s a typo. I think what happened is that I did have a checkboard like the text said. But then I decided to simplify the code and make it more focused on rendering that one rectangle.

      I’ve update with a correct text and changed the code a little. ( Setting the color to red initially didn’t really make much sense as I render it with a green background later. )

      Again, thank you. Please tell me if you find other issues 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *