CARD GAME BERBASIS AUGMENTED REALITY

(1)

CARD GAME BERBASIS AUGMENTED

REALITY

Andreaw

Bina Nusantara University, Jakarta, Indonesia

Gibson Sukandi

Bina Nusantara University, Jakarta, Indonesia

Abstrak

Tujuan penelitian ini adalah untuk mengenalkan card game yang menggunakan teknologi

Augmented Reality, merancang battlecard game yang menarik, menghibur, dan juga dapat

mengasah kemampuan berpikir pemain agar dapat memenangkan permainan. M etode penelitian yang digunakan ada dua, yaitu metode analisis dan metode perancangan. M etode analisis yang digunakan berupa kuesioner dan studi literatur. M etode perancangan yang digunakan adalah

waterfall. Hasil yang dicapai adalah suatu aplikasi permainan berbasis Flash dengan

menggunakan teknologi Augmented Reality. Simpulan yang diperoleh adalah dengan adanya aplikasi ini dapat membuat card game menjadi lebih nyata dan menarik. Permainan ini juga dapat mengasah kemampuan berpikir pemain agar dapat menyusun strategi untuk memenangkan permainan.

(2)

1. Pendahuluan

Card game adalah salah satu jenis permainan yang pertama kali diciptakan oleh manusia. Card game merupakan sebuah permainan sederhana yang menggunakan kartu sebagai alat

utamanya dan bisa dimainkan bersama beberapa orang untuk menciptakan interaksi antar

pemain. Namun karena perkembangan dunia komputer yang semakin pesat maka battle

cardgame semakin dilupakan. M unculnya berbagai jenis game pada komputer,

console,danmobile membuat para pemain lebih menyukai game tersebut dan meninggalkan

permainanbattlecard game.

Karena saat ini battle card game semakin ditinggalkan, penulis akan mencoba

memberikan inovasi baru pada batlle card game dengan menggunakan teknologi augmented

reality (AR) sehingga permainan menjadi lebih interaktif dan menarik. Dengan augmented reality

penulis dapat mengembangkan battlecard game menjadi sesuatu yang baru dan berbeda dengan

battlecard game yang ada selama ini.

Augmented Reality adalah teknologi yang mengkombinasikan dunia maya (virtual) dan

dunia nyata (real) yang dibuat oleh komputer. Augmented reality menambahkan objek virtual

seperti grafik, suara, video atau data GPS ke lingkungan seakan merupakan bagian dari

lingkungan sebenarnya sehingga pengguna merasakan objek virtual merupakan bagian dari

lingkungannya. Saat ini augmented reality adalah cara baru yang unik dimana manusia dapat

berinteraksi dengan komputer, karena dapat membawa objek virtual ke lingkungan pengguna,

memberikan pengalaman yang alami dan menyenangkan.

Saat ini augmented reality telah diaplikasikan di banyak bidang seperti arsitektur,

(3)

Teknologi augmentedreality dapat memberikan hal yang baru dalam dunia game saat ini. M embuat pengalaman dalam bermain game menjadi lebih interaktif dan menarik. Hal ini lah yang ingin penulis kembangkan dalam penelitian ini.

2. Metodologi

Ruang lingkup dari penelitian adalah analisa, perancangan dan implementasi. Adapun

pembahasan yang dilakukan adalah sebagai berikut :

− Perancangan − Implementasi

− Evaluasi

2.1. Perancangan

Perancangan sistem yang kami gunakan pada mekanisme sistem game Century War adalah

UM L. Diagram yang digunakan adalah Class Diagram, Use Case, Use Case Narrative, dan

(4)

2.2.1 Class Diagram

(5)

2.2.2 Use Case Diagram

a. Use Case Sistem Permainan Century War

Sistem yang digunakan dari game Century War dimanapengguna harus memilih start game

untuk memulai permainan. Selain itu juga terdapat aktor dan admindimana kedua aktor tersebut

dapat melakukan beberapa aksi terhadap sistem.

Gambar 2U se Case Diagram

(6)

Gambar 3U se Case Diagram

Sistem Permainan Century War pada Admin

2.2.3 Activity Diagram

