[Tutorial] Teknik Real Time Networked Game dengan Delphi
Jenis           : Tutorial / Referensi Kode.
Ditujukan Untuk : Programmer Delphi, Level Dasar & Menengah.
SourceCode      : Tersedia, di http://www.geocities.com/jalangkung249/tutor/rtnettut.zip
[quote]
 Gunakan WinRar atau WinAce atau Utiliti Kompresi untuk mengekstrak kompresi diatas.
[/quote]

Halooooooooo....Apa Khabar..??? Jumpa lagi bareng ZeAL. Berhubung kuliah saya lagi libur dan gak ada kerjaan, akhirnya saya putuskan untuk membuat sebuah tutorial... lagipula disini (gamedevid.org) kayaknya kekurangan tutorial... BANGET...!!!
Kali ini saya ingin memberikan tutorial teknik Real Time Networked Game dengan HANYA menggunakan object dari Delphi.
Tutorial ini hanya memberikan contoh aplikasi saja... yang artinya, saya tidak membuat contoh berupa game dikarenakan penyakit saya sedang kambuh... penyakit males mikir... :p
Selain penyakit tersebut, saya khawatir jika saya membuat game maka kodenya akan "membengkak" dan tujuan dari tutorial ini tidak akan sampai ke pembacanya... 
Dalam Tutorial ini, Saya hanya menggunakan aplikasi Borland Delphi 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 kirim email ke [email protected] atau [email protected]
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.
Sebelum masuk ke pembahasan kode, ada baiknya saya jelaskan terlebih dahulu konsep aplikasi yang akan dibuat dan beberapa teori-teori yang akan mendukung tercapainya tujuan tutorial ini...

[ KONSEP ]
Disini saya akan membuat aplikasi Server dan Client yang bekerja secara Real Time. Server akan menggerakan kotak berwarna BIRU dan Client akan menggerakan kotak berwarna MERAH. Jika Server menggerakkan kotak-nya, maka dilayar Client kotak BIRU akan bergerak juga. Dan begitu pula sebaliknya. 
Aplikasi ini akan menggunakan protokol TCP/IP. Jika anda hanya punya 1 komputer / tidak memiliki jaringan LAN atau internet, jangan takut...!!! Aplikasi ini sebenarnya juga dibuat pada 1 komputer dan sudah di test baik di jaringan rumah saya maupun pada 1 komputer...  

[ TEORI : TCP/IP, IP Address & Jaringan Komputer ]
Secara umum, sebuah jaringan komputer adalah kumpulan komputer yang saling terhubung antara satu dengan yang lain dengan bantuan protokol sebagai alat komunikasinya. Setiap komputer yang terhubung pada suatu jaringan yang berbasiskan protokol TCP/IP (misalnya :  Internet), harus memiliki suatu pengenal yang unik pada jaringan tersebut, yang dikenal sebagai IP Address. Penentuan IP Address ini merupakan hal yang penting dalam perancangan jaringan TCP/IP. IP Address akan ditempatkan pada header pada setiap paket data yang dikirimkan oleh suatu komputer ke komputer lain. Dan akan digunakan untuk menentukan rute yang harus dilalui oleh paket data tersebut. 
Dalam menentukan IP Address, kita melakukan pemberian identitas yang universal bagi setiap network interface. Dalam penerapan sehari-hari, dapat saja suatu komputer memiliki lebih dari satu network interface. Misalnya berupa sebuah ethernet card dan sebuah interface serial. Untuk hal tersebut, maka IP Address harus diberikan kepada masing-masing network interface. 
Selain itu, kita juga akan mengenal istilah Port. Port adalah sebuah "saluran" penghubung antara komputer 1 dengan yang lainnya. (Dalam aplikasi ini, kita akan menggunakan Port 1880). Dalam memilih port, kita harus berhati-hati agar tidak "berbenturan" dengan aplikasi lain yang menggunakan port yang sama.
Untuk lebih jelasnya, silahkan membaca informasi mengenai protokol TCP/IP, LAN, Port dan sebagainya di buku-buku atau media lainnya.

