덧셈 기능을 만들어보겠습니다. 숫자를 입력하는 두 개의 입력창, 가운데 더하기 기호, 등호 버튼을 배치하고 두 숫자를 입력한 뒤 = 버튼을 누르면 연산 결과가 세 번째 입력 상자에 표시됩니다.
기능 자체는 매우 간단하지만 이 예제를 통해 ImGui의 기본 폼 위젯 사용법을 익힐 수 있습니다.
먼저 실행했을 때의 화면 스크린샷을 확인하겠습니다
아주 간소한 예제 코드로 전체 대부분의 코드는 지난 시간 예제와 거의 동일하며 오직 UI 렌더링 부분만 로직이 다릅니다. 숫자 값을 저장하는 변수를 몇 개 추가했고 테마는 밝은 모드로 변경해 일반 데스크톱 GUI 프로그램과 비슷한 시각적 느낌을 줍니다.
#pragma comment(linker, "/SUBSYSTEM:windows /ENTRY:mainCRTStartup")
#include <GLFW/glfw3.h>
#include "imgui.h"
#include "backends/imgui_impl_glfw.h"
#include "backends/imgui_impl_opengl3.h"
#include <cstdio>
int main()
{
if (!glfwInit())
{
printf("GLFW 초기화에 실패했습니다\n");
return -1;
}
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(500, 200, "덧셈 계산기", nullptr, nullptr); //창 크기와 제목
if (!window)
{
glfwTerminate();
return -1;
}
glfwMakeContextCurrent(window);
glfwSwapInterval(1);
IMGUI_CHECKVERSION();
ImGui::CreateContext();
ImGuiIO& io = ImGui::GetIO();
ImGui::StyleColorsLight(); //밝은 테마로 설정
ImGui_ImplGlfw_InitForOpenGL(window, true);
ImGui_ImplOpenGL3_Init(glsl_version);
// 덧셈 계산기 전역 변수
float num1 = 0.0f; // 첫 번째 덧셈수
float num2 = 0.0f; // 두 번째 덧셈수
float result = 0.0f; // 두 수를 더한 결과값
while (!glfwWindowShouldClose(window))
{
glfwPollEvents();
ImGui_ImplOpenGL3_NewFrame();
ImGui_ImplGlfw_NewFrame();
ImGui::NewFrame();
ImGui::SetNextWindowPos(ImVec2(0, 0));
ImGui::SetNextWindowSize(io.DisplaySize);
ImGuiWindowFlags window_flags = ImGuiWindowFlags_NoDecoration
| ImGuiWindowFlags_NoMove
| ImGuiWindowFlags_NoResize
| ImGuiWindowFlags_NoSavedSettings;
ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 0.0f);
ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 0.0f);
ImGui::Begin("제어판", nullptr, window_flags);
// 계산기 제목 텍스트
ImGui::Text("두 개의 숫자를 입력하세요"); //정적 텍스트 위젯, 기본적으로 한 줄 전체 차지
ImGui::Spacing();// 수직 간격 추가
// 첫 번째 숫자 입력창, 너비 120픽셀
ImGui::SetNextItemWidth(120);// 다음 위젯의 너비 지정, 자체적으로 화면 요소를 출력하지 않음
ImGui::InputFloat("##num1", &num1);// 실수 입력 상자, num1 변수와 연결, 라벨 숨김, 한 줄 단독 표시
// 같은 줄에 더하기 기호 렌더링
ImGui::SameLine(); //다음 위젯을 같은 가로줄에 표시. 호출하지 않으면 자동 줄바꿈
ImGui::Text(" + "); //더하기 기호를 앞 입력창과 같은 줄에 보여줌
// 두 번째 숫자 입력창
ImGui::SameLine(); //여러 위젯을 가로로 배치하려면 렌더링 전 매번 호출해야 함
ImGui::SetNextItemWidth(120);// 두 번째 입력창 너비 설정
ImGui::InputFloat("##num2", &num2);
// 등호 버튼, 클릭 시 덧셈 연산 실행
ImGui::SameLine();
if (ImGui::Button(" = ", ImVec2(40, 0)))
{
// 두 숫자의 합을 계산해 결과 변수에 저장
result = num1 + num2;
}
// 읽기 전용 결과 입력창, 소수점 두 자리로 표시, 직접 수정 불가
ImGui::SameLine();
ImGui::SetNextItemWidth(180);
ImGui::InputFloat("##result", &result, 0.0f, 0.0f, "%.2f", ImGuiInputTextFlags_ReadOnly);
ImGui::End();
// 임시 저장한 스타일 변수를 팝해 기본 UI 스타일로 복구
ImGui::PopStyleVar(2);
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)밝은 테마를 적용하려면 단 한 줄만 수정하면 됩니다：ImGui::StyleColorsLight(); //UI를 밝은 색 테마로 변경
창 제목과 크기를 조절하려면 이 줄을 수정하세요： GLFWwindow* window = glfwCreateWindow(400, 60, “덧셈 계산기”, nullptr, nullptr); //창 가로, 세로 크기 및 제목 텍스트 정의
ImGui::Text("두 개의 숫자를 입력하세요");
ImGui::Spacing(); //제목 텍스트와 아래 입력 위젯 사이 수직 여백 생성Code language: PHP (php)첫 번째 줄에 고정 텍스트를 출력하고 다음 줄에 수직 간격을 삽입합니다.
기타 위젯 속성은 위 코드 주석을 참고하시기 바랍니다. 기본적으로 Text, InputFloat, Button은 각자 한 줄을 차지합니다. 줄바꿈 없이 가로로 나열하고 싶다면 렌더링 전 ImGui::SameLine();을 호출하면 됩니다.
다음에 렌더링할 위젯의 너비를 직접 지정하려면 SetNextItemWidth() 함수를 사용합니다.
버튼 클릭 처리 방식
if (ImGui::Button(" = ", ImVec2(40, 0)))
{
// 두 숫자의 합을 계산하고 결과 변수에 저장
result = num1 + num2;
}Code language: C++ (cpp)이 코드에서 ImGui::Button(” = “, ImVec2(40, 0))는 상호작용 버튼을 생성합니다. 첫 번째 인수는 버튼 표시 텍스트, 두 번째 인수는 가로세로 크기이며 높이를 0으로 지정하면 기본 위젯 높이에 자동 맞춤됩니다.
마우스를 버튼 영역 내에서 누르고 떼는 완전한 클릭 동작일 때만 true를 반환하고 나머지 모든 상태에서는 false를 반환합니다. 반환값이 true일 경우 중괄호 {} 안의 코드가 실행됩니다.
전체 구조를 계속 반복하는 렌더링 루프로 생각하면 쉽습니다. 화면은 매 프레임 갱신되며 while문 내부의 모든 코드가 매번 실행됩니다. 사용자가 아무 조작도 하지 않으면 매 프레임 동일한 화면이 출력되고, 어느 한 프레임에서 버튼을 클릭하면 ImGui::Button()이 true를 리턴하며 연산 로직이 실행됩니다.
버튼 내부 코드는 두 입력박스에 바인딩된 숫자를 더해 result 변수에 저장한 뒤, 같은 행의 결과 출력 위젯을 렌더링합니다.
ImGui::SameLine();
ImGui::SetNextItemWidth(180);
ImGui::InputFloat("##result", &result, 0.0f, 0.0f, "%.2f", ImGuiInputTextFlags_ReadOnly);Code language: C++ (cpp)이 코드는 등호 버튼과 동일한 가로줄에 위치하며, 방금 계산한 합계 값을 세 번째 입력창에 표시합니다. 이 입력창은 읽기 전용으로 설정되어 사용자가 직접 수치를 수정할 수 없습니다.
한 프레임 렌더링이 완료된 후 다음 갱신 주기에서 별도 조작이 없으면 이전에 계산된 결과가 계속 화면에 출력됩니다.
이 렌더링 순서는 게임의 프레임 처리 방식과 완전히 동일하며, 게임 애니메이션도 이 반복 갱신 로직으로 구현됩니다.