ImGuiで簡単な足し算電卓を実装する

足し算機能を作成します。2つの数値入力欄、中央のプラス記号、イコールボタンを配置し、2つの数字を入力後「＝」をクリックすると計算結果が3番目の入力ボックスに表示される仕組みです。

機能自体は非常に単純ですが、このサンプルを通して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;    // 1つ目の加数
    float num2 = 0.0f;    // 2つ目の加数
    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("数字を2つ入力してください"); //固定テキスト、デフォルトで1行を占有
	ImGui::Spacing();// 垂直方向の余白を追加

        // 1つ目の数値入力欄、幅120px
	ImGui::SetNextItemWidth(120);// 直後のウィジェットの幅を指定、描画要素は出力しない
	ImGui::InputFloat("##num1", &num1);// float入力欄、num1と紐付け、ラベル非表示、単独行表示

        // 同じ行にプラス記号を描画
	ImGui::SameLine(); //次のウィジェットを同一行に配置。呼び出さない場合は自動改行
	ImGui::Text(" + "); //プラス記号を先ほどの入力欄と同じ行に表示

        // 2つ目の数値入力欄
	ImGui::SameLine(); //複数ウィジェットを横並びにする場合は描画前に毎回呼び出す
        ImGui::SetNextItemWidth(120);// 2番目の入力欄の幅設定
        ImGui::InputFloat("##num2", &num2);

        // イコールボタン、クリック時に足し算を実行
        ImGui::SameLine();
        if (ImGui::Button(" = ", ImVec2(40, 0)))
        {
            // 2つの数値を合計し結果変数に代入
            result = num1 + num2;
        }

        // 読み取り専用の結果表示欄、小数点2桁で表示、手動編集不可
        ImGui::SameLine();
        ImGui::SetNextItemWidth(180);
        ImGui::InputFloat("##result", &result, 0.0f, 0.0f, "%.2f", ImGuiInputTextFlags_ReadOnly);

        ImGui::End();

	// 一時保存したスタイル変数を戻し、デフォルトスタイルに復元
        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)

ライトテーマを有効にするには1行変更するだけです：ImGui::StyleColorsLight(); //UIをライトカラーテーマに切り替え

ウィンドウのタイトルとサイズを変更するにはこの行を編集します： GLFWwindow* window = glfwCreateWindow(400, 60, “足し算電卓”, nullptr, nullptr); //ウィンドウの幅、高さ、タイトルテキストを定義

ImGui::Text("数字を2つ入力してください");

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)

이 코드는 등호 버튼과 동일한 가로줄에 위치하며, 방금 계산한 합계 값을 세 번째 입력창에 표시합니다. 이 입력창은 읽기 전용으로 설정되어 사용자가 직접 수치를 수정할 수 없습니다.

한 프레임 렌더링이 완료된 후 다음 갱신 주기에서 별도 조작이 없으면 이전에 계산된 결과가 계속 화면에 출력됩니다.

이 렌더링 순서는 게임의 프레임 처리 방식과 완전히 동일하며, 게임 애니메이션도 이 반복 갱신 로직으로 구현됩니다.