BAB III ANALISIS DAN PERANCANGAN 3.1
Analisis dan Permasalahan Analisis game serta permasalahan yang ada di dalamnya merupakan analisis yang meliputi dua hal, yaitu analisis user yang dilakukan dengan menyebarkan kuesioner dan analisis game sejenis yang dilakukan dengan melakukan observasi game-game sejenis. 3.1.1
Analisis User Pada tahap analisis user ini, kami melakukan pengumpulan data dengan menggunakan kuesioner secara langsung sebagai sarana pengumpulan data. Kuesioner tersebut terdiri dari 10 pertanyaan yang diberikan kepada 45 orang responden dengan range umur antara 10 – 15 tahun. Adapun pertanyaan dan data yang berhasil kami kumpulan adalah sebagai berikut : 1. Apakah anda : a. Pria b. Wanita
Gambar 3.1 Hasil kuesioner jenis kelamin responden
40
41
Berdasarkan pertanyaan di atas dapat disimpulkan sebagian besar responden berjenis kelamin pria. 2. Diantara game berikut, bentuk game mana yang paling anda suka ? a. Game console (PS, PS2, BOX, dll) b. Game handphone (iphone, BB, dll) c. Game komputer online (Ragnarok, PB, dll ) d. Game komputer offline
Gambar 3.2 Hasil kuesioner favourite game user
Pertanyaan ini diajukan untuk mengetahui bentuk game seperti apa yang paling disukai responden serta mengetahui perangkat apa yang mereka gunakan sehingga kita dapat melihat seberapa besar ketertarikan responden terhadap game yang berada di dalam handphone. Dapat disimpulkan bahwa sebanyak 15.56% (7 orang) menyukai game console, sebanyak 26.67% (12 orang) menyukai game handphone, sebanyak 40.00% (18 orang) menyukai game komputer online, sebanyak 17.78% (8 orang) menyukai game komputer offline.
42
3. Apakah anda suka bermain game pada handphone ? (offline maupun online) a. Ya b. Tidak
Gambar 3.3 Hasil kuesioner menghitung berapa banyak orang yang menyukai game handphone
Pertanyaan ini diajukan untuk mengetahui apakah responden suka bermain game pada handphone mereka atau tidak. Dari pertanyaan ini didapatkan kesimpulan bahwa sebanyak 66.67% (30 orang) menyukai game pada handphone dan sebanyak 33.33% (15 orang) tidak menyukai game pada handphone.
4. Desain gambar apakah yang anda suka ? a. Gambar kartun b. Gambar tangan (sketsa) c. Gambar komputer
43
Gambar 3.4 Hasil kuesioner design favourite user
Pertanyaan ini diajukan untuk mengetahui tampilan seperti apa yang responden sukai sehingga dapat menjadi masukan ke depannya untuk kami sehingga tampilan bisa lebih baik lagi. Berdasarkan pertanyaan tersebut didapat kesimpulan bahwa sebanyak 55.56% (25 orang) menyukai gambar kartun, sebanyak 8.89% (4 orang) menyukai gambar tangan (sketsa), dan sebanyak 35.56% (16 orang) menyukai gambar komputer.
5. Apakah anda pernah mendengar/tahu tentang game jenis action RPG (RolePlaying Game ) ? a. Ya b. Tidak
Gambar 3.5 Hasil kuesioner pengetahuan user terhadap game action RPG
44
Berdasarkan pertanyaan tersebut didapat kesimpulan bahwa sebanyak 68.89% (31 orang) mengetahui game berjenis action RPG, dan sebanyak 31.11% (14 orang) tidak mengetahui game berjenis action RPG
6. Apakah anda pernah mendengar/tahu tentang game jenis action casual ? c. Ya d. Tidak
Gambar 3.6 Hasil kuesioner pengetahuan user terhadap game action casual
Berdasarkan pertanyaan tersebut didapat kesimpulan bahwa sebanyak 46.67% (21 orang) mengetahui game berjenis casual, dan sebanyak 53.33% (24 orang) tidak mengetahui game berjenis casual.
7. Jenis game apakah yang anda suka ? a. RPG – Role-Playing Game (user dapat mengendalikan permainan) b. Casual (user tidak dapat mengatur alur permainan)
45
Gambar 3.7 Hasil kuesioner jenis game yang disukai user
Pertanyaan ini diajukan untuk mengetahui ketertarikan user terhadap jenis game yang ada. Apakah user lebih suka mengatur alur cerita sendiri atau user lebih suka jika alur cerita sudah disediakan. Berdasarkan pertanyaan tersebut didapat kesimpulan bahwa sebanyak 73.33% (33 orang) menyukai game berjenis RPG dan sebanyak 26.67% (12 orang) menyukai game berjenis casual.
8. Apakah tujuan anda bermain game ? a. Mengisi waktu luang b. Hobby c. Tantangan
Gambar 3.8 Hasil kuesioner tujuan user bermain game
46
Berdasarkan pertanyaan tersebut didapat kesimpulan bahwa sebanyak 60.00% (27 orang) bermain game untuk mengisi waktu luang dan sebanyak 31.11% (14 orang) bermain game karena hobby, dan dan sebanyak 8.89% (4 orang) bermain game karena tantangan.
9. Menurut anda, unsur apakah yang paling penting dalam sebuah game ? a. Cerita b. Gambar c. Alur cerita
Gambar 3.9 Hasil kuesioner unsur penting dalam sebuah game menurut user
Berdasarkan pertanyaan tersebut didapat kesimpulan bahwa sebanyak 17.78% (8 orang) menyatakan bahwa unsur penting dalam sebuah game terletak pada cerita, sebanyak 24.44% (11 orang) menyatakan bahwa unsur penting dalam sebuah game terletak pada gambar, dan sebanyak 57.78% (26 orang) menyatakan bahwa unsur penting dalam sebuah game terletak pada alur cerita.
47
10. Menurut anda apakah penting sebuah handphone memiliki game di dalamnya ? a. Ya b. Tidak
Gambar 3.10 Hasil kuesioner seberapa penting game dalam sebuah handphone
Pertanyaan ini diajukan untuk mengetahui seberapa banyak responden yang memiliki game di dalam handphone mereka. Berdasarkan pertanyaan tersebut didapat hasil bahwa sebanyak 73.33% (33 orang) berpendapat pentingnya memiliki game di dalam handphone mereka, dan sebanyak 26.67% (12 orang) berpendapat tidak harus memiliki game di dalam handphone mereka. Berdasarkan hasil analisa user
menunjukan, terdapat sebanyak
66,67% responden yang menyukai mobile game, dan sebanyak 73,33% responden berpendapat bahwa dalam handphone diperlukan game didalamnya.
48
3.1.2
Analisis game sejenis Analisis game dilakukan terhadap 1 (satu) jenis game lain yang berbasis platform Blackberry, sehingga didapatkan perbandingan yang seimbang. Game tersebut berjudul “Moo Math Lite”. Game “Moo Math Lite” ini merupakan game yang content-nya mengandung permainan matematika, dimana dalam permainan tersebut pemain dapat memilih operator matematika yang diinginkan, dan sudah tersedia 3 (tiga) pilihan jawaban yang dapat membantu pemain mendapatkan point atau nilai. Dalam permainan “Moo Math Lite”, akhir permainan ini akan terjadi apabila pemain dapat mengumpulkan point atau nilai sebanyak 100. Jika pemain dapat menjawab pertanyaan yang diberikan, maka akan terdengar suara “Moo” sapi, dan apabila pemain tidak dapat menjawab pertanyaan tersebut akan terdengar suara ayam.
49
Table 3.1 Keterangan game sejenis – “Moo Math Lite”] “Moo Math Lite” No
Gambar
Keterangan
l
Home Gambar ini merupakan tampilan menu utama dari game “Moo Math Lite”. Terdapat 5 (lima) pilihan seperti yang dapat kita lihat pada gambar disamping.
2
Options Gambar ini merupakan tampilan apabila kita meng-klik button “options”, maka akan muncul pilihan
operator
matematika
yang dapat dipilih oleh pemain. Dan terdapat juga pengaturan sound
jika
menginginkan
pemain
tidak
suara
dalam
50
permainan ini. 3
Play Gambar ini merupakan tampilan jika kita memilih menu play pada layar home. Terdapat soal yang diberikan, dan terdapat juga 3 (tiga) pilihan jawaban untuk mempermudah pemain untuk menjawab.
4
Prize Gambar ini merupakan tampilan prize yang terdapat pada menu home.
Tampilan
ini
akan
muncul apabila pemain berhasil mengumpulkan 100 point, dan akan mendapatkan dancing cow sebagai hadiahnya.
51
3.1.2.1
Permasalahan dari game sejenis
Table 3.2 Permasalahan-permasalahan pada game “Moo Math Lite” “Moo Math Lite” Karakter
Terdapat 2 (dua) karakter pada game ini : karakter pertama adalah sapi sebagai karakter utama, dan karakter kedua adalah ayam
Pewarnaan
Pewarnaan pada game ini sudah bagus, sederhana, dan cerah, tetapi hanya menggunakan sedikit warna didalamnya
Tingkat level
Terdapat tingkat level sampai permainan berakhir
Tingkat Kesulitan
Tingkat kesulitan akan bertambah seiring dengan bertambahnya level. Namun dengan adanya 3 (tiga) pilihan jawaban membuat tingkat kesulitan ini menjadi lebih mudah
User Inteface
Terdapat beberapa kekurangan pada tampilan user interface : -
Semua tombol button pada game ini terlihat tidak menyatu dengan background yang ada.
-
Penempatan semua tombol button pada game
52
ini terlihat tidak menarik Game Play
Game play pada game ini membosankan karena tidak terdapat variasi game, sehingga pemain merasakan kebosanan akibat operator matematika yang tidak dapat diubah
selama
permainan
berlangsung.
(Pemain
menentukan operator matematika diawal permainan) Loading
Loading lama
Sound
Sound
hanya
muncul
ketika
pemain
menjawab
pertanyaan saja
3.2
Perancangan Sistem Perancangan sistem yang dipakai adalah perancangan UML, yang meliputi Use Case Diagram, Class Diagram, Activity Diagram, Sequence Diagram.
53
3.2.1
Use Case Diagram
System Start Game
Select Character
Level1
Level2
Level3
User
Change Background
Load Game Sound Option
Admin Credits
Exit
Gambar 3.11 User dapat mengakses menu New Game, Load Game, Option, Exit pada permainan “Bubu & Baba Adventures”
54
3.2.1.1 Use Case Specification – Start Game Table 3.3 Use Case Specification – Start Game Use Case Name
Start Game
Primary Actor
User
Primary System Actor
None
Description
User memilih karakter yang telah disediakan (terdapat dua (2) karakter) untuk memulai permainan
Preconditions
User berada di tampilan menu utama
Trigger
Use case dijalankan apabila user memilih tombol “Start game”
Typical Course Events
Actor Action
System Response
1. User mengklik button “Start Game”
2. Menampilkan
halaman select
character 3. User memilih karakter yang diinginkan
yang
telah
disediakan 4. Menampilkan alur permainan Conclusion
Use case berhasil dijalankan apabila user telah memilih karakter pada halaman select character
Postconditions
User berada di halaman stage 1, yaitu “ Mathematics Battle ”
55
3.2.1.2
Use Case Specification – Load Game
Use Case Name
Load Game
Primary Actor
User
Primary System Actor
None
Description
Use case ini menjelaskan proses-proses dimana data permainan terakhir user (level terakhir) akan di-load terlebih dahulu sebelum menjalankan aplikasi utama
Preconditions
Aplikasi tidak dijalankan
Trigger
Use case dijalankan apabila user menjalankan aplikasi game “Bubu & Baba Adventures”
Typical Course Events
Actor Action
System Response
1. User menjalankan aplikasi game 2. Load data sebelumnya 3. Menyimpan data (level terakhir) ke sqlite
56
Conclusion
Use case berhasil dijalankan apabila user telah memasuki tampilan menu utama dengan data yang sudah berhasil disimpan agar data terakhir dapat di-load
Postconditions
User berada di tampilan menu utama Table 3.4 Use Case Specification – Load Game 3.2.1.3
Use Case Specification – Level 1
Table 3.5 Use Case Specification – Level 1 Use Case Name
Level 1
Primary Actor
User
Primary System Actor
None
Description
Use case ini menjelaskan ketika user memulai permainan, dimana user harus menyelesaikan pertanyaan-pertanyaan matematika yang diberikan
Preconditions
User telah memilih karakter
Trigger
Use case dijalankan apabila user telah memilih karakter pada halaman select character
Typical Course
Actor Action
Events
System Response 1. Menampilkan halaman tampilan stage Battle”
2. User menjawab pertanyaan-
1,
yaitu
:
“Mathematics
57
pertanyaan telah
metematika
diberikan
pada
yang kotak
dialog 3. Karakter user akan bergerak maju apabila dapat menjawab pertanyaan yang diberikan dan akan diam di tempat apabila salah menjawab. Begitu pula dengan karakter pada sistem.
Pertanyaan
akan
terus
diberikan hingga salah satu dari karakter mencapai garis finish Conclusion
Use case berhasil dijalankan apabila user berhasil menjawab beberapa pertanyaan matematika hingga garis finish
Postconditions
User berada dihalaman stage 2 “‘Rock-Scissor-Paper’ Battle”
3.2.1.4
Use Case Specification – Level 2
Table 3.6 Use Case Specification – Level 2 Use Case Name
Level 2
Primary Actor
User
Primary System Actor
None
Description
Use case ini menjelaskan ketika user berada di level 2, dimana user
58
harus menyelesaikan pertandingan “Rock-Scissor-Paper Battle” melawan komputer Preconditions
User telah menyelesaikan level 1
Trigger
Use case dijalankan apabila user telah menyelesaikan level 1
Typical Course
Actor Action
Events
System Response 1. Menampilkan halaman tampilan stage 2, yaitu : “Rock-ScissorPaper Battle”
2. User memilih pilihan yang diberikan pada kotak dialog 3. Karakter pohon
user
memanjat
apabila dapat menang
melawan dengan
akan
sistem. karakter
Begitu pada
pula sistem.
Pilihan akan terus diberikan hingga salah satu dari karakter mencapai garis finish. Conclusion
Use case berhasil dijalankan apabila user berhasil memenangkan permainan hingga garis finish
Postconditions
User berada dihalaman stage 3 yaitu:“ Find Out the Difference Things of the Picture “
59
3.2.1.5
Use Case Specification – Level 3 Table 3.7 Use Case Specification – Level 3
Use Case Name
Level 3
Primary Actor
User
Primary System Actor
None
Description
Use case ini menjelaskan ketika user berada di level 3, dimana user harus menyelesaikan mencari perbedaan-perbedaan gambar yang diberikan
Preconditions
User telah menyelesaikan level 2
Trigger
Use case dijalankan apabila user telah menyelesaikan level 2 pada halaman level 2
Typical Course
Actor Action
Events
System Response 1. Menampilkan halaman tampilan stage 3, yaitu : “Find Out the Difference Things of the Picture”
2. User
mencari
perbedaan-
perbedaan gambar yang telah diberikan 3. Perbedaan akan terus diberikan hingga
semua
perbedaan
berhasil di temukan
telah
60
Conclusion
Use case berhasil dijalankan apabila user berhasil mencari semua perbedaan – perbedaan gambar yang di berikan
Postconditions
User berhasil menyelesaikan semua level yang ada pada game “Bubu & Baba Adventures” dan masuk ke dalam ending scene
3.2.1.6
Use Case Specification – Option Tabel 3.8 Use Case Specification – Option
Use Case Name
Option
Primary Actor
User
Primary System Actor
None
Description
User mengklik button ”Option” pada menu utama
Preconditions
User berada di tampilan menu utama
Trigger
Use case dijalankan apabila user memilih button “Option”
Typical Course Events
Actor Action 1. User
mengklik
System Response button
“Option” 2. Menampilkan halaman option Conclusion
Use case berhasil dijalankan apabila user telah berada pada halaman option
Postconditions
User berada di tampilan menu utama
61
3.2.1.7
Use Case Specification – Sound Tabel 3.9 Use Case Specification – Sound
Use Case Name
Sound
Primary Actor
User
Primary System Actor
None
Description
User mengklik button ”Sound” pada menu option
Preconditions
User berada di tampilan menu option
Trigger
Use case dijalankan apabila user memilih button “Option”
Typical Course
Actor Action
Events
1.
User
mengklik
System Response button
“Sound” 2. Menampilkan halaman sound Conclusion
Use case berhasil dijalankan jika user berada pada halaman option
Postconditions
User berada di halaman sound
3.2.1.8
Use Case Specification – Credits Tabel 3.10 Use Case Specification – Credits
Use Case Name
Credits
Primary Actor
User
62
Primary System Actor
None
Description
User memilih menu credits pada menu option, maka akan ditampilkan daftar nama para developer game “Bubu & Baba Adventures”
Preconditions
User berada di tampilan menu utama
Trigger
Use case dijalankan apabila user memilih tombol “Credits” pada halaman menu option
Typical Course
Actor Action
Events
1. User
mengklik
System Response button
"Credits” 2. Menampilkan halaman credits Conclusion
Use case berhasil dijalankan apabila user telah berada pada halaman option
Postconditions
User berada di halaman credits
3.2.1.9
Use Case Specification – Exit Tabel 3.11 Use Case Specification – Exit
Use Case Name
Exit
Primary Actor
User
Primary System Actor
None
63
Description
Use case ini menjelaskan ketika user ingin keluar dari aplikasi game
Preconditions
None
Trigger
Use case dijalankan apabila user mengklik button “Exit” pada menu utama
Typical Course
Actor Action
Events
1.
System Response
User mengklik button “Exit” 2. Menampilkan halaman exit
3.
User memilih keluar atau
tidak dari aplikasi Conclusion
Use case berhasil dijalankan apabila user berhasil keluar atau tidak dari aplikasi game
Postconditions
jika memilih ya, maka user akan keluar dari aplikasi tetapi apabila memilih tidak, maka user akan kembali ke menu utama
3.2.1.10
Use Case Specification – Change Background (Back-end application)
Tabel 3.12 Use Case Specification – Change Background.
Use Case Name
Change Background
Primary Actor
Admin
Primary System Actor
None
Description
Admin dapat mengganti background game
64
Preconditions
Admin berada ditampilan menu utama back-end
Trigger
Use case dijalankan apabila admin memilih tombol “Change Background”
Typical Course Events
Actor Action
System Response
1. Admin mengklik button “Change background” 2. Menampilkan halaman browse data 3. Admin memilih file yang diinginkan 4. Validasi file apakah benar atau tidak, apabila benar maka data yang berada di database akan diganti dengan data yang baru dan menampilkan notifikasi
Conclusion
Use case berhasil dijalankan apabila admin berhasil mengganti background
Postconditions
Admin berada di halaman menu utama back-end
65
3.2.2
Sequence Diagram 3.2.2.1 Sequence Diagram – Start Game
UI:StartGame
UI:SelectCharacter
User pushScreen(StartGame) Display SelectCharacterScreen() Choose Character
Validate(player) Display FirstIntro pushScreen(Intro1) Display Intro1 pushScreen(level1) Starting Game
Gambar 3.12 Sequence Diagram – Start Game Pada gambar ini dijelaskan aturan/alur permainan ketika user ingin memulai permainan. User mengklik button ”Start Game” pada menu utama. Lalu akan ditampilkan halaman select character. User harus memilih salah satu dari kedua karakter untuk memulai game.
66
3.2.2.2 Sequence Diagram – Load Game
UI:LoadGame User
Database
pushScreen(LoadGame) cekDatabase() update(level, player)
alt
[ level = 0 ]
Display No File update(level, player)
[ level >=1 || level <=3 ]
Display Last Game
Gambar 3.13 Sequence Diagram – Load Game
Pada gambar ini akan dijelaskan urutan/alur load game ketika user ingin melanjutkan permainannya. User mengakses halaman load game dengan cara mengklik button “Load Game” pada menu utama. Ketika tidak ada data yang tersimpan akan ditampilkan notifikasi bahwa tidak ada file yang dapat di–load, namun jika terdapat data yang tersimpan maka akan ditampilkan layar dimana user terakhir kali bermain.
67
3.2.2.3
Sequence Diagram – Level 1
UI:Level1
User
Database
Input Answer
Loop
submitJawaban() Character Move / Not Reach Finish Line Display Win / Lose pushScreen(IntroLevel2) Save Level
update(level,player) Return Display Intro Level 2
Gambar 3.14 Sequence Diagram – Level 1
Pada gambar ini dijelaskan urutan/alur game ketika user berada di level 1, yaitu “Mathematics Battle”. User menginput jawaban pada kotak jawaban lalu menekan enter, dan jawaban akan divalidasi. Apabila jawaban benar, maka karakter akan bergerak maju dan untuk pertanyaan selanjutnya tingkat kesulitan pertanyaan akan ditingkatkan
68
sedangkan jika jawaban salah, maka karakter tidak bergerak maju (diam di tempat). Ketika user mencapai garis finish, akan muncul notifikasi bahwa user telah menang dan harus menekan button “Enter” untuk masuk ke halaman introduction level 2.
3.2.2.4
Sequence Diagram – Level 2
UI:Level2
User
Database
Input Choice
loop
cek(choice) Character Move / Not Reach Finish Line Display Win / Lose pushScreen(IntroLevel3) Save Level
update(level,player) Return Display Intro Level 3
Gambar 3.15 Sequence Diagram – Level 2
Pada gambar ini akan dijelaskan urutan/alur game ketika user berada di level 2, yaitu “Rock-Scissor-Paper Battle”. User menekan angka 1 untuk memilih batu, 2 untuk memilih gunting, dan 3 untuk memilih kertas. Apabila user menang maka karakter akan memanjat pohon sedangkan apabila user kalah maka karakter tidak akan memanjat pohon. Pilihan akan diberikan hingga user mencapai finish dan akan muncul notifikasi
69
bahwa user telah menang dan harus menekan button “Enter” untuk masuk ke halaman introduction level 3.
3.2.2.5
Sequence Diagram – Level 3
UI:Level3
Database
User Find Out The Differences loop Validate(point) The Number of Differences Decreased / Not The Number of Differences = 0 Display Win pushScreen(EndingScreen) Save Game
update(level,player) Return Display Ending Screen
Gambar 3.16 Sequence Diagram – Level 3
Pada gambar ini dijelaskan urutan/alur game ketika user berada di level 3, yaitu “Find Out the Differences Things of the Picture”. User harus mencari perbedaan pada gambar yang diberikan hingga semua perbedaan berhasil ditemukan. Apabila semua
70
perbedaan telah ditemukan maka permainan selesai dan akan muncul notifikasi bahwa user telah menyelesaikan semua level yang terdapat pada game “Bubu & Baba Adventures”.
3.2.2.6 Sequence Diagram – Option
UI:Option User
pushScreen(OptionScreen) Display Option Screen
alt
pushScreen(SoundScreen) Display Sound Screen
[ Click Sound ]
pushScreen(CreditScreen) Display Credits Screen
[ Click Credits ]
Gambar 3.17 Sequence Diagram – Option
Pada gambar ini dijelaskan ketika user memilih menu option pada menu utama, maka akan ditampilkan halaman option dimana terdapat 2 (dua) button pilihan, yaitu button “Sound” dan button “Credits”.
71
3.2.2.7 Sequence Diagram – Sound
UI:Sound User
Controller :ClipsPlayer
pushScreen(SoundScreen) Display Sound Screen navigationClick(SoundON)
alt
loadLoop(song) [ Sound = ON ]
Return
navigationClick(SoundOFF) [ Sound = OFF ]
stop(song) Return
Display Sound ON / OFF
Gambar 3.18 Sequence Diagram – Sound
Pada gambar ini dijelaskan ketika user memilih button “Sound” pada menu option, maka akan ditampilkan halaman sound. Setelah itu user memilih button “Sound OFF” untuk menghentikan musik atau button “Sound ON” untuk memainkan musik.
72
3.2.2.8 Sequence Diagram – Credits
UI:CreditScreen User pushScreen(CreditScreen) Display Credits Screen
Gambar 3.19 Sequence Diagram – Credits
Pada gambar ini dijelaskan ketika user memilih button “Credits” pada menu option, maka akan ditampilkan daftar nama para developer game “Bubu & Baba Adventures”.
3.2.2.9 Sequence Diagram – Exit
UI:ExitScreen User
pushScreen(ExitScreen) Display Exit Screen Choose Choice Exit Application
alt [ Click YES ]
[ Click NO ]
Back to Application
73
Gambar 3.20 Sequence Diagram – Exit Ketika user memilih menu exit, maka akan ditampilkan sebuah pilihan konfirmasi apakah user benar-benar ingin keluar dari game “Bubu & Baba Adventures” atau tidak. Jika user memilih tidak, maka user kembali ke menu utama dan jika user memilih ya, maka user keluar dari game.
3.2.2.10 Sequence Diagram – Change Background (Pada Aplikasi Back-end)
UI: BackendBackground
Database
Admin Click Button Choose File Display File Picker Admin Chooses File
setFilter() Change Background
update(background) Return Display Notification
Gambar 3.21 Sequence Diagram – Change Background
74
(Pada Aplikasi Back-end)
Pada gambar ini akan dijelaskan urutan/alur ketika admin ingin mengubah gambar pada game. Admin mengklik button “Change Background” pada menu utama aplikasi back-end, lalu akan ditampilkan halaman file picker untuk memilih gambar. Setelah admin memilih file yang diinginkan maka akan dilakukan validasi tipe file, apabila tipe file sudah benar file data lama akan diganti dengan file data yang baru dan menampilkan notifikasi sukses sedangkan jika tipe file salah maka akan menampilkan notifikasi tipe file salah.
3.2.3
Activity Diagram 3.2.3.1 Activity Diagram – Start Game
User mengklik button Start Game dalam tampilan layar utama
Menampilkan screen Select Character
[tidak]
Ingin tampilkan karakter ? [ya]
Menampilkan alur cerita
Gambar 3.22 Activity Diagram – Start Game
75
Pada activity diagram – start game, pertama pemain harus memilih menu start game terlebih dahulu pada menu utama, lalu pemain harus memilih salah satu dari dua karakter yang diberikan, dimana jika pemain memilih karakter maka akan ditampilkan alur cerita sebelum permainan dimulai.
3.2.3.2 Activity Diagram – Load Game
User Mengklik Button Load Game pada Tampilan Layar Utama
Mengambil Data Dalam Database
Menampilkan Tidak Ada File yang di-Load
Menampilkan Permainan Terakhir
[Level = 0]
[Level >= 1 || Level <= 3]
Gambar 3.23 Activity Diagram – Load Game
Pada activity diagram – load game ini menggambarkan urutan/alur permainan ketika user ingin melanjutkan permainan, dimana pemain mengklik button “Load Game” pada layar utama maka akan ditampilkan halaman load game. Ketika tidak ada data yang tersimpan akan ditampilkan notifikasi bahwa tidak ada file yang dapat di–load, namun
76
jika terdapat data yang tersimpan maka akan ditampilkan layar dimana user terakhir kali bermain.
3.2.3.3 Activity Diagram – Level 1
User Menginput Jawaban pada Kotak Jawaban yang Telah disediakan
Validasi Jawaban
Apakah jawaban benar ?
[tidak]
[ya]
Character Tidak akan Berjalan
Character akan Berjalan Maju
ValidasiPertanyaan Apakah sudah finish ?
[tidak]
[ya] Menampilkan Notifikasi Next Level
User Mengklik Enter
Gambar 3.24 Activity Diagram – Level 1
Pada activity diagram – level 1 ini menjelaskan urutan/alur game ketika user berada di level 1. User menginput jawaban pada kotak jawaban yang telah disediakan,
77
lalu jawaban akan divalidasi, benar atau salahnya jawaban akan menentukan apakah karakter akan bergerak, dan akan menentukan tingkat kesulitan pertanyaan. Pertanyaan akan diberikan hingga user mencapai garis finish dan menampilkan notifikasi next level. 3.2.3.4 Activity Diagram – Level 2
User Menginput Pilihan
Validasi Jawaban
Apakah anda menang ?
[ya]
[tidak] [seri]
Character User akan Memanjat Pohon
Character User Tidak akan Memanjat Pohon
Character Lawan dan User akan Diam
ValidasiData
[tidak]
[ya] Apakah sudah finish ?
User Mengklik Enter
Gambar 3.25 Activity Diagram – Level 2
Menampilkan Notifikasi Next Level
78
Pada activity diagram – level 2 ini menjelaskan urutan/alur game ketika user berada di level 2. User menginput pilihan pada kotak pilihan yang telah disediakan, lalu jawaban akan divalidasi, apabila pilihan benar maka karakter akan memanjat pohon, jika pilihan salah karakter tidak akan memanjat pohon dan jika pilihan seri karakter lawan dan user tidak akan memanjat pohon. Pilihan akan diberikan hingga salah satu karakter mencapai finish dan menampilkan notifikasi next level.
3.2.3.5 Activity Diagram – Level 3
User Mencari Perbedaan Pada Gambar
Validasi Jawaban
Mengurangi Jumlah perbedaan Apakah Perbedaan = 0 ?
[tidak]
[ya]
Finish
Gambar 3.26 Activity Diagram – Level 3
79
Pada activity diagram ini menjelaskan urutan/alur game ketika user berada di level 3. Setelah itu user mencari perbedaan gambar selanjutnya hingga semua perbedaan berhasil ditemukan. Apabila semua perbedaan telah ditemukan maka akan menampilkan halaman ending scene.
3.2.3.6 Activity Diagram – Option
User Mengklik Button Option pada Tampilan Layar Utama
Menampilkan Screen Option
Gambar 3.27 Activity Diagram – Option
Pada activity diagram ini dijelaskan jika pemain memilih menu option, maka akan ditampilkan halaman option.
3.2.3.7 Activity Diagram – Sound
User Mengklik Button Sound pada Tampilan Screen Option
User Mengklik Button OFF
User Mengklik Button ON
Menampilkan Screen Sound
[tidak]
Apakah anda ingin mengubah sound ?
[ya]
Sound ON
Sound OFF
80
Gambar 3.28 Activity Diagram – Sound Pada activity diagram ini dijelaskan jika user mengklik menu sound pada tampilan layar option, maka akan menampilkan halaman sound. Setelah itu user memilih pilihan antara menghentikan musik atau memainkan musik.
3.2.3.8 Activity Diagram – Credits
User Mengklik Button Credit pada tampilan Screen Option
Menampilkan Screen Credit
Gambar 3.29 Activity Diagram – Credits
Pada activity diagram credits ini dijelaskan ketika user memilih menu credits, maka akan ditampilkan daftar nama pembuat dan perancang game edukasi “Bubu & Baba Adventures”.
81
3.2.3.9 Activity Diagram – Exit
User mengklik Button Exit pada tampilan layar utama
Menampilkan screen Exit
[tidak]
Tampilkan exit ?
[ya]
Gambar 3.30 - Activity Diagram – Exit
Pada activity diagram exit ini dijelaskan ketika user memilih menu exit, maka akan ditampilkan sebuah konfirmasi apakah user benar-benar ingin keluar dari game “Bubu & Baba Adventures” atau tidak. Jika user memilih tidak, maka user kembali ke menu utama dan jika user memilih ya, maka user keluar dari game.
82
3.2.3.10 Activity Diagram – Change Background (Pada Aplikasi Back-end)
Admin Mengklik Button Change Background
Menampilkan Layar Browse File
Admin Memilih File
Validasi Data
[tidak]
Apakah data valid ?
[ya]
Menggubah Data pada Database
Gambar 3.31 - Activity Diagram – Change Background (Back-end)
Pada activity diagram change background dijelaskan urutan/alur ketika admin ingin mengubah gambar pada game. Admin mengklik button “Change Background”
83
pada menu utama aplikasi back-end, lalu akan ditampilkan halaman browse data untuk memilih gambar. Setelah admin memilih file yang diinginkan maka tipe file akan divalidasi, apabila tipe file sudah benar maka file data lama akan diganti dengan file data yang baru dan menampilkan notifikasi sukses sedangkan jika tipe file salah maka akan menampilkan notifikasi tipe file salah.
Class diagram
Gbr 3.32
84
3.3
Perancangan Game 3.3.1
Deskripsi Game Game yang akan kami buat ini merupakan game petualangan dengan jenis casual game, dimana pemain tidak dapat mengatur sendiri pengembangan dari karakter yang dipilih pada setiap level-nya, karena pemain akan dibimbing dan diarahkan pada setiap kenaikan level-nya. Game ini memiliki dua karakter, yaitu karakter perempuan dan karakter laki-laki. Dimana pemain hanya bisa memilih salah satu dari kedua karakter tersebut. Game ini merupakan game single player yang hanya dapat dimainkan oleh satu pemain saja. Pada game ini terdapat level-level yang harus diselesaikan, dimana terdapat berbagai test yang harus diselesaikan oleh pemain. Game ini tidak memiliki timer yang mengharuskan pemain mencapai tujuan dengan batas waktu. Game ini tidak hanya merupakan fun game, tetapi juga edukatif.
3.3.2
Perancangan Karakter
85
Terdapat tiga (3) karakter dalam game ini, tokoh-tokoh tersebut antara lain :
1.
Storyteller
Gambar 3.33 Storyteller akan memandu user dalam setiap level-nya 2.
Bubu
Gambar 3.34 Salah satu karakter utama wanita, “Bubu” 3.
Baba
86
Gambar 3.35 Salah satu karakter utama pria, “Baba” 3.3.3
Perancangan Game Play Ketika memulai permainan, pemain akan berada di menu utama dan dapat
memilih menu start game, load game, option, exit. Pada saat pemain memilih button “Start Game” terdapat gambaran untuk level-level yang akan dilalui, dan untuk pemain yang sudah pernah memainkan dapat memilih button “Load Game” pada menu utama. Pada button “Option” terdapat pengaturan suara dan credits.
3.3.4
Perancangan Story Cerita pada game ini berawal dari pemilihan karakter Bubu untuk karakter
Perempuan dan Baba untuk karakter laki-laki. Setelah pemain memilih karakter akan diberikan gambaran untuk level yang akan dilalui. Pada level pertama pemain akan diberikan sebuah tes dengan unsur ilmu matematika seperti pertambahan, pengurangan, perkalian, dan pembagian. Setelah berhasil melalui level pertama, pemain akan masuk ke level dua yang berisi permainan “suit” batu, gunting dan kertas. Pemain akan
87
melawan sistem. Pada level terakhir yaitu level ketiga pemain diminta mencari perbedaan – perbedaan dari gambar yang diberikan.
3.3.5
Perancangan Storyboard 3.3.5.1
Perancangan Storyboard front – end
1. Layar Main Menu Table 3.13 Perancangan layar Home MULTIMEDIA STORYBOARD Project : Bubu & Baba Adventures
Date : 16 Januari 2013
Screen : 1 of 15
Screen ID : main menu
LOGO
Start game Load game Option Exit
88
Gambar 3.36 Tampilan menu utama
Screen Description : Area ini adalah area menu utama. User dapat memilih start game untuk memulai game “Bubu & Baba Adventures”. Load game untuk melanjutkan permainan terakhir yang telah disimpan oleh user. Option untuk mengatur sound dan melihat credits. Exit untuk keluar dari permainan. Link From Screen ID : -
Link To Screen ID : start game, load game, option, exit
Color Scheme : Text Attributes : Menu – BBCasual, 24, putih (0xffffff) Still Images : main menu(.png), logo(.png), button(.png) Audio : SkripMusic.mp3 Video : Animation : -
2.
Layar Pemilihan Karakter
89
Table 3.14 Perancangan layar Select Character MULTIMEDIA STORYBOARD Project : Bubu & Baba Adventures
Date : 16 Januari 2013
Screen : 2 of 15
Screen ID : choose character
Back to Menu
Gambar 3.37 Tampilan untuk memilih karakter Screen Description : Pada halaman ini user dapat memilih karakter yang diinginkan untuk memainkan permainan ini. Terdapat dua (2) karakter yang dapat dipilih oleh user, yaitu karakter perempuan - ‘Bubu’ dan karakter laki-laki – ‘Baba’. Link From Screen ID : start game
Link To Screen ID : menu utama, introduction page
Color Scheme : Text Attributes : BBCasual, 24, hitam (0x000000) Still Images : choose character(.png), choice1(.png), choice2(.png), button(.png)
90
Audio : SkripMusic.mp3 Video : Animation : -
3.
Layar Introduction Page Table 3.15 Perancangan layar Introduction Page
MULTIMEDIA STORYBOARD Project : Bubu & Baba Adventures
Date : 16 Januari 2013
Screen : 3 of 15
Screen ID : introduction page
Story teller
Skip
Next
Gambar 3.38 Tampilan introduction awal oleh storyteller Screen Description : Pada area ini akan ada kalimat pembuka permainan “Bubu & Baba Adventures” oleh storyteller. Link From Screen ID : select character
Link To Screen ID : first introduction,
91
level 1 Color Scheme : Text Attributes : BBCasual, 24, hitam (0x000000) Still Images : FirstIntro(.png), button(.png) Audio : SkripMusic.mp3 Video : Animation : -
4.
Layar First Introduction Table 3.16 Perancangan layar First Introduction
MULTIMEDIA STORYBOARD Project : Bubu & Baba Adventures
Date : 16 Januari 2013
Screen : 4 of 15
Screen ID : first introduction
92
Story teller
Main Menu
Next
Gambar 3.39 Tampilan introduction level 1 oleh storyteller Screen Description : Pada area ini user dapat melihat story atau intro dari permainan “Bubu & Baba Adventures” untuk level 1 yang diperkenalkan oleh storyteller. Link From Screen ID : introduction page
Link To Screen ID : level 1, main menu
Color Scheme : Text Attributes : BBCasual, 24, hitam (0x000000) Still Images : IntroLevel1(.png), button(.png) Audio : SkripMusic.mp3 Video : Animation : -
5.
Layar Stage 1 - Mathematics Battle
93
Table 3.17 Perancangan layar Stage 1 – Mathematics Battle MULTIMEDIA STORYBOARD Project : Bubu & Baba Adventures
Date : 16 Januari 2013
Screen : 5 of 15
Screen ID : level 1
Gambar 3.40 Tampilan level pertama, ‘Math Test’ Screen Description : Pada area ini pemain akan diberikan pertanyaan – pertanyaan matematika. Pertanyaan akan semakin sulit jika pemain menjawab pertanyaan dengan benar. Dan pertanyaan akan turun ke peringkat yang lebih mudah apabila pemain salah menjawab. Sistem akan memainkan operator untuk level pertanyaan. Link From Screen ID : first introduction,
Link To Screen ID : second introduction,
loading game Color Scheme : Text Attributes : BBCasual, 24, hitam (0x000000)
94
Still Images : stage 1(.png), button(.png) Audio : SkripMusic.mp3 Video : Animation : -
6.
Layar Second Introduction Table 3.18 Perancangan layar Second Introduction
MULTIMEDIA STORYBOARD Project : Bubu & Baba Adventures
Date : 16 Januari 2013
Screen : 6 of 15
Screen ID : second introduction
Story teller
Main Menu
Play Level 2
Gambar 3.41 Tampilan introduction kedua oleh Storyteller Screen Description : Pada area ini user dapat melihat story atau intro dari permainan “Bubu & Baba Adventures” untuk level 2 yang diperkenalkan oleh storyteller.
95
Link From Screen ID : level 1
Link To Screen ID : level 2
Color Scheme : Text Attributes : BBCasual, 24, hitam (0x000000) Still Images : IntroLevel2(.png), button(.png) Audio : SkripMusic.mp3 Video : Animation : -
7.
Layar Stage 2 -‘Rock-Scissor-Paper’ Battle Table 3.19 Perancangan layar Stage 2 – Rock-Scissor-Paper Battle
MULTIMEDIA STORYBOARD Project : Bubu & Baba Adventures
Date : 16 Januari 2013
Screen : 7 of 15
Screen ID : level 2
1
2
3
96
Gambar 3.42 Tampilan level kedua, untuk ‘Rock-Scissor-Paper’ Battle Screen Description : Pada area ini pemain akan melakukan ‘Rock-Scissor-Paper’ Battle melawan sistem. Apabila pemain menang maka pemain akan naik ke atas pohon dan akan menang apabila telah mencapai puncak pohon. Link From Screen ID : second
Link To Screen ID : third introduction,
introduction, loading game Color Scheme : Text Attributes : BBCasual, 24, hitam (0x000000) Still Images : Stage 2(.png), batu(.png), gunting(.png), kertas(.png), b(.png), g(.png), k(.png) Audio : SkripMusic.mp3 Video : Animation : -
8.
Layar Third Introduction Table 3.20 Perancangan layar Third Introduction
MULTIMEDIA STORYBOARD Project : Bubu & Baba Adventures
Date : 16 Januari 2013
Screen : 8 of 15
Screen ID : third introduction
97
Sk ip
Story teller
Main Menu
Play Level 3
Gambar 3.43 Tampilan introduction ketiga oleh Storyteller Screen Description : Pada area ini user dapat melihat story atau intro dari permainan “Bubu & Baba Adventures” untuk level 3 yang diperkenalkan oleh storyteller. Link From Screen ID : level 2
Link To Screen ID : level 3
Color Scheme : Text Attributes : BBCasual, 24, hitam (0x000000) Still Images : IntroLevel2(.png), button(.png) Audio : SkripMusic.mp3 Video : Animation : -
9.
Layar Stage 3 – Find Out the Different things of the picture Table 3.21 Perancangan layar Stage 2 – Find Out the Different Things of the Picture
98
MULTIMEDIA STORYBOARD Project : Bubu & Baba Adventures
Date : 16 Januari 2013
Screen : 9 of 15
Screen ID : level 3
Gambar 3.44 Tampilan level ketiga – menemukan perbedaan - perbedaan Screen Description : Pada area ini pemain harus menemukan perbedaan-perbedaan dari gambar yang telah diberikan (kanan). Terdapat sepuluh (10) perbedaan. Link From Screen ID : third introduction,
Link To Screen ID : ending scene
loading game Color Scheme : Text Attributes : BBCasual, 24, hitam (0x000000) Still Images : Stage 3(.png) Audio : SkripMusic.mp3 Video : Animation : -
99
10.
Layar Option Menu Tabel 3.22 Tampilan layar Option Menu
MULTIMEDIA STORYBOARD Project : Bubu & Baba Adventures
Date : 16 Januari 2013
Screen : 10 of 15
Screen ID : Option
Sound Credit
Gambar 3.45 Tampilan menu option Screen Description : Pada area ini akan ditampilkan isi dari menu option, yaitu menu sound dan menu
100
credits Link From Screen ID : main menu
Link To Screen ID : Sound
Pengaturan suara (music)
Credits Color Scheme : Text Attributes : BBCasual, 24, hitam (0x000000) Still Images : option(.png), button(.png) Audio : SkripMusic.mp3 Video : Animation : -
11.
Layar Sound Menu Table 3.23 Perancangan layar Sound Menu.
MULTIMEDIA STORYBOARD Project : Bubu & Baba Adventures
Date : 16 Januari 2013
Screen : 11 of 15
Screen ID : sound
SOUND ….. SOUND ON
SOUND OFF
101
Main Menu
Gambar 3.46 Tampilan menu sound Screen Description : Pada area ini akan ditampilkan pengaturan sound (suara untuk music). Apabila sound off, maka tulisan yang berada dalam awan akan berubah menjadi : “Sound : OFF”. Link From Screen ID : option
Link To Screen ID : main menu
Color Scheme : Text Attributes : BBCasual, 24, hitam (0x000000) Still Images : sound(.png), button(.png) Audio : SkripMusic.mp3 Video : Animation : -
12.
Layar Credits Menu Table 3.24 Perancangan layar Credits Menu
MULTIMEDIA STORYBOARD Project : Bubu & Baba Adventures
Date : 16 Januari 2013
Screen : 12 of 15
Screen ID : credits
CREDITS “Bubu & Baba Adventures”
102
Gambar 3.47 Tampilan menu credits Screen Description : Pada area ini akan ditampilkan halaman credits permainan “Bubu & Baba Adventures”. Link From Screen ID : option
Link To Screen ID : main menu
Color Scheme : Text Attributes : BBCasual, 24, hitam (0x000000) Still Images : credits(.png), button(.png) Audio : SkripMusic.mp3 Video : Animation : -
13.
Layar Exit Menu Table 3.25 Perancangan layar Exit Menu
MULTIMEDIA STORYBOARD Project : Bubu & Baba Adventures
Date : 16 Januari 2013
103
Screen : 13 of 15
Screen ID : exit
LOGO
Are you sure want to exit ? Yes No
Gambar 3.48 Tampilan menu Exit Screen Description : Pada area ini akan ditampilkan menu exit apabila pemain ingin keluar dari permainan. Link From Screen ID : main menu
Link To Screen ID : main menu
Color Scheme : Text Attributes : BBCasual, 24, hitam (0x000000) Still Images : Exit(.png). button(.png) Audio : SkripMusic.mp3 Video : Animation : -
14.
Layar Ending Scene Table 3.26 Perancangan layar Ending Scene
104
MULTIMEDIA STORYBOARD Project : Bubu & Baba Adventures
Date : 16 Januari 2013
Screen : 14 of 15
Screen ID : Ending scene
ENDING SCENE
Gambar 3.49 Tampilan Ending scene Screen Description : Pada area ini akan ditampilkan ending scene jika pemain berhasil memenangkan permainan hingga level 3. Link From Screen ID : level 3
Link To Screen ID : -
Color Scheme : Text Attributes : BBCasual, 24, hitam (0x000000) Still Images : ending(.png) Audio : SkripMusic.mp3 Video : Animation : -
105
15. Layar Load game Menu Table 3.27 Perancangan layar Load game MULTIMEDIA STORYBOARD Project : Bubu & Baba Adventures
Date : 16 Januari 2013
Screen : 15 of 15
Screen ID : Load game
LOGO No File Can be Load ! Press Enter to Back to Menu Main Menu
Gambar 3.50 Tampilan Load game Screen Description : Pada area ini akan ditampilkan halaman load game untuk menyimpan data permainan
106
terakhir yang disimpan. Jika pemain telah bermain dan belum menyelesaikan permainan, maka akan kembali ke level terakhir pada saat pemain save data. Namun apabila pemain telah menyelesaikan semua level yang ada atau belu pernah bermain maka akan muncul kalimat : “No File Can be Load ! Press Enter to Back to Menu”. Link From Screen ID : main menu
Link To Screen ID : main menu
Color Scheme : Text Attributes : BBCasual, 24, hitam (0x000000) Still Images : loadgame(.png), button(.png) Audio : SkripMusic.mp3 Video : Animation : -
3.3.5.2
Perancangan Storyboard back – end
1. Layar change background Back-end Application Table 3.28 Perancangan layar change background aplikasi back-end MULTIMEDIA STORYBOARD Project : Bubu & Baba Adventures
Date : 16 Januari 2013
Screen : 1 of 1
Screen ID : main menu back-end
Tipe Background : . . . . . .
Reset Background Filter File extension : View :
All Default
107
Gambar 3.51 Tampilan menu utama aplikasi back-end Screen Description : Pada area ini akan ditampilkan menu utama dari aplikasi back-end Link From Screen ID : -
Link To Screen ID : -
Color Scheme : Text Attributes : BBCasual, 24, hitam (0x000000) Still Images : BackgroundBE(.png), button(.png) Audio : Video : Animation : -
