TUTORIAL

PUTBALL (SOCCER GAME)

I. Deskripsi Game
I.1 Nama Game : PUTBALL
I.2 Deskripsi : Game ini merupakan game sepak bola dimana player
merupakan eksekutor tendangan penalty.

I.3 Genre : Game ini dapat dimainkan oleh semua kalangan dengan
usia > 4 tahun.
I.4 Story Board : Game ini bercerita tentang seorang eksekutor penalty
dimana harus memasukkan 5 gol ke gawang lawan dengan
penjagaan 4 orang kipper, kesempatan yang diberikan 3
kali dan akan terus berkurang apabila bola dapat ditahan
oleh kipper
I.5 Pembuat : Febriansyah Razak

II. Software dan Hardware

II.1 Software : JDK 1.5 atau diatasnya
Netbeans 6.8 + Mobility kit
Sun Java Wireless Toolkit (JWTK)

II.2 Hardware : Computer Pentium4

Min. 512 MB RAM
HandPhone Java Support
II. Pembuatan Game

II.1. Pembuatan Project

Pertama kita membuata New Project (Ctrl + Shift + N)
pilih Categories
Mobility dan
Projects : MIDP Application
klik Next
namakan Project (dalam hal ini putBall), unChecklist
HelloMidlet
klik N ext
lalu pilih Finish
 II.2 Pembuatan Package

Langkah selanjutnya untuk setelah pembuatan project adalah pembuatan package,

package disini serupa dengan folder. Setiap package akan membentuk satu folder di dalam
project (src/[nama folder]), package dibuat agar lebih rapi dan teratur dalam melakukan
pemrograman.

Berikut cara membuat package :

Dalam project ini akan dibuat 3 package (termasuk default package) ketiganya itu antara lain :

No Nama Package Kegunaan

1. <default package> Menampung seluruh kode-kode program
2. Audio Menampung file-file berbentuk audio (midi/wav)
3. Images Menampung file-file berbentuk image(png)

Didalam sebuah package terdapat berbagai macam file, baik itu code, music, maupun image. Di
dalam project ini terdapat 3 package seperti di atas.

Package Audio berisi file midi (StarTrek.mid)

Package Images berisi Image yang terdiri dari :

bolaSepak.png, Eksekusi.png, gawang.png, jaring.png, kiper.png, lapangan.png, mainMenu.png,

off_0.png, off_1.png, off_2.png, off_3.png, on_0.png, on_1.png, on_2.png, on_3.png, splashSoccer.png
II.2 Pembuatan Midlet

Midlet merupakan Kelas yang pertama kali dipanggil oleh program. Kelas ini harus ada
dalam pembuatan Mobil Application. Cara pembuatan midlet :

Klik kanan pada Project
Pilih New
MIDlet
Kemudian berinama file,
gambar akan terlihat seperti berikut ini :

Setelah nama file diisi klik finish untuk membuat MIDlet.

package coding;

import javax.microedition.midlet.*;

/**

* @author FeRaz

*/