[ TEORI : ONE STEP AT A TIME ]
Langkah-langkah apa saja yang harus ditempuh agar Server dan Client bisa saling berhubungan dan berbagi pakai informasi dan data..??? Dibawah ini saya coba jelaskan dengan bagan, bagaimana konsep urutan yang umum dalam game :
Server                              Client
1. Listen Server                    1. Connect ke server
2. Terima Koneksi                   2. -
3. Kirim Tanda "OK"                 3. Terima Tanda "OK"
4. -                                4. Jika Siap, kirim tanda "Ready"
5. Terima Tanda "Ready"             5. -
6. Jika Siap, Kirim tanda "Play"    6. Terima Tanda "Play"
7. Mulai Bermain                    7. Mulai Bermain

Konsep diatas biasanya digunakan untuk game yang membutuhkan sinkronisasi. (Biasanya ada pada game jenis RTS. Itu sebabnya mengapa ketika bermain RTS, seluruh pemain harus mengirim tanda "Ready" terlebih dahulu sebelum sesi game dimulai).
Pada tutorial kali ini, konsep diatas tidak akan digunakan. Ini dikarenakan jenis aplikasi yang akan dibuat tidak memerlukan sinkronisasi.

[ TEORI : DATA & INFORMASI ]
Lalu apa yang terjadi ketika sesi game sudah dimulai..??? 
Yang pasti mereka akan bertukar DATA & INFORMASI. Ini adalah bagian terpenting dalam pembuatan aplikasi Server & Client. Kita harus bisa menentukan dan memilah Data apa yang bisa dikirimkan tanpa mengurangi hasil akhir yang diinginkan.
Selain itu, kita harus menentukan SIAPA yang akan memproses data tersebut. Ini akan mempengaruhi arsitektur aplikasi yang akan dibuat. Apakah Server dan Client bisa diprogram dalam 1 form, ataukah dibuat secara terpisah, ataukah harus menggunakan dedicated server untuk mengolah datanya. 
Pada aplikasi tutorial ini, saya membuat 1 Server dan 1 Client. Server HANYA dapat menerima koneksi dari 1 Client saja. Seluruh Proses akan dilakukan di Server. Dibawah ini akan dijelaskan Data apa saja yang akan dikirimkan pada Server dan Client.

 Server 
Data yang dikirim oleh server adalah :   xxxxyyyyiiiijjjj
xxxx : adalah posisi X kotak biru
yyyy : adalah posisi y kotak biru
iiii : adalah posisi x kotak merah
jjjj : adalah posisi y kotak merah

 Client 
Data yang dikirim oleh Client adalah : iiiijjjj
iiii : adalah posisi x kotak merah
jjjj : adalah posisi y kotak merah

Dari keterangan diatas, dapat diambil kesimpulan bahwa Client SAMASEKALI tidak melakukan proses apapun untuk langsung mengupdate posisi kotak merah. Client mengirim terlebih dahulu ke Server, diproses, dikirimkan kembali ke Client, dan barulah Client mengupdate posisi kotak merah. 
Kelebihan dari teknik ini adalah mengurangi resiko kesalahan perhitungan koordinat. (Posisi antara kotak pada Server dengan kotak pada Client berbeda). Namun kekurangan dari teknik ini adalah semakin besarnya  kemungkinan Client "terlambat" menerima informasi yang sudah diolah oleh server. Ini disebabkan "lamanya" server memproses data. Jika data yang diproses sedikit, mungkin tidak akan terasa. Namun bila data yang diproses sangat besar, maka kemungkinan terjadinya "LAG" akan sangat terasa. Apalagi dengan ditambah kemungkinan terjadinya Hilang (Lost), Terhambat (Collision) atau Rusaknya (Corrupt) paket yang diterima.
Menurut pendapat saya, Cara yang paling efektif adalah dengan menggunakan Dedicated Server atau Server yang berdiri sendiri dan hanya bertugas memproses data dari client tanpa menerima masukan dari server itu sendiri. 
Namun itu semua tergantung pada kebutuhan aplikasi yang akan anda buat.


HEY, Sudah pada ngantuk..???? Mau langsung ke kodenya aja...???? Boleh, Siapa Takut..!!!
[ CLIENT ]

A. OBJECT
Masukan Object-Object dibawah ini dan set juga propertiesnya...
Total terdapat 18 Object, yaitu :
1.
  Form1: TForm1
  Left = 209
  Top = 129
  BorderIcons = [biSystemMenu, biMinimize]
  BorderStyle = bsSingle
  Caption = 'Client - Real Time Network Sample - ZeAL - January 18th, 2004'
  ClientHeight = 377
  ClientWidth = 631
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'MS Sans Serif'
  Font.Style = []
  OldCreateOrder = False
  Position = poDesktopCenter
  PixelsPerInch = 96
  TextHeight = 13
 
