Anda di halaman 1dari 13

J2ME Game Dev #1: Environment Set Up

Membuat game tidaklah sesulit yang kita kira, untuk kesempatan ini kita akan mencoba menginstall kebutuhan untuk membuat game mobile. File yang kita butuhkan adalah: 1. Java Development Kit terbaru. 2. Sun Java Wireless Toolkit for CLDC 2.5.2 3. Strawberry Perl 5.10 4. Eclipse Pulsar 3.6 (Helios) 5. Sony Ericsson SDK 2.5.0.6 for Java ME Plaftorm Setelah kita memiliki semua file tersebut, install sesuai dengan urutan, untuk eclipse tidak perlu di install, cukup di-extract saja. Sekarang mari kita setting eclipse agar dapat berjalan dengan emulatornya. 1. Pertama-tama kita buka Eclipse Pulsar, lalu pada menu Windows > Preferences, pilih Java ME > Device Management akan muncul tampilan seperti gambar.

Lalu klik Manual install browse ke tempat dimana kita menginstall Sony Ericsson SDK, tekan ok, maka eclipse kita akan bekerja mencari semua emulator yang terdapat di folder Sony Ericsson, lalu tekan finish. Ketika kembali ke layar Device Management, pilih emulator yang terletak di folder Sony Ericsson SDK 2.5.0.6 for Java ME Plaftorm(Emulator) bukan (Debug On-Device), saya akan mencoba emulator SonyEricsson_JP8_240x320_Emu. Lalu Set as Default dan tekan OK. 2. Sekarang mari kita coba membuat project baru, pilih menu File > New > MIDlet Project. Apabila setting pada point pertama kita benar, maka akan tampilan seperti ini

Klik Next > Next > Finish. 3. Setelah itu, mari kita coba membuat MIDlet kita yang pertama, klik kanan di project kita, lalu pilihNew > Java ME MIDlet, masukkan nama file kita, misalnya MainMIDlet, pilih Finish. Sekarang kita tambahkan sebaris kode di dalam fungsi startApp() System.out.println("Bermain bersama Agate!"); Kemudian klik kanan di project eclipse kita, pilih Run As > 2 Emulated Java ME MIDlet, maka akan keluar emulator kita

Tampilan emulator yang masih kosong dan di Console akan terlihat pula string Bermain bersama Agate!

Itu adalah MIDlet kita yang pertama! Download Source Code: MainMidlet

J2ME Game Dev #2: Graphics dan Moving Object


