mgdw4 online camp #3a: primitive graphics
DESCRIPTION
Materi 3 bagian 1 dari MGDW4 Online Camp tentang fungsi-fungsi dasarTRANSCRIPT
Mobile Game Developer War 4: Online Camp
MGDW4 Online Camp #3
Fungsi Grafis Standar
Mobile Game Developer War 4: Online Camp
Fungsi Grafis Dasar• Untuk membuat game, tidak harus
menggunakan art asset baru.• Terutama untuk belajar, kita bisa
menggunakan fungsi-fungsi grafis dasar
Mobile Game Developer War 4: Online Camp
Fungsi-fungsi grafis
Draw
• DrawLine• DrawRectangle• DrawArc• DrawString
Fill
• FillRect• FillRoundRect• FillTriangle• FillArc
Draw akan membuat objek berupa outline dari bentuk yang dimaksud (kecuali DrawString)
Fill akan membuat objek berupa warna solid dari bentuk yang dimaksud
Mobile Game Developer War 4: Online Camp
Update untuk Fungsi Run
• Menambahkan fungsi untuk membuat background screen
• Menambahkan fungsi utama untuk menyimpan logika grafis
public void run() { init(); while(!gameover){ clearScreen(); getInput(); draw(); flushGraphics(); try { Thread.sleep(SLEEP_TIME); } catch (InterruptedException e) { e.printStackTrace(); } } System.out.println("Game over.");}
Mobile Game Developer War 4: Online Camp
FillRect untuk Background• Gunakan
g.fillRect(x,y,width,height)– x,y:posisi kotak yang digambar– width, height: lebar dan tinggi
kotak
• g.setColor digunakan untuk memilih warna yang akan digunakan untuk setiap pemanggilan fungsi grafis berikutnya (sampai setColor berikutnya)
private void clearScreen(){ g.setColor(0x000000); g.fillRect(0, 0, getWidth(), getHeight());}private void draw(){ }
Mobile Game Developer War 4: Online Camp
g.setColor• Warna objek akan
berubah sesuai pemanggilan setColor terakhir
• Berlaku untuk outline, fill, dan string
private void clearScreen(){ g.setColor(0x000000); g.fillRect(0, 0, getWidth(), getHeight()); g.setColor(0xff0000); g.fillRect(50, 50, getWidth(), getHeight()); g.setColor(0x00ff00); g.fillRect(100, 100, getWidth(), getHeight()); g.fillRect(150, 150, getWidth(), getHeight()); g.setColor(0x0000ff); g.fillRect(200, 200, getWidth(), getHeight());}
Kode yang ditandai merah tidak terlihat karena warnanya sama-sama hijau.
Urutan kode menentukan urutan gambar: yang digambar terakhir digambar menimpa gambar sebelumnya.
Mobile Game Developer War 4: Online Camp
Demo DrawLine dan DrawRect• DrawLine( x1, y1,
x2, y2)– x1,y1: titik awal– x2,y2: titik akhir
private void clearScreen(){ g.setColor(0xc3c3c3c3); g.fillRect(0, 0, getWidth(), getHeight());}private void draw(){ g.setColor(0x000000); g.drawLine(50, 50, 150, 250); g.setColor(0xff0000); g.drawRect(50, 70, 100, 100); g.setColor(0x00ff00); g.drawString("contoh string", 50, 150, Graphics.TOP|Graphics.LEFT); g.setColor(0x0000ff); g.drawLine(100, 100, 170, 200); g.drawLine(170, 200, 50, 60); g.drawLine(50, 60, 230, 60); g.drawLine(230, 60,100, 100); }
Bisakah kamu bedakan tiap baris kode menggambar objek yang mana? Kamu bisa cek berdasarkan
warnanya.
Mobile Game Developer War 4: Online Camp
drawArc• Fungsi yang digunakan untuk
membentuk busur atau lingkaran• g.drawArc(x, y, width, height, startAngle, arcAngle)– StartAngle: posisi awal busur lingkaran
– arcAngle: besar sudut busur (360 = lingkaran)
private void draw(){ g.setColor(0xff0000); g.drawArc(100, 100, 50, 50, 30, 90); g.drawArc(100, 150, 50, 50, 30, 180);}
Sudut dihitung berlawanan arah jarum jam. Lihat pada contoh.
Mobile Game Developer War 4: Online Camp
Fill?• Parameter fungsinya kurang lebih sama dengan fungsi
draw (outline), tapi menghasilkan warna berwarna
private void draw(){ g.setColor(0xff0000); g.fillRect(50, 70, 100, 100); g.setColor(0x0000ff); g.fillArc(100, 250, 50, 50, 0, 270); g.setColor(0x00ff00); g.fillArc(50, 200, 150, 50, 180, 180);}
Bisakah kamu bedakan tiap baris kode menggambar objek yang mana? Kamu bisa cek berdasarkan
warnanya.
Mobile Game Developer War 4: Online Camp
Quest• Buat salah satu (atau lebih) dari screenshot di
bawah dengan menggunakan kode grafis primitif
10 exp 15 exp 20 exp
Mobile Game Developer War 4: Online Camp
Cara menyelesaikan Quest
1. Kirim source code MainCanvas.java ke email: [email protected]
2. Gunakan subject “Quest Online Camp 03a – Primitive Graphics”
Mobile Game Developer War 4: Online Camp
• Untuk menyelesaikan materi, kunjungi http://bit.ly/KOVvxq
• Untuk pertanyaan atau diskusi, bisa dilakukan via forum: http://bit.ly/mgdw4forum