2.
  Panel1: TPanel
  Left = 8
  Top = 8
  Width = 433
  Height = 361
  TabOrder = 0
3.
  Red: TShape
  Left = 32
  Top = 160
  Width = 25
  Height = 25
  Brush.Color = clRed
 
4.
  Blue: TShape
  Left = 368
  Top = 160
  Width = 25
  Height = 25
  Brush.Color = clBlue
 
5.
  Panel2: TPanel
  Left = 448
  Top = 8
  Width = 177
  Height = 193
  TabOrder = 1
  object Button1: TButton
  Left = 8
  Top = 64
  Width = 161
  Height = 33
  Caption = 'Connect'
  TabOrder = 0
 
6.
  Button2: TButton
  Left = 8
  Top = 96
  Width = 161
  Height = 33
  Caption = 'Disconnect'
  Enabled = False
  TabOrder = 1
7.
  StaticText1: TStaticText
  Left = 8
  Top = 144
  Width = 161
  Height = 17
  Alignment = taCenter
  AutoSize = False
  BorderStyle = sbsSunken
  Caption = 'Status'
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'MS Sans Serif'
  Font.Style = [fsBold]
  ParentFont = False
  TabOrder = 2
 
8.
  Stat: TStaticText
  Left = 8
  Top = 160
  Width = 161
  Height = 17
  Alignment = taCenter
  AutoSize = False
  BorderStyle = sbsSunken
  Caption = 'Disconnected'
  TabOrder = 3
 
9.
  IPtext: TEdit
  Left = 8
  Top = 32
  Width = 161
  Height = 21
  TabOrder = 4
  Text = '127.0.0.1'
  
10.
  StaticText2: TStaticText
  Left = 8
  Top = 16
  Width = 161
  Height = 17
  Alignment = taCenter
  AutoSize = False
  BorderStyle = sbsSunken
  Caption = 'Server'#39's IP'
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'MS Sans Serif'
  Font.Style = [fsBold]
  ParentFont = False
  TabOrder = 5
 
11.
  StaticText3: TStaticText
  Left = 448
  Top = 296
  Width = 177
  Height = 17
  Alignment = taCenter
  AutoSize = False
  BorderStyle = sbsSunken
  Caption = 'Data Recieved'
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'MS Sans Serif'
  Font.Style = [fsBold]
  ParentFont = False
  TabOrder = 2
  
12.
  DataRec: TStaticText
  Left = 448
  Top = 312
  Width = 177
  Height = 17
  Alignment = taCenter
  AutoSize = False
  BorderStyle = sbsSunken
  Caption = '0000000000000000'
  TabOrder = 3
  
13.
  StaticText4: TStaticText
  Left = 448
  Top = 336
  Width = 177
  Height = 17
  Alignment = taCenter
  AutoSize = False
  BorderStyle = sbsSunken
  Caption = 'Data Sent'
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'MS Sans Serif'
  Font.Style = [fsBold]
  ParentFont = False
  TabOrder = 4
 
14.
  DataSent: TStaticText
  Left = 448
  Top = 352
  Width = 177
  Height = 17
  Alignment = taCenter
  AutoSize = False
  BorderStyle = sbsSunken
  Caption = '00000000'
  TabOrder = 5
 
15.
  StaticText5: TStaticText
  Left = 448
  Top = 240
  Width = 177
  Height = 17
  Alignment = taCenter
  AutoSize = False
  BorderStyle = sbsSunken
  Caption = 'by wicak / ZeAL'
  TabOrder = 6
 
16.
  StaticText6: TStaticText
  Left = 448
  Top = 256
  Width = 177
  Height = 17
  Alignment = taCenter
  AutoSize = False
  BorderStyle = sbsSunken
  Caption = '[email protected]'
  TabOrder = 7
17.
  Timer1: TTimer
  Enabled = False
  Interval = 200
  Left = 480
  Top = 208
 
18.
  ClientSocket1: TClientSocket
  Active = False
  ClientType = ctNonBlocking
  Port = 1880
  Left = 448
  Top = 208


B. CODE

  -=[ Deklarasi ]=-

variabel yang akan digunakan harus dideklarasikan terlebih dahulu.
[quote]
var
  Biru, OldBiru, Kursor : TPoint;
  Merah, OldMerah : TPoint;
  Masuk, Keluar : string;
