You are on page 1of 49

Pemrograman GDI+ pada VB.

NET

Hendra, S.T.

Pemrograman GDI+ pada VB.Net


Oleh : Hendra, ST.

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

Pemrograman GDI+ pada VB.NET

Hendra, S.T.

Pemrograman Grafik pada VB.NET


Untuk pemrograman Grafik di VB.NET kita membutuhkan GDI+ (Graphic Device Interface) yang merupakan bagian dari system operasi XP. GDI+ yang memiliki kemampuan untuk mengolah grafik vector dua dimensi (garis), imaging (bitmap) dan typography (font) pada Layar maupun Printer. Dengan GDI, programmer tidak perlu mengetahui detail dari masing-masing peralatan untuk menampilkan grafik diatasnya, tetapi cukup menggunakan fasilitas yang telah disediakan oleh GDI+ class. Catatan : Pada pemrograman tradisional, menggambar garis ke layar akan sangat berbeda dengan menggambar garis ke printer.

System Koordinat pada GDI+


GDI+ menggunakan system koordinat dilayar x,y mulai dari 0,0.

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

Pemrograman GDI+ pada VB.NET

Hendra, S.T.

Mengambar Garis pada Form


Pengambaran Graphics diatas form dapat dilakukan melalui Objek Graphics yang dapat dideklarasikan sebagai berikut : Dim MyGraphics As System.Drawing.Graphics = Me.CreateGraphics Objek Graphics menyediakan berbagai metode untuk menggambar seperti DrawLine, DrawRectangle, dll Dalam pengembaran, kita membutuhkan Objek Pen menyediakan atribut seperti Warna dan Ketebalan garis dalam ukuran pixel. Objek Pen dapat dideklarasikan sebagai berikut : Dim Pen As New System.Drawing.Pen(Warna,Tebal) Dimana Warna adalah warna yang diinginkan, dan Tebal adalah tebal pen dalam ukuran point. Contoh program GDI+ anda yang pertama :
Option Explicit On Imports System Imports System.Windows.Forms Imports Microsoft.VisualBasic Public Class MyForm : Inherits Form <System.STAThread()> _ Public Shared Sub Main() Application.Run(New MyForm) End Sub

Public Sub New() 'Constructor Me.Text = "Mengambar garis pada Form" End Sub Private Sub MyForm_Click(Sender As Object, e As System.EventArgs) _

INDOPROG

Pemrograman GDI+ pada VB.NET

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

Kemudian simpan program diatas dengan mana grafik.vb

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

Pemrograman GDI+ pada VB.NET

Hendra, S.T.

Melakukan overriding terhadap Metoda OnPaint


OnPaint Event Handle adalah event yang akan dibangkitkan setiap kali form mengalami refresh (pada saat minimize, maximize maupun ditimpa oleh form lain), jadi jika kita melakukan overriding terhadap Event ini dan menempatkan perintah pengambaran garis didalamnya ini, maka garis tersebut akan digambar setiap proses refresh. Parameter PaintEventArgs pada Sub OnPaint merupakan objek Graphics, sehingga kita tidak perlu melakukan Me.CreateGraphics. Contoh :
Option Explicit On Imports System Imports System.Windows.Forms Imports Microsoft.VisualBasic Public Class MyForm Inherits Form

<System.STAThread()> _ Public Shared Sub Main() Application.Run(New MyForm) End Sub

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

Pemrograman GDI+ pada VB.NET

Hendra, S.T.

Mengambar grafik vector 2 dimensi


Grafik vector merupakan kemampuan menggambar bentuk-bentuk tradisional seperti garis, kurva dan bentuk berdasarkan sekumpulan titik tertentu. Untuk pengambaran grafik vector kita dapat menggunakan objek Pen dan Brush, dimana objek Pen untuk pengambaran bentuk garis, dan Brush untuk objek isian.

Mengambar garis dengan Pen


