Monday, 31 January 2011

Tile Map dengan SDL (2)


Gunakan Array!


Tulisan ini merupakan lanjutan dari:
Tile Map dengan SDL (1)

Kita mulai menjelajahi dari variabel global dibawah pemanggilan file header. Variabel-variabel ini akan memudahkan kita dalam perawatan atau penambahan nilai-nilai pada program. Contohnya variabel ukuranTile yang bertipe 'integer konstan' berguna jika sewaktu-waktu ukuran Tile Set pada gambar berupa, misalkan sebelumnya 40 menjadi 30 maka secara otomatis semua nilai yang harus digantipun berubah. Sehingga program kita ini telah didesain sedemikian rupa agar kita hanya perlu mengubah nilainya (var ukuranTile) maka penempatan posisi (x,y) untuk penggambilan ukuran clip (lebar atau panjang) menjadi otomatis menyesuaikan. Variabel selanjutnya MAX_TILE, TilePerbaris, dan TilePerkolom memiliki ciri-ciri yang sama seperti sebelumnya, yaitu kemudahan dan kenyamanan dalam berkoding hehehe . MAX_TILE berfungsi untuk menyatakan banyaknya tile clip atau potongan-potongan gambar dalam satu file gambar. Nilai-nilai atau koordinat potongan gambar ini disimpan pada variabel SDL_Rect clipTile40x40[MAX_TILE]. Pengaturan koordinat untuk setiap potongan gambar ini terdapat pada fungsi void aturClip(). Dan lihat! pengaturan potongan gambar ini menjadi lebih mudah dengan ukuranTile, tak perlu mengganti-ganti nilainya jika terjadi perubahan cukup ganti ukuranTile. Dan pastinya jangan lupa memanggil fungsi ( "aturClip()" ) ini di dalam fungsi main, jika tidak ingin program menjadi aneh-aneh.

Lansung saja kita ke bagian "DRAWING TIME". Agar layar (screen) program tidak menjadi aneh saat proses penggambaran kita perlu mengisinya dengan SDL_FillRect(), kita isi dengan warna hitam. Selanjutnya kita mulai menggambar "Ubin"-nya satu persatu. Yang diperlukan hanyalah array 2 dimensi:


...
   int pola[TilePerkolom][TilePerbaris]
      = {{0,0,1,0, 2,3,0,1, 2,1,0,0, 3,3,0,1},
         {0,0,1,0, 2,3,0,1, 2,1,0,0, 3,3,0,1},
         {0,0,1,0, 2,3,0,0, 0,0,0,0, 3,3,0,1},
         {0,1,1,0, 2,3,0,1, 2,1,2,0, 0,0,0,3},
         {0,0,1,0, 1,0,2,1, 0,1,2,1, 3,3,0,3},
         {0,0,1,0, 2,3,0,1, 2,1,0,0, 3,2,0,1},

         {0,0,1,0, 2,3,0,1, 2,1,0,0, 1,3,0,1},
         {0,0,0,0, 0,0,0,1, 3,1,0,0, 0,3,0,1},
         {0,0,1,0, 0,3,0,1, 2,1,0,0, 3,3,0,3},
         {0,2,1,0, 2,0,0,1, 0,1,0,0, 0,3,0,1},
         {0,2,0,0, 2,3,2,2, 2,1,0,0, 3,0,2,2},
         {0,1,1,1, 1,3,0,1, 3,1,0,0, 3,1,0,1}};
...    

Dengan ukuran setiap dimensinya sesuai dengan banyaknya kolom atau baris ubin. Dapat dilihat bahwa array 2 dimensi ini seperti sebuah table. Yang artinya variabel pola[16][12] bukan memiliki 28 (16 + 12) nilai bilangan bulat yang berbeda melainkan 192 nilai (16 x 12). Untuk pengisian nilai-nilainya dapat menggunakan operator for atau manual seperti diatas. Jika menggunakan cara manual kita harus teliti jangan sampai kompiler ngomel-ngomel saat proses kompilasi / build. Cara otomatis memang terdengar menjanjikan tapi hanya untuk penggunaan pola peta yang sistematis, simetris atau bahkan acak (random). Intinya tak semudah namanya, 'otomatis!'. Nilai pada array ini sesuai dengan potongan gambar yang kita buat sebelumnya:

Gambar 1. Potongan gambar.

Perlu diperhatikan bahwa indeks array dimulai dengan 0, sehingga gambar nomor 1 diisi dengan nilai 0. Jika ingin menambahkan gambar-gambar atau potongan baru cukup dengan merubah nilai MAX_TILE. Misal menjadi 12 maka program akan menggambil potongan gambarnya menjadi seperti pola berikut:

Gambar 2. Jika dipotongan 12.

Ini karena pengaturan nilai x pada fungsi aturClip(). Untuk lebih jelasnya lihat lagi kode pada fungsi tersebut sebagai berikut:


...
    for(int c=0;c < MAX_TILE;c++){
        clipTile40x40[c].x=(c%2)*ukuranTile;
        clipTile40x40[c].y=(c/2)*ukuranTile;
        clipTile40x40[c].w=ukuranTile;
        clipTile40x40[c].h=ukuranTile;
    }
...

Tentu masih banyak yang harus diperbaiki disini terlebih penggambilan potongan gambarnya, yang semakin banyak justru semakin panjang kebawah. Dan saya yakin kalian pasti dapat menyelesaikannya, bukan begitu? - "My Clue", ubah angka 2 pada operasi(c%2) dan (c/2) menjadi banyaknya gambar perbaris. Yang perlu diperhatikan saat membuatnya (gambar tile) menjadi berdimensi kotak, tidak seperti sebelumnya yang seperti balok panjang kebawah. Adalah posisi gambar dibawahnya (contohnya gambar nomor 3 dan 4) dipindahkan kesamping gambar nomor 2. Ini jika algoritma yang digunakan masih sama seperti sebelumnya hanya dirubah nilai pada operasi (c%2) dan (c/2). Sehingga terlihat seperti gambar berikut:

Gambar 3. Penempatan yang tepat untuk potongan gambarnya, a). Anda punya Algoritma potongan gambar sendiri?, dan b). Algoritma ini sangat mudah yaitu dari baris atas ke bawah.

Mengapa? karena jika sudah mendesain peta dengan nomor-nomor gambar tertentu pada array dan posisi tertentu pada potongan gambar, hasil yang diperoleh akan menjadi aneh. Ya, kalian bisa melihatnya kan?. Semoga tutorial ini bermanfaat... .

- krofz

No comments:

Post a Comment

Maaf jika komentar anda lama terbitnya ^__^, penulis berusaha OL sesering mungkin. Komentar anda adalah semangat blog ini, dan juga semangat para blogger lainnya. You can use XHTML tags: <a href="" rel="link"> </a>, <strong> </strong>, <b> </b>, <em> </em>, <i> </i>.

Spesial character use :
&lt; for <
&gt; for >


Use Pastebin.com for alternative to display your code :) .

 

back to top

back to top