PERMAINAN CATUR ONLINE
DENGAN MENGGUNAKAN
MACROMEDIA FLASH MX 2004
SKRIPSI
Diajukan untuk Memenuhi Salah Satu Syarat
Memperoleh Gelar Sarjana Teknik
Jurusan Teknik Informatika
Disusun Oleh :
Albertus Andre
015314002
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS SANATA DHARMA
YOGYAKARTA
AN ONLINE CHESS
USING MACROMEDIA FLASH MX 2004
FINAL PROJECT
Presented as Partial Fulfillment of the Requirements
to Obtain the Sarjana Teknik Degree in Informatics Engineering
By :
Albertus Andre
015314002
INFORMATICS ENGINEERING STUDY PROGRAMME
FACULTY OF ENGINEERING
SANATA DHARMA UNIVERSITY
TUGAS AKHIR
PERMAINAN CATUR ONLINE
DENGAN MENGGUNAKAN MACROMEDIA FLASH MX 2004
Disusun oleh :
Albertus Andre
015314002
Telah disetujui oleh :
Pembimbing I
Agnes Maria Polina, S.Kom., M.Sc. Tanggal……….
Pembimbing II
TUGAS AKHIR
PERMAINAN CATUR ONLINE DENGAN MENGGUNAKAN
MACROMEDIA FLASH MX 2004
Dipersiapkan dan ditulis oleh
Albertus Andre
NIM : 015314002
Telah dipertahankan di depan Panitia Penguji pada tanggal 21 Juni 2007
dan dinyatakan memenuhi syarat
Susunan Panitia Penguji
Nama Lengkap Tanda Tangan
Ketua Agnes Maria Polina, S.Kom., M.Sc. ………….
Sekretaris Alb. Agung Hadhiatma, S.T., M.T. ………...
Anggota St. Yudianto Asmoro, S.T. ………….
Anggota St. Wisnu Wijaya, S.T. …………..
Yogyakarta, Juni 2007
Fakultas Teknik
Universitas Sanata Dharma
Dekan,
For with GOD
Nothing shall be impossible.
(Luke 1 : 37)
Everything that humans can imagine is
a possibility in reality.
Physicist, Willy Karen
Don’t worry,
Be Happy
This undergraduate thesis is dedicated to
My beloved parents,
My brother,
My sister,
My beloved mate,
PERNYATAAN KEASLIAN KARYA
Saya menyatakan dengan sesungguhnya bahwa skripsi yang saya tulis ini tidak memuat karya atau bagian karya orang lain, kecuali yang telah disebutkan dalam kutipan dan daftar pustaka, sebagaimana layaknya sebuah karya ilmiah.
Yogyakarta, Juni 2007 Penulis,
ABSTRAKSI
PERMAINAN CATUR ONLINE
DENGAN MENGGUNAKAN MACROMEDIA FLASH MX 2004
Albertus Andre
015314002
Game pada Personal Computer (PC) merupakan salah satu unsur penting dalam perkembangan PC. Walaupun pada saat sekarang ini sudah banyak game
dengan berbagai macam fitur yang sangat canggih, tetapi game dengan fitur yang lebih sederhana seperti solitaire atau minesweeper tetap memiliki penggemarnya, karena ada kalanya seseorang ingin memainkan game yang sederhana. Maka dari itu, penulis terinspirasi untuk membuat game dengan fitur sederhana namun ‘menjual’ berkat teknologi yang menyertainya, yaitu permainan catur online
dengan menggunakan Macromedia FlashMX 2004.
Dalam pembuatan game ini, penulis memilih untuk menggunakan
Macromedia Flash MX 2004 mengingat kemampuan flash di bidang animasi,
serta kemampuan format .swf yang dimilikinya yang dapat mengompres file
gambar dan suara, termasuk format-format vector menjadi file dengan ukuran yang sangat kecil. Dalam pembuatan game ini, Macromedia Flash MX 2004
didukung oleh ElectroServer 3 yang merupakan sebuah socket server yang dirancang khusus oleh Electrotank untuk aplikasi multiplayer game dan chat
sehingga nantinya akan menghasilkan sebuah aplikasi yang mampu mengirimkan dan menerima data dalam jaringan dengan menggunakan bahasa pemrograman dari flash itu sendiri, yaitu ActionScript 2.0.
ABSTRACT
AN ONLINE CHESS USING MACROMEDIA FLASH MX 2004
Albertus Andre
015314002
Personal Computer (PC) game is one of important aspects in PC development. Though there are a lot of games using latest features recently, yet games with simpler features like solitaire or minesweeper still popular, since sometimes people love to play just a simple game. Considering that, the writer was inspired to make a game having simple features conducting with latest technology inside, which is an online chess using Macromedia FlashMX 2004.
Macromedia FlashMX 2004 is chosen because of its ability in animation and its .swf format ability to compress picture and sound files, including the vector formats, into tiny files. In this game, Macromedia Flash MX 2004 is supported by ElectroServer 3, a socket server specially constructed by Electrotank
for multiplayer game and chat application. The cooperation of Macromedia Flash MX 2004 and ElectroServer 3 will later on come to an application which is capable to send and accept data in a network using programming language of flash, which is ActionScript 2.0.
PRAKATA
Puji syukur penulis panjatkan kepada Tuhan Yesus Kristus karena atas berkat dan pimpinan–Nya penulis dapat menyelesaikan skripsi berjudul Permainan Catur Online Dengan Menggunakan Macromedia Flash MX 2004
sebagai salah satu syarat untuk memperoleh gelar Sarjana Teknik (S.T.) pada Program Studi Teknik Informatika, Fakultas Teknik, Universitas Sanata Dharma.
Dalam penyusunan ini, penulis telah banyak memperoleh bantuan dari berbagai pihak, berupa materi maupun bimbingan, serta dorongan semangat dan doa.
Pada kesempatan ini penulis mengucapkan terima kasih kepada :
1. Agnes Maria Polina, S.Kom., M.Sc., selaku dosen pembimbing tugas akhir yang telah meluangkan waktu untuk memberi bimbingan serta nasihat kepada penulis.
2. St. Yudianto Asmoro, S.T., selaku dosen pembimbing dan dosen penguji. 3. Alb. Agung Hadhiatma, S.T., M.T., selaku dosen penguji dan dosen
pembimbing akademis.
4. St. Wisnu Wijaya, S.T., selaku dosen penguji.
5. Ir. Greg. Heliarko, S.J., S.S., B.S.T., M.A., M.Sc., selaku Dekan Fakultas Teknik.
7. Beben yang selalu memperhatikan dan memberi dukungan, walaupun selalu kesulitan dalam menunjukkannya.
8. Cierra yang juga selalu memperhatikan by doing simple things.
9. My beloved Alice, sumber inspirasi yang memberikan perhatian yang sangat besar yang sangat mendukung penulis baik dalam kegiatan perkuliahan, penyusunan skripsi maupun dalam kehidupan sehari–hari. 10.Qme a-ay, om Deni, om Dede, I-ie Yuyin, om Kris, om Ness, Oma, Kung–
kung dan seluruh keluarga besar yang tidak dapat disebutkan satu persatu. 11.My little cousins Sammy, Dee dee, Ardi, Arli, Io, O’neil, Arcel, Fin fin,
Carla, David, Fiel, Beleza.
12.Teman–teman seperjuangan yang bersama-sama mengalami kerasnya kehidupan skripsi, Bernad, Teguh, Tatag, Rita, Detty, Tina, Alice.
13.Teman–teman selama di Jogja yang secara langsung maupun tidak langsung mendukung kegiatan perkuliahan dan yang mengalami susah senang bersama, Tatag, Ndon, Lia, Bernad, Siska, Agus, Ucok, Tanto, Teguh, Gatot, Munyuk, Claus, Batok, Emon, Tito, Heston, Yuli, Mono, Ipung.
14.Teman–teman TI’01 yang banyak memberikan kenangan selama masa perkuliahan.
15.Seluruh mahasiswa Teknik Informatika, yang membantu penulis melalui masa perkuliahan.
17.Pdt. Victor & Bu Dhani, yang sangat memperhatikan penulis dan memberikan dukungan pangan dan doa.
18.Keluarga besar GBI Anugerah, yang memberikan dukungan semangat dan doa , Pdt.Aken, Sofi, Pak David, Magda, Agung, Dendi dan masih banyak lagi.
19.Keluarga besar GBI Karunia Tuhan Bandar Lampung, Pdt. Sutoyo Sigar, Kak Yusi, Yogi, Agus.
20.Teman–teman kampung halaman, Batok, Emon, Toni, Tono, Vinda, Martha, Syang–syang, Jerry, Ramos.
21.Mas Samadi & Mbak Yanti, sebagai bapak dan ibu kost yang sangat memperhatikan dan yang dengan sabar menunggu keterlambatan pembayaran listrik.
22.Seluruh Dosen dan Staff Universitas Sanata Dharma.
23.Seluruh pihak yang pernah/sedang menyertai penulis dalam melalui lika-liku kehidupan.
24.Pihak lain yang tidak dapat disebutkan satu persatu yang telah membantu penulis dalam menyelesaikan tugas akhir ini.
Yogyakarta, Juni 2007 Penulis,
DAFTAR ISI
HALAMAN JUDUL ... i
HALAMAN PERSETUJUAN PEMBIMBING ... iii
HALAMAN PENGESAHAN ... iv
HALAMAN MOTTO ...v
HALAMAN PERSEMBAHAN ... vi
PERNYATAAN KEASLIAN KARYA ... vii
ABSTRAKSI ... viii
ABSTRACT... ix
PRAKATA...x
DAFTAR ISI... xiii
DAFTAR TABEL... xviii
DAFTAR GAMBAR ... xix
BAB I ...1
PENDAHULUAN ...1
1.1. Latar Belakang ...1
1.2. Rumusan Masalah ...2
1.3. Batasan Masalah ...2
1.4. Tujuan ...2
1.5. Metodologi Penelitian ...3
1.6. Sistematika Penulisan ...4
BAB II...6
2.1. Permainan Catur...6
2.1.1. Perkenalan Permainan Catur ... 6
2.1.2. Proses dan Peraturan Permainan Catur ... 7
2.1.2.1. Proses Permainan ... 7
2.1.2.2. Peraturan Permainan ... 8
2.2. Macromedia Flash MX 2004...15
2.2.1. ActionScript 2.0... 18
2.2.1.1. Istilah-istilah dalam ActionScript 2.0... 18
2.2.1.2. Syntax ActionScript 2.0... 21
2.3. ElectroServer 3...22
2.3.1. Kelebihan ElectroServer 3... 23
2.3.2. Instalasi ... 24
BAB III ...25
PERANCANGAN SISTEM ...25
3.1. Proses Umum ...25
3.1.1. Menu Start Game... 26
3.1.1.1. Menu Create Game... 27
3.1.1.2. Menu Join Game... 29
3.1.1.3. Proses Permainan ... 30
3.1.2. Menu Help... 35
3.1.3. Menu Credit ... 36
3.2. Perancangan Antarmuka ...37
3.2.2. Scene Setting... 38
3.2.3. Scene Create Game... 38
3.2.4. Scene Menunggu Player... 39
3.2.5. ScenePlayer Ditemukan ... 39
3.2.6. Scene Join Game... 40
3.2.7. Scene Game... 40
3.2.8. Scene Peringatan Skak ... 41
3.2.9. Scene Penawaran Remis... 41
3.2.10. Scene Penolakkan Remis ... 42
3.2.11. Scene Konfirmasi Menyerah ... 42
3.2.12. Scene Ending... 42
3.2.13. Scene Help... 43
3.2.14. Scene Credit... 43
BAB IV ...44
IMPLEMENTASI SISTEM...44
4.1. Pengaturan PC...44
4.2. Tampilan Program Aplikasi Dan Potongan Listing Program ...46
4.2.1. Menu Utama... 46
4.2.2. Menu Game... 47
4.2.2.1. Koneksi ElectroServer... 47
4.2.2.2. Login Game... 48
4.2.2.3. Scene Chat... 51
4.2.2.3.2. Chat Room List... 54
4.2.2.3.3. Game Room List... 56
4.2.2.3.4. Chat History... 61
4.2.2.3.5. Chat Message Box... 62
4.2.2.3.6. Room Info... 63
4.2.2.3.7. User Info... 63
4.2.2.3.8. New Room Button... 63
4.2.2.3.9. New Game Button... 65
4.2.2.4. Scene Game... 67
4.2.2.4.1. Chess Board... 68
4.2.2.4.2. Timer Box & Player Info... 75
4.2.2.4.3. Move History Box... 78
4.2.2.4.4. Chat History... 78
4.2.2.4.5. Chat Message Box... 79
4.2.2.4.6. Spectator List... 80
4.2.2.4.7. Resign Button... 81
4.2.2.4.8. Draw Button... 82
4.2.2.4.9. Rematch Button... 84
4.2.2.4.10. Lobby Button... 87
4.2.3. Menu Credit... 87
4.2.4. Menu Help... 88
BAB V ...89
5.1. Uji Coba Perangkat Lunak...89
5.1.1. Uji Coba Scene Chat ... 89
5.1.2. Uji Coba Scene Game... 90
5.2. Analisa Manfaat ...91
5.3. Analisa Teknologi ...91
5.4. Kelebihan dan Kekurangan aplikasi ...92
BAB VI ...94
PENUTUP...94
6.1. Kesimpulan ...94
6.2. Saran ...94
DAFTAR TABEL
Tabel 2.1 Susunan buah catur pada awal permainan ...7
Tabel 2.2 File Gambar ...16
Tabel 2.3 File Suara ...16
Tabel 2.4 File Video...16
Tabel 2.5 Tipe File Ekspor ...17
DAFTAR GAMBAR
Gambar 2.1 Papan Catur ...6
Gambar 2.2 Susunan buah catur pada awal permainan ...7
Gambar 2.3 Gerakan bidak ...9
Gambar 2.4 Gerakan benteng...10
Gambar 2.5 Gerakan Kuda ...11
Gambar 2.6 Gerakan gajah ...11
Gambar 2.7 Gerakan menteri ...12
Gambar 2.8 Gerakan raja ...12
Gambar 2.9 Blokir ...13
Gambar 2.10 Promosi ...14
Gambar 3.1 Flowchart Umum ...25
Gambar 3.2 FlowchartStart Game...26
Gambar 3.3 FlowchartCreate Game...27
Gambar 3.4 Flowchart Menunggu Player...28
Gambar 3.5 Flowchart Player Ditemukan...29
Gambar 3.8 Flowchart Konfirmasi Remis...34
Gambar 3.9 Flowchart Konfirmasi Menyerah...35
Gambar 3.10 Flowchart Scene Ending...35
Gambar 3.12 Flowchart Credit...37
Gambar 3.13 Scene Menu ...37
Gambar 3.15 Scene Create Game...38
Gambar 3.16 Scene Menunggu Player...39
Gambar 3.17 Scene Player Ditemukan ...39
Gambar 3.18 Scene Join Game...40
Gambar 3.19 Scene Game...41
Gambar 3.20 Scene Peringatan Skak ...41
Gambar 3.21 Scene Penawaran Remis...41
Gambar 3.22 Scene Penolakkan Remis...42
Gambar 3.23 Scene Konfirmasi Menyerah ...42
Gambar 3.24 Scene Ending...43
Gambar 3.25 Scene Help...43
Gambar 3.26 Scene Credit...43
Gambar 4.1 Download Flash Player – Opera ...45
Gambar 4.2 Download Flash Player – Mozilla Firefox ...46
Gambar 4.3 Menu Utama...47
Gambar 4.4 Scene Login...49
Gambar 4.5 Pesan Username Telah Digunakan ...51
Gambar 4.6 Scene Chat...52
Gambar 4.7 Popup clip private...53
Gambar 4.8 Popup Clip Join Room 1...55
Gambar 4.9 Popup Clip Join Room 2...56
Gambar 4.10 Gameclipholder...57
Gambar 4.12 Satu pemain hitam...58
Gambar 4.13 Popup clip Join Game tanpa password...59
Gambar 4.14 Popup clip JoinGame dengan password...59
Gambar 4.15 Chat History...62
Gambar 4.16 Chat Message Box...62
Gambar 4.17 Popup clip new room...64
Gambar 4.18 Popup clip new room...65
Gambar 4.19 Scene Game...68
Gambar 4.20 Scene Game 2...69
Gambar 4.21 Popup clip promotion...70
Gambar 4.22 Timer Box...76
Gambar 4.23 Move History Box...78
Gambar 4.24 Chat History...79
Gambar 4.25 Chat Message Box...79
Gambar 4.26 Spectator list...80
Gambar 4.27 Popup clip resign...81
Gambar 4.28 Popup clip draw...82
Gambar 4.29 Popup clip waiting...83
Gambar 4.30 Popup clip draw request...83
Gambar 4.31 Popup clip draw yes...84
Gambar 4.32 Popup clip draw no...84
Gambar 4.33 Restart request...85
Gambar 4.35 Rematch request...86 Gambar 4.36 Restart no...86 Gambar 4.37 Menu Credit...87 Gambar 4.38 Menu Help...88
BAB I
PENDAHULUAN
1.1.Latar Belakang
Game pada Personal Computer (PC) merupakan salah satu unsur penting dalam perkembangan PC, kini jenis game pada PC sudah tidak terhitung lagi jumlahnya, mulai dari game sederhana seperti solitaire sampai pada game
simulasi 3 dimensi yang kualitasnya gambarnya hampir mendekati kenyataan seperti Need For Speed Underground 2, bahkan kini bisnis game sangat erat hubungannya dengan berbagai macam bisnis hiburan, seperti film dan animasi, bahkan akhir-akhir ini bisnis game itu sendiri lebih melejit dibandingkan bisnis hiburan lainnnya.
Walaupun pada saat sekarang ini sudah banyak game dengan berbagai macam fitur yang sangat canggih, tetapi game dengan fitur yang lebih sederhana seperti solitaire atau minesweeper tetap memiliki penggemarnya, karena ada kalanya seseorang ingin memainkan game yang sederhana.
Sejak kemunculannya Macromedia Flash secara cepat telah menjadi suatu teknologi pilihan untuk membuat animasi-animasi yang dinamis dan interaktif. Beberapa Faktor yang mempunyai kontribusi besar pada teknologi yang membuat animasi Flash menjadi populer adalah format .swf yang dapat mengompres file
menggunakan ElectroServer 3. ElectroServer 3 adalah sebuah socket server yang dirancang khusus oleh Electrotank untuk aplikasi multiplayer gamer dan chat.
Dengan melihat fenomena yang berkembang di atas, maka timbullah suatu ide untuk ikut berpartisipasi dalam membuat aplikasi permainan pada PC yang berbasiskan jaringan, yaitu dengan membuat Game Catur Online.
1.2.Rumusan Masalah
Berdasarkan permasalahan di atas, aplikasi ini memiliki rumusan masalah, yaitu bagaimana menerapkan teknologi Macromedia Flash untuk membuat aplikasi permainan catur yang berbasiskan jaringan.
1.3.Batasan Masalah
Pembuatan aplikasi ini memiliki batasan-batasan masalah sebagai berikut: a. Aplikasi permainan catur yang dibuat ditujukan untuk PC di dalam
jaringan.
b. Permainan catur hanya bisa berjalan jika ada 2 orang pemain, PC tidak dapat berperan sebagai pemain lawan.
1.4.Tujuan
Pembuatan aplikasi ini memiliki tujuan untuk membangun aplikasi permainan catur yang berbasis jaringan pada PC dengan menggunakan teknologi
Macromedia Flash khususnya Macromedia Flash MX 2004
1.5.Metodologi Penelitian
1. Observasi
Proses observasi dilakukan dengan cara bermain catur secara langsung. Dari hasil observasi, maka dapat disusun algoritma untuk peraturan permainan catur.
2. Studi Pustaka
Setelah melakukan proses observasi permainan catur, kemudian dipikirkan hal-hal apa saja yang diperlukan untuk mendukung pembuatan aplikasi permainan. Maka kemudian dipelajari berbagai literatur yang dapat mendukung pembuatan aplikasi, meliputi:
a. Materi tentang peraturan permainan catur internasional.
b. Berbagai materi untuk menyusun suatu aplikasi game, khususnya dengan menggunakan teknologi Macromedia Flash MX 2004.
c. Bahasa pemrograman dalam Macromedia Flash MX, yaitu
ActionScript, khususnya ActionScript 2.0, yaitu versi bahasa
pemrograman terbaru dalam Macromedia Flash MX 2004 yang kemampuannya telah ditingkatkan dari versi sebelumnya.
d. Berbagai materi tentang ElectroServer 3, aplikasi yang memungkinkan komunikasi atau pengiriman data antar aplikasi yang dibuat dengan
Macromedia Flash MX 2004. 3. Implementasi
Perangkat lunak yang digunakan dalam implementasi antara lain:
1. Sistem Operasi Windows XP Profesional versi 5.1.2600 Service Pack 1 build 2600
2. Macromedia Flash MX 2004
3. JRE 1.4.2
4. ElectroServer 3
5. Adobe Photoshop CS
1.6.Sistematika Penulisan
BAB I PENDAHULUAN
Bab ini berisi tentang deskripsi umum isi tugas akhir yang meliputi latar belakang masalah, rumusan masalah, batasan masalah, tujuan tugas akhir, metodologi tugas akhir dan sistematika penulisan.
BAB II LANDASAN TEORI
Bab ini berisi tentang pengenalan dan penjelasan permainan catur, aturan permainan catur dan materi-materi tentang Macromedia Flash MX 2004 dan ElectoServer 3
BAB III PERANCANGAN SISTEM
Bab ini berisi tentang perancangan proses dan perancangan antarmuka dari aplikasi permainan yang dibuat.
Bab ini berisi deskrpsi tentang tahap penulisan program dan implementasi rancangan system ke dalam sistem yang sesungguhnya.
BAB V ANALISA HASIL
Bab ini berisi analisa dari aplikasi melalui uji coba, baik dari segi manfaat dan teknologi. Bab ini juga menjabarkan kelebihan dan kekurangan aplikasi.
BAB VI PENUTUP
BAB II
LANDASAN TEORI
2.1. Permainan Catur
2.1.1. Perkenalan Permainan Catur
Catur adalah permainan yang berasal dari India sekitar abad ke-6. Dari kemunculannya yang pertama hingga sekarang permainan catur hanya mengalami sedikit perubahan, yaitu munculnya menteri/ratu dan gerakan blokir pada abad ke-15 dan sedikit penyesuaian perubahan gerakan pada abad ke-18.
Permainan Catur menggunakan sebuah papan yang terdiri dari 8 baris dan 8 kolom sehingga membentuk sebuah papan berbentuk persegi yang terdiri dari 64 persegi dengan pewarnaan yang bergantian.
Gambar 2.1 Papan Catur
2.1.2. Proses dan Peraturan Permainan Catur
2.1.2.1. Proses Permainan
Pada permulaan permainan, seorang pemain mempunyai 16 buah catur berwarna terang (putih), sedangkan pemain lainnya mempunyai 16 buah catur yang juga berwarna gelap (hitam) yang disusun sedemikian rupa dengan patokan menteri putih selalu berada di kolom berwarna putih dan sebaliknya. Baik buah hitam maupun putih masing-masing mempunyai 1 Raja, 1 Menteri/Ratu, 2 Benteng, 2 Gajah, 2 Kuda dan 8 Bidak/Pion. Susunan awal buah catur pada dapat dilihat pada tabel berikut.
Benteng Kuda Gajah Menteri Raja Gajah Kuda Benteng
Bidak Bidak Bidak Bidak Bidak Bidak Bidak Bidak
Bidak Bidak Bidak Bidak Bidak Bidak Bidak Bidak
Benteng Kuda Gajah Menteri Raja Gajah Kuda Benteng
Tabel 2.1 Susunan buah catur pada awal permainan
Permainan catur dimainkan oleh dua orang pemain yang berlawanan dengan jalan memindahkan buah catur di atas papan catur secara bergantian dan pemain dengan buah catur berwarna putih selalu melakukan gerakan pertama.
Setiap buah catur memiliki metode gerakannya masing-masing dan tiap buah catur dapat menangkap/memakan buah catur lawan dengan cara melangkah ke tempat dimana buah catur lawan berada dengan tetap mengikuti aturan gerakan dari buah catur tersebut.
Permainan berakhir pada saat raja dari salah satu pemain terjebak oleh buah catur lawan atau dalam istilah catur disebut ‘skak’ dan raja tersebut tidak mempunyai gerakan sah untuk menghindar dari buah catur lawannya atau disebut ‘skak-mat’.
Gerakan tidak sah adalah gerakan dari seorang pemain yang mengakibatkan raja dari pemain itu sendiri terkena skak.
2.1.2.2. Peraturan Permainan
(a) Aturan Umum
Pada awal permainan pemain yang memiliki buah catur berwarna putih melakukan gerakan pertama, dan kemudian gerakan dilakukan secara bergantian dan kedua pemain memiliki kebebasan untuk menjalankan buah caturnya..
Jika raja terkena ‘skak’, maka pemain diharuskan menghindari ancaman ‘skak’ tersebut.
pemain tidak mempunyai gerakan sah namun raja dari pemain tersebut tidak dalam keadaan skak atau dikenal dengan istilah ‘remis’. Jika terjadi keadaan ini, maka permainan dianggap berakhir seri.
(b) Aturan Gerakan a. Bidak
Bidak adalah satu-satunya buah catur yang tidak dapat bergerak mundur, bidak hanya dapat bergerak lurus ke depan kecuali pada saat bidak tersebut menangkap buah catur lawan. Bidak hanya dapat bergerak 1 kolom ke depan kecuali jika bidak itu belum bergerak sama sekali, maka bidak tersebut boleh bergerak sebanyak 2 kolom ke arah depan. Bidak hanya dapat menangkap buah catur lawan yang berada di depannya 1 kolom secara diagonal, bidak tidak dapat menangkap buah catur lawan yang berada di depannya.
Gambar2.3 Gerakan bidak (titik biru adalah gerakan bidak, titik merah adalah gerakan bidak pada saat menangkap buah catur lawan)
b. Benteng
yang diinginkan pemain. Cara benteng bergerak sama dengan cara benteng menangkap buah catur lawan, selama buah catur lawan yang ingin ditangkap berada dalam garis vertikal atau horisontal tempat benteng berada, maka buah catur lawan dapat ditangkap oleh benteng, dengan catatan tidak ada buah catur lain yang menghalangi buah catur tersebut, baik buah catur lawan ataupun buah catur milik sendiri.
Gambar 2.4 Gerakan benteng
c. Kuda
Gambar 2.5 Gerakan Kuda
d. Gajah
Buah catur ini hanya dapat bergerak secara diagonal tanpa batasan banyaknya kolom yang dapat dilewati dalam sekali gerakan. Cara gajah menangkap buah catur lawan sama dengan caranya bergerak.
Gambar 2.6 Gerakan gajah
e. Menteri
Gambar 2.7 Gerakan menteri
f. Raja
Sama dengan menteri raja juga dapat bergerak secara horisontal, vertikal dan diagonal, tetapi dengan pengecualian raja hanya dapat bergerak sebanyak satu langkah atau satu kolom, dan raja tidak dapat bergerak ke kolom dimana dia akan terkena ancaman ‘skak’. Cara raja menangkap buah catur lawan sama dengan cara raja bergerak.
Gambar 2.8 Gerakan raja
g. Blokir
yaitu raja dan benteng. Blokir juga satu-satunya gerakan dimana raja boleh bergerak lebih dari satu kolom.
Agar dapat melakukan blokir ada 3 syarat yang harus dipenuhi yaitu :
1. Baik raja ataupun benteng yang akan melakukan blokir harus belum pernah melakukan gerakan.
2. Tidak boleh ada buah catur sama sekali diantara raja dan benteng yang akan melakukan blokir.
3. Raja tidak sedang dalam kondisi ‘skak’, dan tidak ada buah catur lawan yang dapat mengancam raja dengan kondisi ‘skak’ baik pada tempat raja akan berpindah ataupun di kolom yang akan dilalui raja.
Cara melakukan gerakan blokir adalah dengan memindahkan benteng tepat ke samping raja kemudian raja melompati benteng yang mendekatinya itu. Untuk lebih jelasnya bisa dilihat pada Gambar 2.9.
Posisi buah catur pada gambar adalah posisi awal sebelum melakukan blokir, titik berwarna kuning adalah posisi raja setelah melakukan blokir, titik berwarna merah muda adalah posisi benteng setelah melakukan blokir. Titik yang berada di sebelah kiri raja adalah posisi buah catur setelah melakukan blokir bila raja melakukan blokir dengan benteng sebelah kiri, sedangkan titik yang berada di sebelah kanan raja adalah posisi buah catur setelah melakukan blokir bila raja melakukan blokir dengan benteng sebelah kanan.
h. Promosi
Promosi hanya dapat dilakukan oleh bidak. Promosi terjadi apabila bidak salah seorang pemain mencapai ujung papan catur (daerah lawan). Bila bidak tersebut berhasil mencapai ujung dari papan catur, maka pemain berhak untuk mengganti bidak tersebut dengan buah catur lainnya kecuali raja. Untuk lebih jelasnya dapat dilihat pada gambar 2.10 berikut.
Posisi awal adalah posisi awal bidak pada awal permainan, jika sebuah bidak dapat mencapai posisi akhir seperti pada gambar maka terjadi promosi. Semua bidak dalam permainan catur dapat melakukan promosi, dan tidak ada batasan berapa banyak bidak yang dapat melakukan promosi.
2.2.Macromedia Flash MX 2004
Macromedia Flash MX 2004 adalah merupakan versi terbaru dari
Macromedia Flash. Macromedia Flash adalah suatu aplikasi untuk
membuat aplikasi animasi yang dinamis dan interaktif yang diproduksi oleh
Macromedia.
Pada awalnya Macromedia Flash mempunyai fungsi utama untuk membuat animasi namun seiring dengan perkembangannya Macromedia Flash kini telah memiliki kemampuan yang sangat luas, dan dapat dipakai untuk membuat berbagai macam aplikasi seperti Mp3 Player, voice chat, basisdata dalam jaringan, organizer dan berbagai macam game online.
Macromedia Flash MX 2004 memiliki banyak sekali fitur,
Jenis-jenis file yang didukung oleh Macromedia Flash MX 2004
untuk diimpor :
1. File Gambar
Tipe File Extensi
Adobe Illustrator .eps, ai
AutoCad DXF .dxf
Bitmap .bmp
Enhanced Windows Metafile .emf
FreeHand .fh7, .fh8, .fh9, .fh10
Future Splash Player .spl
GIF dan Animated GIF .gif
JPEG .jpg
PICT .pct, .pic
PNG .png
Flash Player .swf
Windows Metafile .wmf
Tabel 2.2File Gambar
2. File Suara
Tipe File Extensi
Mp3 .mp3
WAV Audio .wav
Tabel 2.3File Suara
3. File Video
Tipe File Extensi
Audio Video Interleaved .avi
Digital Video .dv
Motion Picture Express Group .mpg, .mpeg
Quick Time Movie .mov
Windows Media File .wmv, .asf
Jenis – jenis file yang didukung oleh Macromedia Flash MX 2004
untuk diekspor :
Tipe File Extensi
Adobe Ilustrator .ai
Animated GIF, GIF Sequence .gif
Bitmap .bmp
DXF Sequence & AutoCad .dxf
Enhanced Metafile .emf
EPS .eps
Flash Movie .swf
Future Splash Player .spl
JPEG Sequence & JPEG Image .jpg
PNG Sequence & JPEG Image .png
WAV Audio .wav
Windows Metafile .wmf
Audio Video Interleaved .avi
Tabel 2.5 Tipe File Ekspor
Jenis – jenis file yang dapat dihasilkan oleh Macromedia Flash MX 2004 :
Tipe File Extensi
Flash Movie .swf
HTML .html
GIF Image .gif
JPEG Image .jpg
PNG Image .png
Windows Projector .exe
Macintosh Projector .hqx
QuickTime Movie .mov
2.2.1. ActionScript 2.0
ActionScript 2.0 merupakan bahasa pemrograman di dalam Macromedia Flash MX 2004 yang sudah mendukung OOP dan bersifat case sensitive.
2.2.1.1. Istilah-istilah dalam ActionScript 2.0 1. Actions
Pernyataan yang menginstruksikan file .swf untuk melakukan aksi saat file tersebut dijalankan.
2. Boolean
Pernyataan yang berisi nilai true atau false
3. Class
Suatu tipe data untuk mendefinisikan suatu objek. 4. Konstanta
Merupakan suatu elemen yang tidak berubah. Seperti konstanta untuk tombol tab pada keyboard selalu sama.
5. Constructors
Fungsi yang digunakan untuk mendefinisikan properti dan method suatu kelas. Constructor merupakan suatu fungsi yang mempunyai nama yang sama dengan nama dari kelas tersebut.
Pendefinisian jenis informasi suatu variabel. Tipe data dalam
ActionScript antara lain : String, Number, Boolean, Object, Movieclip, Function, null, dan undefined.
7. Events
Suatu pernyataan yang menginstruksikan file .swf untuk melakukan aksi pada saat file tersebut tengah berjalan.
8. Event Handlers
Pernyataan khusus yang mengatur event. 9. Ekspresi
Suatu kombinasi dari simbol ActionScript yang mempunyai nilai. Contoh : x + 2
10.Fungsi
Blok koding yang bersifat reusable dan dapat melewatkan parameter dan mengembalikan suatu nilai.
11.Identifier
Nama yang mengindikasikan suatu variabel, property, objek, fungsi, atau method. Suatu identifier diawali dengan karakter “_” atau karakter “$”.
12.Instances
Suatu Objek dari class tertentu, setiap instance dari class
Nama yang unik dari instance movieclip dan button. 14.Methods
Fungsi yang merupakan bagian dari class.
15.Objek
Kumpulan properti dan method. Setiap objek mempunyai namanya sendiri sebagai instance dari suatu class.
16.Operators
Istilah dari perhitungan nilai yang baru. Contoh : Operator tambah (+)
17.Parameters
Penampung nilai yang dapat dapat dilewatkan ke dalam suatu fungsi.
18.Target Paths
Hirarki nama instance movie clip, variabel dan objek dalam file .swf yang digunakan untuk memberikan perintah pada suatu movie clip atau mengambil atau memberi nilai pada suatu variabel. 19.Variables
2.2.1.2. Syntax ActionScript 2.0
Seperti halnya bahasa pemrograman lainnya, ActionScript mempunyai aturan syntax yang harus dipatuhi untuk mendapatkan script yang dapat di dikompilasi dan dijalankan dengan benar.
Elemen-elemen yang perlu diperhatikan dalam ActionScript 2.0 antara lain :
1. Case Sensitive
Karena ActionScript 2.0 bersifat CaseSensitive, variabel dengan nama yang sama dapat menjadi variabel yang berbeda jika penulisan namanya berbeda.
Contoh : Catur ≠ catur ≠ CATUR
Case Sensitive juga berlaku pada fungsi, class, method dan
keyword.
2. Dot Syntax
Dot/titik (.) digunakan untuk mengindikasikan properti atau
method suatu objek atau movieclip. Titik juga digunakan untuk mengidentifikasikan target path ke suatu movieclip, variabel, fungsi, atau objek.
3. Kurung Kurawal
4. Titik koma
Kalimat dalam ActionScript dipisahkan oleh titik koma. 5. Kurung
Digunakan untuk menempatkan parameter dari suatu fungsi. 6. Komentar
Komentar dalam ActionScript dibuat dengan menggunakan tanda 2 garis miring (//) atau diawali dengan tanda /* dan diakhiri dengan tanda */.
7. Kata Kunci
Kata yang secara default digunakan ActionScript untuk tujuan tertentu, kata kunci tidak dapat digunakan sebagai nama variabel, fungsi atau label nama.
2.3.ElectroServer 3
ElectroServer 3 adalah socket server yang diciptakan oleh Electrotank. Walaupun ElectroServer 3 dapat digunakan untuk hampir semua aplikasi multi-user, pada dasarnya ElectroServer 3 dibuat untuk Aplikasi game multiplayer dan
chat. Dengan demikian ElectroServer 3 memiliki fitur-fitur yang membuat pembuatan aplikasi chat dan game multiplayer menjadi mudah.
ElectroServer 3 merupakan suatu aplikasi Java, yang artinya ElectroServer 3
Macintosh, Unix, Solaris dan Linux. Jadi dapat disimpulkan bahwa ElectroServer 3 dapat dijalankan hampir dimana saja.
2.3.1. Kelebihan ElectroServer 3 1. Sangat Stabil
ElectroServer 3 telah diuji dengan lebih dari 10.000 koneksi secara bersamaan dan masih tetap berjalan dengan baik tidak seperti socket
server lain pada umumnya yang hanya mampu menampung beberapa
ratus koneksi.
2. Client – side API(Application Protocol Interface) yang baik Telah tersedia protokol untuk koneksi dengan Flash, baik dengan
ActionScript 1.0 atau ActionScript 2.0. 3. Admin Client berbasis web yang baik
Didalam ElectroServer 3 telah disediakan Client yang dapat berlaku sebagai Admin dalam sebuah aplikasi yang berbasis web yang dapat mengkonfigurasi berbagai fungsi server, juga dapat digunakan untuk melihat informasi real-time tentang CPU dan penggunaan memori. 4. Dapat dijalankan dimana saja
ElectroServer 3 dapat berjalan pada platform manapun yang
mendukung Java, antara lain Windows 98/NT/ME/2000/XP,
Macintosh, Unix, Solaris dan Linux. Jadi dapat disimpulkan bahwa
2.3.2. Instalasi
Untuk dapat menginstal ElectroServer 3, sebelumnya dibutuhkan Java Runtime Environment 1.4.2. Secara default ElectroServer 3 akan mengeset IP address untuk web server pada alamat 127.0.0.1 pada port 8080 dan IP untuk
listener pada alamat 127.0.0.1 pada port 9875, alamat default ini hanya dapat digunakan untuk pengetesan ElectroServer 3 pada komputer lokal, jika
BAB III
PERANCANGAN SISTEM
Pada bab ini akan dibahas tantang proses umum, perancangan antarmuka dan perancangan proses dan contoh kasus.
3.1. Proses Umum
Proses secara umum yang terjadi pada aplikasi permainan catur ini, dapat dilihat pada gambar 3.1.
Start
Scene Menu
Memilih Start
Memilih Credit
Memilih Help 3
2 1
no
no
yes
yes
yes no
Pada saat permainan dieksekusi, maka akan akan muncul scene
menu yang terdiri dari tombol – tombol antara lain Start Game, Help,
Credit dan Exit. Bila user memilih tombol Exit, maka aplikasi permainan ini akan berhenti, namun bila user memilih tombol lainnya selain tombol
Exit, maka aplikasi permainan akan menjalankan Scene lain sesuai dengan fungsi dari tombol tersebut.
3.1.1. Menu Start Game
Menu Start Game adalah menu utama dalam aplikasi permainan catur ini, karena di dalam menu inilah terjadi proses permainan antara user 1 melawan user
2. Menu Start Game ini memiliki 2 Sub menu dan 1 tombol. Proses Menu Start Game dapat dilihat pada Gambar 3.2 berikut.
1
Scene Game Setting
Create Game
Join Game
Memilih Back Scene Menu no
no no
yes
yes
yes
1a
Setelah user memilih Menu Start Game pada Scene Menu, maka aplikasi akan menampilkan scene Start game yang memiliki 1 tombol dan 2 sub menu yaitu Create Game dan Join Game yang masing – masing akan mengeksekusi
scene lain sesuai dengan fungsinya. Jika user memilih tombol Back, maka Aplikasi akan kembali ke Scene Menu.
3.1.1.1. Menu Create Game
Jika user memilih Menu Create Game maka aplikasi akan menampilkan Scene Create Game, dan user akan memainkan buah catur yang berwarna putih. Proses pada Scene Create Game ini dapat dilihat pada Gambar 3.3.
N am a G am e
S u dah D iinpu t yes 1 a
S cen e C reate G am e
S cene G a m e S etting M em ilih B ack
no
1a 1
Gambar 3.3Flowchart Create Game
Pada Scene Create Game ini juga, user diharuskan menginputkan nama dari game. Jika user memilih tombol back, maka aplikasi akan kembali ke
permainan akan menampilkan Scene Menunggu Player. Proses Scene Menunggu Player dapat dilihat pada gambar berikut.
Player
Gambar 3.4 Flowchart Menunggu Player
Setelah User menginputkan nama game, maka aplikasi akan menunggu adanya player lain (user kedua) agar proses permainan dapat dijalankan, jika dalam jangka waktu tertentu client tidak juga ditemukan, atau belum ada user
G Scene Player
Ditemukan 1a2
Memilih Start
Memilih Cancel
Scene Create Game
no
yes
yes no
Gambar 3.5Flowchart Player Ditemukan
Pada Scene Player Ditemukan ini, aplikasi permainan akan terus menampilkan scene ini sebelum user memilih antara tombol Start atau Cancel, jika user memilih tombol Start, maka aplikasi permainan akan memulai permainan catur ( mengeksekusi Scene Game), namun jika user memilih Cancel, maka aplikasi permainan akan kembali ke Scene Create Game.
3.1.1.2. Menu Join Game
Game
Ditemukan yes Game Sudah Dipilih yes G no
1b
Scene Join Game
no
Memilih Game
Gambar 3.6Flowchart Join Game
Setelah user memilih menu Join Game, aplikasi akan secara otomatis memeriksa apakah sudah ada user yang menjadi player pertama dalam aplikasi permainan ini, jika tidak ada, maka aplikasi ini akan menampilkan Scene Peringatan selama beberapa detik, kemudian aplikasi permainan akan kembali ke
Scene Game Setting. Jika game ditemukan, maka user harus memilih game
dimana user tersebut akan bermain, karena dimungkinkan adanya lebih dari 1
game. Setelah user memilih game, maka aplikasi permainan akan memulai permainan.
3.1.1.3. Proses Permainan
Proses permainan adalah proses utama dan terpenting di dalam aplikasi permainan ini. Dalam proses permainan inilah kedua user bermain catur dan berusaha untuk saling mengalahkan lawannya. Seperti yang telah dijelaskan sebelumnya, user pertama akan memainkan buah catur berwarna putih dan user
kedua akan memainkan buah catur berwarna hitam. Proses permainan memiliki 3 sub proses, yaitu Konfirmasi Remis, Konfirmasi Menyerah dan Proses Ending
1. Scene Game
G
Scene Game
Pemain X, Giliran = A Pemain Y, Giliran = B
Giliran = 1
Pemain lawan sudah melangkah
Sudah X Detik yes no
Pada awal permainan aplikasi permainan akan mendeklarasikan 3 buah variabel dengan tipe integer, yaitu A, B dan C, serta mengisi nilainya, yaitu A = 1, B = 0 dan C = 0, dimana 3 buah variabel tersebut akan digunakan untuk mengatur giliran user untuk melangkah. Kemudian aplikasi permainan akan menentukan bahwa giliran pemain X adalah A dan giliran pemain Y adalah B.
Dalam Scene Game ini terdapat tombol 2 tombol, yaitu tombol Draw Offer dan tombol Give Up, tombol Draw Offer adalah tombol untuk mengakhiri permainan dalam keadaan seri atau ‘remis’, namun memilih tombol ini tidak membuat permainan langsung berakhir dalam keadaan seri, tetapi user yang memilih tombol ini memerlukan persetujuan pemain lawan untuk mengakhiri permainan dalam keadaan seri, jika persetujuan pemain lawan tidak didapatkan, maka permainan akan dilanjutkan kembali. Sedangkan tombol Give Up adalah tombol untuk menghentikan permainan, pemain yang menekan tombol ini, secara otomatis akan kalah dan permainan berakhir.
Setelah aplikasi menentukan giliran pemain, aplikasi akan memeriksa apakah salah satu pemain memilih tombol Give Up, jika ya maka pemain tersebut akan ditampilkan Scene Konfirmasi Menyerah. Jika tidak, maka aplikasi akan memeriksa pemain mana yang memiliki giliran bernilai 1.
Pemain yang memiliki giliran bernilai 1 akan mendapat giliran untuk menggerakkan buah caturnya, sedangkan pemain yang tidak memiliki nilai giliran 1, harus menunggu pemain lawannya selesai melakukan gerakan .
mulai menghitung pada saat gerakan diaktifkan dan berhenti pada saat pemain selesai melangkah. Walaupun gerakan yang dilakukan oleh pemain tidak sah, sehingga gerakan tersebut akan dibatalkan dengan mengembalikan buah catur yang baru saja digerakkan ke posisi sebelumnya, timer tetap menghitung waktu yang dihabiskan.
Setelah pemain melakukan gerakan, aplikasi permainan akan memeriksa apakah gerakan yang dibuat sah atau tidak, jika gerakan tidak sah, maka gerakan akan dibatalkan dan pemain harus melakukan gerakan lagi, jika gerakan sah, maka aplikasi permainan akan memeriksa apakah terjadi ‘skak’, jika terjadi ‘skak’ maka aplikasi permainan akan memeriksa apakah ‘skak’ yang terjadi adalah ‘skak mat’ atau bukan, jika terjadi ‘skak mat’, maka aplikasi akan masuk ke Scene Ending. Jika ‘skak’ yang terjadi bukan ‘skak mat’, maka aplikasi akan memberikan peringatan pada pemain yang terkena ‘skak’. Jika ‘skak’ tidak terjadi, aplikasi permainan akan memeriksa, apakah terjadi ‘remis’, jika ya maka permainan akan masuk ke scene Ending, jika tidak, permainan akan menukar nilai giliran jalan kedua pemain.
Setelah menukar nilai giliran kedua pemain, aplikasi akan kemabali memeriksa pemain mana yang mempunyai nilai giliran = 1, demikian seterusnya sampai permainan berakhir.
2. Scene Konfirmasi Remis
Scene ini ditampilkan kepada lawan main dari pemain yang menekan tombol
‘remis’ atau tetap melanjutkan permainan. Jika pemain lawan memilih tombol yes, maka permainan akan berakhir dalam keadaan seri, namun jika pemain lawan memilih no, maka permainan akan dilanjutkan kembali.
Untuk lebih jelasnya dapat dilihat di Gambar 3.8 berikut.
G0
Memilih Tombol Yes
Scene Penawaran Remis di pc pemain lawan
G2
no
yes
Scene Penolakan
Remis
G4
Gambar 3.8Flowchart Konfirmasi Remis
3. Scene Konfirmasi Menyerah
Dalam Scene ini, user akan ditanyakan, apakah user akan menyerah, jika user
memilih yes, maka permainan akan berakhir, tetapi jika user memilih no, maka permainan akan dilanjutkan kembali.
Memilih Yes Scene
Konfirmasi Menyerah
G1 no Memlih No
Scene Ending yes
no
G3 yes
Gambar 3.9 FlowchartKonfirmasi Menyerah
4. Scene Ending
Scene Ending ini menampilkan siapa pemenang permainan kali ini, atau
permainan berakhir seri(remis). Jika user sudah melihat, user dapat mengakhiri
Scene Ending ini dengan memilih OK.
Untuk lebih jelasnya dapat dilihat pada gambar 3.10
Scene Ending Memilih OK yes Scene Menu
no G2
Gambar 3.10Flowchart Scene Ending
3.1.2. Menu Help
Bila user memilih menu help, maka aplikasi permainan akan menampilkan
Untuk lebih jelasnya, proses menu help dapat dilihat pada gambar 3.11
Gambar 3.11Flowchart Help
3.1.3. Menu Credit
Jika user memilih menu credit, maka aplikasi permainan akan menampilkan Scene Credit, yang berisi tentang profil dari game dan game developer.
2
Scene Credits
Memilih Back yes Scene Menu no
Gambar 3.12Flowchart Credit
3.2. Perancangan Antarmuka
3.2.1. SceneMenu
Pada saat awal aplikasi permainan dijalankan, maka akan muncul Scene menu. Scene menu ini bertujuan untuk menyambut user dengan tampilan yang menarik. Kemudian user dapat memilih menu yang tersedia dalam Scene menu.
3.2.2. Scene Setting
Scene Setting ini merupakan scene yang tampil jika user memilih menu
Start, Scene ini memiliki 2 sub Scene, yaitu Scene Create Game dan Scene Join Game. Dalam scene ini user harus memilih apakah ia akan menjadi host atau
guest dalam permainan. Jika user memilih Create Game, maka user akan menjadi
Player pertama dalam permainan, tetapi jika user memilih Join Game, maka user
akan menjadi player kedua dalam permainan.
Gambar 3.14Scene Setting
3.2.3. Scene Create Game
3.2.4. Scene Menunggu Player
Scene ini muncul setelah user selesai menginputkan nama game di Scene Create Game. Scene ini akan terus ditampilkan sampai jangka waktu tertentu, atau sampai aplikasi permainan menemukan pemain kedua untuk memulai permainan.
Gambar 3.16Scene Menunggu Player 3.2.5. ScenePlayer Ditemukan
Scene ini akan muncul jika aplikasi permainan menemukan pemain kedua, jika user memilih tombol Cancel maka aplikasi permainan akan kembali ke Scene Create Game, jika user memilih tombol start, maka aplikasi permainan akan memulai permainan (masuk ke Scene Game).
3.2.6. Scene Join Game
Scene ini akan muncul jika user memilih Join Game di Scene Setting, di
scene ini user yang menjadi Player kedua harus memilih salah satu dari game
yang ada.
Gambar 3.18Scene Join Game
3.2.7. Scene Game
Scene Game akan muncul setelah user menyelesaikan setting permainan di
Scene Setting. Dalam Scene Game inilah kedua user bermain untuk saling mengalahkan. Scene ini terbagi menjadi 6 elemen penting, yaitu :
1. Nama Pemain 2. Papan Catur
3. Tempat buah catur lawan yang sudah dimakan 4. Informasi kejadian
Gambar 3.19Scene Game
3.2.8. Scene Peringatan Skak
Scene Peringatan Skak muncul jika salah satu pemain terkena ‘skak’.
Gambar 3.20Scene Peringatan Skak 3.2.9. Scene Penawaran Remis
Jika pemain memilih Draw Offer, maka aplikasi permainan akan menampilkan Scene Penawaran Remis kepada pemain lawannya.
3.2.10.Scene Penolakkan Remis
Scene Penolakkan Remis akan ditampilkan jika pemain lawan menolak penawaran ‘remis’ yang diberikan.
Gambar 3.22Scene Penolakkan Remis 3.2.11.Scene Konfirmasi Menyerah
Scene ini akan ditampilkan jika pemain memilih tombol Give Up. Dalam
scene ini pemain harus memilih, apakah pemain tersebut yakin akan menyerah, jika memilih yes, maka permainan berakhir, tetapi jika memilih no, maka permainan akan dilanjutkan kembali.
Gambar 3.23Scene Konfirmasi Menyerah 3.2.12.Scene Ending
Gambar 3.24 Scene Ending
3.2.13.Scene Help
Dalam Scene Help ini, user dapat melihat peraturan dalam aplikasi permainan ini.
Gambar 3.25Scene Help
3.2.14.Scene Credit
Scene credit ini menampilkan tentang profil game dan profil pembuat
game.
BAB IV
IMPLEMENTASI SISTEM
Pada bab ini, penulis akan menjelaskan mengenai proses implementasi dari sistem yang telah selesai dianalisis dan didesain agar siap untuk digunakan. Antara lain akan dijelaskan mengenai pengaturan pada sederhana PC agar dapat menjalankan aplikasi dengan baik. Selain itu juga akan dibahas mengenai lsiting progam aplikasi maupun listing program ActionScript yang digunakan.
4.1. Pengaturan PC
mendeteksi ada tidaknya Flash Player terinstal. Jika tidak masing-masing
browser akan memiliki caranya sendiri untuk mengatasi masalah tersebut. Contohnya Opera yang langsung menanyakan user bahwa untuk melihat halaman ini dibutuhkan Flash Player, apakah user ingin mendownload?
Gambar 4.1Download Flash Player – Opera
Sedangkan Mozilla Firefox akan menampilkan bagian dari halaman web
Gambar 4.2Download Flash Player – Mozilla Firefox
4.2. Tampilan Program Aplikasi Dan Potongan Listing Program
4.2.1. Menu Utama
Pada saat user memasuki situs pertama kali, maka user akan disambut dengan animasi flash sederhana sebagai halaman pembuka, dan didalam halaman tersebut terdapat 3 tombol yang berfungsi sebagai link untuk menuju ke sub-menu yang tersedia, yaitu menu Start Game untuk memulai permainan catur, menu
Gambar 4.3 Menu Utama
4.2.2. Menu Game
4.2.2.1. Koneksi ElectroServer
Aplikasi Game catur akan ditampilkan bila user memilih tombol Start Game pada menu utama, pada saat aplikasi pertama kali berjalan, maka yang pertama dilakukan adalah mengkoneksikan aplikasi dengan ElektroServer sebagai
socket server.
var serverSettings = new XML(); serverSettings.ignoreWhite = true; serverSettings.onLoad = function() {
var children = this.firstChild.childNodes; for (var i=0;i<children.length;++i) {
var name = children[i].nodeName
var value = children[i].firstChild.nodeValue if (name == "IP") {
ip = value; } else if (name == "Port") { port = Number(value);
}
System.security["loadPolicyFile"]("xmlsocket://"+ip+":"+port); }
serverSettings.load("ServerSettings.xml"); this.onEnterFrame = function() {
if (this.getBytesLoaded()/this.getBytesTotal() >=1 && getTimer() >= 1*1000) {
delete this.onEnterFrame; gotoAndStop("Code"); }
}
Potongan listing program di atas berfungsi untuk mempersiapkan koneksi antara aplikasi dengan ElektroServer dengan cara membaca alamat IP dan Port yang digunakan oleh ElektroServer yang terletak pada file ServerSettings.xml.
<ServerSettings>
<IP>192.168.0.1</IP> <Port>9875</Port> </ServerSettings>
Listing Program di atas adalah merupakan isi dari file ServerSettings.xml yang menyimpan alamat IP dan Port yang digunakan oleh ElektroServer. Isi dari file ServerSettings.xml ini dapat diubah sesuai dengan alamat IP dan Port yang digunakan oleh ElektroServer.
Setelah itu aplikasi akan mengkoneksikan diri dengan ElektroServer dengan perintah
es.connect();
4.2.2.2. Login Game
var gameInfo:Object = new Object();
var es:ElectroServer = ElectroServer.getInstance(); es.setModeratorLabel(true, " [Mod]");
es.setDebug(false); function joinRoom() {
var roomOb:Object = new Object(); roomOb.roomName = "Lobby";
roomOb.zone = "Chess Zone"; es.createRoom(roomOb); }
es.roomJoined = function(Results, myRoom) { if (Results.success) {
gotoAndStop("Chat"); } else {
msg.text = Results.error; }
};
Potongan dari listing program di atas adalah listing program yang menjalankan operasi tersebut. Listing program diatas akan membuat suatu zone baru dalam
ElektroServer untuk menampung operasi aplikasi dengan nama Chess Zone. Setelah itu user diharuskan memasukkan nama untuk login kedalam aplikasi permainan catur ini.
function loginFXN() {
var username:String = username_txt.text;
if (username.length>2 && username.length<15) { es.login(username);
gotoAndStop("Waiting"); }
}
login_btn.onRelease = function() { if (username_txt.length > 2) { loginFXN();
} }
function loginFXN() {
var username:String = username_txt.text;
if (username.length>2 && username.length<15) { es.login(username);
gotoAndStop("Waiting"); }
}
login_btn.onRelease = function() { if (username_txt.length > 2) { loginFXN();
} }
Potongan Listing Program di atas akan memeriksa apakah username yang diinputkan oleh user lebih dari 2 karakter dan kurang dari 15 karakter, jika tidak maka aplikasi akan tetap menampilkan scene login sampai user menginputkan
username antara 3 sampai 14 karakter.
Jika username yang diinputkan sudah digunakan oleh user lain, maka
Gambar 4.5 Pesan Username Telah Digunakan
4.2.2.3. Scene Chat
Setelah login berhasil, maka aplikasi akan menampilkan scene chat
dalam scene ini user dapat melihat daftar user yang sedang menjalankan aplikasi ini, melihat daftar chat room dan game room yang dibuat oleh user lain, melakukan chatting dengan user lain, baik untuk mencari lawan permainan ataupun hanya sekedar chatting, di scene ini user juga dapat membuat room
sendiri untuk chatting, membuat room permainan sendiri dan mengirimkan pesan pribadi yang hanya diterima oleh user yang dipilih. Scene chat ini terdiri dari beberapa komponen antara lain :
a. User List
c. Game Room List
d. Chat History
e. Chat Message Box
f. Room Info
g. User Info
h. New Room Button
i. New Game Button
Gambar 4.6 Scene Chat
4.2.2.3.1. User List
userListBox.dataProvider = userlist; }
Potongan listing program di atas akan mengambil daftar user yang berada di Chess Zone dan menampilkannya di textbox User List.
user.text = username;
Selection.setFocus(message); function cancel() {
gotoAndStop(1); }
function ok() {
var msg = message.text; if (msg.length>0) {
_parent.es.sendMessage("private", msg, [username]); gotoAndStop(1);
} }
function enterPressed() { ok();
}
Sedangkan potongan listing program di atas akan menampilkan popup clip private
yang akan muncul jika user mengklik ganda pada salah satu nama user yang berada di user list, dengan munculnya popup clip private tersebut, user dapat mengirimkan pesan pribadi yang hanya dapat dibaca oleh user yang dipilihnya tersebut.
O K C a n c e l Send to:
Message:
Send Private Message
4.2.2.3.2. Chat Room List
Chat Room List akan menampilkan semua room yang ada di dalam
Chess Zone.
function showRooms() {
var roomlist = es.getRoomList(); RoomList = new Array();
var list = new Array();
var str = es.getZone().numUsers+" users playing chess"; users_playing.text = str;
for (var i = 0; i<roomlist.length; ++i) { var room = roomlist[i];
var protected;
if (!room.Description.attributes.isRoom) {
if (room.attributes.IsPasswordProtected) { protected = " [locked] ";
RoomList.push(room); }
}
roomListBox.setDataProvider(list); showRooms();
}
Potongan listing program di atas akan mengambil data room yang tersimpan di dalam ElektroServer dan menampilkannya di Chat Room List, listing program di atas juga akan memeriksa apakah Room yang ada di Chat Room List diproteksi dengan password. Jika ya, maka nama room akan ditambahkan dengan attribut [locked], contoh : nama room : chess, maka nama yang tertulis di dalam Chat Room List adalah chess[locked], dan untuk dapat mengakses room tersebut, user
harus mengetahui password dari room tersebut. Jika seorang user ingin mengakses suatu room tertentu, maka ia hanya perlu mengklik ganda pada room
akan muncul popup clip joinroom1, yang hanya mengkonfirmasi room yang dipilih user.
O K Ca n c e l
Join Room
Gambar 4.8Popup Clip Join Room 1
var name:String;
name = roomOb.Name.value; roomName.text = name; function ok() {
function cancel() {
delete roomOb; delete name; gotoAndStop(1); }
function enterPressed() { ok();
}
Potongan Listing Program di atas merupakan actionscript yang mengatur popup clip join room 1, jika tombol ok di klik, maka maka clip ini akan menjalankan fungsi ok( ), dan user akan langsung masuk kedalam room yang dipilihnya, jika tombol cancel di klik, maka user akan kembali ke scene sebelumnya, jika user
menekan tombol enter pada keyboard, maka fungsi ok( ) akan dijalankan, sama seperti user mengklik tombol ok.
O K Ca n c e l Enter password:
Join Room
Gambar 4.9Popup Clip Join Room 2
name = roomOb.Name.value; Selection.setFocus(pass); roomName.text = name; function ok() {
_parent.es.joinRoom(name, pass.text); delete roomOb;
delete name; gotoAndStop(1); }
function cancel() {
delete roomOb; delete name; gotoAndStop(1); }
function enterPressed() { ok();
}
Potongan listing program di atas adalah actionscript yang mengatur popup clip join room 2 jika user mengklik tombol ok atau menekan tombol enter pada
keyboard, jika password benar, maka user akan langsung masuk ke dalam room
yang dipilihnya, namun jika password salah maka akan ditampilkan popup clip errorr. Jika user mengklik tombol cancel, maka user akan kembali ke tampilan sebelumnya.
4.2.2.3.3. Game Room List
function showGameRooms() {
var width = gameClipHolder.content.game._width+10; var height = gameClipHolder.content.game._height+10; gameClipList = new Array();
for (var i = 0; i<gameRoomList.length; ++i) { var room = gameRoomList[i];
var name = "game"+i; var clip =
gameClipHolder.content.game.duplicateMovieClip(name, i+1);
var gameName:String = room.Description.attributes.name; clip.name.text = gameName;
Potongan listing program di atas akan menampilkan game room yang telah dibuat oleh user, dengan menampilkan sebuah gambar untuk tiap-tiap game roomnya, di dalam gambar juga tertedapat nama game room. Di dalam aplikasi ini, gambar tersebut dinamai gameclipholder.
Gambar 4.10Gameclipholder
if (room.Description.attributes.playersArrived == 1) { if (col == "white") {
} else if (room.Description.attributes.playersArrived == 2) {
clip.white_clip._visible = true; clip.black_clip._visible = true;
}
Potongan listing program diatas adalah actionscript yang mengatur tampilan
gameclipholder jika game room tersebut baru memiliki satu pemain yang
berwarna hitam, demikian juga sebaliknya, namun jika permainan, telah lengkap memiliki 2 orang pemain, makan gameclipholder yang ditampilkan akan menjadi seperti pada Gambar 4.10.
Gambar 4.11 Satu pemain putih
Gambar 4.12 Satu pemain hitam
function showGameInfo(show, room) { if (!show) {
gameInfo_txt.text = ""; } else {
var msg:String = "";
var atts = room.Description.attributes; msg += "<b>"+atts.name+"</b>"+newline; msg += atts.username+newline
msg += atts.time_minutes+" min, "+atts.time_seconds+" sec"+newline;
tersebut antara lain yaitu user yang membuat Game Room, status waktu permainan dan status penonton.
function rolledOver(room) {
showGameInfo(true, room); }
function rolledOut() {
showGameInfo(false); }
Dengan adanya listing program di atas, maka status informasi tentang Game Room akan ditampilkan jika GameClipHolder di highlight oleh cursor.
Jika seorang user ingin bergabung dengan suatu Game Room, maka ia hanya harus mengklik pada GameClipHolder dari Game Room yang dikehendakinya, setelah user tersebut mengklik GameClipHolder tersebut, maka secara otomatis aplikasi akan menampilkan popupclip join game.
Gambar 4.13Popup clip Join Game tanpa password
Di dalam popupclip join gameuser dapat memilih apakah di dalam game room
tersebut ia ingin menjadi player (pemain) atau spectator (penonton), jika ia memilih mejadi penonton, maka ia hanya dapat menonton permainan dan memberikan komentar-komentar dalam permainan tersebut.
if (IsPasswordProtected != true) { pword_clip._visible = false; }
function cancel() {
gotoAndStop(1); }
function ok() {
_parent.joiningGame = true; if (IsPasswordProtected) {
var password = pword_clip.password.text; } else {
var password = ""; }
var name = _parent.pendingGame.Name.value _parent.es.joinGame(name, password, joinType); }
roomName.text = _parent.pendingGame.Description.attributes.name if (!_parent.pendingGame.Description.attributes.allowSpectators) {
spec._visible = false; }
var radioListener:Object = new Object(); radioListener.click = function(evt:Object) {
joinType = evt.target.selection.data; };
radioGroup.addEventListener("click", radioListener); if (gameFull) {
joinType = "spectator"; player_radio.enabled = false; player_radio.selected = false; spectator_radio.selected = true; } else {
joinType = "player"; }
if (!withinBounds) {
joinType = "spectator"; player_radio.enabled = false; player_radio.selected = false; spectator_radio.selected = true; }
function enterPressed() { ok();
}
gambar 4.13, namun jika password tidak diberikan, maka dalam popupclip join game tidak akan ada textbox tersebut seperti pada gambar 4.12. Jika didalam game room telah terdapat 2 orang pemain, dan Game Rom tersebut mengijinkan
spectator, maka user hanya dapat bergabung sebagai spectator, dan pilihan untuk bergabung sebagai pemain tidak akan dapat dipilih. Jika di dalam Game Room
telah terdapat 2 orang pemain dan Game Room tidak mengijinkan spectator, maka akan ditampilkan pesan bahwa user tidak dapat bergabung dengan Game Room
tersebut.
if (room.Description.attributes.allowSpectators == false) { popItUp = false;
showPopUp("error", "This game is full and does not allow spectators.");
Potongan Listing program di atas adalah actionscript yang menampilkan pesan jika di dalam Game Room telah terdapat 2 orang pemain dan Game Room tidak mengijinkan spectator.
4.2.2.3.4. Chat History
Chat History adalah sebuah textbox yang akan menampilkan seluruh pesan yang dikirimkan antar user, baik pesan itu bersifat public atau private. Jika suatu pesan bersifat public, maka pesan tersebut akan ditampilkan pada textbox
