berlangsung, agar siswa dan guru memperoleh informasi feedback mengenai kemajuan yang telah dicapai.
3.3. Perancangan Aplikasi
Pada perancangan aplikasi education game untuk pengajaran operasi hitung aljabar pada siswa SMP ini penulis menggunakan empat tahapan perancangan yaitu:
perancangan dengan Diagram Pohon Tree Chart, perancangan dengan FlowChart, dan perancangan dengan storyboard.
3.3.1 Perancangan Diagram Pohon Tree Chart
Adapun diagram pohon untuk Perancangan Aplikasi Education Game untuk pembelajaran aljabar persamaan linear ini dapat dilihat pada Gambar 3.2.
Menu Utama
Mulai Cara Bermain
Mode Latihan Nilai tertinggi
Keluar Mudah
Sedang Sulit
Mudah Sedang
Sulit
Lv 1 Lv 2
Lv 3 Lv 4
Lv 5 Lv 6
Lv 7 Lv 8
Lv 9 Lv 10
Credit
Gambar 3.2 Diagram Pohon Aplikasi
3.3.2 Perancangan Flowchart
Flowchart adalah diagram yang menunjukan alur data melalui program atau sistem
penanganan informasi dan operasi-operasi yang dikenakan pada data pada titik-titik yang penting di sepanjang jalur. Flowchart menggunakan anotasi dan lambang,
misalnya segi empat, belah ketupat dan oval untuk menyatakan berbagai operasi. Garis dan ujung panah menghubungkan lambang-lambang tersebut untuk
menunjukkan arah arus data dari satu titik ke titik lain. Sebagai diagram grafis yang menunjukkan program atau sistem lainnya, flowchart berguna sebagai sarana
pembantu untuk menunjukkan bagaimana bekerjanya program yang diusulkan dan sebagai sarana untuk memahami operasi-operasi sebuah program.
Tabel 3.1 Simbol-simbol Flowchart
Simbol Nama
Fungsi TERMINATOR
Permulaanakhir program
GARIS ALIR FLOW LINE
Arah aliran program
PREPARATION
Proses inisialisasipemberian Hargaawal
PROCESS
Proses perhitunganproses pengolahan data
INPUTOUTPUT DATA
Proses inputoutput data, parameter, informasi
PREDEFINED PROCESS
SUB ROGRAM
Permulaan sub programproses menjalankan sub program
DECISION
Perbandingan pernyataan, penyeleksian data yang memberikan pilihan untuk
langkah selanjutnya
Tabel 3.1 Simbol-simbol Flowchart lanjutan
ON PAGE CONNECTOR
Penghubung bagian-bagian Flowchart yang berada pada satu halaman
OFF PAGE CONNECTOR
Penghubung bagian-bagian Flowchart yang berada pada halaman berbeda
3.3.2.1 Flowchart Aplikasi
Pada flowchart aplikasi akan ditampilkan bagaimana sistem bekerja secara keseluruhan. Dapat dilihat bahwa pada tampilan menu utama terdapat 6 pilihan menu,
dan setiap menu memiliki fungsi masing-masing.
Mulai
Menu Utama
Mulai?
Cara Bermain?
Mode Latihan?
Nilai Tertinggi?
Credit
Selesai Keluar
Eksekusi Game
Kembali ke menu utama?
Halaman Cara Bermain
Kembali ke menu utama?
Kembali ke menu utama?
Halaman Nilai Tertinggi
Kembali ke menu utama?
Kembali ke menu utama?
Credit Ya
Tidak Ya
Ya
Ya
Ya Ya
Ya
Ya
Ya Ya
Tidak
Tidak
Tidak
Tidak Tidak
Tidak
Tidak Tidak
Halaman mode latihan
Gambar 3.3 Flowchart Aplikasi
Dari flowchart tersebut dapat dijelaskan sebagai berikut: 1. Apabila user memilih menu “mulai” maka proses eksekusi game akan dimulai.
Proses eksekusi game dapat dilihat dalam pembahasan 3.3.2.1 flowchart Eksekusi Game. Jika user ingin kembali ke menu utama, user dapat kembali
ke menu utama. 2. Jika user memilih menu “cara bermain”, maka user akan pergi ke halaman
cara bermain dan user dapat kembali ke menu utama. 3. Jika user memilih menu “mode latihan”, maka user akan pergi ke halaman
mode latihan dan dapat kembali ke menu utama. 4. Jika user memilih menu “nilai tertinggi”, maka user akan pergi ke halaman
nilai tertinggi yang dapat dilihat pada pembahasan 3.3.2.6 Flowchart Nilai Tertinggi.
5. Jika user memilih menu “credit”, maka user akan pergi ke halaman credit dana dapat kembali ke menu utama.
6. Jika user memilih kelima menu yang telah disebutkan di atas, maka artinya user
dapat keluar dari aplikasi.
3.3.2.2 Flowchart Eksekusi Game
Pada flowchart tahap ini akan terlihat proses saat game dieksekusi dimulai dari pemasukkan nama dan pemilihan tingkat kesulitan, masuk ke level demi level hingga
akhirnya mencapai akhir permainan.
Mulai
Input Nama dan tingkat
kesulitan Halaman input
nama dan tingkat kesulitan
Halaman tutorial awal
Level habis? Area
Permainan
Halaman ending
Output Total Nilai dan
Reward
Selesai Ya
Tidak
Gambar 3.4 Flowchart Eksekusi Game
Dari flowchart tersebut dapat dijelaskan sebagai berikut: 1. User akan memasukkan nama dan tingkat kesulitan.
2. Kemudian user akan melihat sedikit tutorial pada halaman tutorial awal. 3. Selanjutnya user akan memasuki area permainan yang terdiri dari 10 level.
Area permainan dapat dilihat pada pembahasan 3.3.2.3 Flowchart Area Permainan.
4. Apabila level telah mencapai level 10 maka akan muncul halaman ending dengan output total nilai dan mendapatkan reward.
3.3.2.3 Flowchart Area Permainan
Pada flowchart ini akan terlihat proses yang terjadi pada saat user mulai memasuki area permainan. User akan diberikan soal yang beragam dan ketika user memasukkan
jawaban, maka akan terjadi proses penambahan skor atau pengurangan skor.
Mulai i=1
Total_medali = “” Total_nilai = 0
“Level”+i
Waktu mulai Total_soal = 0
Soal_benar = 0 Soal_salah = 0
Nilai= 0 Medali = “”
Medali Perunggu, Medali Perak, Medali Emas
Input jawaban Benar?
Waktu Habis?
Soal_benar++ Nilai = nilai + 10
Soal_salah++ Nilai = nilai - 5
Total_soal++
nilai medali perak
nilai medali emas nilai medali
perunggu
i 10? Waktu Habis?
Total_soal++
Medali =”perunggu”
Medali=”perak” Medali =”emas”
Lanjut? Coba lagi?
Selesai Total_Medali = total_Medali
+ medali Total_nilai= Total_nilai+nilai
i++ Ya
Ya Ya
Ya Ya
Ya Ya
Ya Tidak
Tidak
Tidak
Tidak
Tidak Tidak
Tidak Tidak
Ya
Rekam nilai ke daftar nilai tertinggi
Acak soal
Gambar 3.5 Flowchart Area Permainan
Dari flowchart tersebut dapat dijelaskan sebagai berikut:
1. Mula-mula akan didefinisikan nilai i =1, “total_medali” tidak ada, dan “total_nilai” dengan 0. Variabel i diidentifikasikan sebagai level saat ini
mengingat setiap level memiliki proses yang sama dengan soal yang beragam. 2. Level i, akan dieksekusi. Variabel i bernilai 1 artinya level 1 akan dimulai.
3. Pada setiap level akan didefinisikan “total_soal”, soal yang dijawab dengan benar, soal yang dijawab salah, “nilai” untuk level saat ini dan “Medali”. Pada
awal level semua masih bernilai 0. 4. Setiap level memiliki nilai minimal yang harus dipenuhi yaitu untuk
mendapatkan medali. Akan didefinisikan nilai minimum untuk mendapatkan medali yaitu “medali_perunggu”, ” medali_perak” dan ” medali_emas”.
5. Waktu dimulai. 6. Soal akan diacak dan ditampilkan. Proses pengacakan soal dapat dilihat pada
pembahasan 3.2.3.4 Flowchart Acak Soal. 7. User akan memasukkan jawaban dan sistem akan memeriksa apakah jawaban
benar atau salah. Jika jawaban benar maka nilai akan bertambah 10, dan soal yang dijawab dengan benar akan bertambah 1. Sebaliknya jika jawaban salah
maka nilai akan berkurang 5 dan soal yang dijawab dengan salah akan bertambah 1. Total soal yang telah dikerjakan juga bertambah 1.
8. Selanjutnya kembali ke tahap 4, soal kembali diacak dan ditampilkan, hingga waktu habis.
9. Setelah waktu habis, “nilai” akan diperiksa apakah memenuhi nilai minimum atau tidak. Minimal user harus mendapatkan “medali_perunggu”. Jika tidak
memenuhi maka user dinyatakan gagal dan diperbolehkan untuk mencoba lagi level
yang sama. 10. Apabila user memenuhi “medali_perunggu”, maka akan diperiksa apakah
“nilai” mencapai “medali_perak” atau tidak. Jika tidak, maka user hanya akan mendapat medali perunggu. Jika “nilai” mencapai “medali_perak”, akan
diperiksa apakah “nilai” mencapai “medali_emas” atau tidak. Jika tidak, maka user
akan mendapatkan medali perak dan jika memenuhi maka user akan mendapatkan medali emas.
11. Medali yang didapatkan akan dimasukkan ke variabel “total_medali”. “Nilai” yang didapat pada level tersebut akan ditambahkan ke variabel “total_nilai”.
Nilai variabel i akan bertambah sebanyak 1.
12. Selanjutnya ketika user dapat melanjutkan ke level selanjutnya. Nilai i akan diperiksa apabila melebihi 10 maka proses rekam nilai akan dilakukan, tapi
apabila tidak maka kembali ke tahap 2 dengan nilai i yang berbeda. Proses rekam nilai dapat dilihat pada pembahasan 3.3.2.5 Flowchart Rekam
Highscore .
3.3.2.4 Flowchart Acak Soal
Pada flowchart ini akan terlihat proses pengacakan soal yang berbeda tergantung tingkat kesulitan , nilai i yang berasal dari flowchart sebelumnya yang berarti setiap
level memiliki pengacakan soal yang berbeda.
Mulai level i,
Tingkat_kesulitan
Tingkat_kesulit an = sedang?
Tingkat_kesulit an = sulit?
Acak soal level i tingkat kesulitan
sedang Ya
tidak tidak
Acak soal level i tingkat kesulitan
sulit Acak soal level i
tingkat kesulitan mudah
Soal Generate soal
Selesai Ya
Gambar 3.6 Flowchart Acak Soal
Dari flowchart tersebut dapat dijelaskan sebagai berikut: 1. Apabila level i dieksekusi, maka sistem akan memeriksa variabel
“tingkat_kesulitan”. Apabila tingkat kesulitan sedang maka sistem akan
mengacak soal-soal level i tingkat sedang, apabila sedang maka sistem akan mengacak soal level i tingkat sulit, apabila bukan keduanya, sistem akan
mengacak soal level i tingkat mudah. 2. Setelah soal diacak maka sistem akan memunculkan soal.
3.3.2.5 Flowchart Rekam Highscore
Pada flowchart ini akan diperlihatkan proses penyimpanan nilai apabila pemain memutuskan untuk keluar dari permainan, atau telah mengakhiri permainan.
Mulai Nama pemain,
total nilai, total_medali
Masukkan data ke daftar nilai
tertinggi
Nilai_tertinggi.length 1
Urutkan data nilai_tertinggi
nilai_tertinggi.length 5
Hapus daftar nama yang paling
akhir
selesai Daftar
nilai_tertinggi Ya
Ya Tidak
Tidak
Gambar 3.7 Flowchart Rekam Highscore
Dari flowchart tersebut dapat dijelaskan sebagai berikut: 1. Input berupa nama pemain, total nilai, dan total_medali yang telah didapatkan.
2. Semua input akan dimasukkan ke daftar “nilai_tertinggi”. Apabila daftar nilai_tertinggi lebih dari satu maka daftar “nilai_tertinggi” akan diurutkan.
Apabila daftar “nilai_tertinggi” lebih dari 5 maka data yang berada pada nomor urut terakhir akan dihapus.
3.3.2.6 Flowchart Halaman Nilai Tertinggi
Pada flowchart ini dapat terlihat bahwa halaman nilai tertinggi dibedakan menjadi tiga bagian yaitu mudah, sedang, dan sulit. Daftar tersebut dapat dihapus jika user
ingin menghapusnya.
Mulai
Halaman nilai tertinggi
Mudah? Sedang?
Sulit?
Tampilkan daftar nlai tertinggi
tingkat sulit Tampilkan daftar
nilai tertinggi tingkat mudah
Tampilkan daftar nlai tertinggi
tingkat sedang
Hapus? Hapus?
Hapus?
Hapus daftar nilai tertinggi tingkat
mudah Hapus daftar nilai
tertinggi tingkat sedang
Hapus daftar nilai tertinggi tingkat
sulit Ya
Ya Ya
Ya Ya
Ya Tidak
Tidak Tidak
Tidak Tidak
Tidak
Gambar 3.8 Flowchart Halaman Nilai Tertinggi
Dari flowchart tersebut dapat dijelaskan sebagai berikut: 1. Daftar nilai tertinggi dibedakan menjadi tiga bagian. Apabila user memilih
menu “mudah”, maka daftar “nilai_tertinggi” dengan tingkat kesulitan mudah akan muncul. Apabila user memilih menu “sedang”, maka daftar
“nilai_tertinggi” dengan tingkat kesulitan sedang akan muncul. Apabila user
memilih menu “sulit”, maka daftar “nilai_tertinggi” dengan tingkat kesulitan sulit akan muncul.
2. Masing-masing daftar “nilai_tertinggi” dapat dihapus oleh user.
3.3.3 Storyboard
Storyboard merupakan rancangan tampilan yang dideskripsikan secara berurut
mengenai fungsi menu ataupun navigasi lainnya dalam suatu aplikasi. Storyboard dijabarkan secara jelas sehingga dapat mendeskripsikan rancangan yang akan dibuat
secara tepat. Hasil dari storyboard akan digunakan untuk membangun aplikasi agar lebih terstruktur. Pendefenisian fungsi-fungsi aplikasi dapat dilihat pada table 3.2.
3.3.3.1 Pendefenisian Fungsi-fungsi Menu Aplikasi
Penjabaran tentang fungsi menu dan navigasi serta proses yang berlangsung di dalam aplikasi dapat dijelaskan sebagai berikut:
Tabel 3.2 Tabel Fungsi-fungsi Menu Aplikasi No
Nama Layar Aktifitas Proses
Efek Navigasi
1. Tampilan
Menu Utama • Saat aplikasi dibuka,
tampilan yang pertama muncul adalah tampilan
menu utama. • Tampilan menyajikan
latar belakang suasana kedai dan karakter
penjual. • Di bagian kanan terdapat
• Musik tema permainan
• Animasi awan yang
berarak • Tombol
Mulai: untuk menuju ke
area permainan.
• Tombol Cara Bermain:
untuk melihat cara bermain.
Tabel 3.2 Tabel Fungsi-fungsi Menu Aplikasi lanjutan
daftar menu navigasi untuk mengakses
permainan. • Tombol Mode
Latihan : untuk
mengakses mode latihan.
• Tombol Nilai Tertinggi :
untuk melihat daftar nilai
tertinggi.
• Tombol Credit
: untuk melihat
halaman credit
. • Tombol
Keluar: untuk keluar dari
aplikasi.
2. Tampilan
Masukkan Nama dan Pilih
Tingkat Kesulitan
• Saat permainan dimulai user
akan memasukkan nama dan memilih
tingkat kesulitan. • Di tengah layar akan ada
kolom pengisian nama dan 3 buah tombol
pilihan kesulitan. • Animasi
layar menu utama
tertutup dengan layar
masukkan nama dan
pilih tingkat kesulitan
• Efek suara penutup
kedai. • Tombol
Kembali: untuk kembali
ke menu utama.
• Tombol Mudah: untuk
memilih tingkat
kesulitan mudah dan
menuju ke area
permainan.
• Tombol Sedang: untuk
memilih tingkat
kesulitan sedang dan
menuju ke area
permainan.
• Tombol Sulit: untuk memilih
Tabel 3.2 Tabel Fungsi-fungsi Menu Aplikasi lanjutan
tingkat kesulitan sulit
dan menuju ke area
permainan.
3. Tampilan
Tutorial Pengenalan
Aljabar • Akan terlihat tampilan
karakter penjual sebagai instruktur yang
mengajarkan dasar aljabar.
• Tersedia sebuah tempat untuk memaparkan
sedikit dasar aljabar contohnya :
a + a + a = 3a 2a + 2b = 2 a+ b
• Animasi pembeljaran
aljabar. • Tombol
Lanjut untuk melanjutkan
tutorial
selanjutnya dan masuk ke
level .
4. Tampilan
Keterangan Level
• Akan terlihat tampilan penutup kedai yang yang
akan meberi keterangan level
yang akan dihadapi • Animasi
penutup kedai
membuka layar level.
5. Tampilan
Eksekusi Level • Di awal level akan
terlihat karakter penjual yang berada di kedai
yang akan mengajarkan cara bermain.
• Di bagian atas layar terdapat tombol pause,
dan tombol onoff musik latar.
• Di bagian bawah layar terdapat keterangan
level ,
nilai, medali perunggu, total score,
meteran medali, daftar penghargaan,
dan terdapat jam yang
menunjukkan waktu operasi kedai.
• Saat permainan dimulai, akan tampil produk-
produk yang menjadi persoalan dalam game
ini. • Animasi
karakter penjual
menjelaskan cara
bermain.
• Animasi produk yang
muncul sebagai
persoalan.
• Efek suara keramaian.
• Efek suara saat
user salah
menjawab. • Efek suara
saat user
benar menjawab.
• Animasi jam bergerak
dan • Tombol panah
untuk melanjutkan
tutorial level.
• Tombol pause untuk
menghentikan permainan
sementara.
• Tombol onoff untuk
mematikan musik latar.
• Tombol panah untuk
mengirim jawaban.
Tabel 3.2 Tabel Fungsi-fungsi Menu Aplikasi lanjutan
matematika dari soal yang ditanyakan
• User akan menjawab persoalan pada kolom
yang telah disediakan dan menekan tombol
“enter” pada keyboard berbunyi
jika waktu telah habis.
• Animasi karakter
pembeli.
untuk mengirim jawaban.
• Bentuk Soal level 1 4x = 20 ; x = ?
• Bentuk Soal level 2 4x = 20 ; 3x = ?
• Bentuk Soal level 3 4x = 20 ; 15 x = ?
• Bentuk Soal level 4 4x = 20 ; 4y=12;
x + y = ? • Bentuk Soal level 5
4x = 20 ; 2x + y = 12 y = ?
• Bentuk Soal level 6 4x = 20 ; 2x + y = 12
4y = ? • Bentuk Soal level 7
4x = 20 ; y = x ; x = ? • Bentuk Soal level 8
4x = 20 ; y = 2x ; x = ? • Bentuk Soal level 9
2x +y = 3; x + 2y = 3 y = ?
• Bentuk Soal level 10 2x +y = 3; x + 2y = 3
x = ? • Pada level 2 dan
seterusnya akan tampil karakter pembeli.
6. Tampilan
Halaman Pause
• Apabila user menekan tombol
pause , akan
terlihat penutup kedai yang member
keterangan bahwa
permainan dihentikan sementara.
• Terdapat 3 tombol • Animasi
penutup kedai
menutup layar
• Efek suara penutup
kedai. • Tombol
Menu: untuk kembali ke
menu • Tombol
Lanjut: untuk melanjutkan
permainan.
Tabel 3.2 Tabel Fungsi-fungsi Menu Aplikasi lanjutan
navigasi yaitu menu, lanjut dan keluar.
Jika user memilih untuk pergi ke menu atau
keluar dari aplikasi, maka akan ada
pertanyaan konfirmasi • Tombol
Keluar: untuk keluar aplikasi
7. Tampilan
Kotak Mode • Mode Eliminasi akan
muncul pada level 9 dan • Pergantian
angka pada • Tombol
spin :untuk
Eliminasi 10.
• Akan tampak sebuah kotak petunjuk yang
akan berada dalam layar eksekusi level.
• Pada kotak tersebut akan otomatis terdapat dua
persamaan linear dan terdapat pula hasil
pengurangan keduanya. Tugas user adalah untuk
mengeliminasi salah satu variabel dan untuk
mengeliminasi
user dapat mengalikan kedua
persamaan dengan angka yang dapat dipilih
dengan tombol spin. Setelah
user merasa
sudah mendapat petunjuk dari hasil
eliminasi user
dapat menuju ke mode jawab
untuk memasukkan jawaban
persamaan secara
otomatis pada saat
user mengganti
angka pengali.
memilih angka pengali.
Tombol panah untuk pergi ke
mode jawab.
8. Tampilan
Penghitungan Score
• Tampilan ini akan muncul pada saat setiap
level berakhir
• Terlihat tampilan penutup kedai dan
sebuah kertas tertempel yang menunjukkan nilai
yang didapat user selama bermain.
• Terdapat total soal yang benar, total soal yang
• Animasi penutup
kedai menutup
layar eksekusi
level
. • Efek suara
penutup kedai.
• Animasi • Tombol
Menu: untuk kembali ke
menu. • Tombol
Lanjut: untuk melanjutkan
ke level
selanjutnya. • Tombol
Keluar: untuk
Tabel 3.2 Tabel Fungsi-fungsi Menu Aplikasi lanjutan
salah, goal, score, dan total nilai yang didapat.
• User akan mendapatkan reward
berupa medali emas, perak atau
perunggu tergantung nilai
yang dapat dicapainya.
• Terdapat tiga tombol yaitu “menu”, “lanjut”
dan “keluar”. pemberian
medali. • Efek suara
pemberian medali.
• Animasi stempel
gagal apabila
gagal.
• Efek suara keluar dari
aplikasi. • Tombol Coba
Lagi: untuk mencoba level
yang sama apabila gagal.
Jika user gagal melewati level
tombol yang tersedia yaitu “menu”,
“coba lagi”, dan “keluar”
gagal apabila
gagal.
9. Tampilan
Halaman Ending
• Pada tampilan ini akan terlihat bangunan kedai
secara keseluruhan beserta karakter penjual.
User
akan mendapatkan sertifikat gold, silver,
atau bronze tergantung dari banyaknya jumlah
medali emas yang diterima.
• Pada sertifikat terdapat medali
yang telah diterima, nama pemain ,
dan total nilai. Terdapat tombol menu,
dan keluar. • Animasi
pemberian sertifikat
• Musik tema permainan.
• Animasi kembang api
• Efek suara kembang
api. • Tombol menu
untuk kembali ke menu
• Tombol keluar untuk keluar
dari aplikasi
10. Tampilan Cara Bermain
• Tampak latar belakang berupa penutup kedai.
• Terdapat tombol panah kembali di pojok kiri
atas. • Pada halaman ini
menunjukkan aturan dan tata cara bermain pada
game edukasi ini.
• Tampilan cara bermain terdiri atas beberapa
halaman. • Animasi
Penutup kedai.
• Efek suara penutup
kedai. • Tombol panah
kembali untuk kembali ke
menu utama. • Tombol
navigasi halaman.
Tabel 3.2 Tabel Fungsi-fungsi Menu Aplikasi lanjutan
11. Tampilan Mode Latihan
• Terdapat pilihan level dari level 1 hingga level
10. • Terdapat tombol panah
kembali untuk kembali ke menu utama.
• Tombol Level 1 hingga Level
10 : untuk memilih level
yang akan dilatih.
• Tombol Panah Kembali
untuk kembali ke menu.
12. Tampilan Nilai Tertinggi
• Akan terlihat tampilan penutup kedai.
• Terdapat tombol panah • Animasi
Penutup kedai.
• Tombol panah kembali untuk
kembali ke
kembali di pojok kiri atas untuk kembali ke
menu utama. • Daftar nilai tertinggi
dibedakan atas tingkat kesulitannya.
• User dapat menghapus daftar
daftar nilai tertinggi melalui tombol
hapus. • Efek suara
penutup kedai.
menu. Tombol
Mudah untuk melihat daftar
highscore tingkat
mudah.
• Tombol Sedang untuk
melihat daftar nilai tertinggi
tingkat sedang.
• Tombol Sulit untuk melihat
daftar nilai tertinggi
tingkat sulit.
• Tombol Hapus Semua
untuk menghapus
daftar.
13. Tampilan Credit
• Pada halaman ini akan terdapat keterangan
pembuat aplikasi di antaranya game design,
script programming, artwork animation,
dan music sound FX. • Tombol panah
kembali untuk kembali ke
menu utama.
3.3.3.2 Perancangan Antarmuka
Perancangan antarmuka interface merupakan tampilan program aplikasi yang digunakan oleh pemakai user untuk dapat berkomunikasi dengan komputer. Adapun
yang menjadi rancangan antarmuka dalam perancangan ini adalah rancangan menu utama program.
1. Tampilan Menu Utama
Pada tampilan menu utama terdapat 6 tombol navigasi yaitu Mulai, Cara Bermain, Mode Latihan, Nilai Tertinggi, Credit dan Keluar.
1
2 3
4 5
6 7
Gambar 3.9 Perancangan Tampilan Menu Utama
Keterangan gambar: 1. Judul aplikasi.
2. Menu mulai, untuk memulai permainan. 3. Menu cara bermain untuk mengetahui cara dan aturan permainan.
4. Menu mode latihan untuk mengakses mode latihan. 5. Menu Nilai Tertinggi untuk melihat daftar nilai tertinggi.
6. Menu credit untuk melihat informasi pembuat aplikasi. 7. Menu keluar untuk keluar dari aplikasi.
2. Tampilan Masukkan Nama dan Pilih Tingkat Kesulitan
Pada halaman ini terdapat kolom masukkan nama, dan pilihan tingkat kesulitan.
1
2 3
4
Gambar 3.10 Perancangan Tampilan Masukkan Nama dan Pilih Tingkat Kesulitan
Keterangan gambar: 1. Kolom masukkan nama.
2. Tombol pilih tingkat kesulitan mudah. 3. Tombol pilih tingkat kesulitan sedang.
4. Tombol pilih tingkat kesulitan sulit 5. Tombol panah kembali untuk kembali ke menu utama yang terdapat di pojok kiri
atas.
3. Tampilan Tutorial Pengenalan Aljabar
Pada halaman ini terdapat karakter instruktur yang menjelaskan tentang dasar perhitungan aljabar. Terdapat juga area untuk memaparkan penjelasann.
1
2
Gambar 3.11 Perancangan Tampilan Tutorial Pengenalan Aljabar
Keterangan gambar: 1. Papan untuk memaparkan materi dasar-dasar aljabar yaitu :
a + a + a + a + a = 5a ab + ac = a b + c
2. Penjelasan mengenai apa yang dipaparkan pada papan.
4. Tampilan Keterangan Level.
Pada tampilan ini tidak terdapat tombol navigasi. Terdapat penjelasan level saat ini dan jenis soal yang akan dihadapi.
1
2
Gambar 3.12 Perancangan Tampilan Keterangan Level
Keterangan gambar: 1. Keterangan level. Misalnya “Level 1”, “Level 2”, dan seterusnya.
2. Penjelasan mengenai jenis soal yang akan dihadapi pada level ini.
5. Tampilan Eksekusi Level
Pada tampilan ini akan terlihat keterangan mengenai nilai, total nilai, award, dan level saat ini. Terdapat tombol kirim jawaban, tombol pause untuk menghentikan
permainan sesaat, dan tombol onof suara. Pada level 1 user hanya akan menjawab harga satuan produk tanpa ditampilkan karakter pembeli. Rancangan tampilan level 1
dapat dilihat pada gambar 3.13. Sedamgkan pada level 2 akan ditampilkan karakter pembeli yang dapat dilihat rancangan tampilannya pada gambar 3.14.
8 9
10
6 11
12 1
2 3
4 5
7
Gambar 3.13 Perancangan Tampilan Level 1
Keterangan gambar: 1. Keterangan level yang sedang aktif.
2. Nilai untuk level saat ini. 3. Nilai untuk mendapatkan medali perunggu.
4. Total nilai untuk nilai yang telah dikumpulkan dari keseluruhan level. 5. Meteran Medali sebagai indikator untuk mendapatkan medali.
6. Daftar Penghargaan berupa kumpulan medali yang telah didapatkan. 7. Waktu operasi kedai sebagai batas waktu pada setiap level.
8. Tombol pause untuk menghentikan permainan sementara 9. Tombol onoff suara latar belakang.
10. Soal dalam bentuk konkrit dapat dilihat pada bagian 3.2.1 Analisis Prosedur Aplikasi.
11. Kolom isi jawaban 12. Soal dalam bentuk model matematika.
8 9
10
6 13
11 1
2 3
4 5
7 12
Gambar 3.14 Perancangan Tampilan Level 2 dan Seterusnya
Keterangan gambar: 1. Keterangan level yang sedang aktif.
2. Nilai untuk level saat ini. 3. Nilai untuk mendapatkan medali perunggu.
4. Total nilai untuk nilai yang telah dikumpulkan dari keseluruhan level. 5. Meteran Medali sebagai indikator untuk mendapatkan medali.
6. Daftar Penghargaan berupa kumpulan medali yang telah didapatkan. 7. Waktu operasi kedai sebagai batas waktu pada setiap level.
8. Tombol pause untuk menghentikan permainan sementara 9. Tombol onoff suara latar belakang.
10. Soal dalam bentuk konkrit. 11. Soal dalam bentuk model matematika.
12. Persoalan yang ditanyakan. 13. Kolom isi jawaban.
6. Tampilan Halaman Pause
Halaman pause akan muncul apabila user menekan tombol pause pada layar eksekusi level
. Pada halaman ini terdapat 3 tombol yaitu menu, lanjut dan keluar.
1
3 4
2
Gambar 3.15 Perancangan Tampilan Halaman Pause
Keterangan gambar: 1. Keterangan bahwa permainan sedang dihentikan.
2. Tombol untuk kembali ke menu. 3. Tombol untuk melanjutkan permainan.
4. Tombol untuk keluar ke aplikasi
7. Tampilan Kotak Mode Eliminasi
Kotak mode eliminasi adalah sebuah kotak yang muncul sebagai petunjuk dalam layar eksekusi level. Kotak ini muncul pada level 9 dan level 10. Pada kotak ini terdapat
model persamaan 1, model persamaan 2, selisih kedua persamaan, tombol pengali dan tombol untuk ke mode jawaban.
1 2
3 4
5 6
Gambar 3.16 Perancangan Tampilan Kotak Mode Eliminasi
Keterangan gambar: 1. Model persamaan 1.
2. Model persamaan 2. 3. Selisih persamaan 1 dan persamaan 2.
4. Tombol pengali persamaan 1 5. Tombol pengali persamaan 2
6. Tombol untuk menuju mode jawab.
8. Tampilan Penghitungan Score
Pada tampilan ini akan terlihat jumlah total soal yang dijawab dengan benar, yang dijawab dengan salah, nilai akurasi, score dan total score. Terdapat tiga tombol
navigasi yaitu menu, lanjut atau coba lagi, dan keluar.
1 2
3 4
5
6
7 8
9
Gambar 3.17 Perancangan Tampilan Penghitungan Score
Keterangan gambar: 1. Total jawaban benar.
2. Total jawaban salah. 3. Medali Perunggu
4. Nilai 5. Total Nilai
6. Penghargaan berupa medali 7. Tombol Menu untuk kembali ke menu.
8. Tombol lanjut untuk melanjutkan ke level selanjutnya atau tombol coba lagi untuk mencoba level yang sama.
9. Tombol keluar untuk keluar dari aplikasi.
9. Tampilan Halaman Ending
Tampilan ini akan muncul di akhir permainan. Pemain akan mendapat reward berupa sertifikat emas, perak atau perunggu. Pada sertifikat tersebut akan terlampir medali-
medali yang telah didapatkan, nama pemain, dan total nilai. Terdapat dua tombol navigasi di bawah kiri untuk kembali ke menu atau keluar aplikasi.
1
6 7
2
4 5
3
Gambar 3.18 Perancangan Tampilan Halaman Ending
Keterangan gambar: 1. Judul aplikasi.
2. Daftar penghargaan berupa medali-medali yang telah didapatkan. 3. Jenis sertifikat apakah itu sertifikat emas, perak atau perunggu.
4. Nama pemain. 5. Total nilai.
6. Tombol kembali ke menu utama. 7. Tombol untuk keluar dari aplikasi.
10. Tampilan Cara Bermain
Pada halaman ini terdapat tombol navigasi untuk melihat halaman-halaman cara bermain dan tombol panah kembali ke menu utama.
1
Gambar 3.19 Perancangan Tampilan Cara Bermain
Keterangan gambar: 1. Penjelasan cara bermain.
2. Terdapat tombol kembali ke menu utama di pojok kiri atas. 3. Terdapat tombol navigasi halaman.
11. Tampilan Mode Latihan
Pada tampilan mode latihan user dapat memilih level yang diinginkan. Terdapat tombol untuk memilih level yang diinginkan dimulai dari level 1 hingga level 10.
1 2
3 4
5 6
7 8
9 10
Gambar 3.20 Perancangan Tampilan Mode Latihan
Keterangan gambar: 1. Tombol menuju ke level 1.
2. Tombol menuju ke level 2. 3. Tombol menuju ke level 3.
4. Tombol menuju ke level 4. 5. Tombol menuju ke level 5.
6. Tombol menuju ke level 6. 7. Tombol menuju ke level 7.
8. Tombol menuju ke level 8. 9. Tombol menuju ke level 9.
10. Tombol menuju ke level 10. 11. Tombol panah kembali ke menu utama terdapat di pojok kiri atas.
12. Tampilan Nilai Tertinggi
Pada tampilan ini user terdapat tombol untuk melihat daftar highscore tergantung tingkat kesulitannya. Di setiap bagian terdapat tombol hapus untuk menghapus daftar
highscore .
1 2
3
4
5
Gambar 3.21 Perancangan Tampilan Nilai Tertinggi.
Keterangan gambar: 1. Tombol untuk melihat daftar highscore tingkat mudah.
2. Tombol untuk melihat daftar highscore tingkat sedang. 3. Tombol untuk melihat daftar highscore tingkat sulit.
4. Daftar 5 orang teratas dengan nilai tertinggi. Terdapat nama pemain, score, dan award
yang didapatkan. 5. Tombol hapus daftar highscore.
6. Tombol panah kembali ke menu utama di pojok kiri atas.
13. Tampilan Credit
Pada halaman ini terdapat keterangan tentang pembuat aplikasi dan terdapat tombol panah kembali ke menu utama.
1
Gambar 3.22 Perancangan Tampilan Credit.
Keterangan gambar: 1. Keterangan pembuat aplikasi meliputi game design, script programming, artwork
animation , music sound FX.
2. Tombol panah kembali ke menu utama terdapat di pojok kiri atas.
BAB 4
IMPLEMENTASI DAN PENGUJIAN
4.1 Implementasi
