Minimale ImGui-Demo mit VS2022 (Umgebung einrichten)

Voraussetzungen

• Installiere VS2022 und wähle die Komponenten für die C++-Desktop-Entwicklung aus
• Lade den ImGui-Quellcode herunter, nutze die Release-Version aus dem Repository: ocornut/imgui: Dear ImGui – leichtgewichtige C++-GUI mit minimalen Abhängigkeiten
• GLFW-Binärpaket: ImGui benötigt diese Bibliothek zur Fenstererstellung und -verwaltung

Wir arbeiten unter Windows 64-Bit, also lade einfach die 64-Bit-Windows-Binärdateien herunter.

Projekt erstellen

Öffne VS2022 und erstelle ein „Leeres C++-Projekt“

Gib dem Projekt einen Namen, zum Beispiel ImGuiDemo

Mache einen Rechtsklick auf das Projekt → Eigenschaften → Ändere die Konfiguration auf Release x64

Dateien einbinden

Entpacke die beiden heruntergeladenen Archive, benenne die Ordner imgui und glfw um und kopiere sie in das Projektstammverzeichnis.

Achte darauf, dass keine weiteren verschachtelten Unterordner existieren – die Projektdateien müssen direkt zugänglich sein.

├─ imgui/
│  ├─ backends/
│  ├─ imgui.h, imgui.cpp ...
├─ glfw/
│  ├─ include/GLFW/
│  ├─ lib-vc2022/Code-Sprache: PHP (php)

So sollte die Ordnerstruktur aussehen.

Zusätzliche Einstellungen

Zusätzliche Include-Verzeichnisse

Rechtsklick auf das Projekt, dann Eigenschaften auswählen

Klicke im angezeigten Fenster auf VC++-Verzeichnisse

Wechsle in den Bereich Allgemein

Bei der Zeile Include-Verzeichnisse klicke auf die Schaltfläche Bearbeiten

Füge diese drei Pfade hinzu:

$(SolutionDir)imgui
$(SolutionDir)imgui\backends
$(SolutionDir)glfw\includeCode-Sprache: JavaScript (javascript)

Bibliotheksverzeichnisse

Bleibe auf dieser Konfigurationsseite, suche den Eintrag Bibliotheksverzeichnisse und gib den Pfad zum GLFW-lib-Ordner ein

Füge die Zeile $(SolutionDir)glfw\lib-vc2022 hinzu

Linker-Lib-Abhängigkeiten

Linker → Eingabe → Zusätzliche Abhängigkeiten

glfw3.lib
opengl32.lib
user32.lib
gdi32.lib
shell32.libCode-Sprache: CSS (css)

Quelldateien zum Projekt hinzufügen

Mache einen Rechtsklick auf Quelldateien → Vorhandenes Element hinzufügen und wähle diese Dateien aus:

imgui/imgui.cpp
imgui/imgui_draw.cpp
imgui/imgui_widgets.cpp
imgui/imgui_tables.cpp
imgui/imgui_demo.cpp
imgui/backends/imgui_impl_glfw.cpp
imgui/backends/imgui_impl_opengl3.cpp

Projekteinstieg erstellen

Erstelle eine neue Datei main.cpp

#include <GLFW/glfw3.h>
#include "imgui.h"
#include "backends/imgui_impl_glfw.h"
#include "backends/imgui_impl_opengl3.h"
#include <cstdio>

int main()
{
    // GLFW initialisieren
    if (!glfwInit())
    {
        printf("GLFW-Initialisierung fehlgeschlagen\n");
        return -1;
    }

    // OpenGL 3.3 festlegen
    const char* glsl_version = "#version 330";
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

    // Fenster erstellen
    GLFWwindow* window = glfwCreateWindow(1000, 600, "ImGui Minimal Demo (VS2022)", nullptr, nullptr);
    if (!window)
    {
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);
    glfwSwapInterval(1); // VSync aktivieren

    // ImGui initialisieren
    IMGUI_CHECKVERSION();
    ImGui::CreateContext();
    ImGuiIO& io = ImGui::GetIO();
    ImGui::StyleColorsDark();

    // GLFW + OpenGL3 Backend binden
    ImGui_ImplGlfw_InitForOpenGL(window, true);
    ImGui_ImplOpenGL3_Init(glsl_version);

    // UI-Variablen
    float slider_value = 0.5f;
    int click_count = 0;
    bool show_full_demo = false;

    // Hauptrender-Schleife
    while (!glfwWindowShouldClose(window))
    {
        glfwPollEvents();

        // Neue ImGui-Frame starten
        ImGui_ImplOpenGL3_NewFrame();
        ImGui_ImplGlfw_NewFrame();
        ImGui::NewFrame();

        // Eigenes Bedienfeld zeichnen
        ImGui::Begin("Steuerfeld");
        ImGui::Text("Hallo ImGui + VS2022");
        ImGui::SliderFloat("Slider-Wert", &slider_value, 0.f, 1.f);

        if (ImGui::Button("Klick zum Zählen"))
            click_count++;
        ImGui::SameLine();
        ImGui::Text("Klicks: %d", click_count);

        ImGui::Checkbox("Vollständiges ImGui-Demo-Fenster anzeigen", &show_full_demo);
        ImGui::End();

        if (show_full_demo)
            ImGui::ShowDemoWindow(&show_full_demo);

        // ImGui-Zeichendaten rendern
        ImGui::Render();
        int width, height;
        glfwGetFramebufferSize(window, &width, &height);
        glViewport(0, 0, width, height);
        glClearColor(0.12f, 0.12f, 0.12f, 1.f);
        glClear(GL_COLOR_BUFFER_BIT);
        ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());

        glfwSwapBuffers(window);
    }

    // Ressourcen aufräumen
    ImGui_ImplOpenGL3_Shutdown();
    ImGui_ImplGlfw_Shutdown();
    ImGui::DestroyContext();
    glfwDestroyWindow(window);
    glfwTerminate();
    return 0;
}Code-Sprache: C++ (cpp)

Erscheinen rote Wellenlinien wie auf dem Bild, liegt das an einer fehlerhaften Pfadkonfiguration der Include-Verzeichnisse.

Unser vollständiger Pfad lautet D:\Demos\ImGuiDemo\ImGuiDemo – unsere Ordner imgui und glfw liegen in diesem Unterordner ImGuiDemo, den wir bei der Einstellung nicht berücksichtigt haben. Das hängt davon ab, wie du dein VS-Projekt erstellt hast, prüfe, ob es einen zusätzlichen Zwischenordner gibt.

Passe die Include-Pfade an:

$(SolutionDir)ImGuiDemo\imgui
$(SolutionDir)ImGuiDemo\imgui\backends
$(SolutionDir)ImGuiDemo\glfw\includeCode-Sprache: JavaScript (javascript)

Nach der Korrektur verschwinden die roten Markierungen.

Klicke oben auf den Ausführen-Button

Tritt der Fehler „cannot open file ‚glfw3.lib’“ auf:

Der Grund ist derselbe wie zuvor: Die GLFW-Bibliothekspfade sind falsch eingetragen. Ergänze den Pfad um den Ordner ImGuiDemo\.

Aktualisiere den Bibliothekspfad:

$(SolutionDir)ImGuiDemo\glfw\lib-vc2022Code-Sprache: JavaScript (javascript)

Starte das Programm erneut

Fertig, unser erstes lauffähiges Beispiel ist abgeschlossen – vom Herunterladen der Abhängigkeiten bis zur fertigen Ausführung. Du kannst die Schritte selbst nachbauen. In den nächsten Beiträgen vertiefen wir uns weiter in ImGui.