[/quote]

  -=[ Inisialisasi ]=-

Siapkan isi variabel.
[quote]
procedure TForm1.FormCreate(Sender: TObject);
begin
  OldMerah.x := Red.Left ;
  OldMerah.Y := Red.Top ;
  OldBiru.x := Blue.Left ;
  OldBiru.Y := Blue.Top ;
  Biru.X := OldBiru.X ;
  Biru.Y := OldBiru.Y ;
  Merah.X := OldMerah.X ;
  Merah.Y := OldMerah.Y ;
end;
[/quote]

  -=[ Data Input ]=-

Posisi kursor akan selalu diperiksa untuk mengetahui posisi tempat kotak akan diletakkan.
[quote]
procedure TForm1.Panel1MouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Integer);
begin
 Kursor.X := X;
 Kursor.Y := Y;
end;
[/quote]

  -=[ Button ]=-

2 Tombol yang akan digunakan yaitu untuk "menghubungi" server dan "memutuskan" server.
[quote]
procedure TForm1.Button1Click(Sender: TObject);
begin
 clientsocket1.host := IPText.Text ;
 clientsocket1.Active := true;
 button1.Enabled := false;
 button2.Enabled := true;
 Stat.Caption := 'Waiting Server...';
end;

procedure TForm1.Button2Click(Sender: TObject);
begin
 clientsocket1.Active := false;
 button1.Enabled := true;
 button2.Enabled := false;
 Stat.Caption := 'Disconnected';
end;
[/quote]

  -=[ Connection Event ]=-

Beberapa fungsi yang akan bertugas sebagai error handler dan mengatur timer.
Dimana timer hanya berjalan jika Client sudah terhubung dan
timer secara otomatis akan berhenti jika koneksi terputus oleh segala sebab.
[quote]
procedure TForm1.ClientSocket1Error(Sender: TObject;
  Socket: TCustomWinSocket; ErrorEvent: TErrorEvent;
  var ErrorCode: Integer);
begin
 button1.Enabled := true;
 button2.Enabled := false;
 Stat.Caption := 'Disconnected';
 timer1.Enabled := false;
 showmessage('error on socket');
end;

procedure TForm1.ClientSocket1Connect(Sender: TObject;
  Socket: TCustomWinSocket);
begin
  Stat.Caption := 'Connecting...';
  timer1.Enabled := true;
end;

procedure TForm1.ClientSocket1Disconnect(Sender: TObject;
  Socket: TCustomWinSocket);
begin
 button1.Enabled := true;
 button2.Enabled := false;
 Stat.Caption := 'Disconnected';
 timer1.Enabled := false;
end;
[/quote]

  
  -=[ Data Recieve ]=-

Fungsi yang bertugas memproses informasi yang diperoleh dari server.
Informasi akan "dipecah" sesuai dengan kebutuhan.
(Lihat [ TEORI : DATA & INFORMASI ] di bagian atas tutorial ini).
Dan jangan lupa untuk mengupdate posisi kotak biru dan merah.
Variabel OldMerah dan OldBiru digunakan apabila Informasi yang diterima salah,
maka Informasi yang digunakan adalah Informasi yang digunakan sebelumnya. 
[quote]
procedure TForm1.ClientSocket1Read(Sender: TObject;
  Socket: TCustomWinSocket);
var Kode : integer;
begin
 Masuk := Socket.ReceiveText ;
 DataRec.Caption := Masuk;
 OldBiru.X := Biru.X ;
 OldBiru.Y := Biru.Y ;
 OldMerah.X := Merah.X ;
 OldMerah.Y := Merah.Y ;
 if length(masuk) >= 8 then
 begin
  val(copy(Masuk,1,4),Biru.X,Kode);
  Val(copy(Masuk,5,4),Biru.Y ,Kode);
  val(copy(Masuk,9,4),Merah.X ,Kode);
  Val(copy(Masuk,13,4),Merah.Y,Kode);
 end
 else
 begin
  Biru.X := OldBiru.X ;
  Biru.Y := OldBiru.Y ;
  Merah.X := OldMerah.X ;
  Merah.Y := OldMerah.Y ;
 end;
end;
[/quote]

  -=[ Data Sent ]=-

