Prérequis
- Installez VS2022 et cochez les modules de développement C++ pour ordinateur de bureau
- Téléchargez le code source d’ImGui, récupérez la version release depuis ce dépôt : ocornut/imgui: Dear ImGui : interface graphique légère pour C++ avec très peu de dépendances
- Paquet binaire GLFW, ImGui utilise cette bibliothèque pour créer et gérer les fenêtres
Nous travaillons sur Windows 64 bits, téléchargez donc simplement les binaires Windows 64 bits.
Créer un projet
Lancez VS2022, créez un « Projet vide C++ »
Donnez un nom au projet, par exemple ImGuiDemo
Faites un clic droit sur le projet → Propriétés → Passez la configuration sur Release x64
Importer les fichiers
Décompressez les deux archives téléchargées, renommez les dossiers imgui et glfw, puis copiez-les à la racine du projet.
Ces deux dossiers ne doivent pas contenir de sous-dossiers imbriqués, les fichiers sources doivent être directement accessibles.
├─ imgui/
│ ├─ backends/
│ ├─ imgui.h, imgui.cpp ...
├─ glfw/
│ ├─ include/GLFW/
│ ├─ lib-vc2022/Langage du code : PHP (php)Voici la structure attendue.
Paramètres complémentaires
Répertoires des includes complémentaires
Clic droit sur le projet, sélectionnez Propriétés
Cliquez sur VC++ Répertoires dans la fenêtre affichée
Allez dans la section Général
Sur la ligne Répertoires des includes, cliquez sur le bouton Modifier
Ajoutez ces trois chemins :
$(SolutionDir)imgui
$(SolutionDir)imgui\backends
$(SolutionDir)glfw\includeLangage du code : JavaScript (javascript)
Répertoires des bibliothèques
Restez sur cette page de configuration, trouvez Répertoires des bibliothèques et renseignez le chemin du dossier lib de GLFW
Ajoutez la ligne $(SolutionDir)glfw\lib-vc2022
Dépendances lib de l’éditeur de liens
Éditeur de liens → Entrée → Dépendances complémentaires
glfw3.lib
opengl32.lib
user32.lib
gdi32.lib
shell32.libLangage du code : CSS (css)
Ajouter les sources au projet
Faites un clic droit sur Fichiers sources → Ajouter un élément existant, sélectionnez ces fichiers :
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
Créer le point d’entrée du projet
Créez un nouveau fichier 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()
{
// Initialisation GLFW
if (!glfwInit())
{
printf("Échec de l'initialisation de 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);
// Création de la fenêtre
GLFWwindow* window = glfwCreateWindow(1000, 600, "ImGui Minimal Demo (VS2022)", nullptr, nullptr);
if (!window)
{
glfwTerminate();
return -1;
}
glfwMakeContextCurrent(window);
glfwSwapInterval(1); // Activation du VSync
// Initialisation ImGui
IMGUI_CHECKVERSION();
ImGui::CreateContext();
ImGuiIO& io = ImGui::GetIO();
ImGui::StyleColorsDark();
// Liaison des backends GLFW + OpenGL3
ImGui_ImplGlfw_InitForOpenGL(window, true);
ImGui_ImplOpenGL3_Init(glsl_version);
// Variables de l'interface
float slider_value = 0.5f;
int click_count = 0;
bool show_full_demo = false;
// Boucle de rendu principale
while (!glfwWindowShouldClose(window))
{
glfwPollEvents();
// Début d'une nouvelle trame ImGui
ImGui_ImplOpenGL3_NewFrame();
ImGui_ImplGlfw_NewFrame();
ImGui::NewFrame();
// Création du panneau de contrôle personnalisé
ImGui::Begin("Panneau de contrôle");
ImGui::Text("Bonjour ImGui + VS2022");
ImGui::SliderFloat("Valeur curseur", &slider_value, 0.f, 1.f);
if (ImGui::Button("Cliquez pour compter"))
click_count++;
ImGui::SameLine();
ImGui::Text("Nombre de clics : %d", click_count);
ImGui::Checkbox("Afficher la fenêtre de démo complète d'ImGui", &show_full_demo);
ImGui::End();
if (show_full_demo)
ImGui::ShowDemoWindow(&show_full_demo);
// Rendu des données de dessin 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);
}
// Nettoyage des ressources
ImGui_ImplOpenGL3_Shutdown();
ImGui_ImplGlfw_Shutdown();
ImGui::DestroyContext();
glfwDestroyWindow(window);
glfwTerminate();
return 0;
}Langage du code : C++ (cpp)
Si vous voyez des soulignements rouges comme sur l’image ci-dessus, c’est un problème de configuration des répertoires includes.
Dans notre cas, le chemin complet est D:\Demos\ImGuiDemo\ImGuiDemo : nos dossiers imgui et glfw se trouvent dans ce sous-dossier ImGuiDemo que nous n’avons pas pris en compte lors de la configuration. Cela dépend de la manière dont vous avez créé votre projet dans VS, vérifiez si vous avez un dossier intermédiaire supplémentaire.
Modifiez les chemins des répertoires includes :
$(SolutionDir)ImGuiDemo\imgui
$(SolutionDir)ImGuiDemo\imgui\backends
$(SolutionDir)ImGuiDemo\glfw\includeLangage du code : C++ (cpp)
Après modification, les soulignements rouges disparaissent.
Cliquez sur le bouton Exécuter en haut de l’interface
Si l’erreur « cannot open file ‘glfw3.lib’ » apparaît :
La cause est identique au problème précédent : les chemins des bibliothèques GLFW sont mal renseignés. Ajoutez le dossier ImGuiDemo\ au chemin précédemment configuré.
Mettez à jour le chemin des bibliothèques :
$(SolutionDir)ImGuiDemo\glfw\lib-vc2022Langage du code : JavaScript (javascript)Lancez le programme une nouvelle fois
Voilà, notre premier exemple fonctionnel est terminé : du téléchargement des dépendances jusqu’à l’exécution finale. Vous pouvez reproduire les étapes par vous-même. Nous approfondirons ImGui dans les prochains tutoriels.