Materi kali ini tentang fungsi Graphics dan Moving Object. Setelah sebelumnya kita melakukan setting pada eclipse kita dan mencoba MIDlet pertama kita, sekarang kita coba untuk membuat gambar dan membuat gambar tersebut bergerak. Sekarang mari kita mencoba membuat sebuah bola berwarna putih, di atas layar berwarna hitam. Kita akan membuat 2 file, yang pertama adalah MainMidlet.java yang berfungsi sebagai MIDlet utama yang dijalankan dan MainCanvas.java berfungsi untuk menampung kode-kode kita untuk menggambar objek. Mari kita bedah file satu persatu, dimulai dari MainCanvas.java. 1. Pertama buatlah sebuah kelas Java Me Midlet baru dengan nama MainCanvas.java. Ganti import kita menjadi seperti ini import javax.microedition.lcdui.Graphics; import javax.microedition.lcdui.game.GameCanvas; import javax.microedition.midlet.MIDlet; file java kita nanti akan mengimport Graphics , GameCanvas, dan MIDlet agar kita dapat membuat gambar. Lalu kita buat main class kita inherit dari GameCanvas dan implements Runnable. public class MainCanvas extends GameCanvas implements Runnable { . Kita buat beberapa variabel global seperti ini public MIDlet mainMidlet; public Graphics g; public static int SLEEP_TIME = 1000/30; mainMidlet kita butuhkan untuk konstruktor, g digunakan untuk menggambar objeknya, sedangkan SLEEP_TIME berguna untuk mendefinisikan waktu sleep thread kita. Secara keseluruhan, kita memiliki 4 fungsi, yaitu: 1. Fungsi MainCanvas(), MainCanvas merupakan konstruktor, sekarang kita isi dengan kode berikut. Pertama-tama kita tulis parameter masukkan ini,

(MIDlet midlet) Lalu isi dari konstruktor, kita isikan dengan ini, super(false); mainMidlet = midlet; this.setFullScreenMode(true); Kode di atas membuat aplikasi yang kita buat akan menjadi fullscreen mode. mainMidlet = midlet untuk membuat kita bisa mengakses fungsi yang ada di MainMidlet. 2. Fungsi mulai() Pada fungsi mulai, kita tambahkan baris kode berikut, Thread runner = new Thread(this); runner.start(); Kode di atas merupakan fungsi untuk membuat thread baru untuk menjalankan canvas, runner merupakan instansiasi dari class Thread, sehingga runner bisa memanggil fungsi start(). 3. Fungsi run() Buat fungsi run(), fungsi ini merupakan hasil implements dari Runnable public void run() { //isi kode... } Pada , kita instansiasikan dulu getGraphics ke g g = getGraphics(); Dengan begini, g akan memiliki fungsi dari getGraphics(), seperti g.setColor(), g.fillRect(), dan lain-lain, lalu kita buat game loop di dalam fungsi run(), while(true){ //kode-kode.... } semua kode-kode yang berada didalam loop tersebut akan di ulang terus menerus, untuk saat ini tidak ada kondisi yang membuat game ini berhenti, karena while(true). Coba kita masukkan System.out.print("Testing dulu yah...") Run emulator, maka akan terlihat di console seperti ini,

Game Loop Lalu kita tambahkan kode berikut didalam game loop kita agar dapat menampilkan latar belakang hitam seperti ini,

g.setColor(0x000000); g.fillRect(0, 0, getWidth(), getHeight()); Kode tersebut akan membuat sebuah kotak berwarna hitam, dimulai dari koordinat (0,0) sampai koordinat (getWidth(), getHeight()) (getWidth dan getHeight merupakan turunan dari GameCanvas). drawCircle(50, 50, 40, 0xff0000); Kode ini akan membuat game kita menggambar sebuah lingkaran, drawCircle merupakan fungsi yang kita buat sendiri, nanti kita akan bahas isi dari fungsi drawCircle(). Lalu kita tambah flushGraphics(); try { Thread.sleep(SLEEP_TIME);

} catch (InterruptedException e) { e.printStackTrace(); } flushGraphics() berguna agar ketika terjadi game loop, gambar akan terhapus dan tergambar ulang. Sedangkan fungsi Thread.sleep() berfungsi untuk memperlambat proses update gambar agar device tidak terlalu berat. 4. drawCircle() public void drawCircle(int x, int y, int diameter, int color){ g.setColor(color); g.fillArc(x-diameter/2, y-diameter/2, diameter, diameter, 0, 360); } Ini merupakan fungsi yang kita panggil sebelumnya, sebenarnya untuk membuat gambar lingkaran bisa dilakukan dengan memanggil fungsi fillArc dengan parameter masukan (int x, int y, int width, int height, int startAngle, int arcAngle)

1 2 3 4 5 6

x - koordinat x sudut kiri atas lingkaran yang akan di isi. y - koordinat y sudut kiri atas lingkaran yang akan di isi. width - lebar dari lingkaran yang akan di isi. height - tinggi dari lingkaran yang akan di isi. startAngle - awal dari sudut.

arcAngle - akhir dari sudut, misalkan startAngle 0 dan arcAngle 360 maka akan terbentuk lingkaran sempurna.

referenced Setelah kita buat MainCanvas.java, sekarang mari kita rubah file MainMidlet.java. Yang kita butuhkan hanya menambahkan import ini, import javax.microedition.lcdui.Display; import javax.microedition.lcdui.game.GameCanvas; Lalu tambahkan ini di variable global public MainCanvas canvas; Masukkan ini di konstruktor canvas = new MainCanvas(this); Terakhir tambahkan ini di fungsi startApp()

Display display = Display.getDisplay(this); display.setCurrent(canvas); canvas.mulai(); Mari kita coba run aplikasi kita Kalau tidak ada masalah, harusnya keluar seperti di gambar,

Nah sekarang kita coba agar bola yang telah kita buat ini bisa bergerak , secara logika kita harus meng-update posisi dari bola kita secara dinamis. Kita tadi membuat drawCircle() dengan parameter masukan yang statis, yaitu 50. Sekarang kita modif file MainCanvas.java agar bola kita bisa bergerak, public int ballX; public int ballY; public int speed_ballX; public int speed_ballY; masukan kode di atas sebagai variable global, lalu masukan kode berikut di fungsi run() ballX = 60; ballY = 60; speed_ballX = 3; speed_ballY = 3; ballX dan ballY merupakan posisi awal dari sang bola, speed_ballX dan speed_ballY adalah kecepatan awal dari si bola. Lalu kita rubah drawCircle kita menjadi drawCircle(ballX, ballY, 10, 0xffffff);

Dengan begitu, maka posisi awal dari bola adalah (60,60). Posisi bola sekarang sudah dinamis, kita bisa dengan mudah merubah posisi bola dengan merubah nilai dari ballX dan ballY. Karena kita ingin bola bergerak dengan kecepatan konstan maka kita gunakan kecepatan yang konstan juga yaitu speed_ballX dan speed_ballY. ballX+=speed_ballX; ballY+=speed_ballY; Mari kita coba run aplikasi kita, pasti bola kita bergerak . Eh tapi kenapa bolanya malah meluncur keluar batas? Hilang tidak muncul lagi Ya, itu karena kita belum memberikan collision detection, collision detection memungkinkan merubah arah bola ketika dia menabrak batas device kita, simpel saja sebenarnya hanya dengan menambah conditional saja, if(ballX>getWidth()){ speed_ballX*=-1; }else if(ballX<0){ speed_ballX*=-1; } if(ballY>getHeight()){ speed_ballY*=-1; }else if(ballY<0){ speed_ballY*=-1; } Pada kode di atas, terlihat bahwa ada conditional yang mengecek apakah ballX > getWidth() , kalau hasilnya true berarti ballX sudah mencapai ujung kanan dari device kita, maka nilai dari speed_ballX yang awalnya positif (bergerak ke kanan) harus kita jadikan negatif (bergerak ke kiri), yaitu dikali -1. Jika ballX < 0 berarti ballX sudah mencapai batas kiri dari device kita, maka kita rubah lagi speed_ballX menjadi positif kembali dengan mengalikannya dengan -1 lagi. Begitu pula dengan ballY . Yap itu adalah akhir dari sesi ini, selamat mencoba Download Source Code: Project part 2

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

Anda mungkin juga menyukai