Activity Diagram menjelaskan secara lebih detail mengenai urutan proses yang terjadi

(7)

1. Activity Diagram Add Card

(8)

(9)

Gambar 5Activity Diagram Edit Card

(10)

Gambar 6Activity Diagram Delete Card

4. Activity Diagram Start Game

(11)

5. Activity Diagram Load Game

Gambar 8 Activity Diagram Load Game

(12)

Gambar 9 Activity Diagram Tutorial Game

7. Activity Diagram Exit Game

Gambar 10Activity Diagram Exit Game

(13)

Gambar 11Activity Diagram View Credit

(14)

Gambar 12Activity Diagram Customize Game

(15)

Gambar 13Activity Diagram Save Game

11. Activity Diagram Leave Game

(16)

12. Activity Diagram End Turn

Gambar 15Activity Diagram End Turn

13. Activity Diagram Use Equipment

(17)

14. Activity Diagram Use Spell Cards

Gambar 17Activity Diagram Spell Cards

15. Activity Diagram Miss

(18)

16. Activity Diagram Counter Attack

Gambar 19Activity Diagram Counter Attack

17. Activity Diagram Attack

(19)

18. Activity Diagram Play Game Ga mb ar 21A ctivi ty Dia gram Play Game

(20)

2.2.4 Sequence Diagram

1. Sequence Diagram Add Card

Gambar 22Sequence Diagram Add Card

(21)

Gambar 23Sequence Diagram Edit Card

3. Sequence Diagram Delete Card

Gambar 24Sequence Diagram Delete Card

(22)

Gambar 25Sequence Diagram Start Game

5. Sequence Diagram Load Game

Gambar 26Sequence Diagram Load Game

(23)

Gambar 27Sequence Diagram Tutorial

7. Sequence Diagram Exit Game

Gambar 28Sequence Exit Game

(24)

Gambar 29 Sequence View Credit

9. Sequence Diagram Customize Game

Gambar 30Sequence Customize Game

(25)

Gambar 3.57Sequence Save Game

11. Sequence Diagram Leave Game

Gambar 31Sequence Leave Game

(26)

Gambar 32Sequence End Turn

13. Sequence Diagram Use Equipment

Gambar 33Sequence Use Equipment

(27)

Gambar 34Sequence Use Spell Cards

15. Sequence Diagram Miss

Gambar 35Sequence Miss

(28)

Gambar 36Sequence Counter Attack

17. Sequence Diagram Attack

Gambar 37Sequence Attack

2.2. Implementasi

Untuk dapat memainkan permainan Century War, terdapat beberapa prosedur

penggunaan untuk pengguna dan admin dapat menjalankan permainan secara maksimal, antara

lain:

(29)

Untuk dapat menggunakan website Century War, admin harus mengetahui halaman apa

saja yang terdapat pada website Century War beserta fungsi-fungsinya untuk dapat menjalankan

website tersebut. Admin harus melakukan instalasi phpMyadmin dan Adobe Dreamweaver CS5

terlebih dahulu, kemudian pengguna dapat mengakses website tersebut dengan URL

http://localhost/Century_War/index.php.

a. Halaman M enu Utama

Halaman menu utama ini adalah halaman yang ditampilkan pertama kali ketika admin

mengakses website Century War tersebut. Pada halaman menu utama ini terdapat tiga menu

yaitu Add Card, Edit Card, dan Delete Card.

Gambar 38 Halaman Menu Utama

b. Halaman Add Cards

Halaman ini menampilkan halaman pemasukan data kartu yang baru dimana halaman ini

(30)

Gambar 39 Halaman Menu Add Cards

1. Halaman Armor Add Cards

Halaman ini menampilkan form untuk admin dapat memasukkan data armoryang baru. Di

dalam tampilan tersebut terdapat tombol Save untuk menyimpan data yang akan dimasukkan

oleh admin, jika data tidak valid maka akan menampilkan pesan agar admin dapat mengetahui

dimana data yang salah, jika data valid maka akan menampilkan pesan dengan nama kartu yang

(31)

Gambar 40 Halaman Tampilan Menu Add Cards

(32)

(Error Message)

(data berhasil dimasukkan)

(33)

2. Halaman Weapon Cards

