Tutorial Raylib C++ #1: Menyiapkan Kanvas Pertama

Selamat datang di dunia pemrograman grafis.

Jika selama ini Anda terbiasa dengan C++ yang hanya menghasilkan teks putih di layar hitam (Console Application), materi ini adalah pintu gerbang menuju dunia visual. Kita tidak lagi hanya berurusan dengan cout dan cin, tetapi dengan pixel, frame, dan loop.

Library yang kita gunakan adalah Raylib. Kenapa Raylib? Karena ia ditulis dengan C murni, sangat ringan, dan membiarkan kita “menyetir” kode secara manual tanpa sembunyi di balik engine yang berat.

Mari kita mulai dengan langkah paling fundamental: Membuka Jendela (Window).

1. Persiapan Lingkungan (Fedora Linux)

Sebelum menulis kode, pastikan “bengkel” kita sudah siap. Pada Fedora Linux, Raylib dan dependensinya bisa diinstal dengan satu baris perintah terminal:

sudo dnf install raylib-devel libX11-devel libXrandr-devel libXinerama-devel libXi-devel libXcursor-devel mesa-libGL-devel

• raylib-devel: Library inti Raylib.
• libX…: Library penghubung agar Raylib bisa “mengobrol” dengan sistem window Linux (X11).
• mesa-libGL: Driver grafis OpenGL.

2. Kode Sumber: The Skeleton

Buatlah sebuah file bernama hello_window.cpp. Ketiklah kode di bawah ini. Jangan sekadar copy-paste, cobalah mengetik untuk membiasakan memori otot (muscle memory) Anda dengan sintaks Raylib.

#include "raylib.h"

int main(void)
{
    // --- TAHAP 1: INISIALISASI (SETUP) ---
    // Menentukan ukuran jendela (dalam pixel)
    const int screenWidth = 800;
    const int screenHeight = 450;

    // Perintah untuk meminta OS membuka jendela aplikasi
    InitWindow(screenWidth, screenHeight, "Tutorial Raylib #1 - Hello Window");

    // PENTING: Mengunci kecepatan aplikasi agar stabil
    SetTargetFPS(60);

    // --- TAHAP 2: GAME LOOP (INTI PROGRAM) ---
    // Program akan terus berputar di sini selama jendela tidak ditutup
    while (!WindowShouldClose())    
    {
        // (Area Update: Logika program di sini - nanti kita bahas)

        // (Area Draw: Menggambar ke layar)
        BeginDrawing();

            // 1. Hapus layar frame sebelumnya dengan warna putih
            ClearBackground(RAYWHITE);

            // 2. Tulis sesuatu
            DrawText("Selamat Datang di Raylib C++!", 190, 200, 20, LIGHTGRAY);

        EndDrawing();
    }

    // --- TAHAP 3: DE-INISIALISASI (CLEANUP) ---
    // Tutup jendela dan kembalikan memori ke Sistem Operasi
    CloseWindow();

    return 0;
}

3. Bedah Anatomi (Deep Dive)

Mari kita bedah kode di atas baris demi baris. Ini adalah bagian terpenting untuk memahami mengapa kode grafis berbeda dengan kode biasa.

A. InitWindow(width, height, title)

Di C++ biasa, jendela konsol (terminal) sudah disediakan oleh OS. Di Raylib, Anda adalah Tuhan bagi aplikasi Anda. Andalah yang harus menciptakan jendelanya. Fungsi ini menyiapkan memori video (VRAM) dan konteks OpenGL.

B. SetTargetFPS(60)

Ini adalah perintah yang sering dilupakan pemula, tapi fatal akibatnya.

• Tanpa baris ini: Komputer akan mencoba menjalankan loop secepat mungkin (bisa 2.000 – 3.000 kali per detik). Akibatnya? CPU bekerja 100%, kipas laptop menjerit, dan animasi berjalan terlalu cepat (glitch).
• Dengan baris ini: Kita berkata, “Hei Raylib, santai saja. Cukup gambar ulang layar 60 kali dalam satu detik.” Ini membuat gerakan halus dan hemat baterai.

C. while (!WindowShouldClose()) -> The Game Loop

Inilah perbedaan mental terbesar.

• Aplikasi Biasa (Blocking): Program diam menunggu cin >> input.
• Aplikasi Grafis (Polling): Program tidak boleh tidur. Ia harus terus berlari dalam lingkaran (loop).
  • Apakah user menekan tombol?
  • Hitung posisi baru.
  • Gambar ulang layar.
  • Ulangi.

Fungsi WindowShouldClose() akan bernilai false terus menerus, dan berubah menjadi true hanya saat Anda menekan tombol ESC atau mengklik tombol Silang (X) di pojok jendela.

D. BeginDrawing() & EndDrawing()

Raylib menggunakan teknik canggih bernama Double Buffering.

Bayangkan Anda sedang melukis di panggung pertunjukan:

1. Jika Anda melukis langsung di depan penonton, penonton akan melihat tangan Anda coret-coret (layar berkedip/flickering).
2. Solusinya: Anda melukis di belakang panggung (Back Buffer).
3. Saat perintah EndDrawing() dipanggil, lukisan yang sudah jadi di belakang panggung langsung ditukar ke depan panggung dalam sekejap mata.

Jadi, semua perintah Draw... wajib ditulis di antara dua fungsi ini.

E. ClearBackground(COLOR)

Coba hapus baris ini, dan jalankan program. Apa yang terjadi?

Teks akan terlihat bertumpuk-tumpuk berantakan. Mengapa? Karena frame lama tidak dihapus. ClearBackground ibarat penghapus papan tulis. Sebelum menggambar hal baru, bersihkan dulu papan tulisnya.

4. Cara Kompilasi (The Build Process)

Simpan kode di atas. Buka terminal di folder yang sama, lalu jalankan perintah “mantra” berikut:

g++ hello_window.cpp -lraylib -lGL -lm -lpthread -ldl -lrt -lX11 -o aplikasi_pertama

Penjelasan Singkat Flag:

• -lraylib: Link ke library Raylib.
• -lGL: Link ke OpenGL (Grafis).
• -lm: Link ke Math library (Sinus, Cosinus, dll).
• -lpthread: Multithreading (agar input dan audio bisa jalan bareng).
• -o aplikasi_pertama: Nama file hasil jadinya.

5. Menjalankan Aplikasi

Ketik:

./aplikasi_pertama

Sebuah jendela putih berukuran 800×450 pixel akan muncul dengan teks di tengahnya. Selamat! Anda baru saja membangun aplikasi grafis real-time pertama Anda.

Tantangan untuk Pembaca

Jangan hanya membaca! Cobalah modifikasi kode di atas:

1. Ubah ukuran jendela menjadi Full HD (1920 x 1080).
2. Ganti warna background (RAYWHITE) menjadi warna lain (coba RED, BLUE, atau BLACK).
3. Ubah teks yang ditampilkan dan geser posisinya ke pojok kanan bawah.

Di materi selanjutnya (Tutorial #2), kita akan belajar menggambar Bentuk Primitif (Kotak, Lingkaran) dan memahami Sistem Koordinat Terbalik yang sering membingungkan pemula.

Sampai jumpa di kode berikutnya!