public class Bola extends MIDlet {

public void startApp() {

public void pauseApp() {

public void destroyApp(boolean unconditional) {

Selanjutnya kita membuat inisialisasi variable:

Display display;

Main play;

Splash splash;

private Timer timer;

private TimerTask timerTask;

Menu menu;

Kemudian kita tambahkan script pada method StartApp() sehingga menjadi :

public void startApp() {

try{

display = Display.getDisplay(this);

splash = new Splash(this);

display.setCurrent(splash);

}
 catch(Exception ie){

ie.printStackTrace();

Setelah itu buat method startTimer() dan stoptimer() seperti berikut :

public void startTimer() {

menu = new Menu(this);

timer = new Timer();

timerTask = new TimerTask() {

public void run() {

display.setCurrent(menu);

};

timer.schedule(timerTask, 2000);

public void stopTimer(){

timer.cancel();

timerTask.cancel();

Untuk pemanggilan kelas utama buat sebuah method mulaiGame()

public void mulaiGame()

play = new Main(this);

display.setCurrent(play);

}
II.3 Pembuatan Java Class

Di dalam sebuah pemrograman perlu kita buat kelas-kelas agar rapi dan dapat difahami oleh
orang lain yang membacanya, untuk itu kita perlu membuat kelas antara lain :

No Nama Class Kegunaan

1. Bola Midlet (inti utama dari program J2ME)
2. Main Kelas utama yang menampung berbagai aktifitas permainan
3. Menu Kelas untuk memanggil dan menggunakan main menu
4. Musik Kelas untuk menjalankan file music
5. Splash Kelas untuk memanggil splash screen

1. Pembuatan Kelas Splash.java

Splash biasanya digunakan untuk menampilkan layar pembuka. Langkah pembuatannya sebagai
berikut :

Klik kanan pada project kemudian pilih Java Class.

 Setelah itu isikan Nama Kelas (dalam hal ini splash), kemudian klik Finish ketika telah
selesai.

Agar Kelas dapat digunakan untuk menggambar maka harus mengExtends Class Canvas.
Dalam menExtends Calss Canvas ada 2 cara yang harus kita lakukan, Pertama kita harus
mengimport javax.microedition.lcdui.Canvas; dan yang kedua mengOveride method dari Canvas
yaitu paint(Graphics g) dan mengimport javax.microedition.lcdui.Graphics; setelah itu kita juga
mengimport javax.microedition.lcdui.Image; untuk menginisialisasi gambar.

Kemudian lengkapi code Splash.java seperti berikut :

import java.io.IOException;

import javax.microedition.lcdui.Canvas;

import javax.microedition.lcdui.Graphics;

import javax.microedition.lcdui.Image;

public class Splash extends Canvas{

private Bola midlet;

int lebar, tinggi;

Image gambar;

public Splash(Bola midlet) {

this.midlet = midlet;

lebar = getWidth();

tinggi = getHeight();

try {

gambar = Image.createImage("/Images/soccerSplash.png");
 setFullScreenMode(true);

} catch (IOException ex) {

ex.printStackTrace();

protected void paint(Graphics g) {

g.drawImage(gambar, getWidth()/2, getHeight()/2, g.HCENTER|g.VCENTER);

protected void hideNotify(){

midlet.stopTimer();

protected void showNotify(){

midlet.startTimer();

Setelah itu jalankan program, maka akan tampil splashScreen seperti berikut :
 2. Pembuatan Kelas Menu

Menu perlu dibuat agar player dapat memilih option dari permainan, dalam hal ini
terdapat 4 option, antara lain : Play, Help, About, Exit.

Untuk itu kita persiapkan dulu kelas dengan nama Menu.java, kemudian extends Canvas
dan implementasi Runnable.

public class Menu extends Canvas implements Runnable {

public void run() {

}

Kemudian perlu dibuat beberapa method untuk penanganan logika dan kondisi, berikut
method yang harus dibuat :

No Nama Method Kegunaan

1. Init() Berisi inisialisasi data
2. Menu() Constructor kelas
3. paint(Graphic g) Berisi code mengenai image dan pengaturan tampilan
4. KeyPressed() Method untuk mengendalikan player
5. Run() Berisi method yang selalu di panggil

Tahap selanjutnya adalah pembuatan Constructor. Berikut langkah-langkahnya :

 Kemudian setelah itu klik kanan dan pilih insert Code
Consructor , seperti terlihat pada
tampilan berikut.

CheckList pada bagian midlet Core, kemudian klik generate maka script Constructor akan
terbentuk secara otomatis seperti berikut, lalu tambahkan Thread.

public class Menu extends Canvas implements Runnable {

public Menu(Bola midlet) {

this.midlet = midlet;
Thread t = new Thread(this);
t.start();
}
public void run() {
}

Kemudian kita perlu membuat method init(), berikut contoh listing programnya :

private void init() {

setFullScreenMode(true);
try {
for (int i = 0; i < 4; i++) {
image_off[i] = Image.createImage("/Images/off_" + i + ".png");
image_on[i] = Image.createImage("/Images/on_" + i + ".png");
 gambar = Image.createImage("/Images/mainMenu.png");
}

} catch (IOException ex) {

ex.printStackTrace();
}
}

Setelah itu tahap selanjutnya adalah pembuatan method paint()

protected void paint(Graphics g) {

g.setColor(0, 0, 0);
g.drawImage(gambar, 0, 0, 0);

for (int i = 0; i < 2; i++) {

if (index == 0) {
g.drawImage(image_on[0], 10, 70, 0);

} else {

g.drawImage(image_off[0], 10, 70, 0);

}
if (index == 1) {
g.drawImage(image_on[1], 10, 140, 0);
} else {
g.drawImage(image_off[1], 10, 140, 0);
}

}
if (index == 2) {
g.drawImage(image_on[2], 80, 70, 0);
} else {
g.drawImage(image_off[2], 80, 70, 0);
}

if (index == 3) {
g.drawImage(image_on[3], 80, 140, 0);
} else {
g.drawImage(image_off[3], 80, 140, 0);
}
}

Pada method ini kita memanggil Image menggunakan array sehingga lebih menghemat
baris program. Kemudian langkah selanjutnya adalah pembuatan method keyPressed().
 protected void keyPressed(int key) {
if ((key == 50) || key == -1 && index != 0) {
index--;
try {
Manager.playTone(note, 1, 30);
} catch (MediaException ex) {
ex.printStackTrace();
}
} else if (key == 56 || key == -2 && index != 3) {
index++;
try {
Manager.playTone(note, 1, 30);
} catch (MediaException ex) {
ex.printStackTrace();
}
}
if ((key == 53 || key == -5 && index == 3)) {
midlet.destroyApp(true);
}
if ((key == 53 || key == -5 && index == 0)) {
midlet.mulaiGame();
}
}

Method ini digunakan sebagai pemilih dalam menu, dalam method ini terdapat kondisi
dimana player dapat memilih menu. Setelah itu method terakhir yang harus kita tambahkan
adalah method run(). Method ini penting karena segala method yang terus dipanggil berulang
oleh program terletak di method ini .

public void run() {

while (true) {
repaint();
try {
Thread.sleep(20);
} catch (InterruptedException ex) {
ex.printStackTrace();
}

}
}
 Setelah semua method selesai dibuat, clean and build program dengan cara menekan
tombol Shift + F11, tunggu hingga selesai kemudian jalankan program dengan cara tekan F6.
Akan tampil menu setelah splashScreen hilang seperti ini :
3. Membuat Kelas Main.java

Setelah pembuatan splashScreen dan menu telah selesai dibuat dan dapat dijalankan dengan
sempurna, langkah selanjutnya adalah membuat kelas inti dari permainan, dalam hal ini dinamakan
kelas main (main.java).

Untuk itu langkah awal yang perlu dibuat adalah membuat Java Class yang baru. Berikut
langkah-langkahnya :

Klik kanan pada package di dalam project yang ingin kita sisipkan kelas tersebut, lalu pilih New

Java Class.
 Kemudian pada Class Name ketikkan Main sebagai nama kelas. Setelah itu klik finish maka kelas
baru dengan nama Main.java akan terbentuk. Setelah kelas terbentuk kita akan membuat berbagai
method-method yang khusus untuk menangani berbagai aktifitas pada permainan ini. Sebelum
membuatnya perlu kita fahami dulu konsep dari setiap method yang akan kita buat, berikut daftar
method-method yang akan kita buat.

No Nama Method Kegunaan

1. Init() Berisi inisialisasi data
2. Kendali() Berisi perintah untuk mengendalikan player
3. menangKalah(Graphic g) Berisi kondisi menang atau kalah pada permainan
4. MulaiGame() Method Thread yang dipakai untuk memulai setiap permainan
5. Musuh() Method yang menangani aktifitas musuh (kiper)
6. playMusik() Method untuk menjalankan file music
7. Run() Method Graphic yang diulang terus menerus selama permainan
8. Tabrak() Method untuk menangani kondisi tabrakan
9. Tampil() Method untuk menangani tampilan awal permainan
10. Tembak() Method untuk menendang bola
11. Tenaga() Method untuk mengatur kecepatan bola

Langkah awal adalah penurunan kelas GameCanvas dan Runnable, ketikkan kode berikut pada di
dalam kelas (perhatikan bahwa tidak seluruh kode diketik ulang tetapi hanya perlu penambahan saja).

public class Main extends GameCanvas implements Runnable {

Setelah itu apabila terdapat error maka klik kanan pada lampu kuning-merah yang terlihat pada
sisi kanan layar di nomor baris. Klik implements all abstract method agar kesalahan tersebut dapat
diatasi.
 Dengan begitu otomatis akan terbentuk method dengan nama run(), method ini akan kita
pergunakan untuk menangani segala hal yang berkaitan tentang perulanangan pemanggilan method lain
dalam permainan ini, berikut listingnya ;

public void run() {

// throw new UnsupportedOperationException("Not supported yet.");

Pada baris yang berisi throw new UnsupportedOperationException("Not supported yet.");

perlu di disable (dijadikan comment) dengan cara ketik double slash (//) sebelum baris tersebut. Setelah
itu kita perlu membuat constructor. Constructor merupakan sebuah method ini yang digunakan untuk
menjalankan permainan pertama kali (Thread). Cara untuk membuat constructor, pertama inisialisasi
midlet yang kita gunakan (dalam hal ini digunakan Core sebagai midlet).

Kemudian setelah itu klik kanan dan pilih insert Code
Consructor , seperti terlihat pada
tampilan berikut.
 CheckList pada bagian midlet Core, kemudian klik generate maka script Constructor akan
terbentuk secara otomatis.

public Main(boolean suppressKeyEvents, Core midlet) {

super(suppressKeyEvents);

this.midlet = midlet;

Untuk menyempurnakannnya hapus boolean suppressKeyEvents, dan ubah

super(suppressKeyEvents); menjadi seperti berikut :

public Main(Core midlet) {

super(true);

this.midlet = midlet;

Setelah itu kita insialisasi variable-variable yang akan kita gunakan didalam kelas Main

Bola midlet;

private Image bola, kiper, eksekutor, jaring;

private Image gawang, lapangan;

 private Sprite sBola, sKiper, sGawang, sKiper2, sKiper3, sKiper4,
sEksekutor, sJaring;

private boolean aktif, tanda = true;

private int tkhX = 113, tkhY = 236;

private int incTkh = 3, y = 30, kesempatan = 3, tendang= 25;

private int score = 0;

int gauge = 25;

Musik musik = new Musik();

Setelah itu kita perlu membuat method init() sebagai inisialisasi dari variable-variable diatas.

protected void init() {

try {

bola = Image.createImage("/Images/bolaSepak.png");

kiper = Image.createImage("/Images/kiper.png");

lapangan = Image.createImage("/Images/lapangan.png");

gawang = Image.createImage("/Images/gawang.png");

eksekutor = Image.createImage("/Images/eksekusi.png");

jaring = Image.createImage("/Images/jaring.png");

sKiper4 = new Sprite(kiper);

sKiper2 = new Sprite(kiper);

sKiper3 = new Sprite(kiper);

sGawang = new Sprite(gawang);

sBola = new Sprite(bola);

sKiper = new Sprite(kiper);

sEksekutor = new Sprite(eksekutor);

sJaring = new Sprite(jaring);

 } catch (IOException ex) {

ex.printStackTrace();

Apabila terdapat kesalahan lakukan seperti cara diatas, yaitu klik kanan lampu kuning-merah dan klik
import segala hal yang berhubungan dengan library yang masih salah tersebut. Kemudian setelah semua
kesalahan teratasi kita akan membuat method mulaiGame(). Method ini adalah method khusus yang
dipanggil pada Constructor untuk memulai game :

protected void mulaiGame() {

new Thread(this).start();

tampil();

Abaikan apabila terdapat kesalahan yang berupa pendeklarasian method baru, karena kesalahan
tersebut dikarenakan method yang dipanggil belum kita buat, Setelah itu kita akan menyelesaikan
masalah penyebab error tadi, yaitu pembuatan method tampil(), berikut listing codenya :

public void tampil() {

sBola.setVisible(true);

sGawang.setPosition(45, 15);

sGawang.setVisible(true);

sBola.setPosition(tkhX, tkhY);

sKiper.setVisible(true);

sKiper.setPosition(200, y);

sKiper2.setPosition(45, y);

sKiper3.setPosition(80, y);

sKiper4.setPosition(80, y);

sEksekutor.setPosition(tkhX, tkhY);

sJaring.setPosition(45, 5);
 }

Setelah itu kita akan menangani karakteristik musuh, kita perlu menampungnya pada method musuh(),
berikut listing programnya :

protected void musuh() {

sKiper.move(-45, 0);

sKiper2.move(20, 0);

sKiper3.move(5, 0);

sKiper4.move(-10, 0);

if (sKiper4.getX() < 45) {

sKiper4.setPosition(200, y);

if (sKiper3.getX() > 200) {

sKiper3.setPosition(45, y);

if (sKiper2.getX() > 200) {

sKiper2.setPosition(45, y);

if (sKiper.getX() < 45) {

sKiper.setPosition(200, y);

Jika method musuh sudah selesai kita buat, selanjutnya kita perlu membuat method kendali untuk
mengontrol pergerakan dari player. Fahami kode berikut ini kemudian tuliskan pada program.

private void kendali() {

int tombol = getKeyStates();

sBola.setVisible(true);

if(tombol == UP_PRESSED)

{
 tendang = tendang+2;

gauge = gauge+2;

if(tendang>=50)

tendang = 50;

if(tombol == DOWN_PRESSED)

tendang = tendang-2;

gauge = gauge-2;

if(tendang<=1)

gauge = 1;

tendang = 1;

if (tombol == RIGHT_PRESSED) {

tkhX += incTkh;

if (tkhX >= 200) {

tkhX = 200;

if (tombol == LEFT_PRESSED) {

tkhX -= incTkh;
 if (tkhX <= 0) {

tkhX = 0;

if (tombol == FIRE_PRESSED) {

aktif = true;

if (aktif) {

sBola.move(0, -tendang);

sBola.setVisible(true);

if (sBola.getY() < -15) {

aktif = false;

Kemudian setelah itu kita membuat method tembak() untuk menggerakan bola. Berikut listing
programnya :

private void tembak() {

if (!aktif) {

sBola.setPosition(tkhX + 5, tkhY);

sEksekutor.setPosition(tkhX + 5, tkhY + 5);

Setelah itu buatlah method tabrak() yang menangani kondisi-kondisi ketika tabarakan terjadi antara bola
dan kipper.
protected void tabrak() {

if (sBola.collidesWith(sKiper, aktif)

|| sBola.collidesWith(sKiper2, aktif)

|| sBola.collidesWith(sKiper3, aktif)

|| sBola.collidesWith(sKiper4, aktif)) {

sBola.setVisible(false);

kesempatan = kesempatan - 1;

aktif = false;

if (sBola.collidesWith(sGawang, true)) {

score = score + 1;

Kemudian buat method tenaga() untuk dapat mengatur kecepatan tembakan(), ikuti code berikut :

private void tenaga(){

Graphics g = getGraphics();

int tmp = gauge;

if(gauge>50)

tmp = 100;

}else

tmp=(int)((gauge*100)/50);

g.setColor(47,31,249);

g.fillRect(90, 300, (tmp+5), 10);

g.setColor(0,0,0);
 g.setFont(Font.getFont(Font.FACE_SYSTEM, Font.STYLE_BOLD,
Font.SIZE_LARGE));

g.drawString("Power : "+ tendang, getWidth()/2, 300, Graphics.BOTTOM

| Graphics.HCENTER);

Setelah itu jangan lupa buat kondisi menang dan Kalah, dalam hal ini kita akan menampung kondisi
tersebut pada method menangKalah(), ikuti kode berikut :

private void menangKalah(Graphics g) {

if (score == 5) {

g.setColor(0, 0, 0);

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

g.setColor(255, 255, 255);

g.drawString("Selamat, ANDA MENANG", getWidth() / 2, getHeight()

/ 2, Graphics.TOP | Graphics.HCENTER);

if (kesempatan < 1) {

g.setColor(0, 0, 0);

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

g.setColor(255, 255, 255);

g.drawString("Maaf, ANDA KALAH", getWidth() / 2, getHeight() / 2,

Graphics.TOP | Graphics.HCENTER);

Kemudian sebelum mengakhiri seluruhnya, kita perlu menyempurnakan method run(), tambahkan
kode-kode berikut pada method run() :

public void run() {

Graphics g = getGraphics();

while (tanda) {
 g.drawImage(lapangan, 0, 0, 0);

g.setColor(255, 255, 255);

g.setFont(Font.getFont(Font.FACE_SYSTEM, Font.STYLE_BOLD,
Font.SIZE_MEDIUM));

g.drawString("Score : " + score, 200, 240, Graphics.BOTTOM |

Graphics.HCENTER);

g.drawString("Kesempatan : " + kesempatan, 45, 240,

Graphics.BOTTOM | Graphics.HCENTER);

sGawang.paint(g);

sGawang.nextFrame();

sBola.paint(g);

sBola.nextFrame();

sKiper.paint(g);

sKiper.nextFrame();

sKiper2.paint(g);

sKiper2.nextFrame();

sKiper3.paint(g);

sKiper3.nextFrame();

sKiper4.paint(g);

sKiper4.nextFrame();

sEksekutor.paint(g);

sEksekutor.nextFrame();

sJaring.paint(g);

sJaring.nextFrame();

kendali();

tembak();

tabrak();

musuh();

tenaga();
 menangKalah(g);

flushGraphics();

try {

Thread.sleep(20);

} catch (InterruptedException ex) {

ex.printStackTrace();

Setelah semuanya selesai dan tidak terdapat kesalahan lagi. Kita dapat running program ini, namun
sebelum itu sebaiknya kita clean and build dahulu, hal ini diperlukan agar file .jar dan .jad di refresh
ulang. Langkahnya adalah sebagai berikut :

Klik kanan pada project yang akan kita jalankan, kemudian pilih clean and build, tunggu hingga proses ini
selesai kemudian run.
 Ketika di run, program akan tampak seperti gambar disamping. Gerakkan
kiri dan kanan untuk memilih posisi yang tepat, tekan atas-bawah untuk
mengontrol kecepatan bola. Apabila score mencapai nilai 50 maka
permain dinyatakan menang, namun kesempatan hanya berlaku 3 kali
saja, apabila bola tertahan kipper maka kesempatan berkurang dan
apabila kesempatan sudah habis dan score belum mencapai 50 maka
permainan dinyatakan game over dan pemain kalah.

4. Membuat kelas Musik. Java

Program sudah berjalan, namun tidak ada musik sebagai backSound yang diputar. Untuk melengkapinya
perlu dibuat terlebih dahulu kelas Musik.java, untuk pembuatannya sama seperti langkah sebelumnya,
buat terlebih dahulu kelas untuk menangani berbagai method yang akan dijalankan, kemudian buat
methodnya satu per satu :

No Nama Method Kegunaan

1. PlayWavMidi(String file) Berisi perintah untuk pemanggilan sound dan volume
2. PlayerUpdate() Berisi fungsi yang menangani Constructor pada Musik
3. stopMusic() Berisi method untuk menghentikan music

Untuk membuatnya fahami code berikut :

import javax.microedition.media.Manager;

import javax.microedition.media.Player;

import javax.microedition.media.PlayerListener;

import javax.microedition.media.control.VolumeControl;

class Musik implements PlayerListener{

private static Player player;

private VolumeControl vc;

public void playerUpdate(Player player, String event, Object eventData) {

void playWavMidi(String file) throws Exception{

player=Manager.createPlayer(getClass().getResourceAsStream(file),"audio/midi");

player.addPlayerListener(this);

player.setLoopCount(-1);;

player.prefetch();

player.realize();

vc=(VolumeControl)player.getControl("VolumeControl");

if(vc != null){

vc.setLevel(50);

player.start();

public void stopMusik(){

try {

player.stop();

} catch (Exception e) {

e.printStackTrace();

}
Kemudian kembali pada kelas Main.java untuk memanggil musik tersebut. Ubah hanya
seperlunya pada bagian method menangKalah() dan pembuatan method playMusic().

Berikut listing code playMusic() :

private void playMusic(){

try {

musik.playWavMidi("/Audio/StarTrek.mid");

} catch (Exception ex) {

ex.printStackTrace();

Kemudian tambahkan code berikut pada menangKalah()

musik.stopMusik();

Clean and build kembali program kemudian run, maka akan terdengar music backSound apabila game
dimainkan dan musik berhenti ketika game berakhir baik menang ataupun kalah.

SELESAI