J2ME Game Dev #3: Main Menu

Pada kali ini kita akan mencoba membuat menu simple, kalau kita bermain game, pasti ada menu awalnya, minimal Play, Tutorial, About, dan Exit. Untuk mempermudah membuat menu, kita akan membuat fungsi baru yaitu:

1. drawText()
Kita buat fungsi drawText yang berguna untuk memudahkan kita dalam membuat tulisan di aplikasi kita,


public void drawText(String text, int x, int y, int color){        //isi kode... }

Parameter text akan digunakan untuk menerima string yang telah ditentukan oleh kita, x dan y adalah posisi kiri atas dari tulisan, dan color untuk mengubah warna dari tulisan.
Lalu kita tulis kode berikut di dalam drawText()

g.setColor(color); g.drawString(text, x, y, 0);

drawString merupakan salah satu fungsi dari Graphics, drawString merupakan fungsi asli dari Graphics. Kenapa kita membuat fungsi drawText lagi? Karena drawText yang kita buat memiliki fungsi g.setColor, sehingga kita dapat dengan mudah mengubah warna tulisan hanya dengan menggunakan parameter masukan. Sebagai percobaan, kita coba memanggil fungsi drawText() di dalam game loop kita,

drawText("Hello Gamers!", getWidth()/2, getHeight()/2, 0xFFFFF);

Jalankan emulator, maka akan muncul gambar seperti ini,

2. drawMenuItem()
Sekarang mari kita buat fungsi drawMenuItem(),

public void drawMenuItem(String text, int x, int y, int width, int height, int color, boolean selected){           //isi kodenya... }

Parameter text berguna untuk mendefinisikan kata yang akan digambar. Parameter x dan y digunakan untuk titik awal dari string dan rectangle. Parameter width dan height akan menentukan lebar dan tinggi dari rectangle yang akan dibuat. Parameter color untuk menentukan warna dari string dan rectangle. Dan parameter selected akan digunakan untuk mengecek apakah kursor sedang

drawText(text, x, y, color); if(selected){     g.setColor(color);     g.drawRect(x, y, width, height); }

Pada fungsi ini, kita akan memanggil fungsi yang sebelumnya kita buat, yaitu drawText(). Jadi fungsi ini akan menggambar string dan jika posisi cursor di salah satu menu, maka terbentuk pula sebuah kotak disekeliling tulisan yang telah dibuat untuk menunjukkan bahwa menu itu lah yang sedang dipilih.
Mari kita coba membuat menu itu, tambahkan kode berikut di dalam game loop kita,

drawMenuItem("PLAY", 0, 0, 100, 25, 0x00ff00, true); drawMenuItem("PLAY", 50, 50, 100, 25, 0x00ff00, false);

Jalankan emulator, maka akan muncul seperti gambar berikut,

3. previousMenu()
Buatlah sebuah fungsi baru,

private void previousMenu(){         //isi kodenya... }

previousMenu() berguna untuk mengecek keberadaan kursor kita, isinya hanya seperti ini,

mainMenuState-=1; if(mainMenuState<0){     mainMenuState=NUMBER_OF_MENU-1; }

Jadi, previousMenu mengubah nilai mainMenuState, dengan cara menguranginya. Apabila mainMenuState telah mencapai < 0, maka mainMenuState akan dirubah kembali menjadi total menu – 1. Misalkan kita punya 4 menu yaitu Play, Tutorial, About, Exit. Maka nilai mainMenuState pada Play adalah 0, Tutorial adalah 1, About adalah 2, dan Exit adalah 3. Ketika kita menekan atas, maka fungsi previousMenu() inilah yang kita panggil, mengurangi mainMenuState hingga Play. Jika sudah mencapai Play, ketika ditekan tombol atas lagi, maka nilai mainMenuState akan kembali ke 3, yaitu Exit.
4. nextMenu()

private void nextMenu(){         //isi kodenya... } Fungsi ini sama seperti fungsi previousMenu, hanya saja cara kerjanya dengan arah yang sebaliknya. 1 mainMenuState+=1; if(mainMenuState>=NUMBER_OF_MENU){     mainMenuState=0; }

5. input()
Fungsi ini untuk meng-handle input dari user, ketika kita menekan tombol atas atau bawah, maka program akan memanggil fungsi previousMenu() dan nextMenu(). Ketika kita menekan tombol tengah/fire maka akan muncul string didalam console.

int keyState = getKeyStates(); if((keyState & UP_PRESSED) !=0){     previousMenu(); }else if((keyState & DOWN_PRESSED) !=0){     nextMenu(); }else if((keyState & RIGHT_PRESSED) !=0){     //Kosong.. }else if((keyState & LEFT_PRESSED) !=0){     //Kosong.. }else if((keyState & FIRE_PRESSED) !=0){     System.err.println("Menu " + mainMenuState + " chosen."); }

Oh iya, sebelumnya kita tambahkan variable global ya,

public static int NUMBER_OF_MENU=4; public int mainMenuState;

NUMBER_OF_MENU bisa kita rubah nilainya sesuai menu yang kita butuhkan. Lalu kita inisialisasikan mainMenuState di dalam fungsi run()

mainMenuState=0;

agar kursor awal kita berada di 0 yaitu Play. Sekarang kita taruh kode berikut di dalam fungsi run() sebelum flushGraphics(),

if(mainMenuState==0)     drawMenuItem("PLAY", 100, 150, 100, 25, 0x00ff00, true); else     drawMenuItem("PLAY", 100, 150, 100, 25, 0x00ff00, false); if(mainMenuState==1)     drawMenuItem("TUTORIAL",100, 180, 100, 25, 0x00ff00, true); else     drawMenuItem("TUTORIAL",100, 180, 100, 25, 0x00ff00, false); if(mainMenuState==2)     drawMenuItem("ABOUT", 100, 210, 100, 25, 0x00ff00, true); else     drawMenuItem("ABOUT", 100, 210, 100, 25, 0x00ff00, false); if(mainMenuState==3)     drawMenuItem("EXIT", 100, 240, 100, 25, 0x00ff00, true); else     drawMenuItem("EXIT", 100, 240, 100, 25, 0x00ff00, false);

Kode di atas menggunakan fungsi yang telah kita buat sebelumnya, mengapa kita harus meletakkan kode itu di atas flushGraphics()? Karena kalau kita menaruhnya dibawah flushGraphics() maka tulisan tersebut akan selalu refresh, sehingga yang keliatan hanya bola saja. Coba run di emulator. Wah ternyata ada kekurangannya, yaitu ketika kita tekan bawah atau atas, maka tombol akan tertekan terus menerus, sehingga kita akan sulit memilih menu  Tenang, kita akan mencoba membuat kode agar tombol yang ditekan tidak terus-menerus jalan  Untuk bisa seperti, kita harus membuat sebuah fungsi yang mengecek apakah tombol sedang ditekan tahan atau tidak. Mari kita tambahkan 2 variable global ini,

private boolean upButtonHolded; private boolean downButtonHolded;

Sekarang kita rubah fungsi di input(), di conditional tombol atas ditekan, ganti previousMenu(); dengan ini,

if(!upButtonHolded){     previousMenu();     upButtonHolded=true; }

Kode tersebut akan mengecek apakah upButtonHolded bernilai false? Jika ya maka lakukan fungsi previousMenu() dan rubah state upButtonHolded menjadi true, dengan demikian ketika kita tahan tombol atas, maka fungsi previousMenu() tidak terpanggil lagi, karena upButtonHolded bernilai true. Begitu pula dengan tombol bawahnya,

if(!downButtonHolded){     nextMenu();     downButtonHolded=true; }

Oh iya jangan lupa, kita juga harus merubah nilai dari upButtonHolded dan downButtonHolded menjadi false kembali, agar fungsi previousMenu dan nextMenu berfungsi kembali, taruh kode berikut di ujung IF di input(),

else{     if(upButtonHolded)         upButtonHolded=false;     if(downButtonHolded)         downButtonHolded=false; }

Sekarang kita juga akan mencoba untuk me-load gambar, file gambar tersebut baiknya kita simpan dalam bentuk PNG. Kita akan mencoba mengganti layar hitam menjadi background.png, pertama-tama kita coba tambahkan variable global ini,

private Image mainMenuBackground;

Lalu kita cari file image yang ingin kita load, tapi harus berupa png, simpen pada folder res. Sekarang kita tambahkan kode di bagian fungsi run() sebelum game loop,

try {     mainMenuBackground = Image.createImage("/background.png"); } catch (IOException e1) {     e1.printStackTrace(); }

Kode diatas harus kita taruh di dalam fungsi try...catch... agar ketika terjadi error, kita dapat mengetahuinya dengan mudah. Sekarang, di game loop, kita rubah kode berikut,

g.setColor(0x000000); g.fillRect(0, 0, getWidth(), getHeight());

menjadi

g.drawImage(mainMenuBackground, 0, 0, 0);

drawImage() memiliki parameter seperti ini, (Image img, int x, int y, ImageObserver observer), dengan penjelasan masing-masing sebagai berikut,

1 2 3 4

img - the specified image to be drawn. x - the x coordinate. y - the y coordinate. observer - object to be notified as more of the image is converted.

Referenced
Lalu kita buat tulisan baru, agar terlihat lebih keren  letakkan setelah drawImage() di atas

drawText("Game Pong", 50, 50, 0xffff00);

Wah pasti keluar error ya di eclipse-nya, kenapa? Karena kita lupa meng-import lcdui.image dan io.IOException 

import javax.microedition.lcdui.Image; import java.io.IOException;

Dengan begitu, menu kita akan terlihat lebih baik  , coba jalankan emulatornya.

Apa cuma itu kemampuan J2ME untuk menampilkan gambar? Tentu tidak, nanti kita akan mencoba menampilkan sprite dengan J2ME, nanti kita akan mencoba untuk membuat objek yang bergerak seperti animasi 
Nah ini akhir dari penjelasan dari membuat menu game 

Download Source Code: Project part 3

sumber : http://agatestudio.com/blog/?p=446#more-446