Fungsi untuk mengirim Data ke server.
Update terbaru dilakukan tiap 200 ms atau 5 kali update perdetik.
Sebenarnya semakin sering di-update, maka akan semakin baik,
namun terdapat beberapa halangan. Yaitu, jika pengiriman dilakukan dengan
tenggang waktu yang terlalu dekat, maka dua buah informasi yang
berbeda akan dianggap satu buah gabungan informasi.
Karena panjang data per koordinat adalah 4 digit, maka bagi
data yang memiliki kurang dari 4 digit akan diberi awalan 0 (nol).
[quote]
procedure TForm1.Timer1Timer(Sender: TObject);
var temp : string;
begin
 red.Left := Merah.X ;
 red.Top := Merah.Y ;
 blue.Left := biru.X ;
 blue.Top := biru.Y ;
 Keluar := '';
 str(Kursor.X,temp  );
 if length(temp) = 1 then temp := '000' + temp else
 if length(temp) = 2 then temp := '00'  + temp else
 if length(temp) = 3 then temp := '0'   + temp;
 Keluar := temp;
 str(Kursor.Y,temp  );
 if length(temp) = 1 then temp := '000' + temp else
 if length(temp) = 2 then temp := '00'  + temp else
 if length(temp) = 3 then temp := '0'   + temp;
 Keluar := Keluar + temp;

 DataSent.Caption := Keluar;
 
 clientsocket1.Socket.SendText(keluar);
 Biru.X := oldbiru.X ;
 Biru.Y := OldBiru.Y ;
 Merah.X := OldMerah.x ;
 Merah.Y := OldMerah.Y ;
end;
[/quote]

Yup..., untuk Client sudah selesai...
Gimana..??? Udah mulai puyeng..????
Jangan puyeng sekarang.. masih ada lanjutannya...
Sekarang kita lanjutkan untuk Server.


[ SERVER ]

A. OBJECT
Object yang digunakan tidak terlalu berbeda dengan client.
Masukan Object-Object dibawah ini dan set juga propertiesnya...
Total terdapat 17 Object, yaitu :

1.
 Form1: TForm1
 Left = 209
 Top = 129
 BorderIcons = [biSystemMenu, biMinimize]
 BorderStyle = bsSingle
 Caption = 'Server - Real Time Network Sample - ZeAL - January 18th, 2004'
 ClientHeight = 377
 ClientWidth = 631
 Color = clBtnFace
 Font.Charset = DEFAULT_CHARSET
 Font.Color = clWindowText
 Font.Height = -11
 Font.Name = 'MS Sans Serif'
 Font.Style = []
 OldCreateOrder = False
 Position = poDesktopCenter
 PixelsPerInch = 96
 TextHeight = 13
2.
 Panel1: TPanel
 Left = 8
 Top = 8
 Width = 433
 Height = 361
 TabOrder = 0
3.
 Red: TShape
 Left = 32
 Top = 160
 Width = 25
 Height = 25
 Brush.Color = clRed
4.
 Blue: TShape
 Left = 368
 Top = 160
 Width = 25
 Height = 25
 Brush.Color = clBlue
5.
 Panel2: TPanel
 Left = 448
 Top = 8
 Width = 177
 Height = 129
 TabOrder = 1
6.
 Button1: TButton
 Left = 8
 Top = 8
 Width = 161
 Height = 33
 Caption = 'Listen'
 TabOrder = 0
7.
 Button2: TButton
 Left = 8
 Top = 40
 Width = 161
 Height = 33
 Caption = 'Disconnect'
 Enabled = False
 TabOrder = 1
8.
 StaticText1: TStaticText
 Left = 8
 Top = 88
 Width = 161
 Height = 17
 Alignment = taCenter
 AutoSize = False
 BorderStyle = sbsSunken
 Caption = 'Status'
 Font.Charset = DEFAULT_CHARSET
 Font.Color = clWindowText
 Font.Height = -11
 Font.Name = 'MS Sans Serif'
 Font.Style = [fsBold]
 ParentFont = False
 TabOrder = 2
9.
 Stat: TStaticText
 Left = 8
 Top = 104
 Width = 161
 Height = 17
 Alignment = taCenter
 AutoSize = False
 BorderStyle = sbsSunken
 Caption = 'Disconnected'
 TabOrder = 3
10.
 StaticText3: TStaticText
 Left = 448
 Top = 296
 Width = 177
 Height = 17
 Alignment = taCenter
 AutoSize = False
 BorderStyle = sbsSunken
 Caption = 'Data Recieved'
 Font.Charset = DEFAULT_CHARSET
 Font.Color = clWindowText
 Font.Height = -11
 Font.Name = 'MS Sans Serif'
 Font.Style = [fsBold]
 ParentFont = False
 TabOrder = 2
