Arsip: [Tutorial] Teknik Sprite Based dengan Delphi

 
user image
more 15 years ago

ZeAL

[Tutorial] Teknik Sprite Based dengan Delphi Jenis : Tutorial / Referensi Kode. Ditujukan Untuk : Programmer Delphi, Level Dasar dan Menengah. SourceCode : Tersedia, di http://www.geocities.com/jalangkung249/tutor (SpriteTutor.zip)
Gunakan WinRar atau WinAce untuk mengekstrak kompresi diatas.
halooo..., halooo..., haloooo.... jumpa lagi dengan ZeAL, masih di acara yang sama yaitu tutorial...!!! Kali ini topik yang akan dibahas adalah, cara melakukan teknik pada Sprite Based Game dengan menggunakan Delphi tanpa memunculkan flicker (kedip-kedip..) pada monitor anda.... Disini saya tidak membuat aplikasi contoh berupa game, karena saya males bikinnya... mungkin lain kali... Tapi jangan kecewa, sebab saya sudah membuat sebuah contoh aplikasi untuk diikuti... Dan kita akan membahasnya nanti... Dalam tutorial ini dibutuhkan software : - Borland Delphi 6 (untuk kode utama) - Software pengolah grafis (anything will do..). Saya kebetulan pake Macromedia Flash 5, Microsoft Paint dan Adobe Photoshop 6. Seperti pada tutorial-tutorial yang pernah saya buat, saya berusaha menggunakan bahasa yang mudah "dicerna" tanpa menghilangkan konteks penulisan yang baik. Selain itu saya juga berusaha memberikan contoh yang "mengena". Saya mohon maaf sebesar-besarnya jika ada tulisan saya yang kurang diterima, termasuk grammar yang salah. :) Untuk pesan, kesan dan sebagainya, silahkan kirim thread di forum www.gamedevid.org atau www.delphi-id.com atau kirim email ke jalangkung249@yahoo.com DAN Seperti pada tutorial sebelumnya, sekali lagi saya tekankan bahwa tutorial ini saya tujukan bagi para programmer Delphi level Dasar dan Menengah. Jadi bagi yang merasa sudah "Pro", jangan merasa "terhina" dengan tutorial ini. Saya menyadari bahwa tehnik yang akan saya gunakan bukanlah yang terbaik. Semoga Tutorial ini dapat menambah wawasan pembacanya. SO, apa konsep/tujuan dalam aplikasi ini..??? Disini saya akan berusaha menjelaskan salah satu teknik yang mudah dengan hasil yang memuaskan dalam Sprite Based Game. Nantinya akan ada animasi orang (StickMan) yang berjalan dari kiri kekanan, dimana disisi kiri dan kanan-nya akan ada Lampu Jalan (Street Lamp). Bila StreetLamp tersebut berada lebih jauh dari "kamera", maka StreetLamp tersebut akan "tertimpa" oleh animasi StickMan. Dan begitu juga sebaliknya, Jika StreetLamp berada lebih dekat dari "kamera", maka animasi StickMan akan "tertimpa" oleh StreetLamp. Siap untuk memulai tutorial ini..??? OK, here we go..!!! TAHAP I - SPRITE Disini akan dijelaskan Sprite apa saja yang akan digunakan.
+ tambahan + Sprite adalah file image (bmp, jpg, de.es.be.) yang dalam hal ini berisi 1 atau lebih rentetan gambar yang akan ditampilkan. Sebut saja sebuah "pose" didalam sprite adalah FRAME. Panjang dan tinggi tiap-tiap frame didalam sebuah sprite haruslah sama. Kalo' beda-beda, nantinya bisa repot ngitung frame-nya. Jadi kalo' digambarin kira2 kayak gini : +-------------------- SPRITE X -------------------+ a b c d e f +---------+---------+---------+---------+---------+ | | | | | | | FRAME | FRAME | FRAME | FRAME | FRAME | | 1 | 2 | 3 | 4 | 5 | | | | | | | +---------+---------+---------+---------+---------+ Anggap Sprite X memiliki 5 frame yang menciptakan sebuah animasi, maka : Jarak dari a ke b harus sama dengan jarak b ke c. jarak dari b ke c harus sama dengan jarak c ke d, dan seterusnya. Sehingga, sama dengan teknik dalam film/kamera, maka didalam aplikasi akan ditampilkan frame 1, frame 2, frame 3 dan seterusnya pada kecepatan yang konstan untuk menghasilkan animasi yang diinginkan. + tambahan +
Dalam tutorial kali ini, kita akan membutuhkan 5 Sprite : 1. StickMan Sprite Ini adalah gambar StickMan sedang berjalan. didalamnya terdapat 2 frame. Bagian yang berwarna hitam akan dibuat transparan. 2. StickMan's Mask Sprite Sprite ini sama persis dengan sprite diatas. Yang berbeda hanyalah warnanya saja. Disini hanya digunakan warna hitam dan putih. Warna putih akan dibuat transparan 3. StreetLamp Sprite Ini adalah gambar sebuah StreetLamp. Karena tidak bersifat animasi, maka hanya terdapat 1 frame saja. 4. StreetLamp's Mask Sprite Merupakan Mask dari StreetLamp sprite 5. Background Sprite Ini adalah gambar latar belakang. Karena tidak bersifat animasi, maka hanya terdapat 1 frame saja.
Tidak ada batasan dalam ukuran dan banyaknya warna yang digunakan. Namun patut diingat : - Pada Sprite Utama, warna hitam nantinya akan dianggap transparan. Gunakan warna gelap lainnya jika tidak ingin dibuat transparan. - Pada Mask Sprite, warna putih nantinya akan dianggap transparan. Gunakan warna terang lainnya jika tidak ingin dibuat transparan. - File yang digunakan HARUS bitmap (.bmp). Sebab kalo' pake JPEG atau yang lainnya akan error. (Saya gak tau alasan tekniknya kenapa).
Jika masih bingung harus bagaimana, gunakan saja file yang sudah saya buat sebelumnya sebagai referensi. File tersebut bisa didownload di http://www.geocities.com/jalangkung249/tutor (SpriteTutor.rar). TAHAP II - OBJECT Jalankan Borland Delphi 6 maka Form kosong secara default akan muncul. Namun bila tidak, Pilih dari MenuBar : File > New > Application. Masukkan Object-object dibawah ini beserta properties-nya (properties bisa diset pada Object Inspector atau teken tombol fungsi F11) sesuai dengan urutannya, yaitu (total 11 object) : 1. TForm1 Name = Form1 Left = 209 Top = 126 BorderIcons = [biSystemMenu, biMinimize] BorderStyle = bsSingle Caption = 'Sprite Tutorial - ZeAL - Kalibata, Jakarta, Indonesia - January 2004' ClientHeight = 520 ClientWidth = 674 Color = clBtnFace Font.Charset = DEFAULT_CHARSET Font.Color = clWindowText Font.Height = 11 Font.Name = 'MS Sans Serif' Font.Pitch = fpVariable Font.Style = OldCreateOrder = True Position = poScreenCenter OnCreate = FormCreate PixelsPerInch = 96 TextHeight = 13 2. TImage Name = BufferBox Left = 16 Top = 16 Width = 640 Height = 480 Visible = False 3. TImage Name = BackgroundImage // load file bitmap untuk background Left = 16 Top = 16 Width = 640 Height = 480 AutoSize = True Visible = False 4. TImage Name = SpriteImage // load file bitmap untuk sprite animasi StickMan Left = 16 Top = 504 Width = 60 Height = 74 AutoSize = True Visible = False 5. TPaintBox Name = ViewingBox Left = 16 Top = 16 Width = 640 Height = 480 6. TImage Name = MaskImage // load file bitmap mask dari sprite animasi StickMan Left = 88 Top = 504 Width = 60 Height = 74 AutoSize = True Visible = False 7. TLabel Name = ShowCurrentFrame Left = 336 Top = 504 Width = 3 Height = 13 8. TLabel Name = Label1 Left = 256 Top = 504 Width = 78 Height = 13 Caption = 'Frame Counter : ' 9. TImage Name = LampSprite // Load file bitmap untuk sprite LampStreet Left = 416 Top = 504 Width = 59 Height = 198 AutoSize = True Visible = False 10. TImage Name = LampMask // Load file bitmap untuk mask sprite LampStreet Left = 488 Top = 504 Width = 59 Height = 198 AutoSize = True Visible = False 11. TTimer Name = Timer1 Interval = 50 Left = 176 Top = 512 Simpan dengan menekan tombol kombinasi Shift + Ctrl + S atau pilih dari MenuBar : File > Save All. TAHAP III - CODING Tekan Tombol fungsi F12 untuk memunculkan Code Editor, lalu masukkan kode-kode dibawah ini. A. Deklarasi Variabel dan constanta yang akan digunakan harus dideklarasikan terlebih dahulu : Variabel Konstanta :
// set lebar Sprite yang akan digunakan // bisa aja dihitung pake cara : lebar image dibagi banyak frame didalam image tersebut // Jadi dari contoh dibawah bisa aja ditulis : Spriteimage.width / 2 SpriteWidth : Integer = 30; // counter yang menentukan sprite yang akan dimunculkan. // Semakin besar nilainya, maka semakin lama perubahan tiap frame. NumOfFrames : Integer = 10;
Variabel Private :
// area rectangle AreaRect: TRect; // frame pertama dari Sprite ImageRect: TRect; // frame kedua dari sprite's animation Image2Rect: TRect; // frame pertama dari mask image MaskRect: TRect; // frame kedua dari mask image Mask2Rect: TRect; // koordinat sprites akan diletakkan StartX : Integer; StartY : Integer; // status frame saat ini CurrentFrame : Integer; // fungsi untuk menghitung ukuran sprite yang akan digunakan. // jika ingin melakukan scaling (memperbesar/memperkecil), bisa dilakukan disini. function SpriteRect(X, Y: Integer):TRect;
B. Inisialisasi Setiap aplikasi dijalankan, maka variabel-variabel yang akan digunakan harus disiapkan terlebih dahulu :
procedure TForm1.FormCreate(Sender: TObject); begin // set koordinat awal sprite utama di 10,350 StartX := 10; StartY := 350; // Set frame awal dari animasi utama CurrentFrame := 1; // set ukuran tempat animasi akan "bekerja" AreaRect := Rect( 0, 0, BackgroundImage.Width, BackgroundImage.Height); // set ukuran tiap frame dari sprite utama dan mask image ImageRect := Rect( 0, 0, SpriteWidth, SpriteImage.Height); Image2Rect := Rect(SpriteWidth + 1, 0, SpriteWidth 2 + 1, SpriteImage.Height); MaskRect := Rect( 0, 0, SpriteWidth, SpriteImage.Height); Mask2Rect := Rect(SpriteWidth + 1, 0, SpriteWidth2 + 1, SpriteImage.Height); end;
C. ADDITIONAL FUNCTION Disini akan diberikan satu fungsi khusus yang berguna untuk menghitung besarnya "kotak" yang akan digunakan, dihitung berdasarkan besarnya Sprite asli. Dengan menentukan besarnya "kotak", maka kita dapat men-scale sprite yang akan digunakan (diperbesar/diperkecil).
function TForm1.SpriteRect(X, Y: Integer):TRect; begin // menghasilkan rectangle ukuran dari sprite yang akan digunakan Result := Rect(X, Y, X+SpriteWidth, Y+SpriteImage.Height); end;
D. MAIN CODE Pada kode utama digunakan object timer agar lebih konstan pada fase repaint.
procedure TForm1.Timer1Timer(Sender: TObject); begin // Siapkan background terlebih dahulu BufferBox.Canvas.CopyMode := cmSrcCopy; // copy bitmap asal ke canvas BufferBox.Canvas.CopyRect(AreaRect, BackgroundImage.Canvas, AreaRect ); // MAIN SPRITE SECTION // Gambar dan geser sprite if CurrentFrame <= (NumOfFrames / 2) then begin // Gambar mask image (Frame 1) terlebih dahulu BufferBox.Canvas.CopyMode := cmSrcAnd; BufferBox.Canvas.CopyRect(SpriteRect(StartX,StartY), MaskImage.Canvas, MaskRect ); // Akhirnya Gambar sprite utama (Frame 1) BufferBox.Canvas.CopyMode := cmSrcPaint; BufferBox.Canvas.CopyRect(SpriteRect(StartX,StartY), SpriteImage.Canvas, ImageRect ); end else if CurrentFrame > (NumOfFrames / 2) then begin // Gambar Mask Image (Frame 2) BufferBox.Canvas.CopyMode := cmSrcAnd; BufferBox.Canvas.CopyRect(SpriteRect(StartX,StartY), MaskImage.Canvas, Mask2Rect ); // Akhirnya, gambar sprite utama (Frame 2) BufferBox.Canvas.CopyMode := cmSrcPaint; BufferBox.Canvas.CopyRect(SpriteRect(StartX,StartY), SpriteImage.Canvas, Image2Rect ); end; // Sekarang geser letak sprite, sehingga putaran selanjutnya sprite kita akan bergeser 1 ke arah kanan StartX := StartX + 1; // Set Current frame untuk kembali ke 1 jika Batas Frame sudah tercapai // Jika tidak, maka tambah dengan 1 CurrentFrame := CurrentFrame + 1; if CurrentFrame > NumOfFrames then CurrentFrame := 1; // Tampilkan Isi variabel CurrentFrame ShowCurrentFrame.Caption := IntToStr(CurrentFrame); // ROAD LAMP SECTION // Cara kerjanya sama saja dengan diatas, hanya saja disini tidak dilakukan animasi. // Dan selain itu tidak digunakan fungsi sebelumnya. Ini ditujukan untuk menunjukkan betapa mudahnya metode ini. // 4 baris kode untuk hasil yang memuaskan, bro...!!!! I Like it...!!! :) // Ini dilakukan untuk memberi efek bahwa Lampu Jalan lebih dekat kearah kamera dibandingkan sprite utama. // Sehingga efek yang dihasilkan adalah gambar lampu jalan yang "menimpa" sprite utama. BufferBox.Canvas.CopyMode := cmSrcAnd; BufferBox.Canvas.CopyRect(Rect(200, 290, 200 + LampMask.Width, 290 + LampMask.Height), LampMask.Canvas, Rect( 0, 0, LampMask.Width, LampMask.Height) ); BufferBox.Canvas.CopyMode := cmSrcPaint; BufferBox.Canvas.CopyRect(Rect(200, 290, 200 + LampSprite.Width, 290 + LampSprite.Height), LampSprite.Canvas, Rect( 0, 0, LampSprite.Width ,LampSprite.Height) ); // READY-TO-SHOW SECTION // Sekarang setelah semua selesai, tinggal di copy ke ViewingBox untuk ditampilkan. ViewingBox.Canvas.CopyMode := cmSrcCopy; ViewingBox.Canvas.CopyRect(AreaRect, BufferBox.Canvas, AreaRect ); end;
Yup.. sudah selesai.... tinggal di-compile dan... saksikan..!!!! Saya harap setelah anda membaca tutorial ini, dapat "menggelitik" ilmu pemrograman anda untuk membuat game darinya... Jika tidak, paling tidak tutorial ini bisa menjadi bahan masukan bagi anda... Jangan lupa bahwa tutorial ini hanyalah satu dari sekian banyak teknik sprite based. Semoga tutorial ini bisa membantu kamu (terutama newbie) untuk "mempertajam indra pemrograman". Saya juga berharap tutorial ini bisa dimengerti dengan jelas (Saya sudah berusaha membuatnya sesimpel dan sejelas mungkin). Jika kurang jelas, silahkan lihat di dalam SourceCode. (didalamnya saya beri komentar agar lebih jelas. Lagipula lebih menyenangkan praktek dibandingkan teori). Untuk saran, pertanyaan atau komentar, bisa diungkapkan di-thread forum ini (www.gamedevid.org). Untuk sourcecode beserta file animasi-nya, bisa didapatkan disini : http://www.geocities.com/jalangkung249/tutor (SpriteTutor.rar) ZeAL Thanks goes 2 : - H0n3Y : 4 the inspiration - DGd : The one who taught me, "it can be done..!!!" - D4v1d : Datas, Movies & Games Resources.. :) - Diasty : my sister who has been such a pain in the ass while i'm writing this tutorial. O..yeah.. thanks for correcting 2 (TWO..!!) miss-spelled words. sarcasm, ladies and gentlemen* - gamedevid : mediator - delphi-id : mediator - and all of you who has been so nice to me... Kalibata, Jakarta, Indonesia - January 15th, 2004
user image
more 14 years ago

doodle_doo

siip...bgt...! :D
user image
more 14 years ago

Mr-Soft

:) hebat euy.......
user image
more 11 years ago

daryl_sukma_gumilar

Nice Tutorial ;-)
more ...
  • Pages:
  • 1
Share to

Random Topic

Local Business Directory, Search Engine Submission & SEO Tools FreeWebSubmission.com SonicRun.com