Search


    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

    Comments