11.
 DataRec: TStaticText
 Left = 448
 Top = 312
 Width = 177
 Height = 17
 Alignment = taCenter
 AutoSize = False
 BorderStyle = sbsSunken
 Caption = '0000000000000000'
 TabOrder = 3
12.
 StaticText4: TStaticText
 Left = 448
 Top = 336
 Width = 177
 Height = 17
 Alignment = taCenter
 AutoSize = False
 BorderStyle = sbsSunken
 Caption = 'Data Sent'
 Font.Charset = DEFAULT_CHARSET
 Font.Color = clWindowText
 Font.Height = -11
 Font.Name = 'MS Sans Serif'
 Font.Style = [fsBold]
 ParentFont = False
 TabOrder = 4
13.
 StaticText5: TStaticText
 Left = 448
 Top = 240
 Width = 177
 Height = 17
 Alignment = taCenter
 AutoSize = False
 BorderStyle = sbsSunken
 Caption = 'by wicak / ZeAL'
 TabOrder = 5
14.
 StaticText6: TStaticText
 Left = 448
 Top = 256
 Width = 177
 Height = 17
 Alignment = taCenter
 AutoSize = False
 BorderStyle = sbsSunken
 Caption = '[email protected]'
 TabOrder = 6
15.
 DataSent: TStaticText
 Left = 448
 Top = 352
 Width = 177
 Height = 17
 Alignment = taCenter
 AutoSize = False
 BorderStyle = sbsSunken
 Caption = '00000000'
 TabOrder = 7
16.
 Timer1: TTimer
 Enabled = False
 Interval = 200
 Left = 488
 Top = 152
17.
 ServerSocket1: TServerSocket
 Active = False
 Port = 1880
 ServerType = stNonBlocking
 Left = 448
 Top = 152

B. CODE

  -=[ Deklarasi ]=-

variabel yang akan digunakan harus dideklarasikan terlebih dahulu.
[quote]
var
  Merah, OldMerah, Kursor : TPoint;
  Masuk, Keluar : string;
[/quote]

  -=[ Inisialisasi ]=-

Siapkan isi variabel.
[quote]
procedure TForm1.FormCreate(Sender: TObject);
begin
 Merah.X := red.Left ;
 Merah.Y := red.Top ;
 OldMerah.X := red.Left ;
 OldMerah.Y := red.top ;
 Kursor.X := Blue.Left ;
 Kursor.Y := Blue.Top ;
end;
[/quote]

  -=[ Data Input ]=-

Posisi kursor akan selalu diperiksa untuk mengetahui posisi tempat kotak akan diletakkan.
[quote]
procedure TForm1.Panel1MouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Integer);
begin
 Kursor.X := X;
 Kursor.Y := Y;
end;
[/quote]

  -=[ Button ]=-

2 Tombol yang akan digunakan yaitu untuk "menyalakan" dan "mematikan" server.
[quote]
procedure TForm1.Button1Click(Sender: TObject);
begin
 serversocket1.Active := true;
 button1.Enabled := false;
 button2.Enabled := true;
 Stat.Caption := 'Waiting Client...';
end;

procedure TForm1.Button2Click(Sender: TObject);
begin
 serversocket1.Active := false;
 button1.Enabled := true;
 button2.Enabled := false;
 timer1.Enabled := false;
 Stat.Caption := 'Disconnected';
end;
[/quote]

  -=[ Connection Event ]=-

Beberapa fungsi yang akan bertugas sebagai error handler dan mengatur timer.
Dimana timer hanya berjalan jika Client sudah terhubung dan
timer secara otomatis akan berhenti jika koneksi terputus oleh segala sebab.
[quote]
procedure TForm1.ServerSocket1Accept(Sender: TObject;
  Socket: TCustomWinSocket);
begin
 Stat.Caption := 'Accepting...';
end;
procedure TForm1.ServerSocket1ClientConnect(Sender: TObject;
  Socket: TCustomWinSocket);
begin
 Stat.Caption := 'Connecting...';
 timer1.Enabled := true;
end;
procedure TForm1.ServerSocket1ClientDisconnect(Sender: TObject;
  Socket: TCustomWinSocket);
begin
 button1.Enabled := true;
 button2.Enabled := false;
 Stat.Caption := 'Disconnected';
 timer1.Enabled := false;