Halaman ini menampilkan form untuk admin dapat memasukkan data weaponyang baru. Di

dalam tampilan tersebut terdapat tombol Save untuk menyimpan data yang akan dimasukkan

oleh admin, jika data tidak valid maka akan menampilkan pesan agar admin dapat mengetahui

dimana data yang salah, jika data valid maka akan menampilkan pesan dengan nama kartu yang

akan disimpan ke dalam basis data.

(34)

Gambar 45 Halaman Tampilan Menu Add Weapon Cards

(error message)

Gambar 46 Halaman Tampilan Menu Add Weapon Cards

(35)

Gambar 47 Halaman Tampilan Menu Weapon Cards

(klik tombol Save)

c. Halaman Edit Cards

Halaman ini menampilkan halaman ubah data kartu dimana halaman ini terdapat tiga menu

(36)

Gambar 48 Halaman Tampilan Menu Edit Cards

1. Halaman Edit Spell Cards

Halaman ini menampilkan data kartu spell dan ada tombol Edit. Admin harus memilih data

kartu mana yang akan diubah dengan menekan tombol edit yang ada di sebelah kanan. Setelah

itu admin akan ke halaman form untuk dapat mengubah data spell yang baru. Di dalam tampilan

tersebut terdapat tombol Save, setelah selesai mengubah data kartu. Jika valid, maka data kartu

akan berhasil diubah dan diberikan pesan nama kartu berhasil diubah. Jika tidak, maka akan

(37)

Gambar 49 Halaman Tampilan Menu Edit Spell Cards

(38)

(error message)

(39)

2. Halaman Edit Weapon Cards

Halaman ini menampilkan data kartu Weapon dan ada tombol Edit. Admin harus memilih

data kartu mana yang akan diubah dengan menekan tombol edit yang ada di sebelah kanan.

Setelah itu admin akan masuk ke halaman form untuk dapat mengubah data weapon yang baru.

Di dalam tampilan tersebut terdapat tombol Save, setelah selesai mengubah data kartu. Jika

valid, maka data kartu akan diubah dan diberikan pesan nama kartu berhasil diubah. Jika tidak,

(40)

Gambar 54 Halaman Tampilan Menu Edit Weapon Cards

(41)

(error message)

(42)

Gambar 58 Halaman Tampilan Edit Weapon Cards

3. Halaman Edit Armor Cards

Halaman ini menampilkan data kartu armor dan ada tombol Edit. Admin harus memilih data

kartu mana yang akan diubah dengan menekan tombol edit yang ada di sebelah kanan. Setelah

itu admin akan ke halaman form untuk dapat mengubah data armor yang baru. Di dalam

tampilan tersebut terdapat tombol Save, setelah selesai mengubah data kartu. Jika valid, maka

data kartu akan berhasil diubah dan diberikan pesan nama kartu berhasil diubah. Jika tidak, maka

(43)

Gambar 59 Halaman Tampilan Menu Edit Armor Cards

(44)

(error message)

(45)

d. Halaman Delete Card

Halaman ini menampilkan halaman hapus data kartu dimana halaman ini terdapat tiga menu

yaitu Spell Cards, Armor Cards, dan Weapon Cards

(46)

1. Halaman Delete Spell Cards

Halaman ini menampilkan halaman untuk menghapus data kartu pada spell, sehingga admin

dapat menghapus data kartu yang ada pada basis data. Untuk menghapus admin harus memilih

data kartu yang akan dihapus dan mengklik tombol Delete yang ada di sebelah kanan. Jika admin

memilih Ok maka data akan terhapus pada basis data, jika Cancel maka admin akan kembali ke

halaman delete spell cards.

(47)

Gambar 66 Halaman Tampilan Menu Delete Spell Cards

(klik tombol Delete)

Gambar 67 Halaman Tampilan Menu Delete Spell Cards

(48)

2. Halaman Delete Weapon Cards

Halaman ini menampilkan halaman untuk menghapus data kartu pada weapon, sehingga

admin dapat menghapus data kartu yang ada pada basis data. Untuk menghapus admin harus

memilih data kartu yang akan dihapus dan mengklik tombol Delete yang ada di sebelah kanan.

