Tutorial membuat game sederhana (bagian 2)

Pendefinisian variabel

Agar objek (bola dan keranjang) yang akan kita gambar dilayar dapat digerakkan, kita menambahkan variabel X,Y untuk menentukan posisi objek. Dalam kordinat kartesian, X sebagai kordinat horizontal dan Y sebagai kordinat vertikal. Selain X,Y, kita juga menambahkan variabel speed untuk menentukan kecepatan gerak objek. Pendefinisian variabel dilakukan diluar game loop. Yaitu diatas while:

bolaX dan keranjangX saya beri nilai 88 agar posisisinya ditengah layar karena resolusi hp saya 176x208 (176 / 2 = 88), silahkan disesuaikan dengan resolusi hp anda.

Penggambaran objek ke layar

Selanjutnya proses penggambaran. sebelum menambahkan gambar bola dan keranjang kita merubah background yang putih menjadi hitam dulu mengunakan attribut clear(warna). Penambahannya ditaruh didalam loop.

Sekarang background sudah menjadi hitam (run script untuk mengetes). Selanjutnya menggambar objek. Gambar yang akan kita pakai menggunakan gambar flat lingkaran untuk gambar bola dan kotak untuk gambar keranjang. Flat gambar ini menggunakan fungsi dari module graphics yaitu ellipse() dan rectangle(). Alasan saya menggunakan gambar flat ini karena setahu saya bisa berjalan pada semua type s60 mulai dari os6 (mohon dibenarkan kalau salah).
Sedangkan kalau pakai file gambar (.jpg, .png dll) pada os6 harus menggunakan module tambahan yaitu image1st untuk meload gambar dan masalah utamanya adalah tidak support transparansi pada os6. Tapi bukan masalah untuk os7 keatas. Back to topic, pertama kita membuat gambar keranjang dulu. Ukurannya 20x40 piksel.

Pada keranjangX-20 kita mengatur agar posisi kiri kotak selalu berada pada "posisi keranjang dikurangi 20". Angka 20 adalah "lebar keranjang dibagi 2" (40 / 2 = 20). Dan pada keranjangX+10 kita mengatur agar posisi kanan kotak selalu berada pada "posisi keranjang ditambah 20". Dengan begitu posisi keranjang (keranjangX) berada ditengah2 objek dan memudahkan untuk melakukan deteksi tumbukan. Dan pada keranjangY juga sama. Syntax 0x0000ff adalah warna keranjang.

Selanjutnya kita menggambar bola. Tehniknya sama, bedanya kita menggunakan ellipse(). Ukuran bolanya 20x20

Input player

Sekarang sudah ada gambar keranjang kotak dan gambar bola, tapi belum bisa bergerak. Agar keranjang dapat dikontrol oleh player. Kita membuat script untuk memberi output berdasarkan input player. Saat player memberi input dengan menekan tombol arah kanan, kita atur agar program memberi output yaitu menggerakkan objek keranjang ke kanan. Saat player memberi input kiri, kita atur agar program memberi output menggerakkan objek keranjang ke kiri.

Kode "if key.is_down(key_codes.EScancodeLeftArrow):" terdiri dari satu baris. Kode "keranjangX -= speedKeranjang" juga satu baris. Sekarang jika di run script, saat tombol kiri ditekan keranjang bergerak kekiri. Syntax ini menge-cek apakah tombol arah kiri ditekan atau tidak. Dan pada baris dibawahnya adalah mengupdate posisi keranjangX dengan cara mengurangi nilai keranjangX sebanyak nilai speedKeranjang. Cara kerjanya seperti ini:

keranjangX = 88

speedKeranjang = 1



dan pada loop:



- keranjangX = keranjangX-speedKeranjang

88-1 = 87

- keranjangX = keranjangX-speedKeranjang

87-1 = 86

- keranjangX = keranjangX-speedKeranjang

86-1 = 85

proses itu akan dilakukan terus - menerus selama tombol arah kiri ditekan. Hasilnya seolah2 gambar keranjang bergerak kekiri.

Cara yang sama digunakan untuk menggerakan keranjang ke kanan. Bedanya kita menambahkan nilai speedKeranjang ke keranjangX.

Untuk gerakan bola akan saya gabung dengan pembahasan deteksi tumbukan pada tahap selanjutnya. Script tahap ini bisa di download disini:

GameSayaTahap2.zip

Contoh script gambar (basic)

Coretan ini sekedar share penjelasan tentang basic script gambar pada pys60. Ceritanya beberapa waktu yang lalu kang Gulam request deskripsi game, nah karena penjelasan satu game utuh lumayan panjang, jadi saya cicil dikit-dikit, nanti jika saya dapat rejeki pasti saya lunasi (emangnya utang? Hehe...).

Gambar yang dimaksud disini bukan gambar dari file JPEG atau PNG, melainkan gambar berbasis RGB (sering disebut old graphics) dari module graphics. Dan agar lebih praktis, juga karena saya malas upload sepotong-sepotong maka langsung saya bungkus menjadi satu file zip.

Download disini

Setelah mengutak-atik script diatas, mungkin ada yang masih bingung pada baris2 script menggambar point, bulat kotak, dan line ( pengalaman pribadi :D). Berikut sedikit penjelasannya..

Rectangle dan Ellipse

img.rectangle((100,40,120,80),0x00dddd, fill=0xdd0000)
img.ellipse((100,40,120,80),0x00dddd, fill=0xdd0000)

- angka-angka dalam kurung adalah posisi objek tersebut (posisiX, posisiY, posisiX+lebarObjek, posisiY+tinggiObjek)

- kode yang berada ditengah (0x00dddd) adalah warna garis pinggir objek dalam mode RGB (Red, Green, Blue) 0xRRGGBB. Bisa juga menggunakan mode: (R,G,B). Contoh:

img.ellipse((100,40,120,80),(255,0,0), fill=(255,255,0))


- fill=0xdd0000 adalah warna objek. Jika ingin agar objek yang ditampilkan garis pinggir saja, tidak perlu menggunakan kode ini atau fill=None.




Point

img.point((50,20),0xdddddd, width=10)


Berbeda dengan ellipse, penggambaran point berdasarkan titik kordinat posisi x,y nya, width=10 adalah lebar point.



Line
img.line((60,90,80,70),0x00dd00)


line intinya, membuat sebuah garis yang menghubungkan dua buah titik. Maka pengaturan posisinya: (x1, y1, x2, y2).

Sampai disini dulu. Jika ada yang bingung dengan coretan saya ini, mohon komentarnya.