Tutorial membuat game sederhana (bagian 1)

Yok bikin game !! Coretan ini membahas dasar2 cara bikin game sederhana. Saya usahakan agar mudah diikuti oleh anda2 yg masih baru atau belum mengenal Pys60. Yang saya tulis disini sebagian sudah pernah saya bahas pada postingan2 sebelumnya dan akan saya jelaskan dengan bahasa yg lebih sederhana step by step.

Pendahuluan

Pastikan Python interpreter dan modul/library Python standar sudah terinstal pada hp anda. Jika kesulitan mencari yang sesuai untuk type hp anda, silahkan bertanya di Symbian & Pys60 Center (grup fb) atau di blog temen2 yang membahas Pys60.

Selain itu kita juga membutuhkan aplikasi text editor. Dalam contoh ini saya menggunakan aplikasi file manager X-plore versi 1.22 karena multifungsi dan pengoperasiannya mudah (bagi saya). Ok cukup itu saja, lanjut ketahap berikutnya.

Pengenalan

Dalam pembuatan game ini saya menggunakan hp s60v1, namun saya menggunakan syntax2 Python dasar jadi bisa diterapkan pada versi2 s60 yg lainnya (mungkin dengan sedikit penyesuaian). Gameplay yang akan kita buat cukup sederhana yaitu pemain menggerakkan keranjang ke kiri dan kekanan untuk menangkap bola yang berjatuhan dari atas untuk mengumpulkan skor. Game berakhir jika ada bola yang tidak berhasil ditangkap. Pernah memainkan game sejenis? Sekarang kita akan membuatnya.

Tahap awal

Download file ini GameSayaAwal.zip. Didalam file tesebut terdapat satu file text biasa yang saya beri eksistensi ".py" agar program Python tahu kalau itu adalah script python. Jalankan aplikasi X-plore dan extrax/unzip file tersebut ke dalam folder E:\\System\Apps\Python\My\. File tersebut berisi sebuah class bernama Keyboard yang berfungsi untuk meng-handel input dari keyboard. Anda tidak harus mengerti syntax2 pada file tersebut. Class tersebut tidak akan saya jelaskan dengan detail karena saya mengusahakan agar tutorial ini semudah mungkin untuk diikuti. Nantinya kita menggunakan class tersebut untuk mengetahui apakah ada key/tombol yang ditekan atau tidak.
Sekarang kita edit file GameSaya.py (tekan angka 8) lalu buat baris baru (tekan angka nol 3 kali untuk membuat baris baru) tepat dibawah kode return False". Baris ini cuma untuk memisahkan atau mengelompokkan kode script agar mudah dibaca. Lanjut ke tahap berikutnya.

Meng-import module

Apaan module? Module adalah sekumpulan kode script yang dapat kita gunakan. Pada s60 1st dan 2nd module2 ini terletak di folder E:\\System\Libs\. Untuk membuat game ini kita akan menggunakan beberapa module standar/bawaan Python yaitu: appuifw, graphics, e32, dan key_codes. Buat apa module2 itu? Nanti saya jelaskan penggunaannya pada game. Agar module2 tesebut dapat kita gunakan, kita harus meng-import terlebih dahulu. Caranya dengan menuliskan syntax import dilanjutkan dengan nama module. Seperti ini:



besar kecilnya huruf harus sama dengan yang saya tulis pada gambar (huruf kecil semua). Setelah itu kita import module graphics pada baris selanjutnya. Caranya sama dengan meng-import module appuifw diatas. Setelah itu dilanjutkan dengan module e32 dan key_codes. Seperti ini:



Ingat, simbol, huruf, angka, dan spasinya harus sama persis seperti pada gambar, kalau tidak bisa menyebabkan error. Oke sekarang semua module telah kita import. Lanjut..

Instance class Keyboard

Instance sederhananya adalah memberi nama panggilan untuk memanggil satu atau sekumpulan script dengan tujuan untuk memudahkan pemanggilan. Pada kasus ini kita memberikan nama key untuk class Keyboard. Caranya dengan menuliskan kode seperti ini:

Atur User Interface

UI game kita menggunakan fungsi2 pada module appuifw. Sekarang kita mengatur UI program kita. Kita mulai dengan mengatur agar layar game kita fullscreen:



Karena yang kita buat adalah game yang pada dasarnya menampilkan gambar ke layar, maka kita akan menggunakan salah satu fungsi yang terdapat pada module appuifw yaitu Canvas untuk menampilkan gambar. Kita buat instance canvas dan mengaturnya agar meng-handle key (ingat, 'key' adalah instance class Keyboard dan jangan lupa apa itu instance).



