MGDW4 Online Camp #3a: Primitive Graphics

1,030 views

Published on

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

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

  • Be the first to like this

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

No notes for slide

MGDW4 Online Camp #3a: Primitive Graphics

  1. 1. Mobile Game Developer War 4: Online CampMGDW4 Online Camp #3 Fungsi Grafis Standar
  2. 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. 3. Mobile Game Developer War 4: Online Camp Fungsi-fungsi grafisDraw 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. 4. Mobile Game Developer War 4: Online Camp Update untuk Fungsi Runpublic 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. 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. 6. Mobile Game Developer War 4: Online Camp g.setColor • Warna objek akan berubah sesuai pemanggilan setColor terakhir • Berlaku untuk outline, fill, dan stringprivate 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. 7. Mobile Game Developer War 4: Online Camp Demo DrawLine dan DrawRectprivate 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. 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. 9. Mobile Game Developer War 4: Online Camp Fill?• Parameter fungsinya kurang lebih sama dengan fungsi draw (outline), tapi menghasilkan warna berwarnaprivate 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 menggambarobjek yang mana? Kamu bisa cek berdasarkan warnanya.
  10. 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. 11. 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 03a – Primitive Graphics”
  12. 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

×