Jika admin memilih Ok maka data akan terhapus pada basis data, jika Cancel maka admin akan

kembali ke halaman delete spell cards.

(49)

Gambar 69 Halaman Tampilan Delete Weapon Cards

Gambar 70 Halaman Tampilan Delete Weapon Cards

(50)

3. Halaman Delete Armor Cards

Halaman ini menampilkan halaman untuk menghapus data kartu pada armor, sehingga admin

dapat menghapus data kartu yang ada pada basis data. Untuk menghapus admin harus memilih

data kartu yang akan dihapus dan mengklik tombol Delete yang ada di sebelah kanan. Jika admin

memilih Ok maka data akan terhapus pada basis data, jika Cancel maka admin akan kembali ke

halaman delete spell cards.

(51)

Gambar 72 Halaman Tampilan Menu Delete Armor Cards

Gambar 73 Halaman Tampilan Delete Armor Cards

(52)

2.2.2 Prosedur Penggunaan untuk pengguna

Terdapat beberapa prosedur untuk dapat memainkan permainan Century War ini mulai

dari menjalankan permainan sampai dengan fungsi-fungsi yang ada dalam permainan, sehingga

pengguna dapat menjalankan permainan secara maksimal.

a. M enu Utama

Halaman menu utama adalah halaman yang ditampilkan pertama kali ketika permainan

Century War dijalankan beserta fungsi-fungsinya. Untuk menjalankan permainan Century War,

pengguna harus melakukan instalasi Flash Player 11 terlebih dahulu, kemudian pengguna dapat

mengklik permainan Century War.

(53)

b. Start Game

Halaman ini pertama kali akan menampilkan input nama pengguna yang terdapat dua tombol

yaitu tombol Play Gamedan Tombol Back. Tombol Play Gameakan melanjutkan ke dalam

halaman permainan bila data valid. Jika tidak, maka pengguna akan diberikan pesan error,

sedangkan tombol Back akan mengembalikan ke halaman menu utama. Pada halaman permainan

terdapat dua tombol yaitu tombol Leave Game dan tombol Save Game. Tombol Leave Game

berfungsi untuk keluar dari permainan sedangkan tombol Save Game berfungsi untuk

menyimpan data permainan yang sedang berlangsung. Jika permainan berakhir maka akan keluar

pop up Game Over pada tampilan permainan.

(54)

Gambar 76 Halaman Input Player

(error message)

(55)

Gambar 78 Halaman Permainan Century War

(Game Over)

c. Load Game

Pada halaman ini akan ditampilkan halaman untuk memuat permainan CenturyWar sehingga

pengguna dapat melanjutkan permainan ketika menyimpan pada permainan sebelumnya dan

(56)

Gambar 79 Halaman Load Game Century War

d. Tutorial

Halaman ini akan menampilkan halaman tutorial bagi pengguna yang tidak mengerti dalam

permainan Century War, sehingga dapat memudahkan pengguna dalam bermain Century

Wardan tombol Back untuk kembali ke halaman menu utama.

(57)

e. View Credit

Halaman ini menampilkan informasi credit dari pembuat game dan semua pihak yang

mendukung di dalam pembuatannya dalam bentuk animasi. Di tengah layar terdapat sejumlah

nama pembuat.

Gambar 81 Halaman View Credit Centu ry War

f. Customize

Halaman ini merupakan halaman dimana pengguna dapat mengatur muncul atau tidaknya

suara dan resolusi yang digunakan oleh aplikasi. Di dalam halaman ini terdapat ikon suara, ikon

full screendanikon restore. Pada halaman ini juga terdapat tombol Save untuk menyimpan hasil

(58)

Gambar 82 Halaman Customize Century War

Gambar 83 Halaman Customize Century War

g. Exit Game

Pop-upini ditampilkan ketika pengguna akan menutup aplikasi dan ketika pengguna ingin

meninggalkan permainan. Jika pengguna memilih yes maka pengguna akan keluar dari program

(59)

Gambar 84 Halaman Exit Game Century War

2.3. Evaluasi

2.3.1 Evaluasi Segi Multimedia

1. Teks

