MGDW4 Online Camp 04 - Image dan Sprite

Mobile Game Developer War 4: Online Camp

MGDW4 Online Camp #4

Image dan Sprite


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


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


Penggunaan Image
• Untuk membuat
background

• Untuk membuat
menu, tombol, dll

• Untuk membuat
tilemap


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


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();
}
}


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.
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,
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;
g.drawImage(hand_pointer, getWidth()/5+5, 220, case SCREEN_OPTION:
Graphics.HCENTER | Graphics.VCENTER); ...
break; ...


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
...


Pengenalan Sprite
• Sprite merupakan deretan gambar yang
membentuk sebuah animasi
• Sprite dapat berupa peluru, monster,
karakter utama, spesial efek, dan
sebagainya


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.


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)


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);
}


Transformasi Sprite
Untuk men-
transform sebuah
sprite, bisa kita
lakukan dengan
setTransform()


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
}


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.


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.


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)


Cara menyelesaikan Quest
1. Kirim source code MainCanvas.java ke
email: quest@agateacademy.com
2. Gunakan subject “Quest Online Camp 04
– Parallax Effect”


• Untuk menyelesaikan materi, kunjungi
http://bit.ly/NF03fU

• Untuk pertanyaan atau diskusi, bisa
dilakukan via forum:
http://bit.ly/mgdw4forum

MGDW4 Online Camp 04 - Image dan Sprite

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von Agate Studio

Mehr von Agate Studio (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

MGDW4 Online Camp 04 - Image dan Sprite

Hinweis der Redaktion