Bagian File Header
#include <GLFW/glfw3.h>Code language: plaintext (plaintext)Memuat file header pustaka jendela GLFW: bertugas membuat jendela, memproses input mouse/keyboard, mengelola konteks OpenGL dan perulangan pesan jendela.
GLFW adalah pustaka berbahasa C yang khusus untuk membuat dan mengelola jendela. Pustaka ini bersifat mandiri, bukan bagian dari ImGui, namun ImGui memerlukan GLFW agar bisa berjalan sehingga wajib dimuat. Pembaca sudah mengunduhnya ke folder proyek dan menyiapkan integrasi di pelajaran sebelumnya.
#include "imgui.h"Code language: plaintext (plaintext)Ini adalah file header inti ImGui, berisi semua kontrol UI, konteks, gaya, API dasar untuk menggambar dan lainnya.
#include "backends/imgui_impl_glfw.h"Code language: plaintext (plaintext)Jembatan penghubung antara ImGui dan GLFW, bertugas meneruskan data jendela, posisi mouse, tombol keyboard, ukuran jendela dari GLFW ke ImGui.
#include "backends/imgui_impl_opengl3.h"Lapisan penyesuaian backend render OpenGL3 untuk ImGui: menghasilkan shader OpenGL, buffer verteks, lalu mengirim data grafis UI ImGui ke GPU untuk digambar.
#include <cstdio>Pustaka input output standar C milik C++, digunakan untuk mencetak log error menggunakan fungsi printf.
int main()Titik masuk program, tidak perlu penjelasan panjang lebar.
Inisialisasi GLFW
// Initialize GLFW
if (!glfwInit())
{
printf("GLFW initialization failed\n");
return -1;
}glfwInit() : menginisialisasi sumber daya global GLFW seperti kartu grafis, driver jendela, perangkat input.
Jika inisialisasi gagal, akan muncul pesan error dan mengembalikan angka -1 sehingga program berhenti secara tidak normal; sistem operasi akan mendeteksi kode error ini.
Pengaturan Versi OpenGL
// OpenGL 3.3
const char* glsl_version = "#version 330";Mendefinisikan string versi shader GLSL, OpenGL 3.3 cocok dengan GLSL versi 330.
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);Mengatur versi utama OpenGL menjadi 3.
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);Mengatur versi minor OpenGL menjadi 3.
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);Menggunakan mode Core Profile (Profil Inti)
Membuat Jendela
// Create window
GLFWwindow* window = glfwCreateWindow(1000, 600, "ImGui Minimal Demo (VS2022)", nullptr, nullptr);Ukuran jendela adalah 1000 × 600 piksel dengan judul “ImGui Minimal Demo (VS2022)”. Parameter ke-4 bernilai nullptr artinya menggunakan mode jendela standar, parameter ke-5 untuk menentukan jendela yang berbagi konteks OpenGL; nullptr berarti tidak berbagi.
Fungsi ini mengembalikan pointer pegangan jendela bertipe GLFWwindow*.
if (!window)
{
glfwTerminate();
return -1;
}Jika pembuatan jendela gagal, pointer window akan bernilai nullptr.
glfwTerminate() berfungsi menghapus semua sumber daya yang dialokasikan GLFW.
Kemudian mengembalikan -1 untuk memberi tahu sistem operasi bahwa program berhenti karena kesalahan.
glfwMakeContextCurrent(window);Mengaitkan jendela saat ini sebagai konteks render OpenGL, semua perintah gambar OpenGL selanjutnya akan diterapkan pada jendela ini.
glfwSwapInterval(1);Mengaktifkan sinkronisasi vertikal. Parameter bernilai 1 akan menunggu setiap pembaruan layar agar frame rate selaras dengan refresh monitor dan mencegah robekan gambar; angka 0 akan mematikan VSync tanpa batas frame.
Pengaturan ini sangat penting. Jika tidak diaktifkan, proses render GLFW dan pembaruan layar tidak sinkron sehingga gambar akan tampil berantakan.
Inisialisasi Global ImGui
IMGUI_CHECKVERSION(); // Memverifikasi kesesuaian versi header dan backend, akan muncul error assertion jika versi berbeda
ImGui::CreateContext(); // Membuat konteks global ImGui yang menyimpan semua status jalannya UI
ImGuiIO& io = ImGui::GetIO(); // Mendapatkan objek konfigurasi IO untuk mengelola input, font, sakelar global dan lainnya
ImGui::StyleColorsDark(); // Memuat tema warna gelap resmi ImGuiMenautkan Backend GLFW+OpenGL
ImGui_ImplGlfw_InitForOpenGL(window, true);Jika parameter kedua diisi true, ImGui akan menguasai semua peristiwa input (mouse, keyboard) dan memblokir input agar tidak masuk ke lapisan bawah game.
ImGui_ImplOpenGL3_Init(glsl_version);Menginisialisasi backend render OpenGL3 dengan string versi GLSL yang dikirimkan, mengkompilasi shader verteks/fragment untuk gambar UI serta membuat buffer GPU.
float slider_value = 0.5f; // Nilai yang terhubung dengan slider
int click_count = 0; // Penghitung klik tombol
bool show_full_demo = false; // Mengontrol tampilan jendela demo resmi ImGuiVariabel di atas digunakan untuk menyimpan nilai setiap kontrol UI. Setiap kali UI diperbarui, nilai akan dibaca atau diubah dan tetap tersimpan antar frame.
Perulangan Render Utama
Inti dari program, dijalankan puluhan hingga ratusan kali setiap detik.
while (!glfwWindowShouldClose(window))Selama jendela belum menerima sinyal tutup (klik tombol X di pojok kanan atas atau tekan Alt+F4), proses render akan terus berjalan.
glfwPollEvents();Mengecek semua pesan sistem jendela, misal klik/geser mouse, tekan tombol keyboard, ubah ukuran jendela, tutup jendela dan sebagainya.
ImGui_ImplOpenGL3_NewFrame();Pemrosesan awal backend OpenGL tiap frame: mereset sumber daya render dan menyiapkan buffer untuk frame berikutnya.
ImGui_ImplGlfw_NewFrame();Pemrosesan awal backend GLFW tiap frame: membaca koordinat mouse saat ini, status tombol keyboard dan ukuran jendela lalu memasukkannya ke data input IO ImGui.
ImGui::NewFrame();Memulai perhitungan tata letak frame UI baru, wajib dipanggil sebelum semua kode kontrol ImGui::xxx(). Di dalamnya akan menghapus perintah gambar frame sebelumnya dan bersiap mengumpulkan data UI frame saat ini.
Bagian Membangun Data Kontrol UI
// Draw custom UI panel
ImGui::Begin("Control Panel"); // Membuka jendela panel kontrol buatan sendiri
ImGui::Text("Hello ImGui + VS2022"); // Menampilkan teks statis
ImGui::SliderFloat("Slider Value", &slider_value, 0.f, 1.f); // Slider bilangan pecah yang terhubung variabel
if (ImGui::Button("Click to Count")) // Membuat tombol klik, mengembalikan true jika ditekan
click_count++; // Tambah penghitung tiap kali tombol diklik
ImGui::SameLine(); // Tampilkan kontrol berikutnya di baris yang sama
ImGui::Text("Click Count: %d", click_count); // Cetak jumlah klik tombol
ImGui::Checkbox("Show Full ImGui Demo Window", &show_full_demo); // Kotak centang untuk tampil/sembunyi jendela demo
ImGui::End(); // Mengakhiri gambar jendela buatan saat ini
if (show_full_demo)
ImGui::ShowDemoWindow(&show_full_demo); // Membuka jendela demo lengkap resmi ImGuiBlok ini akan menggambar antarmuka setiap kali perulangan berjalan, mendeteksi apakah tombol diklik lalu menambah penghitung dan menampilkan angkanya.
Bagian Render Gambar Sebenarnya
// Render ImGui draw data
ImGui::Render(); // Menghasilkan data gambar verteks frame UI saat ini
int width, height;
glfwGetFramebufferSize(window, &width, &height); // Mendapatkan resolusi render asli jendela
glViewport(0, 0, width, height); // Mengatur area tampilan OpenGL agar memenuhi seluruh jendela
glClearColor(0.12f, 0.12f, 0.12f, 1.f); // Menentukan warna latar bersih jendela (abu-abu tua)
glClear(GL_COLOR_BUFFER_BIT); // Membersihkan buffer warna kanvas gambar
ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());// Menggambar seluruh antarmuka ImGui menggunakan OpenGL
glfwSwapBuffers(window); // Menukar buffer depan dan belakang untuk menampilkan gambar akhirBagian Pembersihan Sumber Daya Setelah Keluar
Kode di bawah digunakan untuk membersihkan semua sumber daya yang dipakai ketika pengguna menutup program.
// Cleanup resources
ImGui_ImplOpenGL3_Shutdown(); // Melepas sumber daya backend OpenGL (shader, buffer dan lain-lain)
ImGui_ImplGlfw_Shutdown(); // Melepas sumber daya backend penghubung GLFW
ImGui::DestroyContext(); // Menghapus konteks global ImGui dan membebaskan memori UI
glfwDestroyWindow(window); // Menutup jendela GLFW dan menghapus pegangan jendela
glfwTerminate(); // Melepas pustaka GLFW sepenuhnya, membebaskan semua sumber daya jendela/input global
return 0; // Program berhenti normal, mengembalikan kode sukses 0Urutan penghapusan sumber daya berkebalikan dengan urutan inisialisasi, guna mencegah kebocoran memori dan sisa sumber daya yang tertinggal.
Baiklah, penjelasan contoh dari pelajaran sebelumnya selesai. Jika ada hal yang kurang paham, silakan tulis komentar di bawah.