Penggunaan teks sering digunakan dalam permainan Century War. Teks yang digunakan

terdapat pada setiap bagian permainan dari menu utama, play game, load game, tutorial, view

credit, customize, dan exit game.

2. Gambar

Peletakan gambar juga sering digunakan dalam permainan ini. Penggunaan gambar terdapat

pada background yang ada pada menu utama, view credit, dan customize.

3. Video

Pada permainan ini, peletakan video terdapat pada tutorial dalam permainan Century War.

(60)

Audio digunakan pada saat menu utama dijalankan dan pada saat memilih menu-menu

sebagai umpan balik atas aksi yang dilakukan pemain.

5. Animasi

Animasi yang digunakan pada permainan ini terdapat pada saat permainan berlangsung

ketika ada aksi menyerang, serangan balik, dan menghindar.

2.3.2 Evaluasi Segi Interaksi Manusia dan Komputer

Evaluasi permainan Century War berdasarkan IM K dengan menggunakan delapan aturan

emas sebagai berikut:

1. Konsistensi

Konsistensi yang telah dilakukan pada permainan ini terlihat pada tombol yang tetap pada

posisinya dan menggunakan font dan warna yang sama pada semua tombol.

Gambar 85 Contoh Konsistensi Dalam Permainan Century War

2. M elayani kebutuhan universal

Petunjuk bagi pengguna awam untuk kebutuhan universal diberikan tutorial pada permainan

(61)

Gambar 86 Contoh Kegunaan Universal (Tutorial)

Gambar 87 Contoh Kegunaan Universal (S hortcut)

3. M enawarkan umpan balik yang informatif

Umpan balik yang ada dalam permainan ini dengan memberikan efek ketika pilihan menu di

(62)

Gambar 88 Contoh Umpan Balik Informatif

4. M erancang dialog untuk menghasilkan keadaan akhir

Dialog penutupan yang ada dalam permainan ini terdapat pada akhir permainan.

(63)

Gambar 90 Contoh Merancang Dialog untuk Menghasilkan Keadaan Akhir 2

(64)

5. M encegah kesalahan

Untuk dapat mencegah kesalahan dalam permainan ini, maka akan muncul pop up ketika

pemain menekan tombol leave game maupun pada tombol Save pada halaman customize

game, tombol Exit Game dan tombol Save yang ada pada halaman admin untuk dapat

mencegah kesalahan yang mungkin terjadi.

Gambar 92 Contoh Mencegah Kesalahan 1

(65)

Gambar 94 Contoh Mencegah Kesalahan 3

6. M emungkinkan pembalikan aksi yang mudah

Dengan memberikan pilihan backpada halaman Play Game. M embuat pemain dapat kembali

ke halaman menu utama dengan mudah.

(66)

7. M endukung pusat kendali internal

Pada permainan ini, pemain dapat mengakses semua menu dengan mudah dan juga pemain

dapat mengatur konfigurasi pada halaman customize game seperti mengatur tampilan dan

suara.

Gambar 96 Contoh Pusat kendali Internal

8. M engurangi beban ingatan jangka pendek

Dalam permainan ini, kontrol yang digunakan sangat mudah untuk dimengerti, selain itu

permainan ini juga menggunakan simbol-simbol dan tampilan yang mudah sehingga pemain

(67)

Gambar 97 Contoh Mengurangi Beban Ingatan Jangka Pendek

3. Kesimpulan

Kesimpulan yang dapat diberikan berdasarkan hasil analisis,perancangan, dan

implementasi permainan pada Century War adalah sebagai berikut :

1. Dengan menggunakan teknologi Augmented Reality, permainan card game akan menjadi

lebih nyata dan menarik sehingga membuat pemain lebih terhibur.

2. Dalam permainan ini, pemain dapat mengasah kemampuan berpikir dan menyusun strategi

agar dapat memenangkan permainan.

3. Perhitungan dalam permainan menjadi lebih efisien karena telah dilakukan oleh komputer.

4. Permainan ini telah menerapkan delapan aturan emas, serta terbukti sudah dapat dimainkan

(68)

Daftar Pustaka

[1] Adieb. (2011). Magic: The Gathering pun Hadir di Indonesia Bermain!. Diperoleh tanggal 18 Oktober 2011, dari

