[ 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.

[image source ]

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 

    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

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


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



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

---

Feel free to comment if you have anything to say or have any issues/questions. I always appreciate getting comments.

For a full list of my tutorials / posts, click here.