Tugas Pengantar Tekhnologi 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 : a. 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 b. 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! a. 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 b. 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 c. 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. A). 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.. B). Sebutkan dan Jelaskan jenis-jenis Mapping. a. 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. b. 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 4.A). 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; public class Snake { //************// //*** Variable area ***// //*********************// // coordinates of body private Point[] body; // facing private int face; //*******************// //*** Method area ***// //************// public Point[] getBody() { return body; } public void 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) { Bagian terpenting dari game ini adalah panel kerangka game, source code-nya: 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.KeyAdapte; 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() { // 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 // 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 B). 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/

Tugas Pengantar Teknologi Game (Bagian 1)

Scan Conversion Scan Conversion merupakan metoda untuk memetakan titik ke dalam suatu pixel. Scan Conversion dapat dilakukan terhadap Line (garis), polygon, ataupun garis lengkung (kurva) yang terdiri dari beberapa teknik untuk mengubah vertikal / horizontal frekuensi scan dari sinyal video untuk tujuan dan penerapan yang berbeda. Berhubungan dengan pembuatan garis pada Scan Conversion terdiri dari beberapa Algoritma yang dibutuhkan, seperti : • Algoritma DDA, adalah suatu algoritma (pendekatan) pengkonversian suatu himpunan pixel–pixel menjadi suatu garis yang didasari atas perhitungan delta(x) dan delta(y); • Algoritma Bresenham merupakan suatu algoritma (pendekatan) yang dikreasikan oleh Bresenham yang tidak kalah akurat dan efisien dengan algoritma primitif lainnya (seperti DDA), bagian pengkonversian (scan–konversi) garis akan melakukan kalkulasi untuk penambahan nilai–nilai integer (yang dibutuhkan untuk membentuk garis) yang disesuaikan dengan tipe grafik yang dipakai oleh layar komputer., dan yang terakhir adalah : • Algoritma C++ Setelah beberapa Algoritma yang di butuhkan dalam pembentukan garis di Scan Conversion yang telah saya sampaikan tadi, saya akan mengulas salah satu cara penggabaran garis dengan menggunakan metoda Algoritma Bresenham, yaitu : - ALGORITMA GARIS BRESSENHAM Prosedur untuk menggambar kembali garis dengan membulatkan nilai x atau y ke bilangan integer memerlukan waktu. serta variabel x,y maupun m memerlukan bilangan real karena kemiringan merupakan nilai pecahan.Bressenham mengembangkan algoritma klasik yang lebih menarik, karena hanya menggunakan perhitungan matematik dengan bantuan bilangan integer. Dengan demikian tidak perlu membulatkan nilai posisi pixel setiap waktu. Langkah-langkahnya adalah sebagai berikut: 1. Tentukan dua titik yang akan dihubungkan dalam pembentukan garis. 2. Tentukan salah satu titik disebelah kiri sebagai titik awal (x0,y0) dan titik lainnya sebagai titik akhir (x1,y1) 3. Hitung dx, dy, 2dx dan 2dy-2dx 4. Hitung parameter P0 = 2dy – dx 5. Untuk setiap xk sepanjang garis dimulai dengan k=0 § Bila Pk < 0 maka titik selanjutnya adalah (xk+1, yk) dan Pk+1=Pk+2dy § Bila tidak maka titik selanjutnya adalah (xk+1, yk+1) dan Pk+1=Pk+2dy-2dx 6. Ulangi nomor 5 untuk menentukan posisi pixel selanjutnya sampai x=x1 dan y=y1 Dalam pembentukan garis dalam penerapan materi Scan Conversion, ada beberapa hal yang juga harus kita perhatikan dalam menggambarkan garis, seperti ketebalan garis (thickness) dan juga Bentuk tepi garis (ends) yang terdiri dari : Butt, Round dan Square. Berikut merupakan gambar dengan bentuk tepi Butt, Round dan Square. Selain adanya teknik penggambaran garis, di dalam Scan Conversion dikenal juga teknik penggabungan garis (Joining), seperti Ugly, Bevel, Round, Miter. Berikut merupakan gambar dari teknik penggabungan dua garis dengan tipe Ugly, Bevel, Round, dan Miter. - Mitter >> titik pertemuan 2 garis lurus yang membentuk sudut lancip. - Round >> titik sudut pertemuan yang membulat. - Bevel >> titik sudut pertemuannya tampak terpotong rata. - None >> titik sudut pertemuan yang terpotong agak membentuk siku. a. Type Ugly Joined Line b. Type Miter, Square dan Bevel Join Transformations Transformation adalah suatu metoda untuk mengubah lokasi titik. Operasi-Operasi Primitive pada Transformations terbagi menjadi:  Scale,  Rotate,  Shear,  Flip,  Translate Berikut ini merupakan contoh dari gambar pembentukan suatu objek masing-masing: a. Scale merupakan skala pengali sama untuk semua komponen. b. Rotate merupakan adalah merotasi atau memutar suatu objek dengan nilai yang ditentukan. Dibawah ini adalahRotasi terhadap titik (0,0) sebanyak 450 . c. Translasi (Perpindahan) d. Pencerminan (Flip) e. Shear Dalam transformasi linear, metoda pengubahan lokasi titik dilakukan secara teratur, dan membentuk semacam pattern. Misalnya dalam grafik 2 dimensi, transformasi linear melakukan penambahan atau pengurangan garis lurus secara teratur. Berikut merupakan contoh transformasi linear : Sedangkan transformasi non linear adalah metoda pengubahan lokasi titik yang tidak dilakukan secara teratur. Dalam grafik, pengurangan atau penambahan garis yang dilakukan tidak akan membentuk sebuah pattern yang teratur. Contoh transformasi non linear : Di dalam teknik Tranformasion terdapat beberapa contoh Linear Transformation dan Non-Linear Transformation dari Operasi-Operasi Primitive transformation! - Contoh operasi primitive Perbedaan antara Geometric Transformation dan Color Space Transformation adalah dalam transformasi geometric perubahan titik lebih memfokuskan pada bentuk dari objek yang berubah tersebut. Sedangkan Color space transformation lebih menitik beratkan pada perubahan warna dari titik-titik pixel tersebut. Sedangkan, Sistem koordinat homogen adalah system koordinat yang mempunyai satu dimensi lebih tinggi dari system koordinat yang ditinjau. Digunakan untuk menyatakan semua proses transformasi dengan perkalian matrix termasuk pergeseran. Proyeksi Proyeksi merupakan salah satu jenis transformasi, yaitu transformasi koordinat. Proyeksi pada bidang datar (planar) dilakukan melalui sinar proyeksi yang muncul dari titik pusat proyeksi melewati setiap titik dari benda dan memotong bidang proyeksi (projection plane) untuk mendapatkan benda hasil proyeksi. Proyeksi Planar (Planar Geometric Projections) dibedakan menjadi: 1. Proyeksi Paralel. Berdasarkan hubungan antara arah proyeksi dengan vektor normal dari bidang proyeksi, proyeksi paralel dibedakan menjadi: 1. Orthographic  Proyeksi orthographic ada yang disebut proyeksi axonometric. Proyeksi Axonometric dibedakan menjadi proyeksi:  isometric,  dimetric, dan  trimetric. 2. Oblique. 2. Proyeksi Perspektif. Perbedaan antara proyeksi parallel & perspektif adalah: pada proyeksi parallel jarak antara titik pusat proyeksi ke bidang proyeksi tidak terhingga, sementara para proyeksi perspektif jarak antara titik pusat proyeksi ke bidang proyeksi bersifat infinite (tertentu). - Proyeksi Orthographic Proyeksi Orthographic diperoleh apabila sinar proyeksi tegak lurus dengan bidang proyeksi. Proyeksi orthographic sering digunakan untuk menghasilkan tampak depan, tampak belakang, tampak samping dan tampak atas dari sebuah benda atau disebut sebagai Multiview orthographic. Tampak atas, tampak belakang dan tampak dari samping sebuah benda sering disebut sebagai elevation. Sedangkan tampak dari atas disebut sebagai plan view. Transformasi untuk proyeksi multiview orthographic dapat diperoleh dengan rumus Proyeksi terhadap bidang x-z:qx = px,qy =pz Proyeksi terhadap bidang y-z:qx = px,qy =pz Proyeksi terhadap bidang x-y:qx = px,qy =py Dimana q(x,y) merupakan titik hasil proyeksi dari p(x,y,z) seperti digambarkan di bawah ini : Proyeksi orthographic yang menampakan lebih dari satu permukaan benda disebut sebagai proyeksi axonometric • proyeksi axonometric dilakukan dengan mengatur agar bidang proyeksi berpotongan dengan ketiga sumbu koordinat (principal axes) pada sudut yang sama maka kita akan memperoleh proyeksi isometric • proyeksi dimetric yaitu proyeksi yang diperoleh dengan mengatur agar bidang proyeksi berpotongan dengan dua sumbu utama pada sudut yang sama • proyeksi trimetric diperoleh apabila ketiga sumbu utama berpotongan dengan bidang proyeksi pada sudut yang berbeda - Proyeksi Perspective Proyeksi Perspective diperoleh saat sudut pandang yang lebih realistis dibandingkan proyeksi orthographic. Pada kenyataannya jarak benda terhadap kita akan mempengaruhi bagaimana benda tersebut terlihat. Benda yang terlihat jauh akan kelihatan kecil sedangkan benda yang dekat akan terlihat lebih besar. Efek ini disebut sebagai shortening. Pada perspektif semua garis menghilang pada satu atau lebih titik yang sama atau disebut titik hilang (vanishing point). Contoh dari proyeksi perspektif : Perbedaan antara proyeksi parallel & perspektif secara umum ialah pada proyeksi parallel jarak antara titik pusat proyeksi ke bidang proyeksi tidak terhingga, sementara para proyeksi perspektif jarak antara titik pusat proyeksi ke bidang proyeksi bersifat infinite (tertentu). Dalam penggunaan kedua teori ini terdapat beberapa perbedaan yang dapat dilihat dari tabel perbandingan yang ada seperti di bawah ini : Sekian informasi yang dapat saya sampaikan melalui Tugas Pengantar Teknologi Game yang pertama, mohon maaf apabila ada kesalahan. Terimakasih. Sumber : http://dazako.blogspot.com/2009/05/transformasi-obyek-dua-dimensi.html http://www.mathworks.com/matlabcentral/fileexchange/28790-colorspace-transformations https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CC4QFjAA&url=http%3A%2F%2Finst.eecs.berkeley.edu%2F~cs184%2Ffa05%2Flectures%2Flecture- 03.pdf&ei=jfFlUdm5ObCuiQf2tYCwBA&usg=AFQjCNF5mydLIEOwhMZdJLTd_oyt_-3stA&sig2=BF12NPxbZ92pVMtnK8c62A&bvm=bv.45107431,d.aGc&cad=rja http://harmon-middle-school.wikispaces.com/Linear+and+Nonlinear+Graphs!!! http://fellypun.wordpress.com/2013/01/15/80/ http://prihastomo.wordpress.com/2011/01/17/konversi-scan/