Requisitos previos
- Instalar VS2022 y marcar los componentes de desarrollo de escritorio C++
- Descargar el código fuente de ImGui, obtén la versión release desde el enlace: ocornut/imgui: Dear ImGui: Interfaz gráfica ligera para C++ con mínimas dependencias
- Paquete binario de GLFW: ImGui usa esta librería para dibujar y gestionar ventanas
Estamos trabajando en Windows de 64 bits, así que solo tienes que descargar los binarios de Windows 64-bit.
Crear proyecto
Abre VS2022 y crea un «Proyecto vacío C++»
Asigna un nombre al proyecto, por ejemplo ImGuiDemo
Haz clic derecho en el proyecto >>> Propiedades >>> Cambia la configuración a Release x64
Importar archivos
Descomprime los dos archivos descargados, renombra las carpetas imgui y glfw, y cópialas en la raíz del proyecto.
No anides subcarpetas dentro de estos dos directorios; los archivos del proyecto deben estar directamente visibles.
├─ imgui/
│ ├─ backends/
│ ├─ imgui.h, imgui.cpp ...
├─ glfw/
│ ├─ include/GLFW/
│ ├─ lib-vc2022/Lenguaje del código: PHP (php)La estructura debe quedar así.
Configuraciones adicionales
Directorios de inclusión adicionales
Clic derecho sobre el proyecto y selecciona Propiedades
Haz clic en Directorios VC++ que aparece en la ventana
Luego accede a General
En Directorios de inclusión pulsa el botón editar
Agrega estas tres líneas:
$(SolutionDir)imgui
$(SolutionDir)imgui\backends
$(SolutionDir)glfw\includeLenguaje del código: JavaScript (javascript)
Directorios de bibliotecas
Mantente en esta pantalla de configuración, busca Directorios de bibliotecas y escribe la ruta de la carpeta lib de GLFW
Agrega la ruta $(SolutionDir)glfw\lib-vc2022
Dependencias lib del enlazador
Enlazador >>> Entrada >>> Dependencias adicionales
glfw3.lib
opengl32.lib
user32.lib
gdi32.lib
shell32.libLenguaje del código: CSS (css)
Agregar código fuente al proyecto
Clic derecho en Archivos de código fuente, Agregar elemento existente y selecciona estos archivos:
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
Crear punto de entrada del proyecto
Crea un archivo nuevo 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("Fallo al inicializar 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);
// Crear ventana
GLFWwindow* window = glfwCreateWindow(1000, 600, "ImGui Minimal Demo (VS2022)", nullptr, nullptr);
if (!window)
{
glfwTerminate();
return -1;
}
glfwMakeContextCurrent(window);
glfwSwapInterval(1); // Activar VSync
// Inicializar ImGui
IMGUI_CHECKVERSION();
ImGui::CreateContext();
ImGuiIO& io = ImGui::GetIO();
ImGui::StyleColorsDark();
// Conectar backends GLFW + OpenGL3
ImGui_ImplGlfw_InitForOpenGL(window, true);
ImGui_ImplOpenGL3_Init(glsl_version);
// Variables de interfaz
float slider_value = 0.5f;
int click_count = 0;
bool show_full_demo = false;
// Bucle de renderizado principal
while (!glfwWindowShouldClose(window))
{
glfwPollEvents();
// Nuevo frame ImGui
ImGui_ImplOpenGL3_NewFrame();
ImGui_ImplGlfw_NewFrame();
ImGui::NewFrame();
// Panel personalizado
ImGui::Begin("Panel de control");
ImGui::Text("Hola ImGui + VS2022");
ImGui::SliderFloat("Valor del slider", &slider_value, 0.f, 1.f);
if (ImGui::Button("Pulsa para contar"))
click_count++;
ImGui::SameLine();
ImGui::Text("Clics: %d", click_count);
ImGui::Checkbox("Mostrar ventana demo completa de ImGui", &show_full_demo);
ImGui::End();
if (show_full_demo)
ImGui::ShowDemoWindow(&show_full_demo);
// Renderizar 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);
}
// Liberar recursos
ImGui_ImplOpenGL3_Shutdown();
ImGui_ImplGlfw_Shutdown();
ImGui::DestroyContext();
glfwDestroyWindow(window);
glfwTerminate();
return 0;
}Lenguaje del código: C++ (cpp)
Si aparecen rayas rojas como en la imagen superior, el error viene de la configuración incorrecta de los directorios de inclusión.
Nuestra ruta completa es D:\Demos\ImGuiDemo\ImGuiDemo: las carpetas imgui y glfw están dentro de este subdirectorio ImGuiDemo que no tuvimos en cuenta al configurar. Esto depende de cómo crees tu proyecto en VS, revisa si tienes una carpeta intermedia extra.
Modifica los directorios de inclusión:
$(SolutionDir)ImGuiDemo\imgui
$(SolutionDir)ImGuiDemo\imgui\backends
$(SolutionDir)ImGuiDemo\glfw\includeLenguaje del código: JavaScript (javascript)
Tras guardar los cambios, las líneas rojas desaparecen.
Pulsa el botón Ejecutar de la parte superior
Si aparece el error cannot open file ‘glfw3.lib’:
La causa es la misma del fallo anterior: las rutas de las librerías GLFW están mal definidas. Agrega el prefijo ImGuiDemo\ a las rutas configuradas antes.
Actualiza la ruta de librerías:
$(SolutionDir)ImGuiDemo\glfw\lib-vc2022Lenguaje del código: JavaScript (javascript)Vuelve a ejecutar el programa
Listo, este es nuestro primer ejemplo funcional completo: desde descargar dependencias hasta ejecutar el código. Puedes repetir todos los pasos por tu cuenta. Más adelante profundizaremos en ImGui.