Viewport dan Perbesaran ~ Pemrograman dan Teknologi

Selain dengan menempatkan variabel bertipe SDL_Rect untuk menentukan penempatan dan ukuran dari suatu gambar sebagai argumen untuk parameter ke-4 dari SDL_RenderCopy, kita bisa mengatur tata letak dan skala agar digunakan berkali-kali menggunakan SDL_RenderSetViewPort dan SDL_RenderSetScale. Kita cukup menggunakan satu variabel untuk mengatur penempatan dari beberapa gambar yang ditampilkan. SDL_RenderSetViewPort membuat titik kordinat {0, 0} dimulai dari posisi tertentu dan hanya sebagian dari permukaan window yang digunakan untuk menampilkan gambar yang akan ditampilkan. Sederhananya, dengan SDL_RenderSetViewport kita bisa membatasi tempat kita bisa menampikan gambar.

Daripada cuma berteori, kita akan langsung coba saja. Kode program di bawah ini menggunakan file bernama "Codelogi.bmp". Jadi, letakkan gambar dengan nama tersebut di folder project atau program kalian.

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

int main(int argc, char* args[]){
    SDL_Window* window = NULL;
    SDL_Event evt;
    SDL_Rect viewport;
    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("Codelogi.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);

                viewport.x=0;
                viewport.y=0;
                viewport.w=640;
                viewport.h=240;

                SDL_RenderSetScale(trender, 1.0, 1.0);
                SDL_RenderSetViewport(trender, &viewport);

                if(gambar)SDL_RenderCopy(trender, gambar, NULL, NULL);

                SDL_RenderSetScale(trender, 0.5, 1.0);

                viewport.x=0;
                viewport.y=240;
                viewport.w=640;
                viewport.h=240;
                SDL_RenderSetViewport(trender, &viewport);
                if(gambar)SDL_RenderCopy(trender, gambar, NULL, NULL);

                SDL_RenderPresent(trender);
            }
        }
    }

    SDL_DestroyWindow( window );
    SDL_Quit();

    return 0;
}

Kalau kalian melihat hasil dari kode program di atas, kalian akan melihat gambar yang kita sediakan ditampilkan 2 kali di posisi yang berbeda. Selain itu, parameter ke-3 dan ke-4 dari SDL_RenderCopy bernilai NULL. Kita tidak perlu lagi menggunakan parameter ke-4 untuk menentukan posisi dan ukuran gambar dalam function tersebut. Singkatnya, function yang kita gunakan untuk menentukan letak dan ukuran viewport adalah SDL_RenderSetViewport yang punya dua parameter seperti di bawah ini.

SDL_RenderSetViewport(SDL_Renderer *renderer, SDL_Rect *viewport);

Selain itu, kita menggunakan SDL_Setscale untuk menentukan perbesaran berdasarkan ukuran dari viewport. Parameter kedua dan ketiga dari SDL_RenderSetScale adalah perbesaran lebar dan tinggi dari gambar yang ditampilkan dengan SDL_RenderCopy. Jika nilai dari perbesaran panjang dan lebarnya sama dengan 1 (satu), maka gambar akan memenuhi viewport yang ada. Jika nilai perbesaran ukurannya kurang dari 1, maka gambar akan lebih kecil dari viewportnya.

SDL_RenderScale(SDL_Renderer *renderer, float skala_x, float skala_y);

Saat menggunakan SDL_RenderSetViewport dan SDL_RenderScale, parameter ke-4 dari SDL_RenderCopy akan tetap kalian perlukan untuk memotong gambar. Tapi, pada contoh kode program kali ini saya sengaja tidak menggunakannya. Kalau kalian ingin mencoba menggunakan gambar yang di potong dalam viewport, kalian bisa mencoba sendiri.