1

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

2

3

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

4

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

5

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

6

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

7

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 permasalahan-

permasalahan, 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 bagian-

bagian 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

8

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

9

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

10

Gambar 3.4 Class Diagram

11

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.

12

Gambar 3.9 Struktur Antarmuka

Tabel 3.1 Tabel Komponen Antarmuka No Jenis Objek Keterangan 1 Tombol Berfungsi untuk memutar musik. 2 Tombol Berfungsi untuk mematikan musik. 3 Gambar Gambar background dengan dimensi 870x653 4 Area Puzzle Tempat meletakan potongan puzzle 5 Tombol Berfungsi untuk mengacak gambar. 6 Tombol Menyusun potongan gambar menjadi utuh. 7 Tombol Menjadikan gambar thumb sebagai gambar puzzle. 8 Tombol Berfungsi untuk me-minimaze aplikasi. 9 Tombol Berfungsi untuk me-close aplikasi.

10 Tombol Tombol navigasi untuk geser gambar thumb ke kiri. 11 Tombol Tombol navigasi untuk geser gambar thumb ke kanan. 12 Gambar Gambar thumb berada di tengah. 13 Gambar Gambar thumb berada di kiri. 14 Gambar 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

13

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

14

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 Gambar

1 upin.jpg

2 transformers.jpg

3 mobil.jpg

15

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

16

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

17

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. Bahan Uji Sasaran Hasil Pengamatan Kesimpulan

1 Gambar Puzzle

Menampilkan gambar di area puzzle dengan dimensi 700x300.

Gambar ditampilkan di area puzzle dengan dimensi 700x300.

Berhasil

Gambar terpotong menjadi berbagai bagian.

Gambar dapat ditampilkan dengan berbagai potongan. Berhasil

2 Tombol Acak

Menampilkan efek perubahan warna tombol ketika mouse berada di area tombol.

Saat mouse berada di area tombol terjadi perubahan warna pada tombol. Berhasil

Tombol berfungsi untuk Saat tombol ditekan maka Berhasil

18

pengacakan potongan gambar.

susunan gambar menjadi teracak.

Menampilkan animasi saat gambar teracak.

Ada animasi saat gambar teracak. Berhasil

3 Tombol Susun

Menampilkan efek perubahan warna tombol ketika mouse berada di area tombol.

Saat mouse berada di area tombol terjadi perubahan warna pada tombol. Berhasil

Tombol berfungsi untuk pengacakan potongan gambar.

Saat tombol ditekan maka susunan gambar menjadi teracak.

Berhasil

Menampilkan animasi saat gambar teracak.

Ada animasi saat gambar teracak. Berhasil

4 Potongan Gambar

Potongan gambar yang tidak berada di tempat yang benar dapat digerakan.

Potongan gambar dapat digerakan bila tidak berada di tempat yang benar. Berhasil

Potongan gambar yang berada di tempat yang benar tidak dapat digerakan.

Potongan gambar tidak dapat digerakan bila berada di tempat yang benar. Berhasil

2. Memilih Gambar

Tabel 4.3 Tabel Pengujian Memilih Gambar

No. Bahan Uji Sasaran Hasil Pengamatan Kesimpulan

1 Tombol Pilih Gambar

Tombol berfungsi untuk memilih gambar.

Saat tombol ditekan gambar puzzle akan terganti dengan gambar yang dipilih( gambar thumb yang berada berhasil).

Berhasil

Tombol tetap berfungsi walau potongan gambar dalam kondisi teracak.

Berhasil

2 Navigasi Thumb

Apabila tombol navigasi kiri ditekan gambar sebelah kiri bergeser ke tengah dan gambar tengah bergeser ke kanan.

Tombol navigasi kiri ditekan gambar sebelah kiri bergeser ke tengah dan gambar tengah bergeser ke kanan.

Berhasil

Apabila tombol navigasi kanan ditekan gambar sebelah kanan bergeser ke tengah dan gambar tengah bergeser ke kiri.

Tombol navigasi kanan ditekan gambar sebelah kanan bergeser ke tengah dan gambar tengah bergeser ke kiri.

Berhasil

Menampilkan animasi saat pergantian gambar thumb.

Saat pergantian gambar thumb ada animasi . Berhasil

19

3. Media Musik

Tabel 4.4 Pengujian Media Musik

No Bahan Uji Sasaran Hasil Pengamatan Kesimpulan

1 Tombol ON

Tombol ON untuk menyalakan musik.

Saat tombol ON ditekan musik menyala. Berhasil

2 Tombol OFF

Tombol OFF untuk mematikan musik.

Saat tombol OFF ditekan musik berhenti. Berhasil

3 Efek Tombol

Perubahan warna tombol ON/OFF saat mouse diarea tombol ON/OFF.

Saat mouse berada dalam area tombol ON/OFF terjadi perubahan warna.

Berhasil

4. Kontrol Aplikasi

Tabel 4.5 Pengujian Kontrol Aplikasi

No Bahan Uji Sasaran Hasil Pengamatan Kesimpulan

1 Tombol Close

Tombol Close berfungsi untuk menutup aplikasi

Keluar dari aplikasi saat tombol close ditekan. Berhasil

2 Tombol Minimize

Fungsi tombol Minimize untuk me-minimize

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

20

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).