Perhatian!! Mulai dari kanvas sampai dengan handle_event) adalah satu baris. Karena layar hp saya tidak cukup, maka ditampilkan menjadi beberapa baris (inilah repotnya scripting pakai hp). Selanjutnya kita gunakan kanvas sebagai body aplikasi.:



Pengaturan UI sudah selesai.

Atur graphics/gambar

Yang akan kita lakukan disini adalah mengatur gambar bukan menampilkan gambar pada layar (belum saatnya). Seperti menyiapkan kertas gambar dan pensil. Dimulai dengan membuat variabel berisi informasi ukuran layar hp:



Variabel? Apaan lagi nih?? Variabel adalah sebuah nama seperti nama panggilan pada instance. Tapi nama pada variabel berisi suatu data. Dan pada kasus diatas, variabel yang saya namai resolusiLayar menyimpan data (176,208).
Buat sebuah gambar dengan module graphics dan menggunakan varibel resolusiLayar sebagai ukuran gambar:



yang kita buat diatas adalah sebuah gambar putih polos sebesar ukuran hp kita. Nanti kita mengisi "gbr" dengan gambar bola dan keranjang. script diatas juga hanya satu baris.

Pengaturan game loop

Buat apa sih loop? Teori dasar animasi (ga tau ini pelajaran SMP ato SMA karena dulu saya ga di ajarin ini di SD) yaitu menampilkan sebuah gambar, lalu dilanjutkan dengan gambar selanjutnya secara cepat dan terus - menerus hingga seolah2 bergerak. Begitu juga pada game. Dan loop atau perulangan yang akan menjalankan teori animasi diatas. Sebelum loop dilakukan, kita harus membuat semacam saklar untuk mengatur loop tersebut. Jika saklar bernilai 1 maka proses loop berjalan, jika bernilai 0 maka proses loop dihentikan dengan kata lain game ditutup. Kita buat variabel saklar:



sebenanya bisa diberi nama apa saja, saya beri nama saklar untuk kemudahan. Dan kita beri nilai 1 agar saat script dijalankan looping juga berjalan.
Saklar sudah kita definisikan, sekarang membuat fungsi untuk menghentikan game:



Script diatas terdiri dari 3 baris. Pada baris pertama kita membuat fungsi yang saya beri nama keluarGame, sedangkan dua baris selanjutnya (yang mempunyai beberapa spasi sebelum kode syntax) adalah isi fungsi tersebut. Jika fungsi dipanggil maka semua isi fungsi akan dijalankan. Kegunaan "fungsi" adalah untuk mengelompokan beberapa kode script agar lebih mudah karena untuk menjalankan syntax2 yang berada didalam fungsi tersebut kita tinggal memanggil nama fungsinya. Pada baris kedua, global saklar adalah mengatur agar variabel saklar didalam fungsi tersebut menjadi variabel global. Pada baris ketiga, kita mengupdate nilai variabel saklar menjadi nol (nonaktif/menghentikan loop).
Selanjutnya kita mengatur tombol exit (right softkey) untuk menjalankan fungsi keluarGame saat ditekan.



syntax diatas terdiri dari satu baris.

Game loop

Sekarang masuk ke tahap perulangan. Untuk ini kita menggunakan while.



While akan menjalankan kode script didalamnya secara terus - menerus selama variabel saklar bernilai 1. Satuan proses perulangan disebut "frame".
Selanjutnya kita mengisi while dengan gbr dan sebuah fungsi dari module e32:



dua baris kode script diatas yang akan dijalankan while secara berulang-ulang. Pada baris kanvas.blit(gbr) kita menampilkan gbr pada kanvas. Pada baris dibawahnya kita menggunakan fungsi dari module e32 yang bernama ao_sleep. Fungsi ini digunakan untuk menghentikan loop selama 0.01 detik sebelum frame berikutnya dijalankan. Proses penghentian ini setahu saya untuk memberi waktu kepada UI untuk memproses setiap frame sebelum memproses ke frame berikutnya (tolong dibenarkan kalau salah).

Test script

Pada tahap ini script sudah dapat dijalankan. Cara menjalankannya:

• Buka aplikasi Python


• Tekan "Options" lalu pilih "Run script"


• Cari script bernama "my\GameSaya.py" dan tekan ok

Jreng!! Muncul blank putih. Cuma itu? Iya, kan dari tadi kita cuma membuat gambar putih polos seukuran layar hp :). Cara menambah gambar bola yang jatuh dari atas? Cara menambah gambar keranjang yang bisa digerakkan kekiri dan kekanan? Insyaallah kita bahas pada bagian berikutnya.

Script yang anda buat error? Coba dibandingkan dengan script ini:

GameSayaTahap1.zip