How to Create Graphical Interfaces with Dear ImGui and SFML

Basic C++ Tutorial with Dear ImGui and SFML


How to Create Graphical Interfaces with Dear ImGui and SFML


Dear ImGui is a framework to create Graphical Interfaces right away, with as little processing as possible!

In this article we will see how to implement it in a basic project with SFML .


01. Clone the library: Dear ImGui and install it on your system

git clone https://github.com/ocornut/imgui

02. Clone the library: ImGui-SFML

git clone https://github.com/eliasdaler/imgui-sfml

03. Create a directory and a subdirectory for your project

mkdir basic-sfml-imgui
cd basic-sfml-imgui
mkdir include


04. Copy the essential ImGui files to your project’s include/ subdirectory

cd ../imgui
cp imconfig.h \
imgui.cpp \
imgui.h \
imgui_demo.cpp \
imgui_draw.cpp \
imgui_internal.h \
imgui_tables.cpp \
imgui_widgets.cpp \
imstb_rectpack.h \
imstb_textedit.h \
imstb_truetype.h \
../basic-sfml-imgui/include

05. Copy the essential ImGui-SFML files to the include/ subdirectory of your project

cd ../imgui-sfml/
cp imconfig-SFML.h \
imgui-SFML.cpp \
imgui-SFML.h \
imgui-SFML_export.h \
../basic-sfml-imgui/include/

06. Change the header line

Enter your project directory cd ../basic-sfml-imgui Open the file ./include/imgui-SFML.cpp

and replace that line #include <imgui.h> so #include "imgui.h" .


07. Now create a main.cpp file with basic SFML code with a circle

#include "include/imgui.h"
#include "include/imgui-SFML.h"

#include <SFML/Graphics/CircleShape.hpp>
#include <SFML/Graphics/RenderWindow.hpp>
#include <SFML/System/Clock.hpp>
#include <SFML/Window/Event.hpp>

int main() {
    sf::RenderWindow window(sf::VideoMode(640, 480), "ImGui + SFML = <3");
    window.setFramerateLimit(60);
    ImGui::SFML::Init(window);

    sf::CircleShape shape(100.f);
    shape.setFillColor(sf::Color::Green);

    sf::Clock deltaClock;
    while (window.isOpen()) {
        sf::Event event;
        while (window.pollEvent(event)) {
            ImGui::SFML::ProcessEvent(window, event);

            if (event.type == sf::Event::Closed) {
                window.close();
            }
        }

        ImGui::SFML::Update(window, deltaClock.restart());

        ImGui::Begin("Hello, world!");
        ImGui::Button("Look at this pretty button");
        ImGui::End();

        window.clear();
        window.draw(shape);
        ImGui::SFML::Render(window);
        window.display();
    }

    ImGui::SFML::Shutdown();
}


08. Now compile

g++ -std=c++11 main.cpp include/*.cpp -lsfml-graphics -lsfml-window -lsfml-system -lGL

Watch the video

If you want to see another example by video, Watch the video below.

Note: The video is in Brazilian Portuguese, however, it is possible to notice all the steps regardless of the language, as the code is universal. If you still want to use Youtube’s automatic translation.

Source code: https://github.com/terroo/particle-system


cpp cppdaily gamedev sfml imgui


Share


YouTube channel

Subscribe


Marcos Oliveira

Marcos Oliveira

Software developer
https://github.com/terroo

Related articles