NET
Hendra, S.T.
Buku ini membahas tentang pengolahan grafik pada VB.NET, dan ditujukan kepada siapa saja yang serius untuk mempelajari pemrogrman grafik dengan GDI+ secara koding (tanpa menggunakan fasilitas designer pada Visual Studio .NET). Bagi anda yang belum mengenal bahasa pemrograman VB.NET sebaiknya memulai proses belajar dengan buku Bahasa Pemrograman VB.NET dan Pemrogram Form pada VB.NET Untuk mempelajari buku ini anda tidak perlu menginstalasi Visual Studio .NET, tetapi anda cukup menginstalasi .Net Framework yang dapat didownload secara gratis dari website Microsoft. Semua contoh dan latihan dibuku ini dapat dikompilasi langsung dari Dos prompt dengan menggunakan kompiler Visual Basic yang langsung tersedia setelah anda menginstalasi .Net Framework. Pada akhir tutorial ini, penulisa memberikan contoh pemrograman GDI+ yang diaplikasikan pada pemrograman games Tetris.
INDOPROG
Hendra, S.T.
Dan pada layar computer, koordinat tersebut, merupakan pixel pada layar.
Misalnya kita menggambar sebuah garis mulai dari koordinat 4,2 sampai 12, 8, maka tampilan dilayar adalah sebagai berikut :
INDOPROG
Hendra, S.T.
Public Sub New() 'Constructor Me.Text = "Mengambar garis pada Form" End Sub Private Sub MyForm_Click(Sender As Object, e As System.EventArgs) _
INDOPROG
Hendra, S.T.
Handles MyBase.Click Dim MyPen As New System.Drawing.Pen(System.Drawing.Color.Red,3) Dim MyGraphic As System.Drawing.Graphics = Me.CreateGraphics MyGraphic.DrawLine(MyPen,10,10,200,100) End Sub End Class
Proses kompilasi
Proses kompilasi dengan menggunakan perintah : Vbc grafik.vb /r:System.dll /r:System.Windows.Forms.dll /r:System.Drawing.dll Dan ketika anda jalankan, dan klik pada form akan menghasilkan tampilan :
Catatan : Mengenai pemrogram form pada VB.NET dapat anda baca di ebook pemrogram form pada VB.NET Salah satu kelemahan dari cara diatas adalah, kalau form mengalami refresh, maka garis yang telah digambarkan tersebut akan hilang (VB.NET tidak menyediakan property AutoRedraw seperti yang terdapat pada VB6) Untuk membuktikannya coba anda minimize dan maximize kembali form diatas, maka garis tersebut akan hilang.
INDOPROG
Hendra, S.T.
Public Sub New() 'Constructor Me.Text = "Membuat garis pada Form dengan OnPaint" End Sub Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs) Dim MyPen As New System.Drawing.Pen(System.Drawing.Color.Red,3) MyBase.OnPaint(e) e.Graphics.DrawLine(MyPen,10,10,200,100) End Sub End Class
Kalau program diatas dijalankan, maka akan menampilkan garis pada form, dan tetap akan ada walaupun form direfresh. Catatan : Pada contoh diatas kita melakukan overriding terhadap metoda OnPaint yang ada pada Base class dengan Metoda baru yang kita buat dimana didalamnya akan mengambarkan garis, sehingga setiap kejadian OnPaint akan menjalankan Event baru tersebut. Kemudian dalam koding kita menulis MyBase.OnPaint(e), yang artinya kita menjalan kembali event OnPaint pada Base class yang telah kita overriding.
INDOPROG
Hendra, S.T.
Akan menghasilkan
INDOPROG
Hendra, S.T.
e.Graphics.DrawRectangle(MyPen,10,10,200,100)
Akan menghasilkan :
Contoh :
e.Graphics.DrawEllipse(MyPen,10,10,200,100)
Akan menghasilkan :
INDOPROG
Hendra, S.T.
Akan menghasilkan :
INDOPROG
Hendra, S.T.
Akan menghasilkan :
Contoh :
Dim Point1 As New System.Drawing.Point(10,10) Dim Point2 As New System.Drawing.Point(200,100) e.Graphics.DrawLine(MyPen,Point1,Point2)
INDOPROG
Hendra, S.T.
yang kalau dijalankan akan menghasilkan garis yang sama dengan perintah :
e.Graphics.DrawLine(MyPen,10,10,200,100)
Akan menghasilkan :
Contoh :
Dim MyPen As New System.Drawing.Pen(System.Drawing.Color.Red, 3) Dim MyArr As System.Drawing.Point() = _ {new System.Drawing.Point(0,0), _ new System.Drawing.Point(250,130), _ new System.Drawing.Point(190,160)} e.Graphics.DrawPolygon(MyPen,MyArr)
Akan menghasilkan :
INDOPROG
10
Hendra, S.T.
Contoh :
Dim MyPen As New System.Drawing.Pen(System.Drawing.Color.Red, 3) Dim MyArr As System.Drawing.Point() = _ {new System.Drawing.Point(0,0), _ new System.Drawing.Point(250,130), _ new System.Drawing.Point(190,160)} e.Graphics.DrawCurve(MyPen,MyArr,1.5F)
Akan menghasilkan :
INDOPROG
11
Hendra, S.T.
Kemudian kita dapat juga menggunakan DrawClosedCurve(pen, PointArray) untuk menghasilkan kurva tertutup. Contoh :
Dim MyPen As New System.Drawing.Pen(System.Drawing.Color.Red, 3) Dim MyArr As System.Drawing.Point() = _ {new System.Drawing.Point(0,0), _ new System.Drawing.Point(250,130), _ new System.Drawing.Point(190,160)} e.Graphics.DrawClosedCurve(MyPen,MyArr)
Akan menghasilkan :
INDOPROG
12
Hendra, S.T.
Pada gambar diatas p1 awal koordinat awal, p2 adalah koordinat akhir, dan c1, c2 adalah koordinat control Bezier.
Dim MyPen As New System.Drawing.Pen(System.Drawing.Color.Red, 3) e.Graphics.DrawBezier(MyPen,0,0,200,200,70,50, 150, 40)
INDOPROG
13
Hendra, S.T.
Menggunakan Path
Path dibentuk oleh kombinasi dari berbagai bentuk seperti :
Dengan perintah AddLine, AddRectangle, AddEllipse, AddArc, AddPolygon, AddCurve, dan AddBezier. Contoh :
Dim MyPen As New System.Drawing.Pen(System.Drawing.Color.Red, 3) Dim MyPath As New System.Drawing.Drawing2D.GraphicsPath() MyPath.AddLine(0,0,65,20) MyPath.AddEllipse(30,20,100,50) MyPath.AddLine(130,45,200,50)
INDOPROG
14
Hendra, S.T.
Akan menghasilkan :
INDOPROG
15
Hendra, S.T.
Menggunakan SolidBrush
SolidBrush(warna) dapat digunakan untuk menggambarkan objek isian seperti FillRectangle(brush, rectangle), FillEllipse(brush, rectangle), FillPie(brush, rectangle, sudutawal, sudutakhir), dengan warna yang ditentukan pada brush. Contoh :
Dim MyBrush As New System.Drawing.SolidBrush(System.Drawing.Color.Red) Dim Rect As New System.Drawing.Rectangle(10,10,200,100) e.Graphics.FillRectangle(MyBrush,Rect)
Yang kalau dijalankan akan menghasilkan suatu persegi yang diisi dengan warna merah penuh.
INDOPROG
16
Hendra, S.T.
Menggunakan HatchBrush
HatchBrush(pola, warnagaris, warnalatarbelakang), dapat digunakan untuk menggambar objek isian dengan pola isian tertentu seperti :
INDOPROG
17
Hendra, S.T.
Menggunakan TextureBrush
TextureBrush(gambar), dapat digunakan untuk mengambarkan objek isian yang diisi dengan gambar tertentu
. Contoh :
Dim MyImage As New System.Drawing.Bitmap("c:\windows\greenstone.bmp") Dim MyBrush As New System.Drawing.TextureBrush(MyImage) Dim Rect As New System.Drawing.Rectangle(10,10,200,100) e.Graphics.FillRectangle(MyBrush,Rect)
INDOPROG
18
Hendra, S.T.
Menggunakan GradientBrush
GradientBrush digunakan untuk warna isian yang sifatnya gradual LinearGradientBrush LinierGradientBrush(Point1,Point2,warna1,warna2) akan membuat warna gradient mulai dari Point1 ke Point2 secara gradual dari warna1 ke warna2
INDOPROG
19
Hendra, S.T.
Menggunakan GammaCorrection
Contoh :
Dim Point1 As New System.Drawing.Point(10,10) Dim Point2 As New System.Drawing.Point(100,10) Dim MyBrush As New _ System.Drawing.Drawing2D.LinearGradientBrush(Point1,Point2, _ System.Drawing.Color.FromArgb(255,0,0), _ System.Drawing.Color.FromArgb(0,0,255)) Dim Rect As New System.Drawing.Rectangle(10,10,200,100) MyBrush.GammaCorrection = True e.Graphics.FillRectangle(MyBrush,Rect)
INDOPROG
20
Hendra, S.T.
INDOPROG
21
Hendra, S.T.
INDOPROG
22
Hendra, S.T.
Menampilkan gambar
Jika pada bagian sebelumnya kita telah membahas pembuatan grafik vector dengan GDI+, maka pada bagian ini kita akan melihat bagaimana mengolah gambar.
INDOPROG
23
Hendra, S.T.
' Membuat rectangle asal gambar dengan menggambil 75% gambar Dim sourceRect As New RectangleF(0, 0, 0.75F * width, 0.75F * height) e.Graphics.DrawImage( _ image, _ destinationRect, _ sourceRect, _ GraphicsUnit.Pixel)
Titik asal Titik tujuan Kiri atas (0, 0) (200, 20) Kanan atas (100, 0) (110, 100) Kiri bawah (0, 50) (250, 30)
INDOPROG
24
Hendra, S.T.
Sehingga dalam program Visual Basic ditulis sebagai : 'Membuat array yang berisi ketiga titik tujuan Dim destinationPoints As Point() = { _ New Point(200, 20), _ New Point(110, 100), _ New Point(250, 30)} Memuat file Stripes.bmp Dim image = New Bitmap("Stripes.bmp") ' Tampilkan gambar dikoordinat 0,0 e.Graphics.DrawImage(image, 0, 0) ' Tampilkan gambar sekali lagi berdasarkan titik tujuan e.Graphics.DrawImage(image, destinationPoints)
INDOPROG
25
Hendra, S.T.
Dengan koding berikut : Dim image = New Bitmap("GrapeBunch.bmp") Dim width As Integer = image.Width Dim height As Integer = image.Height 'Menampilkan gambar apa adanya pada koordinat 0,0 e.Graphics.DrawImage( _ image, _ New Rectangle(10, 10, width, height), _ 0, _ 0, _ width, _ height, _ GraphicsUnit.Pixel, _ Nothing) ' Mengunakan interpolation kualitas rendah e.Graphics.InterpolationMode = InterpolationMode.NearestNeighbor ' Menampilkan gambar sebesar 60% ukuran semula e.Graphics.DrawImage( _ image, _ INDOPROG
26
Hendra, S.T.
New Rectangle(10, 250, CInt(0.6 * width), CInt(0.6 * height)), _ 0, _ 0, _ width, _ height, _ GraphicsUnit.Pixel) ' Menggunakan interpolation kualitas menengah e.Graphics.InterpolationMode = InterpolationMode.HighQualityBilinear ' Menampilkan gambar sebesar 60% ukuran semula e.Graphics.DrawImage( _ image, _ New Rectangle(150, 250, CInt(0.6 * width), _ CInt(0.6 * height)), _ 0, _ 0, _ width, _ height, _ GraphicsUnit.Pixel) ' Menggunakan interpolation kualitas tinggi e.Graphics.InterpolationMode = InterpolationMode.HighQualityBicubic ' Menampilkan gambar sebesar 60% ukuran semula e.Graphics.DrawImage( _ image, _ New Rectangle(290, 250, CInt(0.6 * width), CInt(0.6 * height)), _ 0, _ 0, _ width, _ height, _ GraphicsUnit.Pixel)
INDOPROG
27
Hendra, S.T.
Program Tetris
Oleh : Hendra Soewarno Contoh aplikasi pemrograman GDI+ untuk pembuatan games tetris dengan pendekatan berorientasi objek.
Untuk memahami program ini anda perlu mengerti pemrograman form, event handling, dan array, serta GDI+
INDOPROG
28
Hendra, S.T.
Rancangan program
Program ini menggunakan pendekatan berorientasi objek dengan membuat dua class untuk objek Shape dan objek Grid
Class TShape
Class ini berfungsi menghasilkan bentuk-bentuk dengan system koordinat berikut :
{1,0},{1,1},{1,2},{1,3}
{0,1},{1,1},{2,1},{3,1}
Berikut ini adalah rincian array untuk masing-masing Shape dan rotasinya
{1,0},{1,1},{1,2},{1,3} {0,1},{1,1},{2,1},{3,1} {1,0},{1,1},{1,2},{1,3} {0,1},{1,1},{2,1},{3,1} {0,0},{0,1},{1,0},{1,1} {0,0},{0,1},{1,0},{1,1} {0,0},{0,1},{1,0},{1,1} {0,0},{0,1},{1,0},{1,1} {0,0},{0,1},{0,2},{1,2} {0,0},{0,1},{1,0},{2,0} {0,0},{1,0},{1,1},{1,2} {0,1},{1,1},{2,0},{2,1} {0,0},{0,1},{0,2},{1,1} {0,0},{1,0},{1,1},{2,0} {1,0},{0,1},{1,1},{1,2} {0,1},{1,0},{1,1},{2,1} {0,0},{0,1},{1,1},{1,2} {0,1},{1,0},{1,1},{2,0} {0,0},{0,1},{1,1},{1,2} {0,1},{1,0},{1,1},{2,0}
INDOPROG
29
Hendra, S.T.
Contoh :
Yang selanjutnya dipetakan menjadi suatu array 4 dimensi yang berisi koordinat dari masingmasing shape :
'Array 4 dimensi yang berisi nilai sel dari masing-masing bentuk 'serta bentuk rotasinya private sarr(,,,) as integer = {{{{1,0},{1,1},{1,2},{1,3}}, _ {{0,1},{1,1},{2,1},{3,1}}, _ {{1,0},{1,1},{1,2},{1,3}}, _ {{0,1},{1,1},{2,1},{3,1}}}, _ {{{0,0},{0,1},{1,0},{1,1}}, _ {{0,0},{0,1},{1,0},{1,1}}, _ {{0,0},{0,1},{1,0},{1,1}}, _ {{0,0},{0,1},{1,0},{1,1}}}, _ {{{0,0},{0,1},{0,2},{1,2}}, _ {{0,0},{0,1},{1,0},{2,0}}, _ {{0,0},{1,0},{1,1},{1,2}}, _ {{0,1},{1,1},{2,0},{2,1}}}, _ {{{0,0},{0,1},{0,2},{1,1}}, _ {{0,0},{1,0},{1,1},{2,0}}, _ {{1,0},{0,1},{1,1},{1,2}}, _ {{0,1},{1,0},{1,1},{2,1}}}, _ {{{0,0},{0,1},{1,1},{1,2}}, _ {{0,1},{1,0},{1,1},{2,0}}, _ {{0,0},{0,1},{1,1},{1,2}}, _ {{0,1},{1,0},{1,1},{2,0}}}, _ {{{0,1},{0,2},{1,0},{1,1}}, _ {{0,0},{1,0},{1,1},{2,1}}, _ {{0,1},{0,2},{1,0},{1,1}}, _ {{0,0},{1,0},{1,1},{2,1}}}}
INDOPROG
30
Hendra, S.T.
'menyimpan nomor next shape 'menyimpan warna current shape 'menyimpan warna next shape 'nomor rotasi shape
Konstruktor TShape Konstuktor TShape merupakan metoda yang otomatis dijalankan begitu instance dari TShape terbentuk. Misalnya :
private gtshape as new tshape 'instance class tshape
berfungsi menghasilkan bentuk Shape berikutnya yang akan dimunculkan setelah bentuk sekarang dengan memanggil metoda generateshape.
'konstrutor untuk class tshape public sub new() generateshape(nextshape, nextcolor) end sub
Metoda GenerateNextShape Metoda ini berfungsi memindahkan nextshape menjadi currentshape, serta membuat nextshape yang berikutnya.
'Membuat next shape berikutnya, dan menset current shape public sub generatenextshape() currentshape = nextshape currentcolor = nextcolor currentstate = 0 'rotasi ke 0 generateshape(nextshape, nextcolor) 'buat nextshape baru end sub
INDOPROG
31
Hendra, S.T.
Catatan : Parameter pada sub ini dilewatkan secara by refrence, sehingga nilai dapat dikembalikan ke variable shape dan shapecolor. Metoda Rotate Metode ini berfungsi menset nilai currentstate ke nilai rotasi berikutnya (0 ke 1, 1 ke 2, 2 ke 3, 3 ke 0).
'Rotasi ke bentuk berikutnya public sub rotate() currentstate = currentstate + 1 if currentstate = 4 then currentstate = 0 end sub
Metoda DeRotate Metode ini berfungsi menset nilai currentstate ke nilai rotasi sebelumnya (1 ke 0, 2 ke 1, 3 ke 2, 0 ke 3).
'Rotasi ke bentuk sebelumnya public sub derotate() currentstate = currentstate - 1 if currentstate = -1 then currentstate = 3 end sub
'Rotasi sebelumnya
Metoda CurrentShapeSel Properti ini berfungsi mengembalikan nilai sel yang ke i,j dari array shape yang tersimpan pada array 4 dimensi sarr.
'Mengembalikan sel i,j dari current shape public function currentshapesel(i as integer, j as integer) return sarr(currentshape,currentstate,i,j) end function
Nilai sel yang dikembalikan sangat tergantung pada nilai variable currentshape (bentuk shape), dan currentstate (nomor rotasi) INDOPROG
32
Hendra, S.T.
{1,0},{0,1},{1,1},{1,2}
Dan CurrentShapeSel(0,0) akan menghasilkan 1 CurrentShapeSel(0,1) akan menghasilkan 0 Property NextShapeSel Properti ini berfungsi mengembalikan nilai sel yang ke i,j dari array shape yang tersimpan pada array 4 dimensi sarr.
'Mengembalikan sel i,j dari next shape public function nextshapesel(i as integer, j as integer) return sarr(nextshape,0,i,j) 'Bentuk awal end function
Nilai sel yang dikembalikan sangat tergantung pada nilai variable nextshape (bentuk shape), dan currentstate defaultnya 0, karena nextshape belum mengalami rotasi.
Class TGrid
Class ini berfungsi menyediakan mekanisme Grid pada permainan Tetris, dimana pada memori computer diwakili dengan array dua dimensi, dengan gambaran sebagai berikut :
INDOPROG
33
Hendra, S.T.
Merupakan array yang mewakili grid dilayar, jika suatu sel terisi gambar, maka nilai parr(x,y) akan berisi nilai 1, dan carr(x,y) akan berisi nilai warna gambar. Kontruktor TGrid Begitu instance dari TGrid terbuat, maka akan mengisi awal array parr menjadi sebagai berikut, yang akan menjadi bingkai dari grid, sehingga area permainan mulai dari (3,0) s/d (12,22)
INDOPROG
34
Hendra, S.T.
'konstruktur class tgrid public sub new() dim i, j as integer for i = 0 to 15 for j = 0 to 25 parr(i,j) = 1 next j next i for i = 3 to 12 for j = 0 to 22 parr(i,j) = 0 next j next i end sub
'isi bingkai
'isi arena
Metoda TestShape Metoda ini berfungsi mengisi nilai dari shape ke posisi x,y dalam grid, dengan syarat parr(x,y) masih 0
'Menempatkan shape pada posisi x,y di grid public sub putshape(x as integer, y as integer, s as tshape) dim i as integer for i = 0 to 3
INDOPROG
35
Hendra, S.T.
Misalnya putshape yang ke 4, keposisi 6,21 pada grid, yang akan mengisi nilai ke parr
Metoda TestShape Metoda ini berfungsi mencoba apakah shape dapat ditempatkan pada posisi x,y dalam grid, dengan syarat parr(x,y) masih 0
'Mengembalikan nilai yang menunjukan apakah 'shape dapat ditempatkan pada grid diposisi x,y public function testshape(x as integer, y as integer, s as tshape)_ as boolean dim i as integer for i = 0 to 3 'apakah sel pada grid telah terisi ( > 0 ) if parr(x+s.currentshapesel(i,0), _ y+s.currentshapesel(i,1)) > 0 then return false end if
INDOPROG
36
Hendra, S.T.
Metoda CheckGrid Metoda ini berfungsi memeriksa apakah ada baris dalam array parr yang berisi nilai 1 dari kolom 3 s/d 12.
'periksa apakah ada baris yang berhasil diselesaikan pemain public function checkgrid() as integer dim i,j as integer dim b,k as integer dim complete as integer complete = 0 i = 22 do while i > 3 j = 3 do while parr(j,i) <> 0 and j < 13 j=j+1 loop if j = 13 then beep 'sound beep complete = complete + 1 for b = i to 4 step -1 for k = 3 to 12 parr(k,b) = parr(k,b-1) carr(k,b) = carr(k,b-1) next k next b else i = i - 1 end if loop return complete end function end class
Misalnya array parr pada baris 22 berisi nilai 1 mulai baris 3 s/d 12, maka setelah metoda ChekGrid dijalankan akan menghapus baris 22 dan mengeser baris diatasnya ke bawah, dan mengembalikan nilai berapa baris yang berhasil diselesaikan.
INDOPROG
37
Hendra, S.T.
Class Tetris
Class ini merupakan class utama permainan Tetris
Konstruktor Tetris
Berfungsi mempersiapkan tampilan form, seperti title form, ukuran form, menempatkan label untuk keterangan score dan gameover, membuat objek Graphics yang akan digunakan untuk menyediakan metoda pengambaran, serta mempersiapkan Shape berikutnya.
public sub new() me.text = "Program Tetris" me.size = new size(450, 600) labelscore.location = new point(61,30) me.controls.add(labelscore) labelgameover.location = new point(200,30) me.controls.add(labelgameover) g = me.creategraphics() score = 0 printscore() nextshape() 'persiapkan shape berikutnya end sub
Metoda NextShape
Metoda ini berfungsi mempersiapkan shape berikutnya, dan menset interval timer 200 millidetik, dan posisi awal shape mulai di posisi (7,0)
'metoda mempersiapkan shape berikutnya private sub nextshape() gtimer.interval = 200
INDOPROG
38
Hendra, S.T.
Metoda MoveShape
Metoda ini berfungsi menggambarkan animasi pergerakan Shape pada posisi x,y sesuai dengan arah gerakan yang ditentukan pada dx dan dy, misalnya bergerak ke kiri, kama dx = -1, dy = 0
'memindahkan shape keposisi x,y private sub movexy(dx,dy) clearshape() x = x + dx y = y + dy drawshape() end sub
Metoda MoveShape
Metoda ini berfungsi memperbaharui nilai score di layar
'metoda untuk mencetak score dilayar private sub printscore() labelscore.text = "Score : " & score.tostring() end sub
Metoda MoveShape
Metoda ini berfungsi mengubah tulisan di labelgameover menjadi Game Over
'metoda untuk mencetak gameover private sub printgameover() labelgameover.text = "Game Over" end sub
Event Tick
Event ini secara otomatis akan dibangkitkan oleh Timer secara berkala untuk mengerakan Shape ke bawah, dengan senantiasa apakah Shape telah mencapai batas gerakan, jika ya, maka akan memanggil metoda putshape pada TGrid. Jika Shape tertahan dibaris < 3 artinya Game Over
'mengerakan shape ke bawah dengan interval waktu tertentu private sub gtimer_tick(sender as object, e as eventargs) _ handles gtimer.tick 'apakah shape masih bisa turun kebawah if gtgrid.testshape(x,y+1,gtshape) then
INDOPROG
39
Hendra, S.T.
movexy(0,1) 'jika ya pindah shape 1 baris ke bawah else gtgrid.putshape(x,y,gtshape) 'tempatkan shape kegrid score = score + gtgrid.checkgrid() 'periksa baris yang lengkap redrawgrid() 'cetak ulang grid printscore() 'cetak score 'jika shape tertahan di baris 3, artinya game over if y < 3 then gtimer.enabled = false 'matikan timer karena gameover printgameover() 'tampil pesan gameover else nextshape() 'persiapkan gambar berikutnya end if end if end sub
Event KeyDown
Event ini secara otomatis akan dibangkitkan apabila adanya penekanan tombol oleh pemakai, Jika panah atas akan merotasi shape jika panah kiri akan mengerakan shape ke kiri jika panah kanan akan mengerakan shape ke kanan jika panah bawah akan mempercepat turunya shape
'deteksi penekanan tombol dengan event keydown pada form private sub tetris_keydown(sender as object, e as keyeventargs) _ handles mybase.keydown select case e.keyvalue case 38, 104, 12,101 : 'Panah atas, 8, 5 gtshape.rotate() 'rotasi 'apakah hasil rotasi dapat ditempatkan diposisi x,y if gtgrid.testshape(x,y,gtshape) then 'kalau ya, rotasi balik kembali gtshape.derotate() clearshape() 'hapus animasi shape gtshape.rotate() 'rotasi drawshape() 'gambar shape ke layar else gtshape.derotate() end if case 37, 100 : 'Panah kiri, 4 'jika shape dapat ditempatkan kekiri if gtgrid.testshape(x-1,y,gtshape) then movexy(-1,0) 'pindah ke kiri end if case 39, 102 : 'Panah kanan, 6 if gtgrid.testshape(x+1,y,gtshape) then movexy(1,0) end if case 40, 98 : 'Panah bawah, 2 interval dipercepat gtimer.interval = 10 end select end sub
INDOPROG
40
Hendra, S.T.
Metoda DrawSel
Metoda ini berfungsi menggambar sel Shape ke layar untuk animasi, metoda ini akan dipanggil oleh metoda drawshape dan OnPaint
'menggambar sel dari suatu shape private sub drawsel(pen as pen, brush as brush, _ x as integer, y as integer, _ w as integer, h as integer) if y > 2 then g.fillrectangle(brush,x*21,y*21,w,h) g.drawrectangle(pen,x*21,y*21,w,h) end if end sub
Metoda DrawShape
Metoda ini berfungsi menggambar Shape ke layar dengan memanggil metoda DrawSel untuk masing-masing sel
'mengambar shape secara sementara private sub drawshape() dim i as integer dim pen as new pen(color.white,1) dim brush as new solidbrush(gtshape.currentcolor) for i = 0 to 3 drawsel(pen,brush, _ x+gtshape.currentshapesel(i,0), _ y+gtshape.currentshapesel(i,1), _ 20,20) next i end sub
Metoda DrawShape
Metoda ini berfungsi menghapus Shape di layar dengan memanggil metoda DrawSel untuk masing-masing sel (warna hitam)
'menghapus shape sementara private sub clearshape() dim i as integer dim pen as new pen(color.black,1) dim brush as new solidbrush(color.black) for i = 0 to 3 drawsel(pen,brush, _ x+gtshape.currentshapesel(i,0), _ y+gtshape.currentshapesel(i,1),20,20) next i end sub
Metoda ReDrawNextShape
Metoda ini berfungsi menggambar NextShape di layar setiap adanya perubahan nextshape
INDOPROG
41
Hendra, S.T.
Metoda ReDrawGrid
Metoda ini berfungsi menggambar ulang Grid dilayar
'mengambar ulang grid private sub redrawgrid dim i,j as integer dim pen as new pen(color.white,1) dim brush as new solidbrush(color.red) for i = 3 to 12 for j = 3 to 22 if gtgrid.parr(i,j) <> 0 then 'Menggambar ulang isi grid pen.color = color.white brush.color = gtgrid.carr(i,j) drawsel(pen,brush,i,j,20,20) else pen.color = color.black brush.color = color.black drawsel(pen,brush,i,j,20,20) end if next j next i pen.color = color.black g.drawrectangle(pen,3*21-1,3*21-1,10*21+1,20*21+1) end sub
Metoda OnPaint
Metoda OnPaint akan secara otomatis diaktifkan oleh windows setiap kali layar form Tetris digambar ulang (misalnya waktu Maximize dan Minimize)
'melakukan overide terhadap sub onpaint pada base class 'untuk menggambar isi grid setiap proses refresh pada form protected overrides sub onpaint(e as painteventargs) redrawgrid() redrawnextshape() end sub
INDOPROG
42
Hendra, S.T.
Program Kongkret
option explicit on imports system imports system.drawing imports system.windows.forms imports microsoft.visualbasic public class tetris : inherits system.windows.forms.form <system.STAThread> _ public shared sub main() randomize() application.run(new tetris) end sub private private private private private private private private withevents gtimer as new system.windows.forms.timer labelscore as new label labelgameover as new label gtgrid as new tgrid 'instance class tgrid gtshape as new tshape 'instance class tshape g as graphics x,y as integer 'posisi x,y shape pada grid score as integer 'score permainan
public sub new() me.text = "Program Tetris" me.size = new size(450, 600) labelscore.location = new point(61,30) me.controls.add(labelscore) labelgameover.location = new point(200,30) me.controls.add(labelgameover) g = me.creategraphics() score = 0 printscore() nextshape() 'persiapkan shape berikutnya end sub 'metoda mempersiapkan shape berikutnya private sub nextshape() gtimer.interval = 200 gtimer.enabled = true gtshape.generatenextshape() redrawnextshape() x = 7 y = 0 end sub 'memindahkan shape keposisi x,y private sub movexy(dx,dy) clearshape() x = x + dx y = y + dy drawshape() end sub
'set interval 200 millidetik 'mengaktifkan timer 'cetak shape berikutnya 'koordinat awal di 7,0
INDOPROG
43
Hendra, S.T.
'mengerakan shape ke bawah dengan interval waktu tertentu private sub gtimer_tick(sender as object, e as eventargs) _ handles gtimer.tick 'apakah shape bisa turun kebawah if gtgrid.testshape(x,y+1,gtshape) then movexy(0,1) 'pindah shape 1 baris ke bawah else gtgrid.putshape(x,y,gtshape) 'tempatkan shape kegrid score = score + gtgrid.checkgrid() 'periksa baris yang lengkap redrawgrid() 'cetak ulang grid printscore() 'cetak score 'jika shape tertahan di baris 3, artinya game over if y < 3 then gtimer.enabled = false 'matikan timer karena gameover printgameover() 'tampil pesan gameover else nextshape() 'persiapkan gambar berikutnya end if end if end sub 'deteksi penekanan tombol dengan event keydown pada form private sub tetris_keydown(sender as object, e as keyeventargs) _ handles mybase.keydown select case e.keyvalue case 38, 104, 12,101 : 'Panah atas, 8, 5 gtshape.rotate() 'rotasi 'apakah hasil rotasi dapat ditempatkan diposisi x,y if gtgrid.testshape(x,y,gtshape) then 'kalau ya, rotasi balik kembali gtshape.derotate() clearshape() 'hapus animasi shape gtshape.rotate() 'rotasi drawshape() 'gambar shape ke layar else gtshape.derotate() end if case 37, 100 : 'Panah kiri, 4 'jika shape dapat ditempatkan kekiri if gtgrid.testshape(x-1,y,gtshape) then movexy(-1,0) 'pindah ke kiri end if case 39, 102 : 'Panah kanan, 6 if gtgrid.testshape(x+1,y,gtshape) then movexy(1,0) end if case 40, 98 : 'Panah bawah, 2 interval dipercepat
INDOPROG
44
Hendra, S.T.
INDOPROG
45
Hendra, S.T.
private sub redrawgrid dim i,j as integer dim pen as new pen(color.white,1) dim brush as new solidbrush(color.red) for i = 3 to 12 for j = 3 to 22 if gtgrid.parr(i,j) <> 0 then 'Menggambar ulang isi grid pen.color = color.white brush.color = gtgrid.carr(i,j) drawsel(pen,brush,i,j,20,20) else pen.color = color.black brush.color = color.black drawsel(pen,brush,i,j,20,20) end if next j next i pen.color = color.black g.drawrectangle(pen,3*21-1,3*21-1,10*21+1,20*21+1) end sub 'melakukan overide terhadap sub onpaint pada base class 'untuk menggambar isi grid setiap proses refresh pada form protected overrides sub onpaint(e as painteventargs) redrawgrid() redrawnextshape() end sub end class
public class tgrid public parr(15,25) as integer grid public carr(15,25) as color grid 'konstruktur class tgrid public sub new() dim i, j as integer for i = 0 to 15 for j = 0 to 25 parr(i,j) = 1 next j next i for i = 3 to 12 for j = 0 to 22 parr(i,j) = 0 next j next i end sub
'Array menyimpan isi sel pada 'Array menyimpan warna sel pada
'isi bingkai
'isi arena
'Mengembalikan nilai yang menunjukan apakah 'shape dapat ditempatkan pada grid diposisi x,y public function testshape(x as integer, y as integer, s as tshape) _ as boolean dim i as integer
INDOPROG
46
Hendra, S.T.
'Menempatkan shape pada posisi x,y di grid public sub putshape(x as integer, y as integer, s as tshape) dim i as integer for i = 0 to 3 parr(x+s.currentshapesel(i,0), _ y+s.currentshapesel(i,1)) = 1 carr(x+s.currentshapesel(i,0), _ y+s.currentshapesel(i,1)) = s.currentcolor next i end sub 'periksa apakah ada baris yang berhasil diselesaikan pemain public function checkgrid() as integer dim i,j as integer dim b,k as integer dim complete as integer complete = 0 i = 22 do while i > 3 j = 3 do while parr(j,i) <> 0 and j < 13 j=j+1 loop if j = 13 then beep 'sound beep complete = complete + 1 for b = i to 4 step -1 for k = 3 to 12 parr(k,b) = parr(k,b-1) carr(k,b) = carr(k,b-1) next k next b else i = i - 1 end if loop return complete end function end class public class tshape private currentshape private nextshape as public currentcolor public nextcolor as
INDOPROG
47
Hendra, S.T.
'Array 4 dimensi yang berisi nilai sel dari masing-masing bentuk 'serta bentuk rotasinya private sarr(,,,) as integer = {{{{1,0},{1,1},{1,2},{1,3}}, _ {{0,1},{1,1},{2,1},{3,1}}, _ {{1,0},{1,1},{1,2},{1,3}}, _ {{0,1},{1,1},{2,1},{3,1}}}, _ {{{0,0},{0,1},{1,0},{1,1}}, _ {{0,0},{0,1},{1,0},{1,1}}, _ {{0,0},{0,1},{1,0},{1,1}}, _ {{0,0},{0,1},{1,0},{1,1}}}, _ {{{0,0},{0,1},{0,2},{1,2}}, _ {{0,0},{0,1},{1,0},{2,0}}, _ {{0,0},{1,0},{1,1},{1,2}}, _ {{0,1},{1,1},{2,0},{2,1}}}, _ {{{0,0},{0,1},{0,2},{1,1}}, _ {{0,0},{1,0},{1,1},{2,0}}, _ {{1,0},{0,1},{1,1},{1,2}}, _ {{0,1},{1,0},{1,1},{2,1}}}, _ {{{0,0},{0,1},{1,1},{1,2}}, _ {{0,1},{1,0},{1,1},{2,0}}, _ {{0,0},{0,1},{1,1},{1,2}}, _ {{0,1},{1,0},{1,1},{2,0}}}, _ {{{0,1},{0,2},{1,0},{1,1}}, _ {{0,0},{1,0},{1,1},{2,1}}, _ {{0,1},{0,2},{1,0},{1,1}}, _ {{0,0},{1,0},{1,1},{2,1}}}} 'konstrutor untuk class tshape public sub new() generateshape(nextshape, nextcolor) end sub 'Membuat next shape berikutnya, dan menset current shape public sub generatenextshape() currentshape = nextshape currentcolor = nextcolor currentstate = 0 'rotasi ke 0 generateshape(nextshape, nextcolor) 'buat nextshape baru end sub 'Membuat bentuk dan mengembalikan melalui parameter shape dan shapecolor private sub generateshape(byref shape as integer, _ byref shapecolor as color) dim c as integer shape = int(rnd*6) 'random untuk shape c = int(rnd*8) 'random untuk shape color select case c case 0 : shapecolor = color.red case 1 : shapecolor = color.green case 2 : shapecolor = color.blue case 3 : shapecolor = color.orange case 4 : shapecolor = color.pink case 5 : shapecolor = color.cyan case 6 : shapecolor = color.gray case else shapecolor = color.magenta
INDOPROG
48
Hendra, S.T.
'Rotasi sebelumnya
'Mengembalikan sel i,j dari current shape public function currentshapesel(i as integer, j as integer) return sarr(currentshape,currentstate,i,j) end function 'Mengembalikan sel i,j dari next shape public function nextshapesel(i as integer, j as integer) return sarr(nextshape,0,i,j) 'Bentuk awal end function end class
Kompilasi Program
Vbc tetris.vb /r:system.dll /r:system.drawing.dll /r:system.windows.forms.dll
INDOPROG
49