Minggu, 11 Desember 2011

Ngebut 2 Speed Drift

Walaupun ini cuma game sederhana pembuatan game ini lumayan lama, saya sempat berpikir untuk tidak melanjutkan game ini. Namun akhirnya jadi juga walaupun sampai 4 kali mengulangi pembuatannya dari awal :).
Dan ini pertama kalinya saya puas dengan game bikinan ndiri hoho.



Gameplaynya masih sama dengan game sebelumnya, ngebut secepat mungkin sebelum waktu habis. Kekurangan utama, game ini sangat berat. Di N-Gage QD saya kecepatannya sekitar 5 frame perdetik.



Oya, game ini hanya membutuhkan module pys60 standar.





Title:

    NGEBUT 2 Speed Drift



Version:
    1.03


Genre:
    Racing, Arcade simulation


Game content:

    7 vehicles

    8 tracks

    1 vehicle bonus

    1 track bonus



Graphics:

    Flat graphics

    Pseudo 3D road

    True 3D 3 angle rotation vehicle

    2D Resizing road detail



Sound:
    Sunyi :D


Screenshot:

    Ngebut 2 Speed Drift
    Ngebut 2 Speed Drift
    Ngebut 2 Speed Drift
    Ngebut 2 Speed Drift


Download link:


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

Rabu, 30 November 2011

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