Menampilkan Gambar dengan Texture dan Renderer ~ Pemrograman dan Teknologi

Sebelumnya, kita menggunakan SDL_Surface dari window yang kita gunakan untuk menampilkan gambar. Sekarang kita akan menggunakan SDL_renderer untuk menampilkan garis, gambar. SDL_Renderer bisa memproses dan menampilkan gambar dengan lebih cepat di window jika dibandingkan dengan SDL_Surface karena ada penyesuaian dengan driver yang digunakan. Walaupun begitu, keduanya punya kekurangan dan kelebihan masing-masing.

Kalian masih tetap perlu menggunakan SDL_Surface untuk menyimpan surface dari gambar atau untuk membuat layer. Kalau tujuan kalian adalah untuk membuat game, sebaiknya gunakan SDL_Renderer.

Renderer dalam SDL menggunakan variabel bertipe SDL_Texture*, atau singkatnya kita sebut texture. Karena gambar dalam SDL dimuat dengan variabel bertipe SDL_Surface, maka kita harus mengubah surface dari gambar menjadi texture dengan SDL_CreateTextureFromSurface. Setelah gambar dipindahkan ke texture, surface hasil kembalian dari IMG_Load atau SDL_LoadBMP tidak akan diperlukan lagi setelah itu. Kalian perlu membersihkan memori yang tersimpan dalam variabel dengan SDL_FreeSurface. Supaya lebih paham, lebih baik kalian coba sendiri dan analisa program berikut ini.

#include <SDL2/SDL.h>
#include <SDL2/SDL_image.h>

int main(int argc, char* args[]){
    SDL_Window* window = NULL;
    SDL_Event evt;
    SDL_Rect rct, rcd;
    SDL_Texture *gambar;

    if( SDL_Init( SDL_INIT_VIDEO ) < 0){
        printf( "Error: %s\n", SDL_GetError() );
    }else{
        window = SDL_CreateWindow( "SDLku", SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, 640, 480, SDL_WINDOW_SHOWN );
        if( window == NULL ){
            printf( "Error : %s", SDL_GetError() );
        }else{
            SDL_Renderer *trender = SDL_CreateRenderer( window, -1, SDL_RENDERER_ACCELERATED);
            SDL_Surface *tmp=IMG_Load("gambar.png");
            int panjang=tmp->w;
            int tinggi=tmp->h;
            if(tmp){
                gambar=SDL_CreateTextureFromSurface(trender, tmp);
                SDL_FreeSurface(tmp);
            }

            while(evt.type!=SDL_QUIT){
                while(SDL_PollEvent(&evt)){
                }
                SDL_SetRenderDrawColor(trender, 0xFF, 0xFF, 0xFF, 0xFF);
                SDL_RenderClear(trender);

                rct.x=0;
                rct.y=0;
                rct.w=300;
                rct.h=200;
                SDL_SetRenderDrawColor(trender, 0xFF, 0xFF, 0x00, 0xFF);
                SDL_RenderFillRect(trender, &rct);

                SDL_SetRenderDrawColor(trender, 0xFF, 0x00, 0xFF, 0xFF);
                SDL_RenderDrawLine(trender, 350, 0, 600, 200);

                SDL_SetRenderDrawColor(trender, 0xFF, 0x00, 0xFF, 0xFF);
                for(int i=0;i<100;i++){
                    SDL_RenderDrawPoint(trender, i*3, 300);
                }

                rct.x=0;
                rct.y=0;
                rct.w=panjang;
                rct.h=tinggi;

                rcd.x=20;
                rcd.y=220;
                rcd.w=panjang;
                rcd.h=tinggi;

                if(gambar)SDL_RenderCopy(trender, gambar, &rct, &rcd);

                SDL_RenderPresent(trender);
            }
        }
    }

    SDL_DestroyWindow( window );
    SDL_Quit();

    return 0;
}

Jika kita menggunakan SDL_GetWindowSurface untuk mendapatkan SDL_Surface dari window, kita bisa menggunakan SDL_CreateRenderer untuk membuat SDL_Renderer terhubung dengan satu window.

Btw, kode program di atas menggunakan file dengan nama "gambar.png". Saya menggunakan gambar seperti di bawah ini sehingga hasilnya seperti di atas.

Kita tidak menggunakan SDL_Surface untuk menyimpan gambar saat yang digunakan adalah SDL_Renderer. Kita harus menggunakan SDL_Texture yang bisa ditampilkan dengan SDL_RenderCopy. Setelah "selesai" menggunakan semua fungsi yang akan kita gunakan untuk menampilkan foto dan bentuk lain, kita harus menggunakan SDL_Present agar hasilnya ditampilkan di program kita.

SDL_renderer bisa digunakan untuk menampilkan titik, garis, dan persegi. Untuk menentukan warna yang digunakan oleh renderer, kita bisa menggunakan SDL_SetRenderDrawColor sebelum menampilkan bentuk tertentu dengan renderer.

Sebagai rangkuman, berikut ini adalah function-function yang sering digunakan dalam SDL_Renderer.

SDL_CreateRenderer ( window, index, flags) => Menentukan window yang akan menampilkan hasil dari renderer.
SDL_SetRenderDrawColor(renderer, r, g, b, a); => Mengatur warna yang digunakan renderer.
SDL_RenderCopy(renderer, texture, srcrect, dstrect); => Menampilkan gambar dari file yang sudah disimpan dalam variabel bertipe SDL_Texture*.
SDL_RenderFillRect(renderer, dstrect); => Menggambar persegi atau persegi panjang.
SDL_RenderDrawLine(renderer, x1, y1, y2, y2); => Menggambar garis
SDL_RenderClear(renderer); => Membersihkan layar dengan warna yang sudah ditentukan
SDL_RenderPresent(renderer); => Menampilkan dan memperbaharui hasil dari renderer ke window.
SDL_DestroyRenderer(renderer) => Menghapus renderer dan membebaskan memori yang digunakan.

Keterangan (Parameter) :

SDL_Window *window => Window yang digunakan renderer.
SDL_Renderer* renderer, => Renderer yang dipakai.
SDL_Texture* texture, => Texture dari gambar yang ingin di-render
const SDL_Rect* srcrect => Bagian dari gambar yang akan ditampilkan
const SDL_Rect* dstrect =>Posisi dan ukuran gambar di layar.

Selain itu, ada beberapa function untuk menampilkan bentuk-bentuk tertentu dan function lainnya yang bisa digunakan dengan renderer. Tapi, untuk kali ini cukup itu saja. Kalian bisa mencari nama function lainnya di dokumentasi situs resmi SDL.

Bagi kalian yang malas mengetik, silakan download source code beserta project-nya di sini.