end;
[/quote]

  
  -=[ Data Recieve ]=-

Fungsi yang bertugas memproses informasi yang diperoleh dari server.
Informasi akan "dipecah" sesuai dengan kebutuhan.
(Lihat [ TEORI : DATA & INFORMASI ] di bagian atas tutorial ini).
Dan jangan lupa untuk mengupdate posisi kotak biru dan merah.
Variabel OldMerah digunakan apabila Informasi yang diterima salah,
maka Informasi yang digunakan adalah Informasi yang digunakan sebelumnya. 
[quote]
procedure TForm1.ServerSocket1ClientRead(Sender: TObject;
  Socket: TCustomWinSocket);
var Kode : integer;
begin
 Masuk := Socket.ReceiveText ;
 DataRec.Caption := Masuk;
 OldMerah.X := Merah.X ;
 OldMerah.Y := Merah.Y ;
 if length(masuk) >= 8 then
 begin
  val(copy(Masuk,1,4),Merah.X,Kode);
  val(copy(Masuk,5,4),Merah.Y,Kode);
 end
 else
 begin
  Merah.X := OldMerah.X ;
  Merah.Y := OldMerah.Y ;
 end;
end;
[/quote]

  -=[ Data Sent ]=-

Fungsi untuk mengirim Data ke Client.
Update terbaru dilakukan tiap 200 ms atau 5 kali update perdetik.
Sebenarnya semakin sering di-update, maka akan semakin baik,
namun terdapat beberapa halangan. Yaitu, jika pengiriman dilakukan dengan
tenggang waktu yang terlalu dekat, maka dua buah informasi yang
berbeda akan dianggap satu buah gabungan informasi.
Karena panjang data per koordinat adalah 4 digit, maka bagi
data yang memiliki kurang dari 4 digit akan diberi awalan 0 (nol).
[quote]
procedure TForm1.Timer1Timer(Sender: TObject);
var temp : string;
begin
 Blue.Left := Kursor.X;
 Blue.Top := Kursor.Y;
 Red.Left := Merah.X;
 Red.Top := Merah.Y;

 Keluar := '';
 str(Blue.Left ,temp);
 if length(temp) = 1 then temp := '000' + temp else
 if length(temp) = 2 then temp := '00'  + temp else
 if length(temp) = 3 then temp := '0'   + temp;
 Keluar := temp;
 str(Blue.Top,temp  );
 if length(temp) = 1 then temp := '000' + temp else
 if length(temp) = 2 then temp := '00'  + temp else
 if length(temp) = 3 then temp := '0'   + temp;
 Keluar := Keluar + temp;
 str(Red.Left ,temp);
 if length(temp) = 1 then temp := '000' + temp else
 if length(temp) = 2 then temp := '00'  + temp else
 if length(temp) = 3 then temp := '0'   + temp;
 Keluar := Keluar + temp;
 str(Red.Top,temp  );
 if length(temp) = 1 then temp := '000' + temp else
 if length(temp) = 2 then temp := '00'  + temp else
 if length(temp) = 3 then temp := '0'   + temp;
 Keluar := Keluar + temp;
 DataSent.Caption := Keluar;
 if serversocket1.Socket.ActiveConnections <> 0 then serversocket1.Socket.Connections[0].SendText(keluar);
 Merah.X := OldMerah.X ;
 Merah.Y := OldMerah.Y ;
end;
[/quote]

Yup.. sudah selesai.... tinggal di-compile dan... mainkan..!!!!
Akh... akhirnya selesai juga... ternyata panjang juga tutorialnya... saya butuh 2 hari untuk menyelesaikannya karena penyakit saya yang lain juga ikutan muncul... penyakit ngantuk... Entah kenapa sering tiba-tiba ngantuk...
O..I..A.. Mungkin di lain kesempatan saya juga buat tutorial Teknik Turn Based Network Game... 
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 Real Time Network Game. 
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. Untuk saran, pertanyaan atau komentar, bisa diungkapkan di-thread forum ini (www.gamedevid.org).
Untuk sourcecode, bisa didapatkan disini :
http://www.geocities.com/jalangkung249/tutor/rtnettut.zip

 ZeAL Thanks goes 2 :
 - H0n3Y     : 4 the inspiration
 - gamedevid : mediator
 - and all of you who has been so nice to me...

Kalibata, Jakarta, Indonesia - January 17th & 29th, 2004