¿Qué es ImGUI?
ImGUI (Interfaz de Usuario Gráfica Inmediata) es una biblioteca de UI para C++ que fue creada por el desarrollador de videojuegos Omar Cornut en 2014. ImGUI se enfoca en ser fácil de usar, liviano y rápido. Esto hace que sea una herramienta útil para la creación de aplicaciones de tiempo real, como videojuegos, pero también puede ser utilizada en aplicaciones de escritorio.
Aqui hay algunos ejemplos, obtenidos desde la comunidad:
Puedes revisar que otras cosas esta haciendo la comunidad con ImGUI en este thread
¿Por qué ImGUI es útil?
ImGUI es una herramienta útil para los desarrolladores de aplicaciones porque simplifica la creación de interfaces gráficas. Con ImGUI, el desarrollador no necesita preocuparse por el diseño y la implementación de una UI desde cero. En lugar de eso, ImGUI proporciona una serie de widgets (elementos de UI) predefinidos que el desarrollador puede utilizar para construir la UI de la aplicación. Estos widgets incluyen botones, cajas de texto, menús desplegables, barras de progreso y más. Además, ImGUI permite al desarrollador personalizar estos widgets para adaptarse a las necesidades específicas de la aplicación.
Otra ventaja de ImGUI es que es liviano y rápido. ImGUI utiliza la GPU (unidad de procesamiento gráfico) para renderizar la UI de la aplicación. Esto significa que la carga de procesamiento se distribuye entre la CPU y la GPU, lo que resulta en una UI más rápida y fluida.
Ademas, al ser una biblioteca de C++ es multiplataforma, pudiendo ser compilado para Windows y Linux sin problemas con la misma fuente de codigo.
¿Cómo usar ImGUI?
Usar ImGUI es bastante sencillo. Primero, el desarrollador debe descargar la biblioteca de la página oficial de GitHub de ImGUI. A continuación, se debe agregar la biblioteca al proyecto de C++ y agregar el archivo de encabezado de ImGUI al archivo principal del proyecto.
Una vez que ImGUI está agregado al proyecto, el desarrollador puede comenzar a construir la UI de la aplicación utilizando los widgets predefinidos de ImGUI. Para hacer esto, el desarrollador debe definir una función de bucle de eventos en el archivo principal del proyecto. Esta función será responsable de dibujar la UI y manejar los eventos de entrada del usuario.
ImGUI cuenta con ejemplos que permiten comenzar en solo unos minutos. Ahora veremos un ejemplo comenzando desde un proyecto vacio hasta agregar ImGUI y ver el clasico ¡Hola Mundo!
Crear el Proyecto
Para este proyecto utilizaremos Visual Studio y comenzaremos con un proyecto en blanco:
Luego descargaremos ImGUI de Github y copiaremos los archivos en la raiz del repositorio a nuestro proyecto.
Para comenza con ImGUI tambien necesitamos definir que backend usaremos (como se renderizara la interfaz) como estamos trabajando en Windows usaremos Directx12. Ten en cuenta que si quieres hacer una aplicacion multiplataforma deberas utilizar Vulkan. Copiamos los archivos del backend que escogimos a nuestro proyecto
Ahora como Archivo principal copiaremos el ejemplo que corresponde al Backend que escogimos, desde la carpeta examples/ del repositorio. Aqui se define el main loop y se inicializan todos los recursos necesarios para que funcione nuestra aplicacion.
Como ultimo paso hay que decirle a Visual Studio que incluya las librerias que correspoden al backend, en este caso Directx12, eso se hace en las propiedades del proyecto en Vinculador o Linker. Sino lo haces, al compilar dara errores de Linking avisando que no encuentra simbolos de funciones que se llaman en el main.cpp
Si son muchos pasos siempre puedes comenzar desde el proyecto de ejemplo que viene en la carpeta examples/ del repositorio de ImGui.
Y ya estamos listos. Asi se ve la aplicacion si le das compilar a main.cpp:
Aunque para este ejemplo muestra los recursos de demo, puedes crear diferentes pantallas en diferentes archivos e incluirlos segun se desee en el main loop.
ImGUI viene con ejemplos de todos los recursos que ofrece donde puedes investigar mas y extraer el codigo fuente de los ejemplos buscandolos en el archivo imgui_demo.cpp. Ademas, vienen muchos personalizaciones para la interfaz como el tipo de letra, esquinas redondeadas, tamaño de los elementos que afectan de manera general y asi puedes darle tu propio estilo a la interfaz.
ImGUI tambien cuenta con plugins desarrollados por la comunidad que agregan funcionalidad a la biblioteca, uno que quizas quieras revisar es ImPlot que permite generar graficos y presentarlos en la interfaz:
