MGDW4 Online Camp 04 - Image dan Sprite

1,022 views

Published on

Materi tentang penggunaan gambar dan sprite animasi pada J2ME.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,022
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
94
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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
  • MGDW4 Online Camp 04 - Image dan Sprite

    1. 1. Mobile Game Developer War 4: Online CampMGDW4 Online Camp #4 Image dan Sprite
    2. 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. 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. 4. Mobile Game Developer War 4: Online Camp Penggunaan Image• Untuk membuat background• Untuk membuat menu, tombol, dll• Untuk membuat tilemap
    5. 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 gambarke folder res/mainMenu
    6. 6. Mobile Game Developer War 4: Online CampInsert 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. 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. 8. Mobile Game Developer War 4: Online Camp Change menuprivate 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. 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. 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 beranimasi2. Sprite(Sprite spr) membuat Sprite baru dari Sprite lainnya3. 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. 11. Mobile Game Developer War 4: Online Camp Playing Spritespr.nextFrame() 0 1 2 3 4 5 6 7Awalnya frame yang dimainkan adalah Untuk mengatur urutan dari frame dapatframe 0, menuju ke 1, lalu 2, dan menggunakan kode berikutseterusnya 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. 12. Mobile Game Developer War 4: Online Camp Sprite CollisionCollision detection merupakan hal yang akan sering ditemui dalam pembuatan game.Biasanya berupa pengecekan antara 2 objeck ketika bersinggungan, contohnyaketika karakter tertembak. Pada Sprite, terdapat fungsi collision detection yangsimpel. Dengan nilai kembalian true atau falseTentukan daerah collision Sprite kita dengan defineCollisionRectangle(int x, int y, intwidth, 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); }
    13. 13. Mobile Game Developer War 4: Online Camp Transformasi SpriteUntuk men-transform sebuahsprite, bisa kitalakukan dengansetTransform()
    14. 14. Mobile Game Developer War 4: Online Camp Animated Sprite//sprite Sprite adalah objek untuk menyimpanImage runImg; gambar dengan banyak frameSprite 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 indexint 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. 15. Mobile Game Developer War 4: Online Camp Animated Sprite - 2 Untuk menggambar Sprite tidak menggunakan drawImage, tapi menggunakan Sprite.Paintvoid 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. 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 lambatJika kita menekankanan, latar dari tiang layar karena lebih jauh dari karakter, dan bulan terlihatbelakang akan hampir tidak bergerak.bergerak ke kiri.
    17. 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. 18. Mobile Game Developer War 4: Online Camp Cara menyelesaikan Quest1. Kirim source code MainCanvas.java ke email: quest@agateacademy.com2. Gunakan subject “Quest Online Camp 04 – Parallax Effect”
    19. 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

    ×