Open In App

SFML Graphics Library | Quick Tutorial

Improve
Improve
Like Article
Like
Save
Share
Report

So in this very quick tutorial, let’s learn about the basics of the mighty OpenGL-powered SFML Graphics Library.

What is SFML?

Simply put SFML is a multimedia library for C++ with bindings available for other languages such as Python, Rust, etc. It does not just let you use hardware-accelerated 2D Graphics with OpenGL but also has a variety of methods related to different types of media such as fonts, audio, etc. It stands for Simple and Fast Multimedia Library. Well, how simple is it? So simple that you could get a snake game running in less than 15 minutes. How fast is it? It’s so fast that you’d be running the application at several thousand frames per second.

Where is SFML used?

SFML is used heavily in making games and even game engines. And even though SFML doesn’t support 3D rendering yet it is used for context creation. Since OpenGL can’t create a window, 3D graphics programmers use SFML (at least most of the time) for the task.

Setting up Environment

Before we program in SFML we must set up the environment! Hopefully, it’s not a much of a headache especially not if you are in Linux! Debian Linux users (and any other flavour of Linux with apt/apt-get) can install SFML with the following command:-

sudo apt-get install libsfml-dev

Windows users can download SFML from this link and follow the guide to install it.

Getting started with SFML

Here’s the most basic SFML application you’ll ever find: 

CPP




#include <SFML/Graphics.hpp>
int main()
{
    sf::Window window(
        sf::VideoMode(640, 480),
        "Hello World");
    return 0;
}


Now to compile the program – since SFML is a dynamically linked library one needs to link the program to the library. This step depends on what component of SFML one is using. Since we are using Graphics.hpp we say:-

g++ main.cpp -lsfml-graphics -lsfml-window -lsfml-system

Assuming the source filename you used main.cpp! The step will be different if someone uses Visual Studio. You can refer here to see how to compile a SFML project with Visual Studio. Now once you run the program you may notice that the window is created but it vanishes automatically. This is because our driver function main creates a window and once it is created it moves to the second statement which is return 0; and hence exits the program! So what we need is a basic loop that will keep running as long as the user doesn’t close the window. So let’s refactor our code and this time understand line-by-line what is actually going on: 

CPP




#include <SFML/Graphics.hpp>
int main()
{
    sf::Window window(
        sf::VideoMode(640, 480),
        "Hello World");
    while (window.isOpen()) {
        sf::Event event;
        while (window.pollEvent(event))
            if (event.type ==
            sf::Event::Closed)
                window.close();
    }
    return 0;
}


Before running the program let’s understand what’s going on! Explanation

  1. The first statement creates a window object using the Window constructor. In this, we pass the videomode and title of the window. And by the way, VideoMode is simply a type that defines the dimensions of the window (and bits per pixel but we don’t need that now). And also note that we are using ‘sf’ namespace as all the SFML classes and Methods are defined under this class.
  2. In the second statement we have some new logic. We are basically running a loop as long as the window is open. Turns out the Window class provides a method isOpen which returns whether or not is a window open. Now inside of this loop we check for events. We create an event object which then we later pass in window.pollEvent. What pollEvent method basically does is it checks if  the event queue is not empty. It updates event with the next event in the queue and then in the event loop we check if the event was not sf::Event::Closed which is just a cryptic way of asking SFML did the user X..ed the window? By default nothing happens when the user hits the close button, so we override this behaviour by closing the window.

Note that closing the window doesn’t terminate the program! But since our window is now closed the isOpen method will now return false and we will return out of what’s called – the main loop of the program! Now if you run the program you get a weird looking window (as shown below). Sure you can close it but it looks weird, the previous contents of the screen are mapped to it and look super weird. This is happening because we are not clearing the window!! In the next example, we are going to do just that (clearing the window) and also draw shapes to the screen? Sounds fun! Let’s get started-

Rendering Simple Shapes with SFML

SFML is not all about window-creation (even though many people use it only for that). It can be used to render hardware-accelerated graphics (including some basic as well as complex shapes). In this example, we’ll constrain ourselves to draw a basic shape (a circle):- 

CPP




#include <SFML/Graphics.hpp>
int main()
{
    sf::RenderWindow window(
        sf::VideoMode(640, 480),
        "Hello World");
    sf::CircleShape shape(200);
 
    while (window.isOpen())
    {
        sf::Event event;
        while (
            window.pollEvent(event))
            if (event.type ==
            sf::Event::Closed)
                window.close();
 
        window.clear();
        window.draw(shape);
        window.display();
    }
    return 0;
}


This would produce the following output:- Explanation: 

  1. Note: RenderWindow has been used instead of Window. This is particularly because we are rendering something in the window. The Window class is actually meant for OpenGL programmers or anyone who simply wants to create and draw a window! If we have to render something on the window we have to use RenderWindow class. The fundamental difference between the two is just this that one is meant for simply creating a blank window for context-creation and other is specifically for 2D rendering which you can’t use outside of SFML.
  2. Moving on from RenderWindow, in line 06 we create a circle shape and pass in a radius of 100. Now exactly after the event loop we clear the contents of the window. This is important otherwise the circle is drawn in the previous frame (previous iteration) would still be there and if we have a moving circle it’d have the effect of creating a lot of circles! So we clear the screen to erase the stuff that was drawn in the previous frame and in the fresh new screen we draw our circle shape! Note that since we didn’t set the position of the circle it’d be defaulted to (0, 0). After drawing the shape we have to display the contents of the window. Why this is important is because the shape is first drawn not on the window but on a blank empty canvas, and while SFML is drawing on this empty canvas it shows the contents of the previous iteration. And when the process of drawing on the canvas is completed, it flips the windows contents with the newly created canvas. This entire process is called double buffering if you are curious.

Advantages of SFML

The advantages of SFML over other multimedia libraries are:-
 

  1. SFML is free and open-source (unlike DirectX which is closed source or Metal which is proprietary)
  2. SFML is cross-platform It can run in Windows, Linux/Unix, Mac and experiments are already going on to make it portable with Android and iOS (Compared to other graphic libraries such as Windows API, etc which only support a single platform)
  3. SFML is super-fast Your application will most of the time run at several thousand frames per second compared to some graphic APIs which fail to reach even 500fps!
  4. SFML is multi-language In this article we used C++ but you could have created the same thing using Python or even GoLang!! That is to say that SFML provides official bindings for several mainstream languages. Most Graphic APIs hardly provide more than one language-binding whereas SFML provides bindings for over a dozen of different programming languages!!

Disadvantages of SFML

There are also some disadvantages of SFML that come along the way:-

  1. SFML cannot do 3D! SFML is strictly written to provided low-level hardware-accelerated 2D graphics rendering. For 3D you’ll perhaps have to use it in combination with OpenGL
  2. No firm-support for Android and iOS! Even though experiments are going on yet currently there is no such firm support for Android, iOS or other mobile platforms

Further Reading

Now I’d end this article. I hope you learned a thing or to. Here are some books that you can read to learn more in SFML

Of course the original sfml wiki is charm, you can refer there as well. Also the people at the forums are very helpful and will gladly help you if you have any doubt. I wish you good luck in your journey of learning SFML. You can also read more about the dynamic libraries (and in what aspect do they differ from their static counterparts) in this post

References

https://www.sfml-dev.org/tutorials/2.0/start-linux.php https://www.sfml-dev.org/tutorials/2.0/window-window.php https://www.sfml-dev.org/tutorials/2.0/graphics-shape.php



Last Updated : 01 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads