V. ULASAN KARYA PERANCANGAN A. Site Map Site map bertujuan untuk memudahkan perancangan aplikasi serta menentukan jalur permainan dan jalur isi permainan. Berikut ialah sitemap permainan game “aku tanggap bencana gunung api” :
Gambar 5.1 Site map game “aku tanggap bencana gunung api”
B. Pemodelan Use Case Diagram Pada aplikasi permainan “aku tanggap bencana gunung api” ini, tokoh yang bertindak sebagai actor ialah user (pengguna). Dari identifikasi actor tersebut, maka didapatkan satu use case diagram dan beberapa scenario yang memperlihatkan beberapa interaksi- interaksi use case dengan aktor. Aplikasi game edukasi ini dapat dilihat pada gambar di bawah ini.
44
Belajar
Memilih Materi
Bermain
Gambar 5.2 Pemodelan Use Case
Berikut adalah penggambaran use case diagram yang telah digambarkan pada gambar 5.2 Use Case Materi Nama.
Materi
Aktor
Siswa siswi kelas 5 SD
Deskripsi
Pengguna dapat memilih menu mana yang ingin di kunjungi terlebih dahulu
Skenario
1. Pengguna masuk pada menu awal: sistem akan masuk pada pemilihan menu materi. 2. Pengguna masuk ke menu belajar : sistem akan masuk pada menu belajar yang berisi 3 materi pembelajaran. 3. Pengguna masuk ke menu bermain : sistem akan masuk pada menu bermain berisi 3 gameplay.
Kondisi Awal
1. Pengguna menerima menu belajar yang berisi 3 materi pembelajaran yaitu gunung api, gunung kelud dan aksi tanggap BNPB. 2. Pengguna menerima menu bermain yang berisi 3 gameplay , yaitu evakuasi warga, bantuan logistic dan soal evalusi
Kondisi Akhr
1. Pengguna mempelajari materi yang dipilih 2. Pengguna memainkan masing‐ masing gameplay dengan dibatasi timer dan peningkatan level.
Tabel 5.1 Use Case Materi
45
C. Perancangan Storyboard Game No.
Visual
1.
LOGO ASSOSIATION
Form name :intro Link : Intro Ket: Menampilkan Halaman Intro 2
Layout Credit
Menu Masuk
Menu Keluar
Menu Volume
Form name :Opening Link : Scene Opening Ket: Menampilkan Layout Opening
46
3.
Layout Menu karakter
ok
Form name : Menu Karakter Link : Scene Karakter cewe dan cowo 4.
Ket: Menampilkan Layout menu karakter
Menu Belajar
Menu Bermain
Menu Keluar
Menu Volume
Form name :Menu Utama Link : Scene menu utama Ket: Menampilkan Layout menu utama 5. Gunung api
Layout
Gunung Kelud Aksi Tanggap BNPB Menu Keluar
Form name :menu Belajar Link : Scene presentasi Ket: Menampilkan Layout belajar 47
6. apa
mengapa
Isi Materi
Menu Kembali
Bagaimana Kapan
Menu lanjut
Form name :menu Belajar Gunung Api Link : Scene presentasi gunung api Ket: Menampilkan Layout belajar materi Gunung api 7. Karakter Gameplay 1
Gameplay 2
LV 1
LV 2
LV 1
LV 2
LV 3
LV 4
LV 3
LV 4
Gameplay 3
Menu Kembali
Form name :menu Bermain Link : Scene permainan Ket: Menampilkan Layout menu bermain 8. Score dan Karakter
Menu Pause
Timer
Target Misi
Layout Drop Objek Objek
Form name :Gameplay 1 Link : Scene Gameplay 1 Ket: Menampilkan Layout Gameplay 1
48
9. Score dan Karakter
Menu Pause
Timer
Target Misi
Layout Drop Objek Objek
Objek
Objek
1
2
3
Form name :Gameplay 2 Link : Scene Gameplay 2 Ket: Menampilkan Layout Gameplay 2 10. Tingkat level dan score
Menu
Keluar
Isi Soal
Karakter
a.
c.
b
d
Form name :Gameplay 3 Link : Scene pertanyaan Ket: Menampilkan Layout pertanyaan dari materi belajar dengan jawaban pilihan ganda Teknik : Click and Check Tabel 5.2 Storyboard Game
D. Perancangan Antar Muka Pada Bagian ini penulis mendesain antarmuka untuk aplikasi yang akan dibuat dan akan menunjukkan tata letak tombol materi dan menu bermain untuk dapat memulai proses pembelaran tentang aksi tanggap bencana gunung api.
49
1. Rancangan Tampilan Intro Halaman intro adalah halaman awal dari aplikasi ini. Pada halaman ini berisi logo lembaga kerja sama yaitu BNPB dan logo Universitas Mercu Buana dengan teknik animasi Fade in- Fade out
LOGO ASSOSIATION
Gambar 5.3 Tampilan Intro
2. Rancangan Tampilan Menu Opening Halaman opening ialah halaman pembuka tampilan awal yang sesungguhnya, berisi judul , terdapat menu button masuk, volume, credit, serta menu keluar. Dilengkapi dengan animasi, gambar juga backsound. JUDUL
Layout Credit
Menu Masuk
Menu Keluar
Menu Volume Gambar 5.4 Tampilan Menu Opening
3. Rancangan Menu Utama Halaman Menu Utama ialah halaman untuk memulai menjalankan aplikasi. Pada halaman menu utama terdapat menu button belajar dan bermain. Membuat user dapat memilih menu mana yang ingin di jalankan terlebih dahulu. Pada halaman initerdapat backsound dan sound effect.
50
Menu Belajar
Menu Bermain
Menu Keluar
Menu Volume Gambar 5.5 Tampilan Menu Utama
4. Rancangan Menu Belajar dan Materinya Halaman Menu Belajar adalah halaman berisi presentasi penyampaian materi. Pada menu ini terdapat button materi tentang gunung api, gunung kelud dan aksi tanggap BNPB mulai dari pengertian, mengapa, bagaimana, kapan dan dimana materi ini akan terulas, dihalaman ini terdapat back sound. apa
mengapa
Isi Materi Bagaimana
Menu Kembali
Kapan
Menu lanjut Gambar 5.6 Tampilan Menu Belajar
5. Rancangan Menu Bermain Halaman menu bermain adalah halaman tampilan isi permainan yang berisi 3 button gameplay yaitu evakuasi warga, pos bantuan logistic dan soal evaluasi dengan 4 button level. Pada halaman ini berisi back sound dan sound effect. Karakter Gameplay 1
Gameplay 2
LV 1
LV 2
LV 1
LV 2
LV 3
LV 4
LV 3
LV 4
Gameplay 3
Menu Kembali Gambar 5.7 Tampilan Menu Belajar
51
6. Rancangan Menu Gameplay 1 Halaman menu gameplay 1 adalah halaman yang berisi permainan pertama tentang aksi mengevakuasi warga, pada halaman ini terdapat button pause untuk memberhentikan sejenak permainan atau untuk menyudahi permainan dan kembali ke menu awal. Pada halaman ini terdapat gambar, animasi, backsound dan sound effect. Score dan Karakter
Menu Pause
Timer
Target Misi
Layout Drop Objek Objek
Gambar 5.8 Tampilan Menu Gameplay 1
7. Rancangan Menu Gameplay 2 Halaman menu Gameplay 2 adalah halaman yang berisi permainan kedua tentang pemberian bantuan logistik pada lokasi pos bantuan. Game ini juga terdapat button pause. Halaman ini terdapat gambar, animasi, backsound dan sound effect. Score dan Karakter
Menu Pause
Timer
Target Misi
Layout Drop Objek Objek 1
Objek 2
Objek 3
Gambar 5.9 Tampilan Menu gameplay 2
52
8. Rancangan Menu Gameplay 3 Halaman gameplay 3 adalah halaman berisi permaian ketiga yaitu soal evalusi dimana berisi soal dengan empat button jawaban pilihan. Materi soal berasal dari materi pada menu belajar. Terdapat button menu keluar untuk menyudahi permainan soal evaluasi ini. Pada halaman ini, terdapat backsound dan Sound effect. Tingkat level dan score
Menu Keluar
Isi Soal
Karakter
a.
c.
b
d
Gambar 5.10 Tampilan Menu gameplay 3
E. Sketsa Karakter 1. Karakter Utama Karakter utama diambil dari tokoh anak anak, menggunakan 2 karakter yaitu laki- laki dan perempuan bertujuan agar user dapat memilih karakter sesuai keinginan dan anak- anak lebih suka menggunakan karakter sesuai gender. Karakter menggunakan seragam BNPB karena permainan ini ditujukan agar player dapat beraksi layaknya seorang BNPB yang menolong warga bencana gunung api.
Gambar 5.11 Sketsa Karakter Utama
53
2. Karakter Pendukung Karakter pendukung ialah anak kecil yang di wakilkan oleh karakter anak SD yang memakai seragam SD dan karakter orang tua lanjut usia yang diwakilkan oleh karakter nenek dan kakek. Karakter ini dipilih karena tokoh mereka mengartikan bahwa mereka lah yang harus terlebih dahulu diselamatkan karena mereka membutuhkan pertolongan dan arahan
Gambar 5.12 Sketsa Karakter pendukung
F. Sketsa Interface 1. Opening Penggambaran opening tampak terlihat suasana pegunungan, gunung api aktif sebagai point of center dengan kondisi status gunung berada pada kondisi normal menuju waspada. Terdapat mobil BNPB sebagai perwakilan ikon tim penyelamat gunung api,
Gambar 5.13 Sketsa Layout Opening
54
2. Media Pembelajaran Media pembelajaran ditujukan untuk media edukasi yang berisi materi tentang gunung api, gunung kelud dan aksi tanggap BNPB. Materi ini akan dijadikan pembelajaran pada soal evaluasi pada menu game.
Gambar 5.14 Sketsa Interface Menu Belajar
3. Gameplay 1 Pada gameplay 1 isi permainan ini ialah melakukan evakuasi terhadap warga disekitar wilayah gunung api aktif dengan melakukan teknik drag and drop yaitu memasukkan objek kedalam mobil truk BNPB. Pada game ini terdapat target misi warga yang harus diselamatan dengan tantangan batas waktu. Apabila sudah melewati btas waktu, gunung api akan segera meletus dan permainan ini berakhir.
Gambar 5.15 Sketsa Interface gameplay 1
55
4. Gameplay 2 Pada gameplay 2, isi permainan ini ialah member bantuan logistik berupa makanan, pakaian dan obat- oabatan. Pada game ini terdapat target misi yang harus diberikan bantuan logistik sesuai permintaan objek dengan teknik drag dan drop, game ini diberikan batas waktu yang apabila target misi tidak tercapai sesuai batas waktu maka gunung api akan meletus.
Gambar 5.16 Sketsa Interface gameplay 2
5. Soal Evaluasi Soal evaluasi bertujuan untuk mengasah pengetahuan player terhadap materi yang telah disajikan penulis dengan isi soal sejumlah 10 soal.
Gambar 5.17 Sketsa Interface gameplay 3
56
G. Proses Digital 1. Karaker
Gambar 5.18 Karakter Utama
Gambar 5.19 foto anggota BNPB Sumber : www.bnpb.go.id
Penjelasan : Karakter utama ini adalah tokoh BNPB cilik penyelamat warga gunung api sehingga Warna dan bentuk seragam disesuaikan dengan warna seragam asli BNPB. C: 0 % M: 64 % Y: 99 % K: 0 %
C: 84 % M: 75 % Y: 58 % K: 77 %
a) Studi Karakter Berikut adalah beberapa karakter yang muncul pada game aku tanggap bencana gunung api : 1) Karakter utama
57
Baik hati,ceria, suka membantu, dan tanggap
•
Karater tokoh perempuan disimbolkan memiliki rambut yang panjang, rambut yang selalu di ikat simpul mewakili tipe rambut anak- anak serta memakai bando berpita dan sepatu berpita dimaksudkan bahwa tokoh ini selalu terlihat rapih dan cantik, serta memiliki pipi merah merona.
•
Pada karakter tokoh laki- laki disimbolkan dengan rambut yang pendek, memiliki rambut kecil yang berdiri di belakang dimaksdkan untuk membedakan tipe rambut antara raki- laki dan perempuan. Mereka sama- sama memiliki wajah yang ceria dimaksudkan
bahwa game ini menimbulkan keceriaan, bersahabat dan salah satu tangan mereka mengangkat keatas dimaksudkan bersifat mengajak user untuk sama sama memiliki sifat seperti mereka yaitu tanggap terhadap bencana. 2) Karakter pendukung •
Anak- anak
Lugu dan butuh arahan
Gambar 5.19 Karakter Pendukung Tokoh anak‐ anak
58
Karakter ini merupakan karakter anak kecil yang disimbolkan dengan mengenakan seragam SD, memiliki raut wajah polos dengan senyum ikhlas di wajahkan, perbedaan pada karakter ini hanya terletak pada model rambut untuk membedakan antara karakter perempuan dan laki- laki.
•
Kakek Nenek
Lemah dan perlu pertolongan
Gambar 5.20 Karakter Pendukung Tokoh Kakek Nenek
Karakter ini merupakan karakter kakek dan nenek. Mengenakan pakaian kain kebaya, mencirikan pakaian orang tua, serta warna rambut mereka yang sudah memutih mencirikan bahwa usia mereka diatas 50 tahun, perbedaan pada karakter ini ialah model rambut, model kacamata. Pada karakter kakek, ia memiliki rambut
pendek
dengan
menggunakan
kaca
mata
yang
dimaksudkan susah memiliki penglihatan rabun dekat, sedangkan pada
karakter
nenek
memiliki
rambut
yang
disanggul
menggambarkan tipe seorang nenek – nenek . 3) Karakter alam Beikut adalah karakter alam yang ada sebagai daya tarik pada game aku tanggap bencana gunung api:
59
Gambar 5.21 Karakter Alam
No. Gambar
Penjelasan Gambar ini merupakan poin of center pada game. Gambar gunung dengan status gunung aktif waspada. Sehingga masih berwarna hijau dan baru mengeluarkan asap. Gunung ini
1.
bisa berubahan menjadi warna merah dan meledak apabila waktu tantangan permaianan telah habis. Warna : Gambar ini merupakan gambar rumput yang ada di sekitar wilayah pegunungan, dibuat
2.
menyerupai bentuk rumput asli. Warna : Gambar ini merupakan ikon pohon yang terdapat pada layout gameplay 1.
3.
Warna :
Gambar ini merupakan ikon untuk timer pada tiap gameplay. Berbentuk jam weaker,
4.
terinspirasi dari bentuk jam weaker rumahan berbahan mika plastic. Jam ini berfungsi
60
sebagai waktu dalam permainan yang juga dapat sebagai waktu peringatan untuk player. Warna : Gambar ini merupakan ikon yang terdapat pada
menu
opening,
berbentuk
kincir
terinspirasi dari tempat hiburan anak- anak
5.
sebagai simbol untuk permainan Warna : Gambar ini merupakan ikon untuk mobil BNPB, mobil ini terdapat pada gameplay 1, warna dan bentuk menyesuaikan dengan warna mobil asli BNPB. Mobil ini berfungsi
6.
sebagai media penyelamat warga dengan menampung warga yang akan di evakusi untuk dibawah ketempat yang lebih aman. Warna : Gambar ini merupakan ikon rerumputan atau ilalang yang terdapat pada gameplay 1.
7.
Warna : Tabel 5.3 Studi Karakter Alam
4) Karakter button Tombol merupakan salah satu bagian terpenting dalam kelengkapan sebuah permainan multimedia interkatif.
Gambar 5.22 Karakter Button
61
No
Tombol
Penjelasan Tombol ini merupakan tombol menu, pause, volume dan tombol keluar. Bentuknya seperti bentuk pada umumnya di dalam
1,
dunia permainan multimedia interaktif agar siswa bisa dengan mudah mengerti tombol tersebut. Warna : Tombol ini merupakan tombol masuk, dan
2.
tombol milih oke. Bentuk terinspirasi dari bentuk awan dan bentuk lingkaran. Warna : Tombol
3.
ini
terdapat
pada
interface
pembelajaran tombol. Ini berfungsi untuk tombol lanjut dan kembali slide presentasi. Warna : Tombol navigasi ini merupakan icon tombol yang terdapat pada menu help di
4.
setiap
permulaan
gameplay.
berfungsi
sebagai tangan yang mencontohkan teknik drag and drop. Warna : Tombol ini merupakan tombol menu belajar dan bermain, yang terdapat pada
5.
interface menu utama. Bentuk tombol terinspirasi dari bentuk awan. Warna : Tombol ini terdapat pada menu gameplay 3
6.
soal evaluasi, berfungsi sebagai alat untuk mengecek kebenaran sebuah jawaban soal. Bentuk ini berbentuk lingkaran
62
Warna : Tombol ini terdapat dalam menu gameplay 3 soal evalusi, berfungsi sebagai tombol 7.
jawaban pilihan ganda. Bentuk tombol ini disesuaikan dengan tombol yang sudah ada pada dunia player multimedia. Warna : Tombol in terdapat dalam menu belajar, berfungi sebagai tombol pilihan isi materi.
8.
Warna
background
dibuat
putih
agar
mempermudah user melihat dan membaca tulisan pilihan isi materi. Warna : Tombol ini terdapat pada menu belajar, berfungsi sebagai konten materi yang ingin di pilih untuk dibaca terlebih dahulu. Pada
9.
tiap tombol terdapat gambar sebagai icon untuk isi materi yang terdapat dalam tiap tombol. Warna : Tabel 5.4 Studi Karakter Button
2. Font
Gambar 5.24 Font Selamat Datang
63
Penjelasan : Menurut hasil kuesioner anak anak rata rata memilih font “comic sans MS” dipilihlah font yang memiliki karakter font seperti comic sans yaitu sans serif jadi pemilihan font yaitu “CABOLD COMIC ” karena font ini mudah dibaca untuk anak usia mereka.
Gambar 5.25 Font Cabold Comic Cabold Comic
3. Layout Interface No.
Tampilan Halaman
Penjelasan Tampilan halaman ini merupakan layout
interface
menu
opening.
Penggambaran layout mencitrakan suasana alam pegunungan dengan
1.
ilustrasi gunung, awan serta langit biru cerah Warna : Tampilan halaman ini merupakan layout menu pilih karakater dengan background 2.
sama
dengan
menu
opening, hanya ditambah media navigasi untuk peletakkan karakter. Warna :
64
Tampilan halaman ini merupakan layout
menu
utama,
dengan
background putih polos diberi stroke
3.
biru cerah. Warna : Tampilan halaman ini merupakan layout
interface
menu
ilustrasi
belajar,
didalamnya
menggambarkan suasana didalam
4.
ruangan belajar terdapat meja dan buku berlogo BNPB Warna : Tampilan halaman ini merupakan layout interface menu belajar materi gunuung api, pada tiap materi terdapat background ilustrasi berbeda beda. Pada materi gunung api, diberi background gunung ap aktif
5.
yang sedang meletus sebagai media penggambaran tentang gunung api., background diberi opacity 75 % agar peulisan isi materi dapat terbaca. Warna : Tampilan halaman ini merupakan layout interface menu bermain, layout ini terdapat 3 menu gameplay yang
6.
diberi opacity 50% agar background latar dapat terlihat. Warna :
65
Tampilan halaman ini merupakan layout interface menu gameplay 1, suasana yang diciptakan pada layout ini ialah suasana jalan pinggir 7.
pegunungan
dengan
terdapat
pohon, pagar dan jalan, serta langit dan awan yang cerah. Warna : Tampilan halaman ini merupakan layout interface menu gameplay 2 dengan
menciptakan
suasans
tempat pos bantuan karena pada game
ini
memberikan
8.
kepada
bertujuan
untuk
bantuan
logistic
korban
pengungsian
bencana gunung api, dengan tetapi menampilakn
gambar
gunung
sebagai point of center. Warna : Tampilan halaman ini merupakan layout interface menu gameplay 3, pada layout ini terdapat soal dan 4 pilihan
9.
jawaban.
Warna
yang
ditampilkan tetap memilih warna cerah. Warna : Tabel 5.6 Layout Interface
66
H. Media Pendukung
Gambar 5.26 Media Pendukung game “Aku Tanggap Bencana Gunung Api”
1. Stiker
Gambar 5.27 Stiker Game” Aku Tanggap Bencana Gunung Api”
Penjelasan : Stiker dengan ukuran 5,5 x 9 cm Bahan : Kromo
67
Didalam stiker tedapat materi pembelajaran berupa isyarat gunung api yaitu awas, siaga, waspada, dan normal beserta pengertiannya, disamping itu juga terdapat karakter game sebagai tokoh yang menyampaikan isi materi tersebut dengan background interface opening game Aku Tanggap Bencana Gunung Api. Ditujukan agar stiker ini dapat berfungsi untuk mengingatkan konsumen terhadap bencana gunung api juga terhadap permainannya. Stiker ini diharapkan dapat diletakkan di media seperti binder, tempat pensil serta media yang sangat mudah dijangkau untuk dibawa konsumen. 2. Note book
Cover
Isi Gambar 5.28 Note Book Game ”Aku Tanggap Bencana Gunung Api”
Penjelasan : Spesifikasi : Ukuran
:A6 (14,85 x 10,5 cm)
Isi halaman
: 40 halaman hitam putih
Bahan cover : Art Carton 260 Bahan Isi
: HVS 70 gram
Jilid
: Spiral
Terdapat slogan, logo BNPB dan Universitas Mercu Buana Terdapat kolom data diri berupa nama, kelas dan alamat Note book ini bertujuan sebagai media mencatat materi ketika iya membuka media pembelajaraan pada game “Aku Tanggap Bencana Gunung Api”. juga
68
sebagai media mencatat poin- poin penting materi bencana yang disampaikan guru dikelas sesuai kurikulum kelas 5. I.
Tabel Anggaran SUB
KEBUTUHAN BIAYA TA
BANYAK
SATUAN
HARGA SATUAN
JUMLAH
JUMLAH TOTAL (IDR)
A.
Desain Perancangan Print Jurnal
2
Pc
13.200
26.400
Print Kuisioner
180
Lembar
1.000
180.000
Snack untuk
180
Pcs
2.000
360.000
Kuisioner 566.400 B.
Produksi Karya TA Buku Tutorial Flash Harga Desain
2 5 jam/ hari
Unit
32.000
64.000
28 hari
15.000
420.000 484.000
C.
Produksi Media Pendukung Sticker Notebook
3 15
Lembar
5.000
15.000
Pcs
5.000
75.000 90.000
D.
Pameran TA Sewa Stand
1
Unit
333.500
Kain Meja
1
Unit
Milik
333.500
Pribadi Kaos
1
Pc
47.000
47.000
Back drop
1
Lembar
50.000
50.000
X Banner
1
Pc
50.000
50.000
Panel
5
Pcs
5.000
25.000
Standing Karakter
1
Pc
5.000
5.000
Sterofoam
2
Pcs
17.000
34.000
Kartu Nama
1
Pc
15.000
15.000 544.500 .Jumlah Total
Tabel 5.7 Anggaran Biaya
69
1.684.900
