Saturday, 14 February 2015

SDL2 : Dimulai dari Sebuah Titik (Piksel)

" Well, program yang rumit 
selalu dimulai dari yang sederhana 
( yah iyalah... )"

Kali ini kita akan membuat sebuah titik dengan fungsi yang telah disediakan oleh library SDL 2, fungsi yang mudah , cepat dan aman   hehehe. Dan akan kita kembangkan pada artikel selanjutnya. Hasil yang ingin kita peroleh adalah seperti gambar berikut :


Gambar 1. Susunan piksel putih yang teratur menghasilkan grafik yang indah.

Sebelum melanjutkan , sistem yang saya gunakan (hanya perlu menyesuaikan dengan sistem yang anda gunakan)  :
OS : Windows XP (32 bit)
IDE : Code::Blocks 13.12
Library : SDL 2

~ Setting Library
Sebelumnya , saya akan review singkat jika anda belum pernah men-setting library SDL untuk project baru. Pertama download file library SDL 2 (klik link ini) , lalu download file pada bagian Development Libraries, sesuaikan dengan sistem dan IDE. Dalam contoh ini kita download file SDL2-devel-2.0.3-mingw.tar.gz (MinGW 32/64-bit) sekitar 7.8MB untuk sistem Windows (32bit atau 64bit) dan compiler MinGW. Selesai mendowload, lalu ekstrak file tersebut , anda akan mendapati beberapa folder seperti i686-w64-mingw32 , include , lib , dst. Selanjutnya buatlah folder SDL2 pada drive D atau pada lokasi yang dikhususkan untuk library-library atau suka-suka anda di My Document juga boleh :P , pada contoh ini saya meletakkan pada lokasi " C:\Program Files\CodeBlocks\SDL2\ ". 

Copy folder include kedalam folder SDL2 tersebut. Dilanjutkan dengan meng-copy folder "Lib" yang terdapat  pada i686-w64-mingw32 (untuk sistem 32-bit) atau pada x86_64-w64-mingw32 (jika sistem anda 64-bit dan ingin membangun aplikasi 64-bit), dalam contoh ini pada kita gunakan lib pada folder i686. Sehingga tampak seperti gambar berikut :


Gambar 2. Pengaturan folder library.

~ Project baru
Buat project baru pada Code::Blocks dengan jenis Empty Project tidak usah menggunakan Template SDL yang telah disediakan. Isi nama project dengan SDL2_Membuat_Garis, atau dengan nama dan lokasi yang diinginkan, selanjutnya lakukan centang pada Debug dan Release, dan finish.

Pada toolbar project, klik kanan project kita, lalu pilih Build Options, atau melalui menu Project -> Build Options. Pada parent Debug atau Release akan muncul nama project kita, klik dan pilih Tab -> Linker Settings, tambahkan link pada bagian Other linker options , yaitu : " -lmingw32 -lSDL2main -lSDL2 "(satu baris dan tanpa tanda kutip), ini penting untuk dapat terhubung ke library SDL.

Lalu pada tab Search directories, yang tidak kalah pentingnya adalah menambahkan lokasi library SDL yang telah kita ekstrak sebelumnya, sub-tab yang kita tambahkan melalui pada tab ini adalah Compiler dan Linker. Pada tab Compiler -> pilih Add dan masukkan lokasi folder include , contoh " C:\Program Files\CodeBlocks\SDL2\include ". Sedangkan pada Linker masukan lokasi folder lib , contoh " C:\Program Files\CodeBlocks\SDL2\lib " . Sehingga hasilnya kurang lebih akan tampak seperti gambar berikut (lokasi library SDL2 sesuai settingan anda) :


Gambar 3. Pengaturan library pada project
~ The Code
Semua sudah siap, kita tinggal menulis baris demi baris demi code-code yang indah untuk aplikasi kita . Fungsi utama yang digunakan untuk menghasilkan tampilan yang kita inginkan adalah :
   
   ...
   SDL_RenderDrawPoint(gRenderer, x, y);
   ...

Fungsi tersebut akan membuat sebuah titik sesuai koordinat yang diinginkan. Dan untuk warna yang dihasilkan akan menyesuaikan sesuai settingan aplikasi pada fungsi :
  
   ...
   SDL_SetRenderDrawColor(gRenderer,Red,Green,Blue,Alpha);
   ...

So, untuk lebih jelasnya akan saya lanjutkan pada tulisan selanjutnya hehehe. Happy Coding!

- 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