MGDW4 Online Camp #3a: Primitive Graphics
Upcoming SlideShare
Loading in...5
×
 

MGDW4 Online Camp #3a: Primitive Graphics

on

  • 1,049 views

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

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

Statistics

Views

Total Views
1,049
Views on SlideShare
1,049
Embed Views
0

Actions

Likes
0
Downloads
88
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

MGDW4 Online Camp #3a: Primitive Graphics MGDW4 Online Camp #3a: Primitive Graphics Presentation Transcript

  • Mobile Game Developer War 4: Online CampMGDW4 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 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)
  • 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.");}
  • 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)
  • 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.
  • 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.
  • 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. }
  • 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.
  • 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 Quest1. Kirim source code MainCanvas.java ke email: quest@agateacademy.com2. 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