SFML, C++, and Windows: Quick Guide to Awesome Graphics

This week, I am documenting how I set up an environment for developing a graphical program using SFML in C++. I am just starting out myself, so this solution isn’t guaranteed to be the optimal solution. That being said, I had a heck of a time finding a place that went step by step through a Windows setup! So, here it is!

Tools

Simple Fast Multimedia Library (SFML)

The name, Simple Fast Multimedia Library (“SFML”), really says it all. SFML is an open source library that can be compiled on many different platforms. Its goal is to provide an interface to various components of your PC in an easy-to-access way. The modules included are:

System
Window
Graphics
Audio
Network

What each of these do and how to use them is outside the scope of this article, but for more information I encourage you to explore their learning area.

CMake

“CMake is used to control the software compilation process using simple platform and compiler independent configuration files” (source: CMake site). We will be using CMake to help us generate a makefile to build our application. There are many configuration options through CMake that I have yet to learn. For this article, I used only what it took to build my SFML-linked software.

Environment Setup

Let’s get started actually setting up our environment. Now, I would like to preface all of the following with “I am sorry, but we HAVE to extend the PATH variable for this to work.”

Requirements (Downloads)

Please follow the links below to download the required software.

SFML Library
64-Bit MinGW Compiler
- This is a version-specific compilation. The link is for a SourceForge download (I wish there were a better way).
64-Bit CMake for Windows
7Zip (or some other software to extract .7z files)

Configuring SFML

Extract the SFML zip file to your root drive (commonly ‘C:/’). This will result in ‘SFML-2.5.1’ at your root. Rename this folder to ‘SFML.’ Now there will be an ‘SFML’ directory at your system root. The contents of this directory should include other directories such as ‘bin,’ ‘doc,’ and others.

Configuring MinGW Compiler

Unzip the .7z file to the root drive (commonly ‘C:/’). This should result in a ‘ming64w’ directory in your root drive that contains sub-directories such as ‘bin,’ ‘opt,’ and others.

Configuring CMake

Go ahead and install CMake. Pay close attention for the option to include it in your PATH variable. CMake will not work properly if it isn’t included in this environment variable. To check, simply run ‘cmake’ in a command prompt to see if the program runs.

Configuring the PATH Environment Variable

The final configuration to complete before we get to our project building is the PATH environment variable. I tried many different solutions to avoid this step. I don’t like having to set something globally on my machine for a project that may be ephemeral and local to one directory.

Start by opening your start menu and searching for ‘env.’ This should show a suggested program that looks like this:

Open that program and select ‘Environment Variables’ as shown below:

In the window that pops up, we need to select the path variable and edit it:

We need to add the SFML library location and the MinGW compiler location to the PATH variable in order for CMake to find it and configure our Makefile.

A Sample Project with CMake and SFML (Finally!)

All right, with all the configuration out of the way, we should be able to configure a project to compile and link against the SFML library. To do this, create a directory for your project. Create two files, one named ‘Cmakelists.txt’ and the other named ‘test.cpp.’ Also, create a directory named ‘build.’ Now your project directory should look like:

build (directory)
Cmakelists.txt
test.cpp

‘Cmakelists.txt’ for SFML Graphics

In the ‘Cmakelists.txt’ file we will put:

cmake_minimum_required(VERSION 3.12 FATAL_ERROR)

project(TestProject VERSION 0.1)

find_package(SFML 2.5 
  COMPONENTS 
    system window graphics network audio REQUIRED)

add_executable(TestProject test.cpp)
target_link_libraries(TestProject sfml-graphics)

This declares your project name (‘TestProject’) and its version (‘VERSION 0.1’). Next, it tells CMake to find the SFML package (which it will find if the PATH variable is set up correctly). Finally, we add an executable to compile our source file and link that executable with ‘sfml-graphics.’

Testing SFML Linkage

This file (‘test.cpp’) will be used to hold a very simple program that just creates a blank window. The blank window is evidence that our program links correctly with the SFML library.

#include <SFML/Graphics.hpp>

int main()
{
    // create the window
    sf::RenderWindow window(sf::VideoMode(800, 600), "My window");

    // run the program as long as the window is open
    while (window.isOpen())
    {
        // check all the window's events that were triggered since the last iteration of the loop
        sf::Event event;
        while (window.pollEvent(event))
        {
            // "close requested" event: we close the window
            if (event.type == sf::Event::Closed)
                window.close();
        }

        // clear the window with black color
        window.clear(sf::Color::Black);

        // draw everything here...
        // window.draw(...);

        // end the current frame
        window.display();
    }

    return 0;
}

Compilation Time!

Finally, the time has arrived for us to compile our program. Open a command prompt in the build directory of your project and type the following:

cmake -G "MinGW Makefiles" ..

If this successfully executes, then you now have a makefile prepared for compilation. To compile your program, simply type:

mingw32-make

Now run the program by typing:

TestProject.exe

You should have a very plain window that pops up like this:

This blank window is evidence that our program links correctly with the SFML library.

Closing Remarks

I know this week’s post didn’t result in any super awesome GIFs. At least for myself, however, having a documented means of setting up a development environment is super useful for future use and projects. Spoiler alert: I plan to use this exact setup for next week’s project!

Thank you for joining me in this post. I hope it can help someone get a graphics project off the ground!

If you are looking for inspiration on what to use this for, might I suggest building a simulation? Check out some of my attempts in Python with the Kivy Library:

Thank you for reading! Feel free to leave a comment below!