Konfigurasi SFML dan Membuat Program Grafis Pertama di Visual Studio

SFML (Simple and Fast Multimedia Library) adalah salah satu library populer berbasis C++ yang digunakan untuk menangani elemen multimedia seperti grafis 2D, audio, jaringan, hingga window management.

Jika kamu baru memulai perjalanan dalam pemrograman grafis C++, mengonfigurasikan SFML di Visual Studio terkadang terasa sedikit rumit. Artikel ini akan membimbingmu langkah demi langkah—mulai dari penataan folder, konfigurasi project di Visual Studio, penanganan aset, hingga menjalankan program grafis pertamamu!

1. Persiapan dan Penataan Folder Project

Akurasi path atau lokasi folder sangat krusial saat bekerja dengan library eksternal. Agar manajemen project kamu rapi dan tidak membingungkan, ikuti struktur direktori berikut.

  1. Unduh SFML: Ambil berkas SFML dari Situs Resmi SFML Download.

  2. Buat Folder Utama: Buat direktori kerja di komputer kamu, misalnya:

    D:/R01TI/123456/SFML/

  3. Ekstrak External Library: Di dalam folder di atas, buat direktori baru bernama External Libraries/SFML, lalu ekstrak berkas hasil unduhan SFML ke dalamnya.

Struktur folder akhir kamu akan tampak seperti ini:

Plaintext 
D:/R01TI/123456/SFML/
└── External Libraries/
    └── SFML/
        ├── bin/
        ├── include/
        └── lib/

2. Membuat dan Mengonfigurasi Project Visual Studio

Setelah direktori disiapkan, langkah selanjutnya adalah menyambungkan Visual Studio dengan library SFML.

Langkah A: Membuat Project Baru

  1. Jalankan Microsoft Visual Studio.

  2. Pilih New Project > Visual C++ > Win32 Console Application.

  3. Atur lokasi simpan (Location) ke D:/R01TI/123456/SFML/.

  4. Pada jendela Application Settings, centang Console application, lalu klik OK.

Langkah B: Menghubungkan Include & Library Path

  1. Klik kanan pada nama project kamu di jendela Solution Explorer, lalu pilih Properties.

  2. Pada opsi Configuration (di pojok kiri atas), ubah menjadi All Configurations.

  3. Buka tab Configuration Properties > VC++ Directories:

    • Include Directories: Isikan $(SolutionDir)/../External Libraries/SFML/include

    • Library Directories: Isikan $(SolutionDir)/../External Libraries/SFML/lib

Langkah C: Menambahkan Dependencies (.lib)

  1. Masih di jendela Properties, navigasi ke Linker > Input.

  2. Pada bagian Additional Dependencies, tambahkan daftar library SFML berikut:

    Plaintext 
    sfml-audio-d.lib
sfml-graphics-d.lib
sfml-main-d.lib
sfml-network-d.lib
sfml-system-d.lib
sfml-window-d.lib

  3. Klik Apply, lalu tekan OK.

Langkah D: Menyalin File Runtime (.dll)

Agar aplikasi dapat berjalan saat di-run, aplikasi membutuhkan berkas Dynamic Link Library (.dll).

  1. Buka folder D:/R01TI/123456/SFML/External Libraries/SFML/bin/.

  2. Salin (copy) semua file .dll yang ada di folder tersebut.

  3. Tempel (paste) ke dalam folder utama project kamu (folder tempat file main.cpp atau .vcxproj berada).

3. Menata Folder Aset (Font & Gambar)

Salah satu kendala umum yang sering memicu error "Error loading file" adalah lokasi aset yang tidak sesuai dengan panggilan kode.

Di dalam direktori project kamu (sejajar dengan file main.cpp), buatlah struktur folder khusus untuk menampung aset:

Plaintext 
Folder_Project_Kamu/
├── main.cpp
├── Project.vcxproj
├── sfml-graphics-2.dll
│
└── res/
    └── fonts/
        └── arial.ttf   <-- Simpan file font kamu di sini

Catatan: Jika program di-build dan dijalankan langsung dari file .exe di dalam folder Debug / Release, pastikan kamu juga menduplikasi folder res/ ini ke dalam folder tempat file .exe tersebut berada.

4. Kode Program Utama (main.cpp)

Buka file main.cpp pada project kamu, hapus seluruh Isinya, dan ganti dengan kode berikut:

C++ 
#include <iostream>
#include <SFML/Graphics.hpp>

int main()
{
    // 1. Inisialisasi Window
    sf::RenderWindow window(sf::VideoMode(640, 480), "Awesome Object - SFML");

    // 2. Load Aset Font
    sf::Font font;
    if (!font.loadFromFile("res/fonts/arial.ttf"))
    {
        std::cout << "[ERROR] Gagal memuat file font! Periksa lokasi folder res/fonts/" << std::endl;
        system("pause");
        return EXIT_FAILURE;
    }

    // 3. Membuat Teks
    sf::Text text;
    text.setFont(font);
    text.setString("SFML Graphics Demo");
    text.setCharacterSize(20);
    text.setFillColor(sf::Color::White);
    text.setPosition(20.0f, 20.0f);

    // 4. Membuat Objek Lingkaran
    sf::CircleShape circle(75.0f);
    circle.setPointCount(200); // Membuat lekukan lingkaran lebih halus
    circle.setPosition(sf::Vector2f(25.0f, 100.0f));
    circle.setFillColor(sf::Color(200, 200, 200));

    // 5. Membuat Objek Persegi Panjang
    sf::RectangleShape rectangle(sf::Vector2f(300.0f, 100.0f));
    rectangle.setPosition(sf::Vector2f(200.0f, 300.0f));
    rectangle.setFillColor(sf::Color(150, 150, 150));

    // 6. Membuat Objek Persegi (Memanfaatkan CircleShape dengan 4 titik)
    sf::CircleShape square(100.0f);
    square.setPointCount(4); 
    square.setPosition(sf::Vector2f(200.0f, 100.0f));
    square.setFillColor(sf::Color(200, 200, 200));

    // 7. Render Loop Utama
    while (window.isOpen())
    {
        sf::Event event;

        // Penanganan Event
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
            {
                window.close();
            }
        }

        // Membersihkan layar dengan warna latar hitam
        window.clear(sf::Color::Black);

        // Rendering/Menggambar objek ke buffer
        window.draw(circle);
        window.draw(rectangle);
        window.draw(square);
        window.draw(text);

        // Menampilkan hasil render ke jendela
        window.display();
    }

    return EXIT_SUCCESS;
}

Kesimpulan

Selamat! Kamu telah berhasil melakukan konfigurasi SFML di Visual Studio dan menjalankan program grafis dasar. Dengan memahami alur linking library dan manajemen path aset yang benar, kamu dapat dengan mudah mengembangkan aplikasi 2D atau game sederhana menggunakan C++ dan SFML.

    Berikut outputnya :  sfml   Berikut video cara install SFML pada Vs.studio