Pada kesempatan kali ini saya akan memberikan kamu tutorial mengenai Canvas
pada J2ME yang biasanya sering digunakan di dalam pembuatan Game!
Pastinya kamu sudah tahu ya mengenai game pada platform klasik ini.
Dalam tutorial kali ini kamu perlu mempersiapkan beberapa tools diantaranya:
- Java Development Kit (JDK) v1.7
- NetBeans dengan fitur Java Mobile Edition (ME).
- Oracle (TM) ME SDK 3.2 Device Manager.
Sebelumnya akan saya jelaskan apa itu Canvas pada J2ME dan kegunaannya untuk pembuatan game. Lebih spesifik lagi, dalam tutorial ini saya menggunakan kelas GameCanvas yang merupakan turunan (inheritance) langsung dari kelas Canvas yang juga merupakan turunan (inheritance) dari kelas Displayable.
GameCanvas
kelas menyediakan dasar untuk user interface game. Selain fitur yang
diwarisi dari Canvas (commands, input events, dll) juga menyediakan
kemampuan-game spesifik seperti buffer grafis off-layar dan kemampuan
untuk menanyakan status kunci. Sedangkan Canvas adalah
kelas dasar untuk menulis aplikasi yang perlu untuk menangani
peristiwa-tingkat rendah dan untuk mengeluarkan panggilan grafis untuk
menggambar ke layar. Aplikasi game kemungkinan akan membuat banyak
penggunaan dari kelas Canvas. Dari perspektif pengembangan aplikasi,
kelas Canvas dipertukarkan dengan kelas standar Screen, sehingga
aplikasi dapat mencampur dan mencocokkan kanvas dengan layar tingkat
tinggi yang diperlukan.
Sampel J2ME ini menunjukkan penggunaan kanvas di sebuah MIDlet.
Sebagian besar metode grafis yang tersedia yang digunakan di sini untuk
memberitahu Anda dengan cepat mempelajari konsep pemrograman grafis
dalam program J2ME. Hal ini juga menunjukkan dasar-dasar membuat game
J2ME menggunakan kontrol dari telepon. Misalnya penanganan kiri, tombol
kanan dan atas, bawah tombol dll.
Itu
tadi adalah penjelasan mengenai Canvas yang akan kita gunakan dalam
pembuatan sample game ini. Selanjutnya saya bakal menjelaskan bagaimana
jalannya aplikasi sample game yang akan kita buat
Kita
akan membuat sample game yang bernama Moving Circle, dimana terdapat
sebuah circle (lingkaran) dalam satu layar yang bergerak tanpa
henti. Seperti yang telah kita ketahui sebelumnya bahwa aplikasi J2ME
akan berjalan diatas MIDlet yang sama kegunaannya dengan Activity pada
Android. Untuk itu dalam pembuatan aplikasi game ini saya akan membuat 1
kelas Canvas dan 1 kelas main (MIDlet).
Langsung saja langkah pertama yaitu buka NetBeans-nya *yaiyaalaah, dan langsung New->Project, pilih Java ME Project -> Mobile Application.
Next, beri nama project.
Next, pilih emulator dan device nya.
Setelah selesai membuat project baru, maka akan muncul dalam project explorer seperti ini:
Kemudian kita buat kelas yang pertama yaitu kelas MovingCircleCanvas.java dimana kegunaan kelas ini adalah untuk menggambar dan menggerakkan objek (lingkaran) dalam sebuah kanvas.
Klik, kemudian beri nama file:
Setelah file MovingCircleCanvas.java sudah dibuat, maka Let's Code! Kelas MovingCircleCanvas.java ini meng-extends kelas GameCanvas (yang sudah dijelaskan sebelumnya) dan meng-implements Runnable untuk menjalankan Thread.
1
|
public class MovingCircleCanvas extends GameCanvas implements Runnable {
|
Buat beberapa variable yang akan digunakan:
1
2
3
4
5
6
7
8
9
|
public MIDlet mainMidlet;
public Graphics g;
public static int SLEEP_TIME = 1000 / 30;
public static int ballRadius, ballX, ballY;
public static int speedBallX = 5;
public static int speedBallY = 3;
public static int diameter = 10;
private static final int BOX_HEIGHT = 290;
private static final int BOX_WIDTH = 240;
|
Bangun konstruktor untuk kelas ini untuk dipanggil pada kelas Midlet.java (kelas Main)
1
2
3
4
5
|
public MovingCircleCanvas(MIDlet midlet) {
super(false);
mainMidlet = midlet;
}
|
Kemudian buat method untuk menjalankan Thread, dalam method ini kita bakal membangun game logic dari game yang akan kita buat.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
public void mulai() {
Thread runner = new Thread(this);
runner.start();
}
public void run() {
g = getGraphics();
ballRadius = 0;
ballX = ballRadius + BOX_WIDTH / 2;
ballY = ballRadius + BOX_HEIGHT / 2;
while (true) {
g.setColor(255, 255, 255);
g.fillRect(0, 0, getWidth(), getHeight());
drawCircle(ballX, ballY, diameter, 0xff0000);
/**
* membuat text di layar
*/
g.setColor(0, 0, 0);
g.drawString("A Game Test By @ndhaperdana", BOX_HEIGHT / 2, BOX_WIDTH / 2, g.TOP | g.HCENTER);
Font font = g.getFont();
g.drawString("UP-DOWN to move ball", BOX_WIDTH / 2, BOX_HEIGHT / 2 + font.getHeight(), g.TOP | g.HCENTER);
g.drawString("LEFT-RIGHT to change ball size", BOX_WIDTH / 2, BOX_HEIGHT / 2 + font.getHeight() * 2, g.TOP | g.HCENTER);
ballX += speedBallX;
ballY += speedBallY;
/**
* collision detection (tumbukan terhadap screen canvas)
*/
if (ballX - ballRadius < 0) {
speedBallX = -speedBallX;
ballX = ballRadius;
} else if (ballX + ballRadius > BOX_WIDTH) {
speedBallX = -speedBallX;
ballX = BOX_WIDTH - ballRadius;
}
if (ballY - ballRadius < 0) {
speedBallY = -speedBallY;
ballY = ballRadius;
} else if (ballY + ballRadius > BOX_HEIGHT) {
speedBallY = -speedBallY;
ballY = BOX_HEIGHT - ballRadius;
}
flushGraphics();
repaint();
try {
Thread.sleep(SLEEP_TIME);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
/**
* void untuk menggambar bentuk bola
*
* @param x //letak bola
* @param y
* @param diameter //diameter
* @param color //warna
*/
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);
}
|
Setelah selesai membuat game logic tadi, maka lanjut membuat method untuk meng-handle ketika navigation key di tekan.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
/**
* void keyPressed untuk action kalau nav.key ditekan
*/
public void keyPressed(int keyCode) {
int gameAction = getGameAction(keyCode);
if (Midlet.isPaused) {
if (gameAction == UP || gameAction == DOWN || gameAction == LEFT || gameAction == RIGHT) {
}
else {
super.keyPressed(keyCode);
}
} else {
switch (gameAction) {
case UP:
ballX += 5;
speedBallX += 5;
ballY += 5;
speedBallY += 5;
break;
case DOWN:
ballX -= 5;
speedBallX -= 5;
ballY -= 5;
speedBallY -= 5;
break;
case RIGHT:
if (diameter < 20) {
diameter += 1;
}
break;
case LEFT:
if (diameter > 0) {
diameter -= 1;
}
break;
}
}
repaint();
}
|
Selesai
sudah membuat dan menggerakkan suatu objek pada Canvas, sekarang kita
lanjut untuk menjalankan file tadi dengan memanggil file tadi ke file
utama Midlet.java dan beberapa tambahan untuk meng-handle jika tombol left dan right pada handphone ditekan.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
/**
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package movingcircle;
import javax.microedition.lcdui.Alert;
import javax.microedition.lcdui.Command;
import javax.microedition.lcdui.CommandListener;
import javax.microedition.lcdui.Display;
import javax.microedition.lcdui.Displayable;
import javax.microedition.midlet.*;
/**
* @author Nanda w Perdana
*/
public class Midlet extends MIDlet implements CommandListener {
public MovingCircleCanvas canvas;
public Alert alert;
public static boolean isPaused = false;
private Command exitCmd = new Command("Exit", Command.EXIT, 99);
private Command pauseCmd = new Command("Pause", Command.SCREEN, 1);
private Command resumeCmd = new Command("Resume", Command.SCREEN, 0);
private int tempX, tempY;
public Midlet() {
canvas = new MovingCircleCanvas(this);
canvas.addCommand(exitCmd);
canvas.addCommand(pauseCmd);
canvas.setCommandListener(this);
}
protected void destroyApp(boolean arg0) throws MIDletStateChangeException {
}
protected void pauseApp() {
}
protected void startApp() throws MIDletStateChangeException {
Display display = Display.getDisplay(this);
display.setCurrent(canvas);
canvas.mulai();
}
public void commandAction(Command c, Displayable s) {
if (c == exitCmd) {
try {
destroyApp(true);
notifyDestroyed();
} catch (MIDletStateChangeException e) {
e.printStackTrace();
}
} else if (c == pauseCmd) {
isPaused = true;
canvas.addCommand(resumeCmd);
canvas.removeCommand(pauseCmd);
tempX = canvas.speedBallX;
tempY = canvas.speedBallY;
canvas.speedBallX = 0;
canvas.speedBallY = 0;
} else if (c == resumeCmd) {
isPaused = false;
canvas.addCommand(pauseCmd);
canvas.removeCommand(resumeCmd);
canvas.speedBallX = tempX;
canvas.speedBallY = tempY;
}
}
}
|
Yap, selesai sudah kita membuat satu aplikasi sample game ini, langkah selanjutnya tinggal compile dan jalankan aplikasinya
Sekian tutorial dari saya, terimakasih, dan Let's Rock!
