søndag 13. april 2014

[ SDL2 - Part 2 ] Your first SDL2 application

Your first SDL2 application


This part assumes you have SDL2 up and running on your computer. If you haven't, please read part 1 and use it to install SDL2 before reading on.

SDL2 structures


The SDL2 library has a substantially improved rendering structure from SDL2. The new structure is very simple and easy to understand This is a short tutorial / reference guide that will teach you everything you need to know in order to start programming SDL2 applications.

The two major objects you need to know :

SDL_Window


This is the physical window you see on your screen. One SDL_Window represents one physical window on your screen. You can have as many SDL_Windows as you like. The structs holds info about the window like position, size, window state and window style.

SDL_Renderer


The SDL_Renderer is basically what you use to render to the screen. The renderer is usually tied to a window. One renderer can only render within one window. The SDL_Renderer also contains info about the rending itself like hardware acceleration and v-sync prevention.

This tutorial will focus on creating and setting up these so we can start drawing to our screen.

Setting up SDL2


Before you can use SDL2, you must set it up by initializing it and creating a SDL_Window and a SDL_Renderer This section will help you to just that.

Initializing SDL2


The first thing you need to do is to initialize SDL. This is done using the following function :
int SDL_Init(Uint32 flags)
Parameters :
  • flags - specifies what you want to initialize. Set it to SDL_INIT_EVERYTHING to initialize everything.
Return value
  • 0 on success -1 oterwise

Since the function can fail ( though it probably won't ) you should add code that handles this. I also recommend you print an error message with SLD_GetError() because it will tell you what went wrong. This tutorial will do this for the most important setup functions.

This makes our code so far look something like this :



Setting up the SDL_Window


Now that we have initialized SDL2, we can can start creating our window, this is done by using the following function :
SDL_Window* SDL_CreateWindow
(
    const char* title,
    int posX,
    int posY,
    int sizeW,
    int sizeH,
    Uint32 flags
)
Parameters :
  • title -the window caption/title that appears on the top of the window
  • posX - x position of the window.
  • posY - y position of the window.
  • sizeW - width of the window
  • sizeH - height of the window
  • flags - specifies window state or properties. More info here
Return value
  • valid pointer on success. nullptr/NULL on oterwise
We'll set the flag parameter to 0 for now. This simply means we'll end up with a standard window that's not maximized, minimized or fullscreen.

Remember to handle it if the function returns NULL. So we end up with something like this :



Creating the SDL_Renderer


Now for the last object we need to start rendering. This time it's a little bit more work involved, but nothing too scary. We begin by creating the renderer. This is done using the following function :
SDL_Renderer* SDL_CreateRenderer
(
    SDL_Window* window,
    int index,
    Uint32 flags
)
Parameters :
  • window - the SDL_Window this renderer will be attached to. In our case, this is the SDL_Window we just created.
  • index - specifies which rendering driver to use. It sounds complicated, but we can just specify -1. This means we'll use the first driver we can find.
  • flags - species how the rendering should be done. For now, we'll just use SDL_RENDERER_ACCELERATED which lets us use the graphics card to render quickly. You can read more here.
Return valueWindow
  • a valid pointer on success. Otherwise NULL.
As always ; remember to handle any return of 0.



Setting up the renderer


Now that we have created the SDL_Renderer we are technically ready to start rendering. But there are a few more things we should do first...

First of all we should set the resolution of the renderer :
int SDL_RenderSetLogicalSize
(
    SDL_Renderer* renderer,
    int width,
    int height
)
Parameters :
  • window - the SDL_Window this renderer will be attached to. In our case, this is the SDL_Window we just created.
  • index - specifies which rendering driver to use. It sounds complicated, but we can just specify -1. This means we'll use the first driver we can find.
  • flags - species how the rendering should be done. For now, we'll just use SDL_RENDERER_ACCELERATED which lets us use the graphics card to render quickly. You can read more here.
Return value
  • 0 on success, -1 oterwise
This is pretty straight forward, the first argument is the renderer on which to set the resolution on. The second and third is the width and height. Normally these are the same as the width and height of the SDL_Window.

And now the time has come to set the color. Here is the function for doing that :
int SDL_SetRenderDrawColor
(
    SDL_Renderer* renderer,
    Uint8 red,
    Uint8 green,
    Uint8 blue,
    Uint8 alpha
)
Parameters :
  • renderer - the SDL_Renderer on which to set render color
  • red - specifies amount of red ( 0 - 255 )
  • green - specifies amount of green ( 0 - 255 )
  • blue - specifies amount of blue ( 0 - 255 )
  • alpha - specifies amount of alpha ( 0 - 255 ) 0 = completely transparent
Return value
  • 0 on success, -1 oterwise

That's it! We're done with the setup. And now we can start using the renderer for fun stuff!



Rendering something


Now it's time to get started on the renderng.
The first thing we need to do before drawing something, is to clear our window. This means we fill our window with the color we set using SDL_SetRenderDrawColor() This is done by calling :
int SDL_RenderClear
(
    SDL_Renderer* renderer
)
Parameters :
  • renderer - the SDL_Renderer on which clear
Return value
  • 0 on success, -1 oterwise
This function should be called at the beginning on every frame to clear the screen and make it ready for more stuff.

But... SDL_RenderClear ( and any other SDL_Render functions ) works behind the scenes. They don't actually draw anything on the screen. So, in order for he drawing ( including SDL_RenderClear ) to take effect, we need to call another function.
int SDL_RenderPresent
(
    SDL_Renderer* renderer
)
Parameters :
  • renderer - the SDL_Renderer on which to render
Return value
  • 0 on success, -1 oterwise
This function takes whatever you have drawn to the screen using SDL_Render* and actually puts it on the screen. So that after calling this, the screen will be all nice and red. And that's it for now. In the next part I'll go into rectangles and actually rendering something interesting ( yes, I assume red screens doesn't catch your interest. )


That's if for part 1. We now have a nice red window. Next time we'll be rendering rects and other neat stuff.

Here is all the code so far. You should be able to just copy paste and compile.




Feel free to comment if you have anything to say or ask questions if anything is unclear. I always appreciate getting comments.

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

3 kommentarer:

  1. Thorough and well written, very helpful!
    Looks like there was a typo though in the description of the parameters for SDL_RenderSetLogicalSize.
    Great stuff though, keep it up.

    SvarSlett
    Svar
    1. Thank you very much, I'm glad you find it helpfull.

      Typo has been fixed, let me know if you find more typos

      Slett
  2. Tutorial muy bueno. Lo felicito

    SvarSlett