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

Friday, 28 January 2011

Tile Map dengan SDL (1)

Luasnya 16 x 12


Tile Map, atau jika diubah menjadi bahasa Indonesia-nya adalah "Peta Ubin" merupakan sebuah lingkungan game (berupa peta/area permainan) yang digambarkan berdasarkan pola seperti ubin dengan ukuran tertentu secara berulang-ulang. Berbeda dengan penggambaran background biasa (contohnya seperti game Zuma atau Plants VS Zombie), game ini memiliki kelebihan dan kekurangan. Kelebihannya yaitu ukuran game dapat dikompres / dikecilkan karena cukup dengan 2 atau beberapa gambar kecil (berbentuk ubin/kotak) lingkungan gamepun dapat dibuat. Kekurangannya lingkungan game akan terlihat kaku dan perlu lebih banyak gambar untuk dapat menciptakan lingkungan yang lebih halus dan realistis. Tidak seperti penggambaran Background biasa yang dapat diciptakan dengan cepat, tapi dengan konsekuensi ukuran yang besar (pada umumnya):

Gambar 1. Game Warlord IV dengan Battle menggunakan penggambaran Background biasa (sumber: Internet).

Jika anda suka bermain game Nitendo di era 90-an (di Indonesia baru ada di tahun itu kali yah? ) tentu kenal dengan game Mario Bros, kalau belum kenal, silahkan kenalan dulu :

Gambar 2. Mario Bros, salah satu game yang me-Legenda! (sumber: Internet).

Dapat dilihat cukup dengan 3 gambar tile tersebut (tidak termasuk rumput dan pipa) sudah dapat menciptakan lingkungan permainan untuk sih paman Mario. So, langsung saja kita mulai dari yang sederhana, berikut program beserta source code yang diperlukan:

Link : http://www.ziddu.com/download/13552658/46_Tile_Map.a.7z.html
Size : 247.01 KB

Jalankan program tersebut maka akan terlihat hasilnya seperti berikut (tanpa angka 1-16 kesamping, dan 1-12 kebawah):

Gambar 3. Tile Map pertama kita!

Pada tulisan selanjutnya akan kita bahas kode-kode yang mungkin masih amat sangat asing dan aneh ini...

- krofz

Saturday, 22 January 2011

Code::Blocks 10.05


Jangan sampai tertinggal!


Tahun 2010 telah berlalu, selamat datang 2011. Tulisan pertama di Tahun 2011 ini memang sedikit telat (apa sudah terlalu lama? ). Dan untuk mengawali tahun ini mari kita gunakan versi terbaru dari IDE Code::Blocks, yaitu 10.05. Dan dapat di download melalui link berikut http://www.codeblocks.org/downloads . Tersedia untuk berbagai pilihan program, yaitu Download the binary release, Download the source code (Hey! ada source codenya), atau Retrieve source code from SVN (Sepertinya bukan pilihan yang mudah). Pilih Download the binary release, lalu download program sesuai Sistem Operasi yang digunakan. Sebetulnya versi terbaru ini sudah lama di release saat tulisan ini dibuat tapi 'ya sudahlah' (kata Bondan) .

Salah satu yang jelas terlihat adalah logo, karena bagian ini pasti terlihat saat instalasi ataupun saat program dijalankan:

Gambar 1. Logo Code::Blocks versi a). 8.02, dan b). 10.05

Tapi sepertinya bagian ini nggak terlalu penting . Selanjutnya saat program dijalankan, secara tampilan tidak terlalu signifikan, baik menubar ataupun toolbar hanya menggunakan icon yang lebih modern dan glossy. Layaknya sebuah game atau aplikasi lainnya setiap penambahan versi selalu ada perubahan dan penambahan (atau bahkan kekurangan?). Beberapa perubahan yang cukup terasa bagi saya adalah saat menggunakan fungsi bermanfaat seperti "srand((unsigned)time(NULL))" dan "system(const char*)". Dimana pada versi sebelumnya lancar-lancar saja jika hanya menyertakan library < iostream >. Tapi sekarang harus lebih spesifik dengan menyertakan library < time.h > untuk srand(), dan < cstdlib > untuk system().

Dan beberapa fitur yang cukup terasa adalah 'Brace Completion', fitur ini akan otomatis membuat akhiran saat kita membuka tanda kurung atau kurawal. Ini dimaksudkan agar kita tidak lupa untuk membuat akhiran atau penyelesaian (completion). Untungnya fitur ini tidak sekedar membuat akhiran, contoh ketika mengetik "int main(" maka secara otomatis akan terbentuk "int main()" dengan posisi kursor ditengah. Setelah selesai mengetikkan argumen kita tidak perlu khawatir untuk membuat akhirannya lagi ")" karena hasilnya tidak seperti berikut "int main())". Melainkan program akan otomatis menghapus yang belakangnya. Yang pasti anda harus segera meng-update CB anda!!....

- krofz
 

back to top

back to top