BAB III ANALISIS DAN PERANCANGAN. Analisis game serta permasalahan yang ada di dalamnya merupakan analisis yang

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 (Role- Playing 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 pemain tidak menginginkan 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 User Level3 Change Background Load Game Option Exit Sound Credits Admin 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 Primary Actor Primary System Actor Description Start Game User None User memilih karakter yang telah disediakan (terdapat dua (2) karakter) untuk memulai permainan Preconditions Trigger User berada di tampilan menu utama Use case dijalankan apabila user memilih tombol Start game Typical Course Events Actor Action 1. User mengklik button Start Game 3. User memilih karakter yang diinginkan yang telah disediakan System Response 2. Menampilkan halaman select character 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 1. User menjalankan aplikasi game System Response 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 Primary System Actor Description User None Use case ini menjelaskan ketika user memulai permainan, dimana user harus menyelesaikan pertanyaan-pertanyaan matematika yang diberikan Preconditions Trigger User telah memilih karakter Use case dijalankan apabila user telah memilih karakter pada halaman Typical Course Events select character Actor Action 2. User menjawab pertanyaan- System Response 1. Menampilkan halaman tampilan stage 1, yaitu : Mathematics Battle

57 pertanyaan metematika yang telah diberikan pada 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 Primary System Actor Description User None 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 Events Actor Action 2. User memilih pilihan yang diberikan pada kotak dialog System Response 1. Menampilkan halaman tampilan stage 2, yaitu : Rock-Scissor- Paper Battle 3. Karakter user akan memanjat pohon apabila dapat menang melawan sistem. Begitu pula dengan karakter pada 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 Primary System Actor Description User None 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 Typical Course Events halaman level 2 Actor Action 2. User mencari perbedaanperbedaan gambar yang telah diberikan System Response 1. Menampilkan halaman tampilan stage 3, yaitu : Find Out the Difference Things of the Picture 3. Perbedaan akan terus diberikan hingga semua perbedaan telah berhasil di temukan

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 Primary Actor Primary System Actor Description Preconditions Trigger Option User None User mengklik button Option pada menu utama User berada di tampilan menu utama Use case dijalankan apabila user memilih button Option Typical Course Events Actor Action 1. User mengklik button Option System Response 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 Primary Actor Primary System Actor Description Preconditions Trigger Sound User None User mengklik button Sound pada menu option User berada di tampilan menu option Use case dijalankan apabila user memilih button Option Typical Course Events Actor Action 1. User mengklik button Sound System Response 2. Menampilkan halaman sound Conclusion Postconditions Use case berhasil dijalankan jika user berada pada halaman option User berada di halaman sound 3.2.1.8 Use Case Specification Credits Tabel 3.10 Use Case Specification Credits Use Case Name Primary Actor Credits User

62 Primary System Actor Description None User memilih menu credits pada menu option, maka akan ditampilkan daftar nama para developer game Bubu & Baba Adventures Preconditions Trigger User berada di tampilan menu utama Use case dijalankan apabila user memilih tombol Credits pada halaman menu option Typical Course Events Actor Action 1. User mengklik button "Credits System Response 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 Primary Actor Primary System Actor Exit User None

63 Description Preconditions Trigger Use case ini menjelaskan ketika user ingin keluar dari aplikasi game None Use case dijalankan apabila user mengklik button Exit pada menu utama Typical Course Events Actor Action 1. User mengklik button Exit 3. User memilih keluar atau tidak dari aplikasi System Response 2. Menampilkan halaman exit 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 Primary Actor Primary System Actor Description Change Background Admin None Admin dapat mengganti background game

64 Preconditions Trigger Admin berada ditampilan menu utama back-end Use case dijalankan apabila admin memilih tombol Change Typical Course Events Background Actor Action 1. Admin mengklik button Change background 3. Admin memilih file yang diinginkan System Response 2. Menampilkan halaman browse data 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 Database User pushscreen(loadgame) cekdatabase() alt [ level = 0 ] [ level >=1 level <=3 ] Display No File Display Last Game update(level, player) update(level, player) 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 Database User 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 Database User 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) alt Display Option Screen pushscreen(soundscreen) Display Sound Screen pushscreen(creditscreen) Display Credits Screen [ Click Sound ] [ 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 Controller :ClipsPlayer User pushscreen(soundscreen) alt Display Sound Screen navigationclick(soundon) [ Sound = ON ] navigationclick(soundoff) [ Sound = OFF ] Display Sound ON / OFF loadloop(song) Return stop(song) Return 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 User pushscreen(creditscreen) UI: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 User pushscreen(exitscreen) Display Exit Screen Choose Choice UI:ExitScreen alt Exit Application [ 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) Admin Click Button Choose File UI: BackendBackground Database 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? [tidak] Character User Tidak akan Memanjat Pohon [seri] [ya] Character User akan Memanjat Pohon Character Lawan dan User akan Diam ValidasiData [tidak] [ya] Apakah sudah finish? Menampilkan Notifikasi Next Level User Mengklik Enter Gambar 3.25 Activity Diagram Level 2

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 [tidak] Apakah Perbedaan = 0? [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 Menampilkan Screen Sound User Mengklik Button OFF [tidak] Apakah anda ingin mengubah sound? User Mengklik Button ON [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 lain : Terdapat tiga (3) karakter dalam game ini, tokoh-tokoh tersebut antara 1. Storyteller Gambar 3.33 Storyteller akan memandu user dalam setiap level-nya 2. Bubu 3. Baba Gambar 3.34 Salah satu karakter utama wanita, Bubu

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 MULTIMEDIA STORYBOARD Table 3.14 Perancangan layar Select Character 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

Sk ip 97 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 :...... Filter Reset Background 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 : -