SDL3 là phiên bản mới của thư viện Simple DirectMedia Layer, mang lại nhiều cải tiến so với SDL2. Bài viết này hướng dẫn cách sử dụng SDL3 để tạo cửa sổ, vẽ hình học và hiển thị hình ảnh.

Thiết lập thư viện

Để làm việc với định dạng hình ảnh như PNG, bạn cần cài đặt cả SDL3 và SDL3_image. Các bước cấu hình môi trường có thể tham khảo từ hướng dẫn dành cho SDL2.

#include <SDL3/SDL.h>
#include <SDL3_image/SDL_image.h>

Khởi tạo hệ thống

Bắt đầu bằng việc khởi tạo hệ thống video:

if (SDL_Init(SDL_INIT_VIDEO) < 0) {
    // xử lý lỗi
}

Hàm SDL_Init() hỗ trợ nhiều cờ như SDL_INIT_AUDIO, SDL_INIT_JOYSTICK, v.v., tùy theo tính năng cần dùng.

Tạo cửa sổ và bộ kết xuất

SDL_Window* win = SDL_CreateWindow("Ứng dụng SDL3", 800, 600, SDL_WINDOW_RESIZABLE);
SDL_Renderer* renderer = SDL_CreateRenderer(win, nullptr);

Cửa sổ được tạo với tiêu đề, kích thước và thuộc tính (ở đây là có thể thay đổi kích cỡ). Bộ kết xuất (renderer) sẽ chịu trách nhiệm vẽ nội dung lên cửa sổ.

Vòng lặp sự kiện và kết xuất

Chương trình chạy trong một vòng lặp xử lý sự kiện:

SDL_Event evt;
bool running = true;

while (running) {
    SDL_WaitEvent(&evt);

    switch (evt.type) {
        case SDL_EVENT_QUIT:
            running = false;
            break;
        case SDL_EVENT_KEY_DOWN:
            if (evt.key.key == SDLK_ESCAPE)
                running = false;
            break;
        case SDL_EVENT_WINDOW_EXPOSED:
            // Vẽ lại nội dung khi cửa sổ cần cập nhật
            SDL_SetRenderDrawColor(renderer, 255, 255, 255, 255);
            SDL_RenderClear(renderer);
            
            // Vẽ nội dung ở đây
            
            SDL_RenderPresent(renderer);
            break;
    }
}

Vẽ hình học

SDL3 sử dụng cấu trúc SDL_Vertex để định nghĩa đỉnh, với tọa độ và màu sắc (dạng chuẩn hóa từ 0.0 đến 1.0):

std::array<SDL_Vertex, 3> triangle = {{
    {{200, 100}, {1.0f, 0.0f, 0.0f, 1.0f}},
    {{100, 300}, {0.0f, 1.0f, 0.0f, 1.0f}},
    {{300, 300}, {0.0f, 0.0f, 1.0f, 1.0f}}
}};

SDL_RenderGeometry(renderer, nullptr, triangle.data(), triangle.size(), nullptr, 0);

Hiển thị hình ảnh

Sử dụng SDL3_image để tải texture từ tệp PNG:

SDL_Texture* img = IMG_LoadTexture(renderer, "assets/sprite.png");
if (!img) { /* xử lý lỗi */ }

SDL_SetTextureBlendMode(img, SDL_BLENDMODE_BLEND);
SDL_SetTextureScaleMode(img, SDL_SCALEMODE_NEAREST);

// Vẽ toàn bộ texture tại vị trí mặc định
SDL_RenderTexture(renderer, img, nullptr, nullptr);

Hàm SDL_RenderTexture cho phép chỉ định vùng nguồn và đích thông qua con trỏ tới SDL_FRect. Nếu truyền nullptr, toàn bộ texture sẽ được vẽ tại góc trên trái.

Lưu ý quan trọng

Khi triển khai ứng dụng, đảm bảo tệp tài nguyên (hình ảnh) tồn tại trong thư mục thực thi, không chỉ trong thư mục mã nguồn — nếu không, chương trình có thể chạy được trong IDE nhưng thất bại khi chạy độc lập.