http://indonesiabermain.com/magic-the-gathering-pun-hadir-di-indonesia-bermain/.

[2] Barclay, K. and Savage, J. (2004). Object Oriented Design with UML and Java. UK: Elsevier Ltd.

[3] BoardGameGeek. (1993). Magic: The Gathering. Diperoleh tanggal 18 Oktober 2011, dari

http://boardgamegeek.com/boardgame/463/magic-the-gathering.

[4] BoardGameGeek. (1996). Yu-Gi-Oh! Trading Game Card. Diperoleh tanggal 18 Oktober 2011, dari http://boardgamegeek.com/boardgame/4154/yu-gi-oh-trading-card-game.

[5] BoardGameGeek. (2002). Bang!. Diperoleh tanggal 18 Oktober 2011, dari

http://boardgamegeek.com/boardgame/3955/bang.

[6] Connoly, T. M . and Begg, C. E. (2002). Database System : A Practical Approach to Design,

Implementation, and Management. (3rd Edition). USA: Addison Wesley Inc.

[7] Furht, B. (2011). Handbook of Augmented Reality. New York: Springer.

[8] Galitz, W. O. (2002). The Essential Guide to User Interface Design An Introduction to Gui

Design Principles and Techniques. New York: Wiley.

[9] Graessle, P., Baumann, H., and Baumann, P. (2005). UML 2.0 in Action: A project based

tutorial A detailed and practical walk through showing how to apply UML to real world development projects. Birmingham: Packt Publishing Ltd.

[10] Habgood, J., Nielsen, N., Crossley, K., and Rijks, M . (2010). The Game Maker’s

Companion Game Development: The Journey Continues. USA: Apress.

[11] Hoffer, J. A., Prescot, M . B., and M c Fadden, F. R. (2005). Modern Database Management. (4th Edition). USA: Prentice Hall.

[12] Kai. (2011). Bang!. Diperoleh tanggal 20 Oktober 2011 dari

http://www.meoplesmagazine.com/2011/02/26/bang/.

[1] Li, Z. N. and Drew, M . S. (2004). Fundamentals of Multimedia. New Jersey: Pearson Education.

[13] Pardew, L. (2004). Beginning Illustration and Storyboarding for Games. USA: Thomson Course Technology PTR.

(69)

[14] Pressman, R. S. (2010). Software Engineering : A Practitioner’s Approach. (7th Edition). New York: McGraw Hill Companies Inc.

[15] Rogers, S. (2010). Level Up: The Guide to Great Video Game Design. UK: Willey.

[16] Rumbaugh, J., Jacobson, I., and Booch, G. (2004). Unified Modeling Language Reference M anual. (2nd Edition). USA: Addison Wesley.

[17] Samius. (2011). Paper-Rock-Fire-Ice-Air-Earth. Diperoleh tanggal 18 Oktober 2011, dari

http://my.ddo.com/samiusbot/2011/06/08/paper-rock-fire-ice-air-earth.

[18] Schell, J. (2008). The Art of Game Design. USA: M organ Kaufmann Publisher.

[19] Shneiderman, B., Plaisant, C., Cohen, M ., and Jacobs, S. (2010). Designing the User

Interface: Strategies for Effective Human -Computer Interaction. (5th Edition). USA: Addison Wesley.

[20] Suri, H. and Prayaga, L. (2007). Beginning Game Programming with Flash. USA: Thomson.

[21] Sloper, T. Game Design Outline. Diperoleh tanggal 01 Desember 2011, dari http://www.sloperama.com/.

[22] Transmote. FLARManager: Augmented Reality in Flash. Diperoleh tanggal 01 Desember 2011, dari http://words.transmote.com/wp/flarmanager/.

[23] Turban, E., Rainer, R. K., and Potter, R. (2003) Introduction to Information Technology, (3rd Edition). USA: Wiley.

[24] Vaughan, T. (2010). Multimedia Making It Work. (8th Edition). New York: M cGraw-Hill.

[25] Whitten, J. L. and Bentley, L. D. (2005). System Analysis and Design Methods. (7th Edition). New York: M cGraw-hill.