Avery Reed - Articles

< BACK TO ARTICLES

CREATING A WINDOW WITH SDL2, 60FPS, BACKGROUND COLOR, SIMPLE KEYBOARD INPUT, FULLSCREEN

2/27/2020

SDL2 Tutorial

Watch a similar tutorial here:

https://www.youtube.com/watch?v=rRaG6Xzu7P0

SDL2 can be found here:

https://www.libsdl.org/download-2.0.php

(linux install with apt-get)

Include the SDL2 Library.

Include the standard library for printing out errors and debuging to the command line.

#include

Define the window size

#define WIDTH 1280

#define HEIGHT 720

Then we are going to create the SDL2 renderer and window objects. Along with some variables for fps management, the main loop, and toggling fullscreen.

SDL_Renderer* renderer;

SDL_Window* window;

bool running, fullscreen;

int frameCount, timerFPS, lastFrame, fps;

Init

We are going to initialize SDL2 and check for errors.

We then create and name the window.

if(SDL_Init(SDL_INIT_EVERYTHING) < 0) std::cout << "Failed at SDL_Init()" << SDL_GetError() << std::endl;

if(SDL_CreateWindowAndRenderer(WIDTH, HEIGHT, 0, &window, &renderer) < 0) std::cout << "Failed at SDL_CreateWindowAndRenderer()" << SDL_GetError() << std::endl;

SDL_SetWindowTitle(window, "SDL2 Window");

Extra functions include:

changing it to fullscreen when initialized.

hiding the cursor

setting render scale. 0 is the defualt, and 1 and 2 render pixelated art better.

if(SDL_CreateWindowAndRenderer(WIDTH, HEIGHT, SDL_WINDOW_FULLSCREEN, &window, &renderer) < 0) std::cout << "Failed at SDL_CreateWindowAndRenderer()" << SDL_GetError() << std::endl;

SDL_ShowCursor(10);

SDL_SetHint( SDL_HINT_RENDER_SCALE_QUALITY, "2" );

Call these functions on close/in the deconstructor.

SDL_DestroyRenderer(renderer);

SDL_DestroyWindow(window);

SDL_Quit();

Create the main loop.

running=true;

fullscreen=0;

void Game::loop() {

while(running) {

render();

input();

update();

}

This will be put into the render function.

The color is set.

An SDL_Rect is created an defined then put to the buffer as a colored background.

RenderPresent then draws everything to the screen.

SDL_SetRenderDrawColor(renderer, 40, 43, 200, 255);

SDL_Rect rect;

rect.x=rect.y=0;

rect.w=WIDTH;

rect.h=HEIGHT;

SDL_RenderFillRect(renderer, &rect);

SDL_RenderPresent(renderer);

Manage the FPS to be rendered.

Add the lastTime variable before the loop begins.

static int lastTime = 0;

Then the time is checked and saved in the loop before the render, input, & update functions are called.

The current FPS is then displayed.

while(running) {

lastFrame=SDL_GetTicks();

if(lastFrame >= (lastTime+1000)) {

lastTime=lastFrame;

fps = frameCount;

frameCount=0;

}

std::cout << fps << std::endl;

}

In the render function before calling Render Display place this.

This will cause a delay to make sure only 60 frames are displayed every second. (Change 60 to any desired framerate)

frameCount++;

int timerFPS = SDL_GetTicks()-lastFrame;

if(timerFPS<(1000/60)) {

SDL_Delay((1000/60)-timerFPS);

}

In the input function we will check for the user clicking the x widget or clicking the ESC button.

Keyboard input will be better explained in another article.

void input() {

SDL_Event e;

while( SDL_PollEvent( &e ) ) {

if( e.type == SDL_QUIT ) {

running = false;

}

const Uint8 *keystates = SDL_GetKeyboardState(NULL);

if(keystates[SDL_SCANCODE_ESCAPE]) running=false;

}

After checking for ESC, we can also check for F11 to be pressed to toggle between fullscreen.

if(keystates[SDL_SCANCODE_F11]) {

if(fullscreen)SDL_SetWindowFullscreen(window, SDL_WINDOW_FULLSCREEN);

if(!fullscreen)SDL_SetWindowFullscreen(window, 0);

fullscreen=!fullscreen;

}