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

1. Masukkan file gambar ke folder res/mainMenu

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;


Insert image – inisialisasi variable

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

Buat fungsi init(), untuk memuat file gambar yang dibutuhkan


Insert image – drawImage()private void draw(){

switch (screenState) {case SCREEN_MAIN_MENU:

g.drawImage(bg_mainmenu, 0, 0, 0);switch (curMenu) {case 1:

g.drawImage(b_play_on, getWidth()/2, 180,Graphics.HCENTER | Graphics.VCENTER);

g.drawImage(b_about_off, getWidth()/2, 220,Graphics.HCENTER | Graphics.VCENTER);

g.drawImage(b_exit_off, getWidth()/2, 260,Graphics.HCENTER | Graphics.VCENTER);

g.drawImage(hand_pointer, getWidth()/5+5, 180,Graphics.HCENTER | Graphics.VCENTER);

break;

case 2:g.drawImage(b_play_off, getWidth()/2, 180,

Graphics.HCENTER | Graphics.VCENTER);g.drawImage(b_about_on, getWidth()/2, 220,

Graphics.HCENTER | Graphics.VCENTER);g.drawImage(b_exit_off, getWidth()/2, 260,

Graphics.HCENTER | Graphics.VCENTER);g.drawImage(hand_pointer, getWidth()/5+5, 220,

Graphics.HCENTER | Graphics.VCENTER);break;

case 3:g.drawImage(b_play_off, getWidth()/2, 180,

Graphics.HCENTER | Graphics.VCENTER);g.drawImage(b_about_off, getWidth()/2, 220,

Graphics.HCENTER | Graphics.VCENTER);g.drawImage(b_exit_on, getWidth()/2, 260,

Graphics.HCENTER | Graphics.VCENTER);g.drawImage(hand_pointer, getWidth()/5+5, 260,

Graphics.HCENTER | Graphics.VCENTER);break;

break;

case SCREEN_OPTION: . . . . . .

1

2

3

Lalu rubah pada fungsi draw(), untuk menggambar main menu.Case 1, 2, dan 3 untuk “mengganti” posisi dari pointer.


Change menuprivate void getInput(){

int keystate = getKeyStates();switch (screenState) {case SCREEN_MAIN_MENU:

int keyState = getKeyStates();if ((keyState & UP_PRESSED) != 0) {

if (curMenu <= 1) {curMenu = 3;

}elsecurMenu--;

}else if ((keyState & DOWN_PRESSED) != 0) {if (curMenu >= 3) {

curMenu = 1;}else

curMenu++;}

if ((keyState & FIRE_PRESSED) != 0) {if (curMenu == 1) {

screenState = SCREEN_IN_GAME;}else if (curMenu == 2) {

screenState = SCREEN_ABOUT;}else if (curMenu == 3) {

screenState = SCREEN_EXIT;}

}break;

case SCREEN_OPTION:. . .. . .

1

2

Lalu rubah kode pada bagian getInput(), khususnya pada case SCREEN_MENU.

curMenu akan mengubah posisi pointer pada fungsi draw() sebelumnya.

Ketika ditekan FIRE, maka screenState akan berubah dan mengubah state pada fungsi draw()


Pengenalan Sprite

• Sprite merupakan deretan gambar yang membentuk sebuah animasi

• Sprite dapat berupa peluru, monster, karakter utama, spesial efek, dan sebagainya


Sprite ConstructorAda 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 Spritespr.nextFrame()

0 1 2 3 4 5 6 7

Awalnya frame yang dimainkan adalah frame 0, menuju ke 1, lalu 2, dan seterusnya hingga kembali ke 0

Untuk mengatur urutan dari frame dapat menggunakan kode berikut

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 Sprite1. 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()


//sprite Image runImg; Sprite spRun; int[] seqRun = new int[] {0,0,1,1,2,2,3,3, 4,4,5,5,6,6,7,7}; int cX, cY;

Animated Sprite

void initChar(){ spRun = new Sprite(runImg, 52, 40); spRun.setFrameSequence(seqRun); cX = width/2; cY = height-runImg.getHeight(); }

Sprite adalah objek untuk menyimpan gambar dengan banyak frame

52 dan 40 adalah ukuran setiap frame animasi pada sprite

Kita bisa membuat urutan animasi dengan membuat array berisi index frame animasinya

setFrameSequence digunakan untuk menyimpan urutan animasi


Animated Sprite - 2

void drawChar(){ spRun.setPosition(cX, cY); if (!jumping && !falling) { spRun.nextFrame(); }else spRun.setFrame(0); spRun.paint(g); }

Untuk menggambar Sprite tidak menggunakan drawImage, tapi menggunakan Sprite.Paint

nextFrame() akan merubah frame yang ditampilkan menjadi frame berikutnya di urutan yang sudah kita buat

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 dari tiang layar karena lebih jauh dari karakter, dan bulan terlihat hampir tidak bergerak.

Jika kita menekan kanan, latar belakang akan bergerak ke kiri.

http://youtu.be/KZF8n0opmW8




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: [email protected]

2. Gunakan subject “Quest Online Camp 04 – Parallax Effect”

mailto:[email protected]


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

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

http://bit.ly/NF03fU



http://bit.ly/mgdw4forum

mgdw4 online camp 04 - image dan sprite

Education