MEMBUAT APLIKASI PERMAINAN MENYUSUN GAMBAR DENGAN JAVAFX Naskah Publikasi
disusun oleh
Firdaus Bahan
(07.01.2293)
Joko Wijaksono
(07.01.2302)
JURUSAN TEKNIK INFORMATIKA SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AMIKOM YOGYAKARTA 2011
1
2
CREATING APPLICATION PUZZLE GAMES WITH JAVAFX
MEMBUAT APLIKASI PERMAINAN MENYUSUN GAMBAR DENGAN JAVAFX
Firdaus Bahan Joko Wijaksono Jurusan Teknik Informatika
STMIK AMIKOM YOGYAKARTA
ABSTRACT Multimedia is the utilization of computers to create and combine multiplemedia such as text, graphics, audio, and motion pictures (animation and video) by combining links and tools that allow users to navigate, interact, creating, and communicating. Developing Games Applications Pictures is a diversified edugames game applications, where this game can be develop imagination. This application was built using Netbeans IDE 6.8 and using the JavaFX programming language. This game is at aimed at children aged 5-12 years so that children can hone their imagination. This application can be run in every OS that has been contained bundle of JavaFX. Obviously this game is expected to entertain and inspire makers educational games to make the game more interesting and can help anaka in the growth process. Keywords: Edugames, Games, puzzle, JavaFX, Netbeans
3
1. Pendahuluan Permainan merupakan sarana hiburan bagi setiap orang. Permainan tidak hanya dilakukan oleh anak kecil saja, namun banyak juga dilakukan oleh orang dewasa dengan tujuan menghilangkan keletihan akibat rutinitas sehari-hari.
Permainan adalah
suatu
kegiatan
untuk
memuaskan
seseorang/kelompok dalam mencapai target yang diinginkan. Ada banyak jenis permainan, baik permainan yang dimainkan oleh satu orang (individu) hingga permainan yang dilakukan oleh 2 orang atau lebih (grup). Selain itu permainan dapat pula dibedakan dari sifatnya seperti permainan yang melatih fisik pemainnya, permainan yang mendidik (edukasi), interaktif, hingga yang memacu adrenalin(bersifat tantangan).
Permainan dengan sentuhan teknologi menjadi sebuah industri yang besar, hal ini disebabkan oleh banyaknya jumlah gamer (user yang memainkan permainan/game) dan juga jenis-jenis permainan yang begitu banyak variasinya. Tantangan pembuat permainan bukan hanya pada rancangan yang user friendly (pengguna mudah menggunakannya), interface (antarmuka) yang menarik, resource (sumber daya) yang rendah, tetapi juga menekan cost (biaya) serendah mungkin. Dalam perancangan dan pembuatan sebuah permainan modern biaya menjadi faktor yang vital. 2. Landasan Teori 2.1 Pengertian Game Permainan(Game)
adalah
suatu
kegiatan
untuk
memuaskan
seseorang/kelompok dalam mencapai target dan tujuan yang ditetapkan. Permainan merupakan sarana hiburan bagi setiap orang, tidak hanya dilakukan oleh anak kecil saja, namun banyak juga dilakukan oleh orang dewasa dengan tujuan menghilangkan keletihan akibat rutinitas sehari-hari. Untuk membuat sebuah game terlebih dahulu pembuat game harus membuat deskripsi menceritakan game yang dibuat. Para pengembang game komersial biasanya mempersiapkan dokumen- dokumen yang berisi 4
design
game yang sangat panjang sebelum memulai pembuatan game.
Namun design game yang sederhana dapat membuat pembuatan game menjadi lebih menyenangkan. 2.2 JavaFX JavaFX merupakan sebuah bahasa pemograman yang dikenalkan di JavaOne 2007 sebagai bahasa pemograman generasi terbaru dengan platform java. Christopher Oliver dari Sun Microsystems berperan besar sebagai penggagas utama dalam pembuatan JavaFX Script. Pembuatan bahasa JavaFX dimaksudkan untuk membangun dan mengembangkan aplikasi yang kaya fitur atau disebut juga Rich Internet Applications (RIAs). 2.3 Netbeans 6.8 NetBeans
adalah
Integrated
Development
Environment
(IDE)
berbasiskan Java dari Sun Microsystems yang berjalan di atas Swing. Swing adalah sebuah teknologi Java untuk pengembangan aplikasi Desktop yang dapat bejalan di berbagai macam platforms seperti Windows, Linux, Mac OS X and Solaris. Netbeans bersifat modularitas, maksudnya adalah fungsi IDE di sediakan oleh modul-modul. Tiap modul menyediakan fungsi yang didefinisikan dengan baik, seperti dukungan untuk bahasa pemrograman Java, editing, atau dukungan bagi CVS. NetBeans memuat semua modul yang diperlukan dalam pengembangan Java dalam sekali download, memungkinkan pengguna untuk memulai bekerja sesegera mungkin. Modul-modul juga mengijinkan NetBeans untuk bisa dikembangkan.
3. Analisa Dan Perancangan 3.1 Gambaran Umum Permainan “Menyusun Gambar” atau dikenal juga dengan game puzzle adalah permainan yang dimainkan dengan cara merangkaikan
5
sebuah gambar yang telah terpecah menjadi satu gambar yang utuh. Game puzzle merupakan salah satu permainan yang bersifat edukatif, karena pemain dapat melatih imajinasi dalam memainkannya. Permainan ini sangat popular karena telah dikenal sejak lama dan sering dimainkan oleh anak kecil, namun banyak juga orang dewasa yang gemar memainkannya karena bisa menyegarkan pikiran. Permainan Menyusun Gambar dibangun dengan berbasiskan JavaFX. JavaFX merupakan bahasa pemograman yang diperkenalkan oleh Sun Microsystems dalam membangun aplikasi yang Rich Internet Applications (RIAs). Dengan banyak fitur dan dukungan, walau termasuk dalam bahasa pemograman baru, JavaFX menjadi pilihan dalam membuat sebuah aplikasi yang handal. Metodologi yang digunakan untuk pengembangan sistem dalam membangun aplikasi permainan menyusun gambar adalah Waterfall. Metode Waterfall dipilih karena melakukan pendekatan secara sistematis dan urut sehingga pengerjaan proyek lebih terkontrol dan terjadwal dengan baik.
Gambar 3.1 Model Waterfall
6
3.2 Analisis Sistem Analisis
sistem
merupakan
istilah
yang
secara
kolektif
mendeskripsikan fase-fase awal pengembangan sistem. Analisis sistem adalah teknik pemecahan masalah yang menguraikan bagian-bagian komponen dengan mempelajari seberapa bagus bagian-bagian komponen tersebut bekerja dan berinteraksi untuk mencapai tujuan mereka . Analisis sistem dapat juga didefinisikan sebagai penguraian dari suatu sistem informasi yang utuh ke dalam bagian-bagian komponennya dengan maksud untuk mengidentifikasikan dan mengevaluasi permasalahanpermasalahan, kesempatan-kesempatan, hambatan-hambatan yang terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan-perbaikan. Tahapan analisis sistem merupakan tahap fundamental yang sangat menentukan kualitas sebuah aplikasi yang akan dibangun. Tahap analisis sistem ini akan membahas mengenai permasalahan yang dihadapi, ruang lingkup masalah, penganalisaan terhadap data, analisa terhadap perangkat lunak, perangkat keras serta user yang akan menggunakan aplikasi ini, sehingga dapat mempermudah dalam melakukan perancangan dan implementasi 3.3 Perancangan Sistem Perancangan sistem adalah suatu proses yang menggambarkan bagaimana suatu sistem dibangun untuk memenuhi kebutuhan pada fase analisis. Perancangan sistem atau bisa juga disebut sebagai desain sistem dapat pula didefinisikan sebagai teknik pemecahan masalah yang saling melengkapi (dengan analisis sistem) yang merangkai kembali bagianbagian komponen menjadi sistem yang lengkap-harapannya, sebuah sistem yang diperbaiki1.
1
Hanif Al Fatta, 2007,Analisis & Perancangan Sistem Informasi untuk Keunggulan bersaing Perusahaan & Organsasi modern, Andi Offset, Yogyakarta, Hal:44
7
3.3.1 Perancangan Use Case Diagram Use Case adalah deskripsi fungsi dari sistem dari perspektif/ sudut pandang pengguna. Use case bekerja dengan cara mendeskripsikan pengguna aplikasi (user) dengan sistem melalui sebuah skenario yang memperlihatkan apa saja yang dapat dikerjakan oleh sistem tersebut. Use Case diagram memperlihatkan fungsionalitas yang diharapkan dari sebuah sistem, dimana interaksi antara aktor dan sistem diperlihatkan dengan notasi, garis, panah, dan simbol. Pada gambar dibawah ini akan memperlihatkan sebuah Use Case diagram pada aplikasi permainan menyusun gambar.
Gambar 3.2 Use Case Diagram
3.3.2 Perancangan Activity Diagram Activity diagram merupakan diagram yang menggambarkan berbagai alur aktifitas dalam sebuah sistem yang sedang dirancang, bagaimana masing-masing alur berawal, decision yang mungkin terjadi, dan bagaimana mereka berakhir. Activity diagram juga dapat menggambarkan proses paralel yang mungkin terjadi pada beberapa eksekusi. Activity diagram tidak menggambarkan sifat internal dari sebuah sistem dan
8
interaksi antara beberapa sub sistem secara langsung, tetapi lebih menggambarkan proses-proses dan jalur kejadian dari awal pengguna membuka aplikasi sampai akhirnya menutup aplikasi. Berikut gambar activity diagram dalam game menyusun gambar.
Gambar 3.3 Activity Diagram
3.3.3 Perancangan Clas Diagram Class adalah sebuah spesifikasi yang jika di-instanisasi akan menghasilkan sebuah obyek dan merupakan inti dari pengembangan berorientasi objek. Class menggambarkan keadaan (attribute) suatu sistem, sekaligus menawarkan layanan untuk memanipulasi keadaan tersebut (method). Generalisasi adalah relasi pewarisan antara dua Class. Relasi jenis ini memungkinkan suatu kelas mewarisi attribute dan operasi yang dimiliki oleh base Class2. Berikut gambar class diagram dalam game menyusun gambar.
2
Sholiq, 2006, Pemodelan Sistem Informasi Berorientasi Objek dengan UML, Graha Ilmu, Yogyakarta, Hal: 142
9
Gambar 3.4 Class Diagram
10
3.3.4 Perancangan Sequence Diagram
Sequence diagram merupakan diagram yang menggambarkan interaksi antar objek di dalam dan di sekitar sistem (termasuk pengguna, display, dan sebagainya) berupa message yang digambarkan terhadap waktu. Sequence diagram terdiri antar dimensi vertikal (waktu) dan dimensi horizontal (objek-objek yang terkait).
Gambar 3.5 Sequence Diagram Memilih Gambar Puzzle 3.3.5 Perancangan Antarmuka Perancangan antarmuka dibutuhkan untuk mendefinisikan konsep dan komponen-komponen yang ada untuk mewakili keadaan interface dari aplikasi yang akan dibangun. Berikut akan disajikan perancangan antarmuka dari aplikasi yang akan dibangun. A. Struktur Antarmuka. Permainan menyusun
gambar
memiliki
satu
antarmuka
yang
memberikan gambaran menyeluruh mengenai apa yang akan ditampilkan dimonitor komputer. Berikut rancangan antarmuka yang akan dibangun.
11
Gambar 3.9 Struktur Antarmuka No 1 2 3 4 5 6 7 8 9 10 11 12 13 14
Jenis Objek Tombol Tombol Gambar Area Puzzle Tombol Tombol Tombol Tombol Tombol Tombol Tombol Gambar Gambar Gambar
Tabel 3.1 Tabel Komponen Antarmuka Keterangan Berfungsi untuk memutar musik. Berfungsi untuk mematikan musik. Gambar background dengan dimensi 870x653 Tempat meletakan potongan puzzle Berfungsi untuk mengacak gambar. Menyusun potongan gambar menjadi utuh. Menjadikan gambar thumb sebagai gambar puzzle. Berfungsi untuk me-minimaze aplikasi. Berfungsi untuk me-close aplikasi. Tombol navigasi untuk geser gambar thumb ke kiri. Tombol navigasi untuk geser gambar thumb ke kanan. Gambar thumb berada di tengah. Gambar thumb berada di kiri. Gambar thumb berada di kanan.
B. Struktur Potongan Puzzle Sebuah potongan puzzle dibangun dari sebuah persegi dengan memiliki tab pada sisi-sisinya. Tab hanya ada apabila pada sisi tab tersebut terdapat
12
potongan puzzle lainnya. Setiap tab terbuat dari gabungan sebuah elips, sebuah persegi panjang dan dua buah lingkaran. Tab yang berada di sisi atas dan sebelah kiri akan menjorok ke dalam persegi, sedangkan tab yang berada di sisi bawah dan sebelah kanan akan menjorok ke luar persegi. Berikut rancangan potongan puzzle pada permainan menyusun gambar.
Gambar 3.10 Rancangan Potongan Puzzle 4. Implementasi dan Pembahasan 4.1 Implementasi Setelah sistem dianalisis dan didesain secara rinci, maka akan menuju tahap implementasi. Implementasi merupakan tahapan setelah melakukan analisis dan perancangan sistem pada siklus rekayasa perangkat lunak dimana aplikasi siap dioperasikan pada keadaan yang sebenarnya sehingga dari sini akan diketahui apakah program atau aplikasi yang telah dibuat benar-benar dapat menghasilkan keluaran yang sesuai dengan tujuan yang diinginkan. 4.1.1 Implementasi Antarmuka Aplikasi permainan Menyusun Gambar hanya memiliki satu antarmuka yang memberikan gambaran menyeluruh mengenai apa saja yang akan diperlihatkan pada pengguna. Antarmuka utama ini menampilkan gambar
13
puzzle, gambar thumb puzzle, tombol pilih gambar, tombol acak, tombol susun, tombol navigasi kiri-kanan, tombol minimize, tombol close, gambar background, dan tombol ON dan OFF untuk fitur musik. Berikut tampilan dari antarmuka aplikasi permainan Menyusun Gambar.
Gambar 4.1 Antarmuka Permainan Menyusun Gambar 4.1.2. Pilihan Gambar Puzzle Pada aplikasi permainan Menyusun Gambar terdapat berbagai jenis pilihan gambar yang dapat dimainkan sebagai puzzle. Gambar tersebut masing-masing memiliki dimensi 700x300 pixel. Berikut gambar-gambar dapat dimainkan. Tabel 4.1 Tabel Gambar-Gambar Puzzle No
Nama File
1
upin.jpg
2
transformers.jpg
3
mobil.jpg
Gambar
14
4
winnie.jpg
5
barcelona.jpg
6
hellokitty.jpg
7
trex.jpg
8
sayur.jpg
4.2 Pembahasan Aplikasi permainan Menyusun Gambar merupakan permainan sederhana yang memiliki tujuan untuk merangkai potongan-potongan gambar yang teracak menjadi utuh atau tersusun kembali membentuk sebuah gambar. 4.2.1 Desain Background Sasaran pengguna adalah anak berusia 6-12 tahun sehingga desain disesuaikan dengan warna yang identik atau disukai oleh anak kecil yaitu warna-warna cerah contohnya biru, hijau, putih dan orange. Warna-warna yang cenderung gelap diminimalkan atau dihindari. Berikut gambar background (latar belakang) dari aplikasi permainan Menyusun Gambar.
Gambar 4.2 Gambar Background 15
4.2.2 Memilih Gambar Pengguna bisa memilih sebuah gambar dari beberapa pilihan gambar yang disediakan untuk menjadikan gambar tersebut sebagai gambar puzzle sehingga bisa dimainkan. Pada aplikasi permainan Menyusun Gambar terdapat dua buah tombol navigasi yang berfungsi untuk menggeser gambar ke kiri ataupun ke kanan. Setelah menentukan gambar apa yang hendak dimainkan maka pengguna dapat menekan tombol PILIH GAMBAR.
Gambar 4.3 Memilih Gambar Puzzle 4.2.3 Memainkan Puzzle Setelah menentukan gambar apa yang dijadikan sebagai gambar puzzle, pengguna dapat memainkannya dengan menekan tombol ACAK untuk membuat gambar tersebut menjadi beberapa potongan yang terpisah.
Gambar 4.4 Potongan puzzle 4.2.4 Memutar dan Mematikan Musik Aplikasi permainan Menyusun Gambar memiliki fitur musik untuk membuat suasana lebih riang dan gembira. Fitur musik dapat dihidupkan dengan cara
16
menekan tombol ON sedangkan bila ingin mematikan fitur musik pengguna dapat menekan tombol OFF.
Gambar 4.5 Fitur Musik 4.2.5 Kontrol Aplikasi Aplikasi Permainan Menyusun Gambar memiliki tombol close dan tombol minimize. Tombol close berfungsi untuk keluar dari aplikasi sedangkan tombol minimize berfungsi untuk me-minimize aplikasi. Kedua tombol tersebut berada di pojok kanan atas dari aplikasi.
Gambar 4.6 Kontrol Aplikasi 4.3 Pengujian Aplikasi Pengujian merupakan tahapan dimana dilakukan pengujian dari kasus-kasus atau permasalahan pemakaian dilihat melalui sudut pandang pengguna. 1. Memainkan Puzzle Tabel 4.2 Pengujian Memainkan Puzzle No.
1
2
Bahan Uji
Sasaran
Hasil Pengamatan
Gambar Puzzle
Menampilkan gambar di area puzzle dengan dimensi 700x300. Gambar terpotong menjadi berbagai bagian.
Gambar ditampilkan di area puzzle dengan dimensi 700x300. Gambar dapat ditampilkan dengan berbagai potongan.
Menampilkan efek perubahan warna tombol ketika mouse berada di area tombol. Tombol berfungsi untuk
Saat mouse berada di area tombol terjadi perubahan warna pada tombol.
Tombol Acak
17
Saat tombol ditekan maka
Kesimpulan Berhasil Berhasil
Berhasil Berhasil
3
4
Tombol Susun
Potongan Gambar
pengacakan potongan gambar. Menampilkan animasi saat gambar teracak. Menampilkan efek perubahan warna tombol ketika mouse berada di area tombol. Tombol berfungsi untuk pengacakan potongan gambar. Menampilkan animasi saat gambar teracak. Potongan gambar yang tidak berada di tempat yang benar dapat digerakan. Potongan gambar yang berada di tempat yang benar tidak dapat digerakan.
susunan gambar menjadi teracak. Ada animasi saat gambar teracak. Saat mouse berada di area tombol terjadi perubahan warna pada tombol.
Berhasil
Berhasil
Saat tombol ditekan maka susunan gambar menjadi teracak. Ada animasi saat gambar teracak. Potongan gambar dapat digerakan bila tidak berada di tempat yang benar. Potongan gambar tidak dapat digerakan bila berada di tempat yang benar.
Berhasil Berhasil
Berhasil
Berhasil
2. Memilih Gambar Tabel 4.3 Tabel Pengujian Memilih Gambar No.
1
2
Bahan Uji
Tombol Pilih Gambar
Sasaran
Hasil Pengamatan Saat tombol ditekan gambar puzzle akan terganti dengan gambar yang dipilih( gambar thumb yang berada berhasil). Tombol tetap berfungsi walau potongan gambar dalam kondisi teracak. Tombol navigasi kiri ditekan gambar sebelah kiri bergeser ke tengah dan gambar tengah bergeser ke kanan. Tombol navigasi kanan ditekan gambar sebelah kanan bergeser ke tengah dan gambar tengah bergeser ke kiri.
Tombol berfungsi untuk memilih gambar.
Apabila tombol navigasi kiri ditekan gambar sebelah kiri bergeser ke tengah dan gambar tengah bergeser ke kanan. Apabila tombol navigasi Navigasi kanan ditekan gambar Thumb sebelah kanan bergeser ke tengah dan gambar tengah bergeser ke kiri. Menampilkan animasi saat pergantian gambar thumb.
Saat pergantian gambar thumb ada animasi .
18
Kesimpulan
Berhasil
Berhasil
Berhasil
Berhasil
Berhasil
3. Media Musik Tabel 4.4 Pengujian Media Musik No 1 2 3
Bahan Uji Tombol ON Tombol OFF Efek Tombol
Sasaran Tombol ON untuk menyalakan musik. Tombol OFF untuk mematikan musik. Perubahan warna tombol ON/OFF saat mouse diarea tombol ON/OFF.
Hasil Pengamatan Saat tombol ON ditekan musik menyala. Saat tombol OFF ditekan musik berhenti. Saat mouse berada dalam area tombol ON/OFF terjadi perubahan warna.
Kesimpulan Berhasil Berhasil Berhasil
4. Kontrol Aplikasi Tabel 4.5 Pengujian Kontrol Aplikasi No 1
2
Bahan Uji Tombol Close Tombol Minimize
Sasaran
Hasil Pengamatan
Kesimpulan
Tombol Close berfungsi untuk menutup aplikasi Fungsi tombol Minimize untuk meminimize
Keluar dari aplikasi saat tombol close ditekan.
Berhasil
Aplikasi me-minimize saat tombol minimize ditekan.
Berhasil
4.4 Hasil Pengujian Setelah proses pengujian dilakukan maka menghasilkan beberapa kesimpulan sebagai berikut : a) Secara fungsional, aplikasi permainan Menyusun Gambar sudah dapat menghasilkan output yang diharapkan. b) Proses menjalankan aplikasi dirasa cukup lambat. c) Fitur musik, pergantian gambar puzzle, dan animasi pergerakan gambar thumb dinilai kurang responsive dan lambat. 5. KESIMPULAN DAN SARAN
19
5.1. Kesimpulan Kesimpulan yang dapat diambil berdasarkan uraian pada bab sebelumnya yaitu permainan Menyusun Gambar mudah digunakan karena hanya memiliki satu tampilan utama saja yang mencakup semua fitur aplikasi sehingga bagi pemain akan mudah menggunakannya. Permainan ini cocok untuk anak berusia 5-12 tahun karena memberikan mamfaat untuk peningkatan daya imajinasi anak. 5.2 Saran a)
Pengembangan
aplikasi
game
dengan
menggunakan
JavaFX
memungkinkan tampilannya akan menjadi lebih menarik. b) Jangan menggunakan media audio dengan ukuran file yang kecil. c)
Semakin banyak pilihan gambar puzzle maka semakin berat dan lambat kinerja aplikasi yang berjalan.
d) Aplikasi dapat berjalan baik di semua Sistem Operasi Windows. DAFTAR PUSTAKA Al Fatta, Hanif. 2007. Analisis & Perancangan Sistem Informasi untuk Keunggulan Bersaing Perusahaan & Organisasi Modern. Yogyakarta: Penerbit Andi. Sholiq. 2006. Pemodelan Sistem Informasi Berorientasi Objek dengan UML. Yogyakarta: Graha Ilmu. http://javafx.com/ (diakses 10 April 2011). http://jfxpedia.com/ (diakses 10 April 2011). http://learnjavafx.typepad.com/ (diakses 10 April 2011). http://netbeans.org/ (diakses 10 April 2011). 20
