Минимальный демо ImGui для VS2022 (настройка окружения) - Курс по языку ImGui

Предварительные требования

Установите VS2022 и отметьте компоненты для разработки настольных приложений на C++
Скачайте исходный код ImGui, возьмите релизную версию из репозитория: ocornut/imgui: Dear ImGui – лёгкий графический интерфейс для C++ с минимальными зависимостями
Бинарный пакет GLFW: ImGui использует эту библиотеку для отрисовки окон

Мы работаем на 64-битной Windows, поэтому достаточно скачать бинарники для 64-битной Windows.

Создание проекта

Откройте VS2022, создайте «Пустой проект C++»

Задайте имя проекту, например ImGuiDemo

Правый клик по проекту >>> Свойства >>> переключите конфигурацию на Release x64

Подключение файлов

Распакуйте два скачанных архива, переименуйте папки в imgui и glfw, затем скопируйте их в корень проекта.

Внутри этих двух папок не должно быть вложенных подкаталогов, файлы проекта должны лежать напрямую.

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

Вот так должна выглядеть структура.

Дополнительные настройки

Дополнительные каталоги включения

Правой кнопкой кликните по проекту, выберите Свойства

Нажмите пункт «Каталоги VC++» в открывшемся окне

Перейдите в раздел «Общие»

В строке «Каталоги включения» нажмите кнопку Изменить

Добавьте следующие три строки:

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

Каталоги библиотек

Оставайтесь на этой странице настроек, найдите пункт Каталоги библиотек и пропишите путь к папке lib библиотеки GLFW

Добавьте строку $(SolutionDir)glfw\lib-vc2022

Зависимости библиотек компоновщика

Компоновщик >>> Ввод >>> Дополнительные зависимости

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

Добавление исходных кодов в проект

Правой кнопкой по пункту «Исходные файлы» → Добавить существующий элемент, выберите эти файлы:

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

Создание точки входа проекта

Создайте новый файл 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
    if (!glfwInit())
    {
        printf("Ошибка инициализации GLFW\n");
        return -1;
    }

    // OpenGL 3.3
    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);

    // Создание окна
    GLFWwindow* window = glfwCreateWindow(1000, 600, "ImGui Minimal Demo (VS2022)", nullptr, nullptr);
    if (!window)
    {
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);
    glfwSwapInterval(1); // Включить вертикальную синхронизацию

    // Инициализация ImGui
    IMGUI_CHECKVERSION();
    ImGui::CreateContext();
    ImGuiIO& io = ImGui::GetIO();
    ImGui::StyleColorsDark();

    // Подключение бэкендов GLFW + OpenGL3
    ImGui_ImplGlfw_InitForOpenGL(window, true);
    ImGui_ImplOpenGL3_Init(glsl_version);

    // Переменные интерфейса
    float slider_value = 0.5f;
    int click_count = 0;
    bool show_full_demo = false;

    // Основной цикл отрисовки
    while (!glfwWindowShouldClose(window))
    {
        glfwPollEvents();

        // Начало нового кадра ImGui
        ImGui_ImplOpenGL3_NewFrame();
        ImGui_ImplGlfw_NewFrame();
        ImGui::NewFrame();

        // Отрисовка собственной панели управления
        ImGui::Begin("Панель управления");
        ImGui::Text("Привет ImGui + VS2022");
        ImGui::SliderFloat("Значение ползунка", &slider_value, 0.f, 1.f);

        if (ImGui::Button("Нажмите для подсчёта"))
            click_count++;
        ImGui::SameLine();
        ImGui::Text("Кликов: %d", click_count);

        ImGui::Checkbox("Показать полное демонстрационное окно ImGui", &show_full_demo);
        ImGui::End();

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

        // Отрисовка данных ImGui
        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);
    }

    // Очистка ресурсов
    ImGui_ImplOpenGL3_Shutdown();
    ImGui_ImplGlfw_Shutdown();
    ImGui::DestroyContext();
    glfwDestroyWindow(window);
    glfwTerminate();
    return 0;
}Code language: C++ (cpp)

Если появятся красные волнистые подчёркивания как на изображении выше, проблема в неверной настройке каталогов включения.

Полный путь в нашем случае D:\Demos\ImGuiDemo\ImGuiDemo: папки imgui и glfw лежат внутри этого подкаталога ImGuiDemo, который мы не учли при конфигурации. Это зависит от того, как вы создавали проект в VS, проверьте, нет ли лишней вложенной папки.

Исправьте каталоги включения:

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

После изменения красные подчёркивания исчезнут.

Нажмите кнопку запуска в верхней части окна

Если появится ошибка cannot open file ‘glfw3.lib’:

Причина та же самая, что и выше: неверно указаны пути к библиотекам GLFW. Нужно исправить все пути, добавив префикс ImGuiDemo\.

Обновите путь к библиотекам:

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

Запустите проект снова

Готово, это наш первый рабочий пример: от скачивания зависимостей до запуска программы. Попробуйте повторить шаги самостоятельно. В следующих статьях мы разберём ImGui более подробно.

Next: Разбор примера ImGui