Demo mínima do ImGui no VS2022 (Configuração do ambiente)

Pré-requisitos

• Instale o VS2022 e marque os componentes de desenvolvimento C++ para desktop
• Baixe o código-fonte do ImGui, use a versão release do repositório: ocornut/imgui: Dear ImGui – interface gráfica leve para C++ com poucas dependências
• Pacote binário do GLFW: o ImGui depende dessa biblioteca para renderizar janelas

Estamos rodando no Windows 64 bits, então baixe apenas os binários Windows 64-bit.

Criar projeto

Abra o VS2022 e crie um «Projeto vazio C++»

Dê um nome ao projeto, por exemplo ImGuiDemo

Clique com o botão direito no projeto >>> Propriedades >>> Altere a configuração para Release x64

Importar arquivos

Extraia os dois arquivos baixados, renomeie as pastas para imgui e glfw, depois copie ambas para a raiz do projeto.

Não crie subpastas dentro desses dois diretórios; os arquivos do projeto devem estar acessíveis diretamente.

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

A estrutura deve ficar igual ao exemplo acima.

Configurações extras

Diretórios de inclusão adicionais

Clique com o botão direito no projeto e selecione Propriedades

Clique na opção Diretórios VC++ na janela exibida

Acesse a aba Geral

Na linha Diretórios de inclusão, clique em editar

Adicione as três linhas abaixo:

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

Diretórios de bibliotecas

Permaneça na tela de configuração, localize Diretórios de bibliotecas e informe o caminho da pasta lib do GLFW

Adicione $(SolutionDir)glfw\lib-vc2022

Dependências lib do Linker

Linker >>> Entrada >>> Dependências Adicionais

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

Adicionar código-fonte ao projeto

Clique com o botão direito em Arquivos de Origem, Adicionar Item Existente e marque esses arquivos:

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

Criar ponto de entrada do projeto

Crie um novo arquivo 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()
{
    // Inicializar GLFW
    if (!glfwInit())
    {
        printf("Falha na inicialização do 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);

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

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

    // Ligar backends GLFW + OpenGL3
    ImGui_ImplGlfw_InitForOpenGL(window, true);
    ImGui_ImplOpenGL3_Init(glsl_version);

    // Variáveis da interface
    float slider_value = 0.5f;
    int click_count = 0;
    bool show_full_demo = false;

    // Loop principal de renderização
    while (!glfwWindowShouldClose(window))
    {
        glfwPollEvents();

        // Nova frame ImGui
        ImGui_ImplOpenGL3_NewFrame();
        ImGui_ImplGlfw_NewFrame();
        ImGui::NewFrame();

        // Painel de controle personalizado
        ImGui::Begin("Painel de Controle");
        ImGui::Text("Olá ImGui + VS2022");
        ImGui::SliderFloat("Valor do Slider", &slider_value, 0.f, 1.f);

        if (ImGui::Button("Clique para Contar"))
            click_count++;
        ImGui::SameLine();
        ImGui::Text("Cliques: %d", click_count);

        ImGui::Checkbox("Exibir janela demo completa do ImGui", &show_full_demo);
        ImGui::End();

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

        // Renderizar dados do 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);
    }

    // Limpar recursos
    ImGui_ImplOpenGL3_Shutdown();
    ImGui_ImplGlfw_Shutdown();
    ImGui::DestroyContext();
    glfwDestroyWindow(window);
    glfwTerminate();
    return 0;
}Code language: C++ (cpp)

Se aparecer linhas onduladas vermelhas como na imagem acima, o problema está na configuração incorreta dos diretórios de inclusão.

Nosso caminho completo é D:\Demos\ImGuiDemo\ImGuiDemo: as pastas imgui e glfw ficam dentro desse subdiretório ImGuiDemo que não adicionamos nos caminhos. Isso depende de como você criou o projeto no VS, verifique se existe uma pasta intermediária extra.

Altere os diretórios de inclusão:

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

Após salvar as alterações, os traços vermelhos somem.

Clique no botão Executar no topo da tela

Caso apareça o erro cannot open file ‘glfw3.lib’:

A causa é a mesma do erro anterior: os caminhos da biblioteca GLFW estão errados. Adicione o diretório ImGuiDemo\ em todos os caminhos configurados.

Atualize o caminho da biblioteca:

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

Execute o programa novamente

Pronto, esse é nosso primeiro exemplo funcional completo: desde baixar as dependências até rodar o código. Você pode reproduzir todos os passos. Nos próximos artigos vamos aprofundar o uso do ImGui.