Materi 3 bagian 1 dari MGDW4 Online Camp tentang fungsi-fungsi dasar

1. Mobile Game Developer War 4: Online Camp
MGDW4 Online Camp #3
Fungsi Grafis Standar

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

3. Mobile Game Developer War 4: Online Camp
Fungsi-fungsi grafis
Draw Fill
• DrawLine • FillRect
• DrawRectangle • FillRoundRect
• DrawArc • FillTriangle
• DrawString • FillArc
Draw akan membuat
Fill akan membuat objek
objek berupa outline dari
berupa warna solid dari
bentuk yang dimaksud
bentuk yang dimaksud
(kecuali DrawString)

4. Mobile Game Developer War 4: Online Camp
Update untuk Fungsi Run
public void run() {
init();
while(!gameover){
clearScreen(); • Menambahkan fungsi
getInput();
draw(); untuk membuat
flushGraphics(); background screen
try {
Thread.sleep(SLEEP_TIME);
} catch (InterruptedException e) {
• Menambahkan fungsi
e.printStackTrace(); utama untuk menyimpan
}
} logika grafis
System.out.println("Game over.");
}

5. Mobile Game Developer War 4: Online Camp
FillRect untuk Background
• Gunakan private void clearScreen(){
g.setColor(0x000000);
g.fillRect(x,y,width,height) g.fillRect(0, 0,
getWidth(), getHeight());
– x,y:posisi kotak yang }
private void draw(){
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)

6. 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); Kode yang ditandai merah
g.fillRect(50, 50, getWidth(), getHeight()); tidak terlihat karena
g.setColor(0x00ff00); warnanya sama-sama hijau.
g.fillRect(100, 100, getWidth(), getHeight());
g.fillRect(150, 150, getWidth(), getHeight()); Urutan kode menentukan
g.setColor(0x0000ff); urutan gambar: yang
g.fillRect(200, 200, getWidth(), getHeight()); digambar terakhir digambar
} menimpa gambar sebelumnya.

7. Mobile Game Developer War 4: Online Camp
Demo DrawLine dan DrawRect
private void clearScreen(){
g.setColor(0xc3c3c3c3);
g.fillRect(0, 0, getWidth(), getHeight());
• DrawLine( x1, y1,
}
private void draw(){
x2, y2)
g.setColor(0x000000);
g.drawLine(50, 50, 150, 250);
– x1,y1: titik awal
g.setColor(0xff0000);
g.drawRect(50, 70, 100, 100);
– x2,y2: titik akhir
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.

8. 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(){
Sudut dihitung g.setColor(0xff0000);
berlawanan arah g.drawArc(100, 100, 50, 50, 30, 90);
jarum jam. Lihat g.drawArc(100, 150, 50, 50, 30, 180);
pada contoh. }

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

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

11. 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
03a – Primitive Graphics”

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