Perintah DrawLine(pen, x1,y1, x2,y2) digunakan untuk menggambar garis dari koordinat awal (x1,y1) ke koordinat akhir (x2,y2). Contoh :
Dim MyPen As New System.Drawing.Pen(System.Drawing.Color.Red,3) e.Graphics.DrawLine(MyPen,10,10,200,100)

Akan menghasilkan

Mengambar persegi dengan Pen


Kita dapat menggunakan metoda DrawRectangle(Pen, x,y,lebar,tinggi) pada objek grafik untuk mengambar persegi pada koordinat x,y dengan lebar dan tinggi tertentu. Contoh :

INDOPROG

Pemrograman GDI+ pada VB.NET

Hendra, S.T.

e.Graphics.DrawRectangle(MyPen,10,10,200,100)

Akan menghasilkan :

Mengambar Ellipse pada Form dengan Pen


Kita dapat menggunakan metoda DrawEllipse(Pen,x,y,lebar,tinggi) pada objek grafik untuk mengambar ellipse pada koordinat x,y dengan ukuran lebar dan tinggi tertentu :

Contoh :
e.Graphics.DrawEllipse(MyPen,10,10,200,100)

Akan menghasilkan :

INDOPROG

Pemrograman GDI+ pada VB.NET

Hendra, S.T.

Mengambar Arc pada Form dengan Pen


Kita dapat menggunakan metoda DrawArc(Pen,x,y,lebar,tinggi,sudutawal,sudutakhir) untuk mengambar arcus, adapun perbedaan antara Ellipse dengan Arc adalah, kalau ellipse adalah gambar kurva tertutup, sedangkan Arc ditentukan oleh sudut awal dan akhir pengambaran kurva. Contoh :
e.Graphics.DrawArc(MyPen,10,10,200,100,0,270)

Akan menghasilkan :

INDOPROG

Pemrograman GDI+ pada VB.NET

Hendra, S.T.

Mengambar Pie pada Form dengan Pen


Kalau Arc adalah kurva dengan sudut awal dan akhir, demikian juga pie, bedanya adalah pie merupakan kurva tertutup. Untuk menggambar pie dapat digunakan metoda DrawEllipse(Pen,x,y,lebar,tinggi). Contoh :
e.Graphics.DrawPie(MyPen,10,10,200,100,0,90)

Akan menghasilkan :

Menggunakan structure Point


Kita juga dapat menggunakan structure point untuk penentuan koordinat (x,y) awal dan akhir pada perintah DrawLine(pen, point1, point2). Catatan : DrawLine(pen, point1, point2) merupakan metode overloading terhadap DrawLine(pen, x1,y1,x2,y2)

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

Pemrograman GDI+ pada VB.NET

Hendra, S.T.

yang kalau dijalankan akan menghasilkan garis yang sama dengan perintah :
e.Graphics.DrawLine(MyPen,10,10,200,100)

Akan menghasilkan :

Menggambar poligon dengan array dari point


DrawPolygons(Pen,PointArray) merupakan kurva tertutup yang dibentuk oleh garis-garis, untuk menggambar poligon anda perlu menyediakan array yang berisi koordinat (x,y) dari sudut-sudut polygon.

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

Pemrograman GDI+ pada VB.NET

Hendra, S.T.

Menggambar cardinal splines dengan array dari point


Jika polygon merupakan kurva tertutup yang dihubungan oleh garis lurus pada setiap koordinat (x,y) sudutnya, maka DrawCurve(Pen, PointArray, Tangen) merupakan kurva terbuka yang dibentuk dengan garis lengkung yang memiliki nilai tangent tertentu, berikut ini adalah contoh gambar cardinal splines yang memiliki tiga titik dengan nilai tangent yang berbeda (0, 1, 1.5, dan 2).

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

Pemrograman GDI+ pada VB.NET

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

Pemrograman GDI+ pada VB.NET

Hendra, S.T.

Menggambar Bezier splines dengan array dari point


DrawBezier(pen, x1, y1, x2, y2, x3, y3, x4, y4) merupakan kurva dengan dari koordinat (x1,y1) awal ke koordinat (x2,y2), dengan dua koordinat control (x3,y3) dan (x4,y4).

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

Pemrograman GDI+ pada VB.NET

Hendra, S.T.

Menggunakan Path
Path dibentuk oleh kombinasi dari berbagai bentuk seperti :

Lines Rectangles Ellipses Arcs Polygons Cardinal splines Bzier splines

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

Pemrograman GDI+ pada VB.NET


e.Graphics.DrawPath(MyPen,MyPath)

Hendra, S.T.

Akan menghasilkan :

Menggunakan structure rectangle


Sebagaimana dengan structure point, kita dapat juga menggunakan struktur rectangle untuk mengambar bentuk yang membutuhkan koordinat x,y dan ukuran lebar, tinggi, misalnya DrawRectangle(pen, rectangle), DrawArc(Pen,x,y,rectangle,sudutakhir), DrawEllipse(Pen,rectangle), DrawEllipse(Pen,rectangle), Contoh :
Dim Rect As New System.Drawing.Rectangle(10,10,200,100) e.Graphics.DrawRectangle(MyPen,Rect) yang hasilnya akan sama dengan : e.Graphics.DrawRectangle(MyPen,10,10,200,100)

INDOPROG

15

Pemrograman GDI+ pada VB.NET

Hendra, S.T.

Mengambar objek isian pada Form dengan Brush


Kalau kita mengambar bentuk dengan Pen, maka hasilnya tidak disertai dengan isian, sedangkan untuk menghasilkan gambar dengan isian kita membutuhkan Brush.

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

Pemrograman GDI+ pada VB.NET

Hendra, S.T.

Menggunakan HatchBrush
HatchBrush(pola, warnagaris, warnalatarbelakang), dapat digunakan untuk menggambar objek isian dengan pola isian tertentu seperti :

HatchStyle.Horizontal HatchStyle.Vertical HatchStyle.ForwardDiagonal HatchStyle.HatchStyleBackwardDiagonal HatchStyle.HatchStyleCross HatchStyle.HatchStyleDiagonalCross

HatchBrush terdefinisi pada namespace System.Drawing.Drawing2D Contoh :


Dim MyBrush As New _ System.Drawing.Drawing2D.HatchBrush(_ System.Drawing.Drawing2D.HatchStyle.Horizontal, _ System.Drawing.Color.Red, _ System.Drawing.Color.White) Dim Rect As New System.Drawing.Rectangle(10,10,200,100) e.Graphics.FillRectangle(MyBrush,Rect)

INDOPROG

17

Pemrograman GDI+ pada VB.NET

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

Pemrograman GDI+ pada VB.NET

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

LinearGradientBrush terdefinisi pada namespace System.Drawing.Drawing2D 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) e.Graphics.FillRectangle(MyBrush,Rect)

INDOPROG

19

Pemrograman GDI+ pada VB.NET

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)

Bandingkan dengan hasil sebelumnya yang tidak menggunakan gamma correction.

INDOPROG

20

Pemrograman GDI+ pada VB.NET

Hendra, S.T.

Mengambar tulisan pada Form dengan DrawString


Untuk menampilkan tulisan kita dapat menggunakan DrawString(tulisan, font, brush, pointF). Contoh :
Dim Fontname As New System.Drawing.FontFamily("Times New Roman") Dim MyFont As New System.Drawing.Font(FontName, 24, _ System.Drawing.FontStyle.Regular, _ System.Drawing.GraphicsUnit.Pixel) Dim MyBrush As New ystem.Drawing.SolidBrush(System.Drawing.Color.Black) Dim MyPoint As New System.Drawing.PointF(10.0,10.0) e.Graphics.DrawString("Hello World !",MyFont,MyBrush,MyPoint)

Catatan : PointF adalah point dalam type Float

INDOPROG

21

Pemrograman GDI+ pada VB.NET

Hendra, S.T.

Mengambar garis dengan texture


Untuk mengambar garis dengan texture, kita membutuhkan pen yang menggunakan TextureBrush. Contoh :
Dim MyImage As New System.Drawing.Bitmap("c:\windows\greenstone.bmp") Dim MyBrush As New System.Drawing.TextureBrush(MyImage) Dim MyPen As New System.Drawing.Pen(MyBrush, 10) e.Graphics.DrawLine(MyPen,10,10,200,100)

INDOPROG

22

Pemrograman GDI+ pada VB.NET

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.

Memuat dan menampilkan


Untuk memuat dan menampilkan gambar dari file ke layer, anda membutuhkan objek Bitmap dan objek Graphics. Class Bitmap mendukung beberapa format seperti BMP, GIF, JPEG, PNG dan TIFF. Contoh :
Dim bitmap As New Bitmap("Grapes.jpg") e.Graphics.DrawImage(bitmap, 60, 10)

Memuat dan menampilkan dengan ukuran lain


Untuk menampilkan gambar dengan ukuran yang berbeda dengan ukuran sebenarnya, kita harus menyediakan dua Rectangle, yaitu Rectangle Asal (crop terhadap gambar sebenarnya), dan Rectangle Tujuan (yang berisi koordinat dan ukuran yang diinginkan), contoh :
Dim image = New Bitmap("Apple.gif") ' menggambar bitmap di posisi (0, 0). e.Graphics.DrawImage(image, 0, 0) ' membuat Rectangle tujuan di koordinat (150,20), dan ' tinggi dan lebar diset 130% dari ukuran gambar semula Dim width As Integer = image.Width Dim height As Integer = image.Height Dim destinationRect As New RectangleF( _

INDOPROG

23

Pemrograman GDI+ pada VB.NET


150, _ 20, _ 1.3F * width, _ 1.3F * height)

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)

Melakukan rotasi terhadap gambar


Untuk melakukan rotasi terhadap gambar kita membutuhkan tiga koordinat yaitu

Titik asal Titik tujuan Kiri atas (0, 0) (200, 20) Kanan atas (100, 0) (110, 100) Kiri bawah (0, 50) (250, 30)

INDOPROG

24

Pemrograman GDI+ pada VB.NET

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)

Menggunakan interpolation pada saat mengubah ukuran gambar


Pemakaian interpolation akan menentukan kualitas gambar hasil pembesaran ataupun pengecilan. Perhatikan kualitas gambar berikut yang masing-masing menggunakan interpolation yang berbeda.

INDOPROG

25

Pemrograman GDI+ pada VB.NET

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

Pemrograman GDI+ pada VB.NET

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

Pemrograman GDI+ pada VB.NET

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

Pemrograman GDI+ pada VB.NET

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}

Dan rotasi ke kanan akan menjadi

{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

Pemrograman GDI+ pada VB.NET


{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}

Hendra, S.T.

Contoh :

Yang memiliki rincian array sebagai berikut :


{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}

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}}}}

Variabel pada Class TShape


private currentshape as integer 'menyimpan nomor current shape

INDOPROG

30

Pemrograman GDI+ pada VB.NET


private public public private nextshape as currentcolor nextcolor as currentstate integer as color color as integer

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

Sub GenerateShape Berfungsi menghasilkan shape secara random, dan warnanya


'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

INDOPROG

31

Pemrograman GDI+ pada VB.NET


case 5 : shapecolor = color.cyan case 6 : shapecolor = color.gray case else shapecolor = color.magenta end select end sub

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

'Rotasi berikutnya 'Kembali ke bentuk awal

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

Pemrograman GDI+ pada VB.NET

Hendra, S.T.

Misalnya nilai currentshape = 4, dan nilai currentstate = 3

{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

Pemrograman GDI+ pada VB.NET

Hendra, S.T.

Variabel yang digunakan


public parr(15,25) as integer public carr(15,25) as color 'Array menyimpan isi sel pada grid 'Array menyimpan warna sel pada grid

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

Pemrograman GDI+ pada VB.NET

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

Pemrograman GDI+ pada VB.NET


parr(x+s.currentshapesel(i,0), y+s.currentshapesel(i,1)) carr(x+s.currentshapesel(i,0), y+s.currentshapesel(i,1)) next i end sub _ = 1 _ = s.currentcolor

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

Pemrograman GDI+ pada VB.NET


next i return true end function

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

Pemrograman GDI+ pada VB.NET

Hendra, S.T.

Class Tetris
Class ini merupakan class utama permainan Tetris

Variabel yang digunakan


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

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

'set interval 200 millidetik

INDOPROG

38

Pemrograman GDI+ pada VB.NET


gtimer.enabled = true gtshape.generatenextshape() redrawnextshape() x = 7 y = 0 end sub

Hendra, S.T.

'mengaktifkan timer 'cetak shape berikutnya 'koordinat awal di 7,0

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

'hapus gambar sebelumnya 'ubah posisi x,y 'gambar diposisi baru

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

Pemrograman GDI+ pada VB.NET

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

Pemrograman GDI+ pada VB.NET

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

Pemrograman GDI+ pada VB.NET


'mengambar ulang nextshape private sub redrawnextshape dim i as integer dim pen as new pen(color.black,1) dim brush as new solidbrush(color.black) g.fillrectangle(brush,300,60,120,120) pen.color = color.white brush.color = gtshape.nextcolor for i = 0 to 3 drawsel(pen,brush, _ 16+gtshape.nextshapesel(i,0), _ 4+gtshape.nextshapesel(i,1), _ 20,20) next i end sub

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

Pemrograman GDI+ pada VB.NET

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

'hapus gambar sebelumnya 'ubah posisi x,y 'gambar diposisi baru

INDOPROG

43

Pemrograman GDI+ pada VB.NET


'metoda untuk mencetak score dilayar private sub printscore() labelscore.text = "Score : " & score.tostring() end sub 'metoda untuk mencetak gameover private sub printgameover() labelgameover.text = "Game Over" end sub

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

Pemrograman GDI+ pada VB.NET


gtimer.interval = 10 end select end sub '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 '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 '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 'mengambar ulang nextshape private sub redrawnextshape dim i as integer dim pen as new pen(color.black,1) dim brush as new solidbrush(color.black) g.fillrectangle(brush,300,60,120,120) pen.color = color.white brush.color = gtshape.nextcolor for i = 0 to 3 drawsel(pen,brush, _ 16+gtshape.nextshapesel(i,0), _ 4+gtshape.nextshapesel(i,1), _ 20,20) next i end sub

Hendra, S.T.

'mengambar ulang grid

INDOPROG

45

Pemrograman GDI+ pada VB.NET

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

Pemrograman GDI+ pada VB.NET


for i = 0 to 3 'apakah sel pada grid telah terisi if parr(x+s.currentshapesel(i,0), _ y+s.currentshapesel(i,1)) > 0 then return false end if next i return true end function

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

as integer integer as color color

'menyimpan 'menyimpan 'menyimpan 'menyimpan

nomor nomor warna warna

current shape next shape current shape next shape

private currentstate as integer

'nomor rotasi shape

INDOPROG

47

Pemrograman GDI+ pada VB.NET

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

Pemrograman GDI+ pada VB.NET


end select end sub 'Rotasi ke bentuk berikutnya public sub rotate() currentstate = currentstate + 1 if currentstate = 4 then currentstate = 0 end sub 'Rotasi ke bentuk sebelumnya public sub derotate() currentstate = currentstate - 1 if currentstate = -1 then currentstate = 3 end sub

Hendra, S.T.

'Rotasi berikutnya 'Kembali ke bentuk awal

'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