2. Mobile Game Developer War 4: Online Camp
Introduction
• Pada game J2ME, biasanya terdapat 2
jenis gambar:
1. Primitif grafik
2. Image
3. Sprite
Primitif grafik sudah dijelaskan pada
materi terdahulu. Sekarang akan fokus
pada image dan sprite
3. Mobile Game Developer War 4: Online Camp
Pengenalan Image
• Image merupakan proses memanggil
gambar dari file image, dengan
menggunakan fungsi drawImage()
• Image digunakan ketika terlalu sulit dan
kompleks jika dikerjakan dengan primitif
grafik
4. Mobile Game Developer War 4: Online Camp
Penggunaan Image
• Untuk membuat
background
• Untuk membuat
menu, tombol, dll
• Untuk membuat
tilemap
5. Mobile Game Developer War 4: Online Camp
Insert image – inisialisasi variable
2. Buat variable global pada game canvas kita
Image b_about_off, b_about_on, b_exit_off,
b_exit_on, b_play_off, b_play_on, bg_about,
bg_mainmenu, hand_pointer;
1. Masukkan file gambar
ke folder res/mainMenu
6. Mobile Game Developer War 4: Online Camp
Insert image – inisialisasi variable
Buat fungsi init(), untuk memuat file gambar yang dibutuhkan
private void init(){
gameover = false;
screenState = SCREEN_MAIN_MENU;
//Initialize image
try {
//main menu
b_about_off = Image.createImage("/mainMenu/b_about_off.png");
b_about_on = Image.createImage("/mainMenu/b_about_on.png");
b_exit_off = Image.createImage("/mainMenu/b_exit_off.png");
b_exit_on = Image.createImage("/mainMenu/b_exit_on.png");
b_play_off = Image.createImage("/mainMenu/b_play_off.png");
b_play_on = Image.createImage("/mainMenu/b_play_on.png");
bg_about = Image.createImage("/mainMenu/bg_about.png");
bg_mainmenu = Image.createImage("/mainMenu/bg_mainmenu.png");
hand_pointer = Image.createImage("/mainMenu/hand_pointer.png");
} catch (IOException e) {
e.printStackTrace();
}
}
7. Mobile Game Developer War 4: Online Camp
Insert image – drawImage()
private void draw(){
switch (screenState) { 1 Lalu rubah pada fungsi
case SCREEN_MAIN_MENU: draw(), untuk
g.drawImage(bg_mainmenu, 0, 0, 0);
switch (curMenu) {
menggambar main menu.
case 1: Case 1, 2, dan 3 untuk
g.drawImage(b_play_on, getWidth()/2, 180,
Graphics.HCENTER | Graphics.VCENTER);
“mengganti” posisi dari
g.drawImage(b_about_off, getWidth()/2, 220, pointer.
Graphics.HCENTER | Graphics.VCENTER);
g.drawImage(b_exit_off, getWidth()/2, 260,
Graphics.HCENTER | Graphics.VCENTER); case 3:
g.drawImage(hand_pointer, getWidth()/5+5, 180, g.drawImage(b_play_off, getWidth()/2, 180, 3
Graphics.HCENTER | Graphics.VCENTER); Graphics.HCENTER | Graphics.VCENTER);
break; g.drawImage(b_about_off, getWidth()/2, 220,
Graphics.HCENTER | Graphics.VCENTER);
case 2: g.drawImage(b_exit_on, getWidth()/2, 260,
g.drawImage(b_play_off, getWidth()/2, 180, 2 Graphics.HCENTER | Graphics.VCENTER);
Graphics.HCENTER | Graphics.VCENTER); g.drawImage(hand_pointer, getWidth()/5+5, 260,
g.drawImage(b_about_on, getWidth()/2, 220, Graphics.HCENTER | Graphics.VCENTER);
Graphics.HCENTER | Graphics.VCENTER); break;
g.drawImage(b_exit_off, getWidth()/2, 260, break;
Graphics.HCENTER | Graphics.VCENTER);
g.drawImage(hand_pointer, getWidth()/5+5, 220, case SCREEN_OPTION:
Graphics.HCENTER | Graphics.VCENTER); ...
break; ...
8. Mobile Game Developer War 4: Online Camp
Change menu
private void getInput()
1 Lalu rubah kode pada bagian
{ getInput(), khususnya pada case
int keystate = getKeyStates();
switch (screenState) { SCREEN_MENU.
case SCREEN_MAIN_MENU:
int keyState = getKeyStates(); curMenu akan mengubah posisi pointer
if ((keyState & UP_PRESSED) != 0) {
if (curMenu <= 1) {
pada fungsi draw() sebelumnya.
curMenu = 3;
}else Ketika ditekan FIRE, maka screenState
curMenu--; akan berubah dan mengubah state
}else if ((keyState & DOWN_PRESSED) != 0) {
if (curMenu >= 3) { pada fungsi draw()
curMenu = 1;
if ((keyState & FIRE_PRESSED) != 0) {
}else
if (curMenu == 1) {
curMenu++; screenState = SCREEN_IN_GAME;
} }else if (curMenu == 2) {
screenState = SCREEN_ABOUT;
}else if (curMenu == 3) {
screenState = SCREEN_EXIT;
}
}
break;
case SCREEN_OPTION:
... 2
...
9. Mobile Game Developer War 4: Online Camp
Pengenalan Sprite
• Sprite merupakan deretan gambar yang
membentuk sebuah animasi
• Sprite dapat berupa peluru, monster,
karakter utama, spesial efek, dan
sebagainya
10. Mobile Game Developer War 4: Online Camp
Sprite Constructor
Ada 3 konstruktor yang disediakan oleh kelas Sprite:
1. Sprite(Image img)
membuat frame sprite tunggal, tidak beranimasi
2. Sprite(Sprite spr)
membuat Sprite baru dari Sprite lainnya
3. Sprite(Image img, int frameWidth, int frameHeight)
membuat animasi sprite dari 2 frame atau lebih, frameWidth adalah lebar
dari sebuah frame, dan frameHeight adalah tinggi dari sebuah frame.
Frame merupakan tinggi dan lebar dari sebuah animasi yang ingin ditampilkan.
Pada contoh dibawah, satu frame memiliki dimensi 52x40 pixel per framenya.
Dengan total 8 frame, maka dimensi totalnya 416x40 pixel.
11. Mobile Game Developer War 4: Online Camp
Playing Sprite
spr.nextFrame()
0 1 2 3 4 5 6 7
Awalnya frame yang dimainkan adalah
Untuk mengatur urutan dari frame dapat
frame 0, menuju ke 1, lalu 2, dan
menggunakan kode berikut
seterusnya hingga kembali ke 0
int[] seqRun = new int[] { 0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7};
spRun.setFrameSequence(seqRun);
Untuk menset frame secara manual, dapat menggunakan fungsi setFrame()
spr.setFrame(int frameYangDituju)
12. Mobile Game Developer War 4: Online Camp
Sprite Collision
Collision detection merupakan hal yang akan sering ditemui dalam pembuatan game.
Biasanya berupa pengecekan antara 2 objeck ketika bersinggungan, contohnya
ketika karakter tertembak. Pada Sprite, terdapat fungsi collision detection yang
simpel. Dengan nilai kembalian true atau false
Tentukan daerah collision Sprite kita dengan defineCollisionRectangle(int x, int y, int
width, int height)
3 cara pengecekan Sprite
1. spr.CollidesWith(Sprite sprLain, boolean arg);
2. spr.CollidesWith(TiledLayer tileMap, boolean arg);
3. spr.CollidesWith(Image img, boolean arg);
spr.defineCollisionRectangle(x, y, fWidth, fHeight)
if(spr.CollidesWith(imgPeluru, true))
{
health--;
sprMeledak.paint(g);
}
13. Mobile Game Developer War 4: Online Camp
Transformasi Sprite
Untuk men-
transform sebuah
sprite, bisa kita
lakukan dengan
setTransform()
14. Mobile Game Developer War 4: Online Camp
Animated Sprite
//sprite Sprite adalah objek untuk menyimpan
Image runImg; gambar dengan banyak frame
Sprite spRun;
int[] seqRun = new int[] {0,0,1,1,2,2,3,3, Kita bisa membuat urutan animasi
4,4,5,5,6,6,7,7}; dengan membuat array berisi index
int cX, cY; frame animasinya
void initChar(){ 52 dan 40 adalah ukuran setiap
spRun = new Sprite(runImg, 52, 40); frame animasi pada sprite
spRun.setFrameSequence(seqRun);
cX = width/2; setFrameSequence digunakan untuk
cY = height-runImg.getHeight(); menyimpan urutan animasi
}
15. Mobile Game Developer War 4: Online Camp
Animated Sprite - 2
Untuk menggambar Sprite tidak menggunakan
drawImage, tapi menggunakan Sprite.Paint
void drawChar(){
spRun.setPosition(cX, cY);
if (!jumping && !falling) {
spRun.nextFrame(); nextFrame() akan merubah frame yang ditampilkan menjadi
}else frame berikutnya di urutan yang sudah kita buat
spRun.setFrame(0);
spRun.paint(g);
}
Khusus saat kondisi jumping atau falling, kita menampilkan
frame pertama, agar karakter tidak berlari di udara.
16. Mobile Game Developer War 4: Online Camp
Quest – Parallax Effect
• Parallax adalah efek dimana beberapa bagian latar belakang bergerak
dengan kecepatan yang berbeda.
• Biasanya digunakan pada game sidescrolling seperti Mario Bros atau
Megaman.
• Contohnya bisa dilihat di http://youtu.be/KZF8n0opmW8
• Contoh lain (menggunakan 3 layer: bulan, awan, dan tiang layar):
Awan akan bergerak lebih lambat
Jika kita menekan
kanan, latar dari tiang layar karena lebih jauh
dari karakter, dan bulan terlihat
belakang akan
hampir tidak bergerak.
bergerak ke kiri.
17. Mobile Game Developer War 4: Online Camp
Quest – Parallax Effect
• Coba buat implementasi efek parallax dengan
menggunakan 3 layer seperti pada contoh.
• Kalian bisa gunakan gambar apa saja untuk quest
ini. (Tidak harus sama persis dengan contoh)
18. Mobile Game Developer War 4: Online Camp
Cara menyelesaikan Quest
1. Kirim source code MainCanvas.java ke
email: quest@agateacademy.com
2. Gunakan subject “Quest Online Camp 04
– Parallax Effect”
19. Mobile Game Developer War 4: Online Camp
• Untuk menyelesaikan materi, kunjungi
http://bit.ly/NF03fU
• Untuk pertanyaan atau diskusi, bisa
dilakukan via forum:
http://bit.ly/mgdw4forum
Notas do Editor
seqRunmerupakan sequence darianimasilari, ketikainisialisasi sprite spRundi set frame sequencenya. Kemudianketika jumping dan falling bernilai false makanextframe(). Else mainkan frame 0
seqRunmerupakan sequence darianimasilari, ketikainisialisasi sprite spRundi set frame sequencenya. Kemudianketika jumping dan falling bernilai false makanextframe(). Else mainkan frame 0