Pemrogaman GDI+ Pada VB.net

49
Pemrograman GDI+ pada VB.NET Hendra, S.T. INDOPROG 1 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.

description

tutorial Pemrogaman GDI+ Pada VB.net

Transcript of Pemrogaman GDI+ Pada VB.net

Page 1: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 1

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.

Page 2: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 2

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 :

Page 3: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 3

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) _

Page 4: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 4

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.

Page 5: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 5

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.

Page 6: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 6

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 :

Page 7: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 7

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 :

Page 8: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 8

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 :

Page 9: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 9

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)

Page 10: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 10

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 :

Page 11: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 11

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 :

Page 12: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 12

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 :

Page 13: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 13

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)

Page 14: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 14

Menggunakan Path

Path dibentuk oleh kombinasi dari berbagai bentuk seperti :

• Lines

• Rectangles

• Ellipses

• Arcs

• Polygons

• Cardinal splines

• Bézier 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)

Page 15: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 15

e.Graphics.DrawPath(MyPen,MyPath)

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)

Page 16: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 16

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.

Page 17: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 17

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)

Page 18: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 18

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)

Page 19: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 19

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)

Page 20: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 20

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.

Page 21: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 21

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

Page 22: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 22

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)

Page 23: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 23

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( _

Page 24: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 24

150, _

20, _

1.3F * width, _

1.3F * height)

' 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)

Page 25: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 25

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.

Page 26: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 26

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, _

Page 27: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 27

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)

Page 28: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 28

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+

Page 29: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 29

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}

Page 30: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 30

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

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

masing 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

Page 31: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 31

private nextshape as integer 'menyimpan nomor next shape

public currentcolor as color 'menyimpan warna current shape

public nextcolor as color 'menyimpan warna next shape

private currentstate as integer '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

Page 32: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 32

case 5 : shapecolor = color.cyan

case 6 : shapecolor = color.gray

case else

shapecolor = color.magenta

end select

end sub

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 'Rotasi berikutnya

if currentstate = 4 then currentstate = 0 'Kembali ke bentuk awal

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 'Rotasi sebelumnya

if currentstate = -1 then currentstate = 3

end sub

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)

Page 33: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 33

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 :

Page 34: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 34

Variabel yang digunakan public parr(15,25) as integer 'Array menyimpan isi sel pada grid

public carr(15,25) as color '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)

Page 35: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 35

'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 'isi bingkai

next j

next i

for i = 3 to 12

for j = 0 to 22

parr(i,j) = 0 'isi arena

next j

next i

end sub

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

Page 36: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 36

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

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

Page 37: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 37

next i

return true

end function

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.

Page 38: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 38

Class Tetris

Class ini merupakan class utama permainan Tetris

Variabel yang digunakan

private withevents gtimer as new system.windows.forms.timer

private labelscore as new label

private labelgameover as new label

private gtgrid as new tgrid 'instance class tgrid

private gtshape as new tshape 'instance class tshape

private g as graphics

private x,y as integer 'posisi x,y shape pada grid

private 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

Page 39: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 39

gtimer.enabled = true 'mengaktifkan timer

gtshape.generatenextshape()

redrawnextshape() 'cetak shape berikutnya

x = 7 'koordinat awal di 7,0

y = 0

end sub

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() 'hapus gambar sebelumnya

x = x + dx 'ubah posisi x,y

y = y + dy

drawshape() 'gambar diposisi baru

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

Page 40: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 40

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

Page 41: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 41

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

Page 42: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 42

'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

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

Page 43: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 43

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 withevents gtimer as new system.windows.forms.timer

private labelscore as new label

private labelgameover as new label

private gtgrid as new tgrid 'instance class tgrid

private gtshape as new tshape 'instance class tshape

private g as graphics

private x,y as integer 'posisi x,y shape pada grid

private 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 'set interval 200 millidetik

gtimer.enabled = true 'mengaktifkan timer

gtshape.generatenextshape()

redrawnextshape() 'cetak shape berikutnya

x = 7 'koordinat awal di 7,0

y = 0

end sub

'memindahkan shape keposisi x,y

private sub movexy(dx,dy)

clearshape() 'hapus gambar sebelumnya

x = x + dx 'ubah posisi x,y

y = y + dy

drawshape() 'gambar diposisi baru

end sub

Page 44: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 44

'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

'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

Page 45: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 45

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

'mengambar ulang grid

Page 46: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 46

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 'Array menyimpan isi sel pada

grid

public carr(15,25) as color 'Array menyimpan warna sel pada

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 'isi bingkai

next j

next i

for i = 3 to 12

for j = 0 to 22

parr(i,j) = 0 'isi arena

next j

next i

end sub

'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

Page 47: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 47

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

'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 as integer 'menyimpan nomor current shape

private nextshape as integer 'menyimpan nomor next shape

public currentcolor as color 'menyimpan warna current shape

public nextcolor as color 'menyimpan warna next shape

private currentstate as integer 'nomor rotasi shape

Page 48: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 48

'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

Page 49: Pemrogaman GDI+ Pada VB.net

Pemrograman GDI+ pada VB.NET Hendra, S.T.

INDOPROG 49

end select

end sub

'Rotasi ke bentuk berikutnya

public sub rotate()

currentstate = currentstate + 1 'Rotasi berikutnya

if currentstate = 4 then currentstate = 0 'Kembali ke bentuk awal

end sub

'Rotasi ke bentuk sebelumnya

public sub derotate()

currentstate = currentstate - 1 'Rotasi sebelumnya

if currentstate = -1 then currentstate = 3

end sub

'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