SFML - Part 1 - Installation and first program with Qt Creator

This article is part of a tutorial dedicated to SFML. The reader may consult the other parts of the tutorial by following this link : SFML tutorial.

Introduction

This post presents how to install SFML on Linux and compile a first program with Qt Creator. This installation has been prepared with the following software versions:

Ubuntu 18.04 LTS
Qt Creator 4.5.2
Qt 5.9.5
GCC 7.3.0, 64 bits
SFML 2.4.2+dfsg-4

The following video is a preview of the result:

Packages

First, if needed, install Qt Creator by following one of these tutorials:

Install SFML development package:

sudo apt install libsfml-dev

Configure Qt

Launch Qt and create a new console project. To link your application with the SFML libraries, add the following lines in the .pro file :

LIBS += -lsfml-audio
LIBS += -lsfml-graphics
LIBS += -lsfml-network
LIBS += -lsfml-window
LIBS += -lsfml-system

To avoid issues with directories, uncheck “Shadow build” in the project:

In the same way, you can uncheck “Run in terminal” :

First program

The following program is the "Hello world" of SFML. It creates a 200 x 200 pixel window and draw a circle inside. Everything is explained in the comments.

/*!
 * \file    main.cpp
 * \brief   First example of SFML (https://lucidar.me/en/sfml/sfml-part-1-installation-and-first-program/)
 * \author  Philippe Lucidarme (from official SFML tutorial)
 * \version 1.0
 * \date    10/07/2018
 */

// SFML libraries
#include <SFML/Graphics.hpp>

int main()
{
    // Create a new 200x200 pixels window with a title
    sf::RenderWindow window(sf::VideoMode(200, 200), "SFML tutorial : part 1");

    // Create a green circle with a radius of 100. pixels
    sf::CircleShape shape(100.f);
    shape.setFillColor(sf::Color::Green);

    // Main loop, while the window is open
    while (window.isOpen())
    {
        // Event loop
        sf::Event event;
        while (window.pollEvent(event))
        {
            // If close is requested by user, close the window
            if (event.type == sf::Event::Closed) window.close();
        }

        // Display sequence : clear screen, draw circle and update display
        window.clear();
        window.draw(shape);
        window.display();
    }

    // End of application
    return 0;
}

The previous program should display the following window:

Download

Qt project for this example can be downloaded here: