Tugas Pengantar Teknologi Game (Bagian 2)

SHADDING & MAPPING

1. Apa yang di maksud dengan Shadding?
Shadding merupakan suatu variasi warna dan kecerahan yang timbul pada suatu permukaan berdasarkan pencahayaan yang dilakukan dengan efek pewarnaan tingkat kecerahan setiap face yang terdapat pada objek gambar. Shadding dibagi ke dalam dua metode, yaitu :

• Metode Flat Shading Flat shading adalah salah satu teknik shading dimana satu face mempunyai warna yang sama. Metode ini memiliki beberapa karakteristik, diantaranya :
• Pemberian tone yang sama untuk setiap Polygon
• Penghitungan jumlah cahaya mulai dari titik tunggal pada permukaan
• Penggunaan satu normal untuk seluruhnya
• Metode Gouraud Shading, Metode ini merender sebuah permukaan Polygon dengan interpolasi linier yaitu nilai intensitas yang mengenai setiap permukaan berbeda. Warna yang dipantulkan dihitung tiap vertex kemudian secara halus diinterpolasikan. Karakteristik shading yang dihasilkan :
• Shading yang dihasilkan halus (tampak nyata) Vektor normal pada vertex V dihitung dengan jumlah rata-rata permukaan normal dari masing-masing Polygon dibagi vertex tersebut.
• Perhitungan Incremental digunakan untuk memperoleh urutan nilai intensitas tepi (edge) antara scanlinebentuk dan untuk memperoleh intensitas berurutan sepanjang scanline.

2. Jelaskan mengenai Ambient, Specular dan Diffuse yang berkaitan dengan Shadding!

• Ambient Ambient adalah efek pencahayaan yang telah membaur dengan lingkungan sehingga arah cahaya tidak dapat diketahui, seakan-akan cahaya datang dari segala arah. Efek ini akan mempengaruhi terang atau tidaknya suatu lingkungan yang terlihat oleh mata. Semakin banyak lampu maka ruangan semakin terang, sebaliknya jika lampu sedikit maka ruangan remang-remang. Intensitas ambient pada suatu obyek dapat dicari dengan persamaan : I = Ia * Ka dimana, I= Intensitas yang dihasilkan Ia = Intensitas ambient Ka = Koefisien ambient
• Specular Specular adalah efek pencahayaan dimana bayangan sumber cahaya terlihat pada permukaan obyek. Efek specular terlihat pada obyek yang mengkilap. Semakin mengkilap permukaan suatu obyek maka makin jelas bayangan sumber cahaya yang terlihat pada permukaan obyek tersebut. Untuk mencari intensitas specular dapat digunakan persamaan sebagai berikut : I = Ip * Ks (cos θ ) n Dari persamaan intensitas specular tersebut cos θ menggunakan dot product antara arah pantulan dengan negasi dari arah sinar. I = Ip * Ks * ( R • V ) n dapat dihitung dengan dimana, I= Intensitas yang dihasilkan Is = Intensitas specular dari sumber cahaya ‘x’ Ks = Koofisien specular n = Variabel yang menentukan luas area yang berkilau jika terkena cahaya yang dipancarkan oleh sumber cahaya (bila n semakin besar maka cahaya semakin terfokus atau area yang berkilau menjadi lebih kecil) R = Arah pantulan, berupa unit vektor V = Negasi dari arah sinar Sedangkan vektor R diperoleh dari − S + 2 * ( S • N ) * N dimana, S = Vektor dari titik tabrak ke sumber cahaya N = Vektor normal dari obyek
• Diffuse Diffuse adalah menyebarkan cahaya yang datang dari sumber kecil tersebut sehingga meluas atau cahaya yang keluar tidak keras. Diffuse di gunakan untuk menghalangi area tertentu dari arah cahaya flash dan membelokkannya ke tempat lain. Ini mengurangi kekuatan flash yang kita gunakan tersebut. Umumnya tersedia diffuser khusus untuk flash tertentu mengingat head flash berbeda-beda. Sehingga posisi lampu sangat mempengaruhi efek diffuse ini. Intensitas diffuse dapat dicari dengan hukum Lambertian sebagai berikut: I = Ip * Kd (cosθ ) Dari persamaan intensitas diffuse tersebut cos θ dapat dihitung dengan melakukan dot product antara sinar dari lampu ke titik tabrak obyek dengan normal obyek itu, masing-masing merupakan unit vektor. Sehingga didapat persamaan baru I = Ip * Kd * ( L • N ) dimana, I= Intensitas yang dihasilkan Ip = Intensitas diffuse dari sumber cahaya ‘x’ Kd = Koofisien diffuse N = Vektor normal dari obyek L = Vektor dari titik tabrak ke sumber cahaya θ = Sudut antara N dan L 3. Mapping berkaitan dengan objek Material.

3. Apa yang dimaksud dengan Mapping.
Mapping merupakan sebuah proses dimana dua model data dibuat menggunakan sebuah link diantara kedua model data tersebut yang didefinisikan untuk memetakan setiap fungsi dua ataupun tiga dimensi.

4. Sebutkan dan Jelaskan jenis-jenis Mapping.

• Texture mapping adalah teknik shading untuk pengolahan gambar yang memetakan sebuah fungsi pada permukaan tiga dimensi dalam scene. Fungsi yang dipetakan mencakup satu dimensi, dua dimensi, dan tiga dimensi dan dapat digambarkan sebagai array atau fungsi matematika atau gambar.
• bump mapping untuk memperjelas karakteristik permukaan yang bergelombang - Transparency mapping untuk mengatur intensitas cahaya permukaan tembus pandang - Specularity mapping untuk mengubah kehalusan permukaan - Illumination maaping untuk memodelkan distribusi cahaya yang datang dari berbagai arah

Rancanglah game sangat-sangat sederhana !

Disini saya membuat game sederhana yang berjudul “Permainan Ular”. Rancangannya yaitu, pertama-tama kita menentukan target rancangan game ini. Disini saya hanya membatasi sampai animasi sederhana saja, deteksi area ular mencari makanan, makanan ular itu sendiri, dan kondisi dimana kepala ular bertabrakan dengan anggota badannya sendiri.

Untuk awal pengerjaan game, kita hanya membutuhkan 2 class. Yang satu untuk panel utama pada game dan satu lagi untuk ular yang akan berjalan. Ini belum termasuk class tambahan lain. Mulai dengan class ular. Yang dibutuhkan hanya koordinat ular, arah ular menghadap, dan panjang maksimal. Sedangkan behavior yang bisa dilakukan ular antara lain, mengubah arah menghadap, dan update koordinat anggota badan saat berjalan. Berikut ini adalah source code-nya :

package snakehq;

import java.awt.Point;

/**
 * Snake class, a representation of a snake
 *
 */
public class Snake {
  //*********************//
  //*** Variable area ***//
  //*********************//
  // coordinates of body
  private Point[] body;
  // facing
  private int face;

  // maximum snake's length
  private final int maxLength = 10;

  // orientation
  public static final int NORTH = 0;
  public static final int EAST = 1;
  public static final int SOUTH = 2;
  public static final int WEST = 3;

  // snake pixel size
  public static final int SNAKE_SIZE = 10;

  //************************//
  //*** Constructor area ***//
  //************************//
  public Snake() {
    body = new Point[maxLength];
    for(int i = 0; i < maxLength; i++) {
      body[i] = new Point(20 - i, 15);
    }
    face = EAST;
  }

  //*******************//
  //*** Method area ***//
  //*******************//
  public Point[] getBody() {
    return body;
  }

  public void moveEast() {
    if(face != WEST)
      face = EAST;
  }

  public void moveWest() {
    if(face != EAST)
      face = WEST;
  }

  public void moveNorth() {
    if(face != SOUTH)
      face = NORTH;
  }

  public void moveSouth() {
    if(face != NORTH)
      face = SOUTH;
  }

  public void update() {
    // update body
    for(int i = body.length - 1; i > 0; i--) {
      body[i].x = body[i-1].x;
      body[i].y = body[i-1].y;
    }
    // update head
    Point head = body[0];
    if(face == NORTH) {
      if(head.y <= 0)
        head.y = Panel.AREA_HEIGHT - 1;
      else
        head.y--;
    }
    else if(face == EAST) {
      if(head.x >= Panel.AREA_WIDTH - 1)
        head.x = 0;
      else
        head.x++;
    }
    else if(face == SOUTH) {
      if(head.y >= Panel.AREA_HEIGHT - 1)
        head.y = 0;
      else
        head.y++;
    }
    else if(face == WEST) {
      if(head.x <= 0)
        head.x = Panel.AREA_WIDTH - 1;
      else
        head.x--;
    }
  }

}

package snakehq;

import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.RenderingHints;
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;

/**
 * Panel class, the skeleton of the game
 *
 */
public class Panel extends JPanel {
  //*********************//
  //*** Variable area ***//
  //*********************//
  private Snake snake;
  private Thread animation;

  public static final int PANEL_WIDTH = 400;
  public static final int PANEL_HEIGHT = 300;
  public static final int AREA_WIDTH =
      PANEL_WIDTH / Snake.SNAKE_SIZE;
  public static final int AREA_HEIGHT =
      PANEL_HEIGHT / Snake.SNAKE_SIZE;

  //************************//
  //*** Constructor area ***//
  //************************//
  public Panel() {
    setPreferredSize(new Dimension(
        PANEL_WIDTH, PANEL_HEIGHT));
    snake = new Snake();
    initThread();
    addKeyListener(new KeyManager());
    setFocusable(true);
    requestFocusInWindow();
    animation.start();
  }
  
  //*******************//
  //*** Method area ***//
  //*******************//
  @Override
  protected void paintComponent(Graphics g) {
    super.paintComponent(g);
    Graphics2D g2 = (Graphics2D) g;
    g2.addRenderingHints(new RenderingHints(
        RenderingHints.KEY_ANTIALIASING,
        RenderingHints.VALUE_ANTIALIAS_ON));
    drawSnake(g2);
  }

  // render the snake
  private void drawSnake(Graphics2D g2) {
    Point[] s = snake.getBody();
    int pixel = Snake.SNAKE_SIZE;
    // fill the head
    g2.fillOval(s[0].x * pixel, s[0].y * pixel,
        pixel,pixel);
    // draw body outline
    for(int i = 0; i < s.length; i++) {
      g2.drawOval(s[i].x * pixel, s[i].y * pixel,
          pixel, pixel);
    }
  }

  // initiate animation thread
  private void initThread() {
    animation = new Thread(new Runnable() {
      public void run() {
        while(true) {
          try {
            // sleep a while for animation
            Thread.sleep(300);
          } catch (InterruptedException ex) {}
          snake.update();
          SwingUtilities.invokeLater(
              new Runnable(){
            public void run() {
              repaint();
            }
          });
        }
      }
    });
  }

  // Keyboard handler of the game
  private class KeyManager extends KeyAdapter {
    @Override
    public void keyPressed(KeyEvent e) {
      super.keyPressed(e);
      int c = e.getKeyCode();
      switch(c) {
        case KeyEvent.VK_RIGHT:
          snake.moveEast();
          break;
        case KeyEvent.VK_LEFT:
          snake.moveWest();
          break;
        case KeyEvent.VK_UP:
          snake.moveNorth();
          break;
        case KeyEvent.VK_DOWN:
          snake.moveSouth();
          break;
      }
    }
  }

  /**
   * Main method that run firstly when the program starts
   * @param args the command line arguments
   */
  public static void main(String[] args) {
    // TODO code application logic here
    SwingUtilities.invokeLater(new Runnable() {
      public void run() {
        JFrame f = new JFrame("Snake HQ");
        f.setDefaultCloseOperation(
            JFrame.EXIT_ON_CLOSE);
        f.add(new Panel());
        f.pack();
        f.setResizable(false);
        f.setLocationRelativeTo(null);
        f.setVisible(true);
      }
    });
  }

}

Buat scenario game tersebut !

Skenario game ini adalah dimana ular harus memakan titik makanan yang ada didalam kotak, apabila ular berhasil mengenai makanannya, maka badannya akan bertambah panjang. Terus bertambah panjang sampai kepala ular menabrak anggota badannya sendiri.

Disini lah gamenya berakhir. C). Buat 1 objek yang ada didalam game tersebut ! Objek pada game ini ada 2 yang penting. Pertama ular itu sendiri, yang kedua adalah thread yang digunakan untuk mengatur animasi, ini diatur dalam method initThread().

Bagian penting lainnya adalah private class KeyManager. Digunakan untuk menangkap event yang dilakukan pada keyboard.



 

Sumber :

• http://sadchalis15.wordpress.com/2012/01/10/rendering-grafika-komputer/
• http://maulbaikyah.blogspot.com/2010/10/grafik-komputer-pencahayaan.html
• http://tikknara.blogspot.com/2010/12/ray-tracing.html
• http://tikknara.blogspot.com/2010/12/ray-tracing.html
• http://fantasygrafis.blogspot.com/2010/11/bouncediffuse.html
• http://tikknara.blogspot.com/2010/12/ray-tracing.html
• http://sadchalis15.wordpress.com/2012/01/10/rendering-grafika-komputer/