mgdw4 online camp #3a: primitive graphics

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

Upload: agate-studio

Post on 15-May-2015

851 views

Category:

Education


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: MGDW4 Online Camp #3a: Primitive Graphics

Mobile Game Developer War 4: Online Camp

MGDW4 Online Camp #3

Fungsi Grafis Standar

Page 2: MGDW4 Online Camp #3a: Primitive Graphics

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

Page 3: MGDW4 Online Camp #3a: Primitive Graphics

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

Page 4: MGDW4 Online Camp #3a: Primitive Graphics

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

Page 5: MGDW4 Online Camp #3a: Primitive Graphics

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

Page 6: MGDW4 Online Camp #3a: Primitive Graphics

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.

Page 7: MGDW4 Online Camp #3a: Primitive Graphics

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.

Page 8: MGDW4 Online Camp #3a: Primitive Graphics

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.

Page 9: MGDW4 Online Camp #3a: Primitive Graphics

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.

Page 10: MGDW4 Online Camp #3a: Primitive Graphics

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

Page 11: MGDW4 Online Camp #3a: Primitive Graphics

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”

Page 12: MGDW4 Online Camp #3a: 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