BAB 3 ANALISIS DAN PERANCANGAN - thesis.binus.ac.idthesis.binus.ac.id/Doc/Bab3/2011-1-00158-if 3.pdf · responden tentang sejarah kerajaan di Indonesia, dan ketiga untuk mengetahui

37

BAB 3

ANALISIS DAN PERANCANGAN

3.1 Analisis Game

Analisis game yang dilakukan terdiri dari dua jenis analisis, yaitu analisis user dan

analisis game sejenis. Analisis user dilakukan dengan memberikan kuisioner

terhadap user yang berkaitan dengan game yang dibuat, sedangkan analisis game

sejenis dilakukan dengan melakukan penelitian terhadap game sejenis.

3.1.1 Analisis User

Analisis user ini dilakukan dengan memberikan kuisioner kepada 100

responden remaja yang minimal masih duduk di bangku SMP. Kuisioner

dibagi menjadi tiga bagian, yaitu bagian pertama untuk mengetahui

karakteristik responden, bagian kedua untuk mengetahui tingkat pengetahuan

responden tentang sejarah kerajaan di Indonesia, dan ketiga untuk mengetahui

tingkat pengetahuan responden tentang kebudayaan daerah di Indonesia.

Berikut merupakan hasil dari kuisioner yang telah dilakukan:

Tabel 3.1 Sajian data frekuensi penggunaan komputer

Pertanyaan dan pilihan jawaban Jumlah

Dalam seminggu, berapa hari rata-rata anda menyempatkan diri menggunakan komputer?

a. 1-2 hari 21

b. 3-4 hari 26

c. 5-6 hari 12

38

d. Setiap hari 41

Gambar 3.1 Diagram frekuensi penggunaan komputer

Dari data hasil kuisioner mengenai frekuensi penggunaan komputer dalam

seminggu, sebesar 41% responden menggunakan komputer setiap harinya. Hal

ini menunjukkan bahwa responden sangat sering menggunakan komputer.

Dengan frekuensi seperti itu, saat menggunakan komputer untuk bermain

game, akan menjadi sangat baik jika game yang dimainkan memiliki unsur

edukasi sehingga tidak hanya mendapatkan hiburan tetapi juga pengetahuan

yang disajikan secara ringan dan menghibur.

Tabel 3.2 Sajian data minat responden terhadap kebudayaan daerah


Kebudayaan daerah Indonesia apakah yang paling menarik minat anda untuk dipelajari?

a. Seni tari 17

41%

12%

26%

21%

Setiap hari

5‐6 hari

3‐4 hari

1‐2 hari

39

b. Adat istiadat (upacara/ritual/norma) 23

c. Alat musik 36

d. Arstitektur tradisional 24

Gambar 3.2 Diagram minat responden terhadap kebudayaan daerah

Data mengenai minat responden terhadap kebudayaan daerah menunjukkan

alat musik memiliki peminat tertinggi, yaitu sebesar 36%, disusul oleh

arsitektur tradisional dan adat istiadat sebesar 24% dan 23%. Seni tari memiliki

peminat yang paling rendah sebesar 17%.

Berdasarkan data mengenai minat responden terhadap kebudayaan daerah,

maka materi yang akan disajikan lebih fokus mengenai alat musik, arsitektur

tradisional, dan adat istiadat.

36%

17%

24%

23%

Alat musik

Seni tari

Arsitektur tradisional

Adat istiadat

40

Tabel 3.3 Sajian data minat responden terhadap sejarah kerajaan


Kerajaan manakah yang paling menarik minat anda untuk dipelajari?

a. Kerajaan Islam 44

b. Kerajaan Budha 22

c. Kerajaan Hindu 33

Gambar 3.3 Diagram minat responden terhadap sejarah kerajaan

Data mengenai minat responden terhadap sejarah kerajaan menunjukkan

kerajaan Islam memiliki peminat tertinggi, yaitu sebesar 45%, disusul oleh

kerajaan Hindu dengan 33% dan kerajaan Budha dengan peminat terendah

sebesar 22%.

Untuk mengetahui tingkat pengetahuan responden terhadap kebudayaan

daerah dan sejarah kerajaan Indonesia, maka diberikan delapan soal

45%

22%

33%Kerajaan Islam

Kerajaan Budha

Kerajaan Hindu

41

kebudayaan daerah dan delapan soal sejarah kerajaan Indonesia kepada

masing-masing responden. Hasilnya adalah sebagai berikut.

Berdasarkan data mengenai minat responden terhadap sejarah kerajaan,

maka materi yang akan disajikan lebih fokus tentang sejarah kerajaan Islam

dan kerajaan Hindu.

Tabel 3.4 Sajian data nilai rata-rata pengetahuan responden

mengenai sejarah kerajaan

Hasil survei pengetahuan responden mengenai sejarah kerajaan Indonesia

Rata-rata

Benar Salah

52% 48%

Gambar 3.4 Diagram nilai rata-rata pengetahuan responden mengenai sejarah

kerajaan

0%10%20%30%40%50%60%70%80%90%

100%

52% 48%

Benar

Salah

42

Tabel 3.5 Sajian data nilai rata-rata pengetahuan responden

mengenai kebudayaan daerah

Hasil survei pengetahuan responden mengenai kebudayaan daerah Indonesia

Rata-rata

Benar Salah

49,5% 50,5%

Gambar 3.5 Diagram nilai rata-rata pengetahuan responden mengenai

kebudayaan daerah

Data nilai rata-rata pengetahuan responden mengenai sejarah kerajaan dan

kebudayaan daerah menunjukkan hasil yang hampir sama, yaitu responden

dapat menjawab empat jawaban dengan benar dari delapan soal yang

diberikan. Berdasarkan data tersebut, dapat disimpulkan bahwa pengetahuan

responden mengenai kebudayaan daerah dan sejarah kerajaan Indonesia masih

rendah.

0%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

49,5% 50,5%

Benar

Salah

43

Dari data tersebut, maka soal-soal yang akan diberikan dalam game

memiliki persentase yang seimbang antara materi tentang sejarah kerajaan dan

kebudayaan daerah.

3.1.2 Analisis Game Sejenis

Analisis game dilakukan dengan melakukan penelitian terhadap games sejenis

dan sudah ada sebelumnya. Analisis tersebut dijadikan sebagai bahan referensi

dalam hal konsep dan komponen yang saling berkaitan dengan game yang

dibuat. Games yang akan dianalisis adalah sebagai berikut:

1. Kendo Boy – The Typer

Game Kendo Boy – The Typer dipilih untuk dianalisis karena memiliki

kemiripan sistem battle dengan game edukasi yang dirancang.

• Genre

Genre game ini merupakan gabungan dari educational game dan action

game. Unsur edukasi game ini adalah memberikan pelatihan terhadap

user untuk mengetik kata-kata dengan menggunakan 10 jarinya. Kata-

kata yang diberikan berbahasa Indonesia dan Inggris. Selain belajar

untuk mengetik dengan 10 jari, user juga harus mengetik kata-kata

tersebut dengan cepat karena ada sejumlah waktu yang diberikan dari

sistem untuk selesai mengetik. Oleh karena itu, user harus cepat dalam

mengetik kata-kata yang diberikan, disinilah unsur action game ini.

Bahkan game ini adalah action game yang murni karena hanya

mengandalkan kecepatan user dalam mengetik.

44

• Tantangan

Tantangan game ini adalah user harus mencetak nilai setinggi mungkin

dan semakin tinggi level maka kata-kata yang harus diketik juga

semakin panjang dan sulit.

• Gameplay

Gameplay game ini bertipe battle antar dua orang (user melawan CPU).

User menggunakan keyboard dan mouse dalam bermain game ini.

Mouse digunakan untuk memilih menu-menu yang disediakan. User

akan diberikan kata-kata yang harus diketik secepat mungkin sebelum

waktu habis. Jika waktu habis maka user akan diserang oleh lawan dan

darah user akan berkurang. Semakin cepat selesai mengetik kata-kata

tersebut, makin tinggi nilai yang diperoleh. Selain itu, makin cepat user

mengalahkan lawan maka nilai yang diperoleh juga makin tinggi.

Ketika user berhasil mengalahkan lawan, maka user akan maju ke

ronde berikutnya.

Sistem permainan ini adalah survival-endless, maksudnya adalah

user tidak akan berhenti bermain selama belum kalah. Semakin tinggi

ronde yang dimainkan, semakin panjang dan sulit kata-kata yang

diberikan. Setiap sebuah ronde berhasil dimenangkan oleh user, darah

user akan dipulihkan sebagian.

45

Gambar 3.6 Tampilan gameplay ronde pertama Kendo Boy – The Typer

Gambar 3.7 Tampilan gameplay ronde ke-3 Kendo Boy – The Typer

• Interface

Interface sangat sederhana, hanya terdapat dua tombol saat menu

utama, yaitu exit dan start. Selain itu dua tombol lagi saat user kalah,

yaitu replay dan exit. Tombol-tombol tersebut disajikan dalam bentuk

46

teks. Desain yang disajikan juga sangat sederhana, warna yang

digunakan hanya hitam dan putih. Gambar-gambar yang ada juga

digambar seperti sketsa. Penggunaan interface sangat mudah dengan

sedikitnya tombol-tombol yang ada, selain itu karena tidak banyak

terdapat gambar-gambar maka tampilan game difokuskan ditengah

layar.

Gambar 3.8 Menu utama game Kendo Boy – The Typer

47

Gambar 3.9 Tampilan saat user kalah

• Rules

Rules dari game adalah user harus mengetik kata-kata yang diberikan

dengan benar. Tetapi user yang salah mengetik tidak harus mengetik

ulang kata-kata yang diberikan. Selain itu, User juga tidak harus

mengetik (spacebar) ketika kata-kata yang diberikan lebih dari satu

kata. Jika dalam kata-kata yang diberikan terdapat huruf kapital atau

simbol-simbol lain, maka user juga harus mengetiknya sama persis.

• Level design

Level design berupa ronde-ronde yang semakin tinggi dengan kata-kata

yang lebih panjang dan sulit. Setiap level tidak memiliki perbedaan

terhadap animasi, tampilan, atau fitur-fitur yang ada.

Setelah menganalisis game Kendo Boy – The Typer, penulis

menemukan kelebihan-kelebihan game tersebut antara lain:

48

• Gameplay yang sederhana memudahkan user dalam

mempelajarinya.

• Interface yang sederhana juga memudahkan user untuk

menggunakannya.

2. Who Wants to be Millionaire

Who Wants to be Millionaire dipilih untuk dianalisis karena memiliki

kemiripan tujuan dan cara bermain dengan game edukasi yang dirancang.

• Genre

Genre game ini merupakan gabungan dari educational game dan

entertaiment game. Unsur edukasi yang diberikan di game ini adalah

pengetahuan tentang menjawab pertanyaan yang ada pada game. Dalam

bermain game ini user dituntut untuk menjawab pertanyaan yang ada

untuk mencapai nilai maksimum.

• Tantangan

Tantangan game ini adalah mencapai titik nilai maksimum dengan

menjawab pertanyaan-pertanyaan yang diajukan.

• Gameplay

Gameplay game ini bertipe kuis yang hanya dapat dimainkan oleh satu

user. Di dalam game ini user dharuskan menjawab pertanyaan yang

diajukan untuk mencapai nilai maksimum tetapi bisa mengucapkan pas

jika merasa puas dengan nilai yang telah dicapai. Game ini memberikan

titik nilai aman kepada user sehingga jika user salah menjawab

49

pertanyaan yang diajukan maka nilai yang didapat dikembalikan ke titik

aman tersebut. Dalam game ini user diberikan tiga pilihan bantuan yang

dapat digunakan untuk membantu user untuk menjawab pertanyaan-

perntanyaan tersebut.

Gambar 3.10 Tampilan saat menggunakan pilihan bantuan

• Interface

Interface game ini dibuat semirip mungkin dengan acara tv yang

merupakan sumber dari dibuatnya game ini. Tombol-tombol yang

tersedia adalah pilihan menjawab A,B,C,D dan pilihan bantuan

menjawab. Didalam game ini tidak terlihat ada model yang

memerankan peran sebagai penjawab dan pemberi pertanyaan.

50

Gambar 3.11 Tampilan awal permaianan

Gambar 3.12 Tampilan akhir permaianan

51

• Rules

Rules dalam game ini adalah pertanyaan-pertanyaan yang diajukan

memiliki tingkat kesulitan yang berbeda-beda sesuai dengan tinggi

tingkat nilai yang ingin diraih.

Setelah melakukan analisis pada game ini, penulis mendapatkan

kesimpulan dari sistem bermain game ini yang dapat dijadikan referensi

bagi game yang dirancang, yaitu:

- Memiliki urutan tingkat kesulitan dalam soal-soal yang diajukan.

- Memiliki pilihan bantuan untuk membantu user dalam bermain

game ini.

3. Plants vs Zombies

Game Plants vs Zombies memiliki kesamaan sistem strategi dalam

memilih dan mengatur penggunaan barang-barang, dalam hal game Plants

vs Zombies adalah tanaman, yang membuat game ini sangat menarik untuk

dimainkan.

• Genre

Genre game ini adalah action strategy game. User menggunakan mouse

dalam bermain game ini. Dalam bermain game ini user harus mengatur

strategi dalam memilih dan menanam tanaman-tanaman yang

disediakan untuk dapat memenangkan level-level yang ada. Terkadang

user juga harus cukup cepat dalam menanam tanaman karena musuh

52

yang datang cukup banyak dan membutuhkan tanaman yang berbeda-

beda untuk mengalahkannya.

• Tantangan

Tantangan dalam bermain game ini adalah mempertahankan halaman

rumah yang diserang oleh zombies yang datang. User harus melawan

zombies tersebut agar tidak masuk ke rumah user.

• Gameplay

Sistem permainan game ini bertipe strategi. User menentukan ingin

membawa tanaman-tanaman untuk melawan zombies yang akan

menyerang. Setiap tanaman dan zombies memiliki keunikan masing-

masing. Beberapa zombies memiliki kelemahan terhadap tanaman

tertentu, sehingga user harus dapat mengatur strateginya dengan baik.

Tanaman-tanaman yang tersedia juga memiliki keunggulan dan

kelemahan yang berbeda-beda.

Disamping itu, setiap tanaman juga memiliki harga yang perlu

dibayarkan oleh user ketika ingin menanam tanaman tersebut. Pada

bagian inilah game ini menghindari terjadinya the dominant strategy

problem dan near dominance options. Harga setiap tanaman

disesuaikan dengan kemampuannya sehingga mewujudkan

keseimbangan terhadap nilai dari setiap tanaman yang tersedia.

53

Gambar 3.13 Tampilan gameplay Plants vs Zombies

• Interface

Interface game ini sangat menarik karena pada tampilan menu disertai

objek-objek gambar sesuai dengan tema game ini. Contohnya seperti

menggunakan gambar batu nisan untuk tombol adventure, mini-games,

puzzle, dan survival. Selain itu juga menggunakan metafora yang baik

untuk tombol shop, zen garden, dan almanac. Interface pada saat mulai

bermain juga mudah untuk dipelajari karena hanya terdapat slot

tanaman yang dibawa, tombol shovel, dan tombol main menu.

54

Gambar 3.14 Menu utama game Plants vs Zombies

• Rules

Rules game ini adalah membatasi jumlah tanaman yang dapat dibawa

oleh user. Selain itu jumlah kolom yang tersedia untuk menanam

tanaman juga dibatasi. Terdapat juga beberapa tanaman yang hanya

dapat ditanam pada kondisi tertentu.

• Fitur

Salah satu fitur game ini yang paling utama adalah memberitahu user

jenis-jenis zombies yang akan menyerang rumah user pada setiap level

sebelum user mulai bermain. Hal ini membuat user perlu memikirkan

strategi yang terbaik untuk melawan zombies tersebut.

55

Gambar 3.15 Tampilan game Plant vs Zombies saat memilih tanaman

yang dibawa

• Level design

Level design game ini dibuat dengan variasi kondisi waktu dan lahan.

Level yang berdasarkan waktu yaitu pada saat siang dan malam hari, hal

ini berpengaruh terhadap tanaman-tanaman yang lebih berguna saat

kondisi siang atau malam hari. Level yang berdasarkan lahan yaitu

halaman depan (hanya tanah rumput), halaman belakang (terdapat

kolam), dan atap rumah (harus menggunakan pot). Setiap level akam

mempengaruhi tanaman-tanaman yang akan dibawa user.

Selain melakukan analisis terhadap unsur-unsur sebuah game,

penulis juga melakukan analisis terhadap review dari orang-orang yang

telah memainkan game ini. Dari berbagai review tersebut, dapat

disimpulkan bahwa game ini memiliki gameplay yang sederhana, tetapi

56

memiliki berbagai macam tanaman untuk digunakan sehingga user

tidak mudah bosan dan terus memainkan game ini (pc.ign.com, 5 Mei

2009).

Setelah melakukan analisis terhadap desain game ini, penulis

menemukan aspek-aspek yang dibutuhkan sebuah game yang dirancang

dengan sangat baik, antara lain:

• Desain interface dengan metafora yang sesuai dengan fungsi

tombolnya.

• Pengaturan keseimbangan harga setiap tanaman yang sesuai dengan

kemampuannya.

Tabel 3.6 Kelebihan dan interaktivitas game sejenis

Judul game

Kelebihan

Interaktivitas

Kendo Boy: The Typer

Gameplay yang sederhana memudahkan user dalam bemain game ini

Kurang interaktif karena interface dan gameplay yang sangat sederhana Memiliki interface yang

sederhana sehingga user sangat mudah mempelajarinya

Plants vs Zombies

Memiliki desain interface dengan metafora yang sangat baik

Sangat interaktif karena memberikan umpan balik yang baik terhadap setiap aksi yang dilakukan user

Pengaturan keseimbangan terhadap harga dan kemampuan setiap tanaman sangat baik

Who Wants To Be a Millionaire

Menyediakan pilihan bantuan kepada user untuk dapat menyelesaikan game ini

Cukup interaktif, hanya saja interface yang ada sangat sederhana

57

3.2 Analisis Kebutuhan dan Usulan Pemenuhan Kebutuhan

Berdasarkan analisis yang telah dilakukan terhadap user dan game sejenis, maka

didapatkan permasalahan yang terjadi sebagai berikut:

1. Pada kebudayaan daerah Indonesia, responden lebih tertarik untuk mempelajari

alat musik tradisional Indonesia. Pada sejarah kerajaan Indonesia, responden

lebih tertarik untuk mempelajari kerajaan Islam.

2. Perlunya keseimbangan antara gameplay yang menarik dan unsur edukasi yang

didapat oleh user.

Berdasarkan dari permasalahan tersebut maka didapatkan beberapa usulan

pemecahan masalah sebagai berikut:

1. Game ini sebaiknya dirancang agar memberikan soal-soal dengan persentase

lebih banyak mengenai alat musik tradisional daerah dan sejarah kerajaan Islam

di Indonesia.

2. Game ini sebaiknya dirancang agar memiliki keseimbangan antara unsur

edukasi dan gameplay yang menarik dengan memasukkan unsur genre strategi,

sehingga user tidak hanya diberikan soal-soal yang bersifat trivia.

3. Game ini sebaiknya dirancang agar dapat menampilkan soal-soal yang

diurutkan sesuai dengan tingkat kesulitannya, dari soal yang umum hingga soal

yang mendetil.

4. Game ini sebaiknya dirancang agar menyediakan bantuan-bantuan yang dapat

digunakan oleh user untuk menyelesaikan tantangan yang ada.

58

3.3 Perancangan Game

Perancangan game mencakup judul game, genre, gameplay, tantangan, rules, fitur,

dan level design. Rancangan interface game akan dijabarkan pada bagian 3.5

Storyboard pada bab ini.

1. Judul game

Judul game ini adalah Explodia Nusantara.

2. Genre

Genre game ini adalah gabungan dari educational game dan strategy game.

3. Gameplay

Sistem permainan game ini adalah battle, tetapi user harus dapat menjawab soal

yang diberikan terlebih dahulu sebelum dapat menyerang lawan. User akan

menyerang musuh untuk setiap jawaban yang benar dan akan diserang musuh

ketika menjawab salah. Jenis soal yang diberikan ada dua jenis, pernyataan dan

pertanyaan. Soal pernyataan memiliki dua pilihan jawaban, benar dan salah,

sedangkan soal pertanyaan memiliki empat pilihan yaitu pilihan A, B, C, dan D.

User diberikan pilihan untuk menggunakan dua jenis bom, yaitu bom kecil

dan bom besar. Bom kecil memberikan kerusakan yang ringan kepada lawan,

sedangkan bom besar memberikan kerusakan yang lebih tinggi dari bom kecil

kepada lawan. Pemain diharuskan memilih terlebih dahulu bom yang akan

digunakan sebelum menjawab pertanyaan yang diberikan. Dengan demikian,

user harus dapat mengatur strateginya dalam memilih bom sesuai dengan

keadaan saat itu.

59

Selain pilihan bom, user juga dapat menggunakan barang-barang yang

terlebih dahulu harus dibeli pada toko barang. Barang-barang ini dapat

digunakan ketika battle untuk membantu user memenangkan battle tersebut.

Setiap barang memiliki kemampuan, harga, dan bobot masing-masing. Setiap

harga dan bobot barang disesuaikan dengan kemampuannya, sehingga tidak

tercipta dominant strategy problem.

Dalam bermain game ini, user menggunakan mouse dan keyboard untuk

berinteraksi dengan sistem. Mouse digunakan dengan melakukan klik pada

tombol-tombol yang terdapat pada interface. Keyboard digunakan untuk

memasukkan nama profil ketika membuat profil baru dan juga untuk

menggunakan shortcut dari tombol-tombol yang ada.

4. Tantangan

Tantangan game ini adalah mengalahkan semua musuh yang terdapat pada setiap

daerah. Untuk dapat mengalahkan musuh, user harus dapat menjawab

pertanyaan-pertanyaan dengan benar. Daftar soal-soal terdapat pada bagian

Lampiran: Daftar soal.

5. Rules

Rules dalam game ini adalah user diberikan waktu untuk menjawab setiap

pertanyaan, jika user tidak menjawab sampai waktu habis maka user dianggap

menjawab salah. User tidak dapat membawa barang melebihi kapasitas

penyimpanan yang ada.

60

6. Fitur

Dalam game ini terdapat integral features yang berupa barang untuk membantu

user dalam menyelesaikan game ini. Jenis-jenis barang tersebut dapat dilihat

pada bagian Lampiran: Daftar barang.

7. Level Design

Level yang terdapat pada game ini merupakan daerah-daerah yang ada di

Indonesia. Setiap daerah memiliki soal-soal yang berbeda-beda ketika user

memulai misinya. Soal-soal dalam setiap level memiliki tingkat kesulitan yang

sama, tetapi setiap beberapa level user akan menghadapi musuh yang

memberikan soal-soal gabungan dari daerah-daerah sebelumnya.

61

3.4 Perancangan Sistem

3.4.1 Navigation Map

Gambar 3.16 navigation map

3.4.2 Use Case Diagram

Pada menu awal permainan, user dapat melakukan beberapa hal antara lain:

memulai permainan, melihat kredit, mengatur opsi, membuat profil baru,

menghapus profil, dan melanjutkan ke menu utama.

62

Gambar 3.17 Use case diagram menu awal

Pada menu utama, user dapat melakukan beberapa hal sebagai berikut:

mengatur barang, membeli barang, memulai misi, melihat informasi, melihat

profil, memilih daerah, dan mengatur opsi.

63

Gambar 3.18 Use case diagram menu utama

3.4.3 Class Diagram

Class diagram game ini mencakup tujuh kelas, yaitu kelas Hero, Level, Battle,

Inventory, Item, Enemy, dan Boss.

64

Gambar 3.19 Class diagram sistem game

3.4.4 Activity Diagram

a. Activity diagram menu awal

Pada waktu user menjalankan program, maka sistem akan menampilkan

halaman menu awal. Kemudian jika user ingin melihat kredit dari game ini

maka user dapat memilih menu kredit. Setelah itu jika user ingin mengubah

opsi dari game ini maka user dapat memilih menu opsi lalu sistem akan

65

menampilkan halaman opsi sehingga user dapat mengubah opsi dari game

ini. User dapat memilih menu keluar untuk menutup game ini.

Gambar 3.20 Activity diagram menu awal

b. Activity diagram memilih profil

Saat user memilih menu mulai permainan di menu utama maka sistem akan

menampilkan halaman pilih profil. Setelah itu user dapat memilih profil

yang sudah ada di halaman pilih profil. Ketika salah satu profil dipilih

66

maka sistem akan mengaktifkan tombol lanjut. Saat user memilih tombol

lanjut sistem akan menampilkan halaman menu utama.

Gambar 3.21 Activity diagram memilih profil

c. Activity diagram membuat profil baru

Ketika user ingin membuat profil baru maka user dapat memilih menu buat

baru, kemudian sistem akan menampilkan halaman buat profil. Sistem akan

meminta user untuk memasukkan nama profil yang ingin dibuat. Di dalam

halaman buat profil diberikan tombol X dan tombol V. Jika user memilih

tombol X maka sistem akan mengembalikan user ke halaman pilih profil

dan jika user memilih tombol V maka sistem akan melakukan validasi

nama yang dimasukan user. Jika nama tidak valid maka sistem akan

67

menampilkan notifikasi yang menyatakan nama yang dimasukan user tidak

valid.

Pesan notifikasi akan terus ditampilkan sampai user konfirmasi

notifikasi tersebut. Setelah itu user akan kembali untuk memasukan nama.

Jika nama yang dimasukan user valid maka sistem akan menambah data

kedalam database, kemudian menampilkan pemuktahiran halaman profil.

68

Gambar 3.22 Activity diagram membuat profil baru

d. Activity diagram menghapus profil

Ketika user ingin menghapus profil maka user dapat memilih profil yang

yang ingin dihapus, kemudian memilih menu hapus. Setelah itu sistem akan

69

menampilkan halaman hapus profil. Di dalam halaman hapus profil

terdapat tombol X dan tombol V. Jika user memilih tombol X, maka sistem

akan menampilkan halaman pilih profil. Jika user memilih tombol V, maka

sistem akan menghapus data di database. Kemudian sistem akan

menampilkan pemuktahiran halaman profil.

Gambar 3.23 Activity diagram menghapus profil

e. Activity diagram lanjut ke menu utama

Jika profil yang dipilih user merupakan profil baru maka sistem akan

menampilkan prolog. Setelah prolog selesai, sistem menampilkan tutorial

menu utama. Jika profil lama yang dipilih oleh user maka sistem akan

70

langsung menampilkan halaman menu utama. Disaat menampilkan

halaman menu utama maka didalam menu utama tersebut terdapat daerah-

daerah yang dapat dipilih oleh user tapi sebelum itu sistem akan

menempatkan pointer pada daerah yang belom selesai terlebih dahulu.

Gambar 3.24 Activity diagram lanjut ke menu utama

f. Activity diagram memulai misi

Saat user akan memulai misi terlebih dahulu user memilih daerah misi

yang diinginkan, setelah itu user memilih menu mulai misi. Sistem akan

menampilkan pilihan musuh, kemudian user memilih musuh yang ingin

dilawan. Setelah musuh dipilih maka sistem akan menampilkan halaman

71

intro. Jika profil yang digunakan user merupakan profil baru, maka terlebih

dahulu ditampilkan tutorial battle. Kemudian sistem akan menampilkan

halaman pilih bom. User dapat memilih salah satu bom, antara bom kecil

dan bom besar. Setelah memilih bom, user memilih mulai dan sistem akan

menampilkan halaman soal.

Sebelum menjawab soal, user dapat menggunakan barang atau tidak

menggunakan barang. Jika user menggunakan barang maka sistem akan

memberikan pengaruh barang kepada user sebelum melakukan validasi

jawaban, tetapi jika tidak menggunakan barang maka sistem akan langsung

melakukan validasi jawaban.

Ketika user benar dalam menjawab soal maka user akan menyerang

musuh tetapi sebaliknya jika user salah dalam menjawab soal maka user

yang akan diserang oleh musuh. Setelah itu sistem akan melakukan

validasi HP yang dimiliki oleh user dan musuh. Jika HP yang dimiliki oleh

user atau musuh lebih besar dari nol maka sistem akan kembali

menampilkan halaman bom, sedangkan jika HP yang dimiliki oleh user

atau musuh lebih kecil atau sama dengan nol, maka sistem menampilkan

notifikasi. Setelah itu sistem akan memperbaharui data profil lalu

menampilkan halaman menu utama.

72

Gambar 3.25 Activity diagram memulai misi

73

g. Activity diagram membeli barang

Saat user ingin membeli barang maka user memilih menu toko barang

kemudian sistem akan menampilkan halaman toko barang. Dari daftar

barang yang bisa dibeli di halaman toko barang, user diberikan kesempatan

untuk memilih barang yang ingin dibeli.

Ketika user mengklik tombol beli, maka sistem melakukan validasi

ketersediaan uang yang dimiliki user. Jika uang yang tersedia tidak cukup,

maka sistem akan memainkan efek suara gagal. Jika uang yang tersedia

cukup, maka sistem akan memainkan efek suara berhasil. Setelah user

berhasil membeli barang, sistem akan memperbaharui penyimpanan dan

uang user.

74

Gambar 3.26 Activity diagram membeli barang

75

h. Activity diagram melihat informasi

Ketika user ingin melihat informasi daerah-daerah yang terdapat di dalam

game ini maka user dapat memanfaatkan menu info. User dapat memilih

daerah yang diinginkan, kemudian memilih menu info. Setelah itu sistem

menampilkan halaman info yang berisi dua pilihan informasi, yaitu sejarah

dan kebudayaan. Jika user memilih sejarah, maka sistem akan

menampilkan informasi sejarah. Jika user memilih kebudayaan, maka

sistem akan menampilkan informasi kebudayaan.

Gambar 3.27 Activity diagram melihat informasi

76

i. Activity diagram memasukkan barang ke slot

Ketika user ingin memasukkan barang ke slot maka user dapat memilih

menu atur barang yang ada di menu utama. Setelah itu sistem akan

menampilkan halaman atur barang, kemudian user mengklik barang yang

ingin dimasukan ke slot. Setelah itu sistem melakukan validasi kapasitas.

Jika melebihi kapasitas yang tersedia maka sistem memainkan efek suara

gagal. Jika tidak melebihi kapasitas maka sistem akan memasukkan barang

tersebut ke slot, kemudian memperbaharui data penyimpanan di database.

Gambar 3.28 Activity diagram memasukkan barang ke slot

77

j. Activity diagram mengeluarkan barang dari slot

Ketika user ingin mengeluarkan barang dari slot, user dapat memilih menu

atur barang di menu utama. Setelah itu sistem akan menampilkan halaman

atur barang. User mengklik barang yang ingin dikeluarkan dari slot,

kemudian sistem akan mengeluarkan barang tersebut dari slot dan

memperbaharui data penyimpanan di database.

Gambar 3.29 Activity diagram mengeluarkan barang dari slot

k. Activity diagram melihat profil

Disaat user memilih menu profil di menu utama maka sistem akan mengambil

data profil dari database kemudian sistem menampilkan halaman profil kepada

user.

78

Gambar 3.30 Activity diagram melihat profil

3.5 Storyboard

Angka yang berada didalam bulatan abu-abu ( ) berfungsi hanya sebagai penanda dan

tidak akan tertulis pada layar aplikasi.

Tabel 3.7 Storyboard menu awal

Multimedia Storyboard

Project: Explodia Nusantara Date: 9-1-2011

Screen: 1 of 24 Screen ID: 01

79

Screen Description:

1. Latar Belakang untuk halaman menu awal. 2. Gambar logo game ‘Explodia Nusantara’. 3. Tombol untuk menuju ke halaman pilih profil ( screen ID : 02 ) 4. Tombol untuk menuju ke halaman kredit ( screen ID : 18) 5. Tombol untuk menuju ke halaman opsi (screen ID : 21) 6. Tombol untuk keluar dari permainan.

Link From Screen ID: 02,18,21 Link to Screen ID: 02,18,21

Color Scheme: Putih (#ffffff ), Hitam (#000000),(#0e0e0e), (#222222) ,Coklat (#ab5001), (#c57520),(# af6f01) , Krem (#f8d297) ,Kuning (#ffe508) ,Biru (#0600ff),(# 5e5dff), (#0201a4) , Merah (#ff0000)

Text Attributes: Avenir LT Black Font size 25pt

Still Images: BG menu awal.jpg, BG button.png, hero-menu awal.png, logo.png.

Audio: startgame.midi(repeat forever)

Video:

80

Animation:

Tabel 3.8 Storyboard pilih profil




Screen Description:

1. Latar belakang untuk halaman pilih profil. 2. Tombol untuk kembali ke halaman menu awal (screen ID : 01). 3. Tombol membuat akun profil baru. Memasuki halaman buat profil ( screen ID :

03). 4. Menghapus akun profil yang telah dibuat, nama akun profil harus dipilih terlebih

dahulu. Jika tidak ada nama akun profil yang dipilih, maka Tombol tidak dapat

81

di-klik . Memasuki halaman hapus profil ( screen ID : 04 ). 5. Tombol untuk konfirmasi akun profil yang telah dipilih untuk memasuki halaman

menu utama (screen ID : 06), nama akun profil harus dipilih terlebih dahulu. Jika tidak ada nama akun profil belum, maka tombol tidak dapat di-klik. Jika akun baru pertama kali dimainkan, maka sebelum ke halaman utama, akan diarahkan ke halaman prolog (screen ID : 05).

6. Nama-nama akun profil yang telah dibuat.

Link From Screen ID: 01,03,04 Link to Screen ID: 01,03,04,05,06

Color Scheme: Putih (#ffffff ) , Hitam (#000000),(#0e0e0e) , Coklat (#693800),(#9a5703),(#c57520),(#ffca48) , Krem (#f8d297) , Hijau (#00ff37) , Biru (#014eff),(#017efe) , Merah (#df0f0f)

Text Attributes: Avenir LT Black Font size 31pt, 23pt, 19pt, 67pt, 25pt, Arial Font size 25pt.

Still Images: pilih profil-BG.png, pilih profil-dialog box.png.


Video:

Animation:

Tabel 3.9 Storyboard buat profil




82

Screen Description:

1. Latar belakang untuk halaman buat profil. 2. Tombol untuk menambah akun profil sesuai isi dari no.4. Jika user menekan

tombol tanpa menginput teks pada text label, maka akan mucul notifikasi (screen ID : 19). Jika user menekan tombol dan menginput teks pada text label, maka akan muncul notifikasi (screen ID : 19). Jika user menekan tombol dan menginput teks pada text label,namun taks yang di input sudah pernah dibuat, maka akan muncul notifikasi (screen ID : 19). Jika user menekan tombol dan menginput teks pada text label, namun lebih dari 10 karakter, maka akan muncul notifikasi (screen ID : 19). Menuju halaman pilih profil ( screen ID : 02 ).

3. Tombol untuk membatalkan proses pembuatan akun profil. menuju halaman pilih profil ( screen ID : 02 )

4. Text label untuk meng-input nama akun profil yang akan dibuat.

Link From Screen ID: 02,19 Link to Screen ID: 02,19

Color Scheme: Putih (#ffffff ) ,Hitam (#000000),(#0e0e0e) ,Coklat (#693800),(#9a5703),(#c57520),(#ffca48) , Hijau (#00ff37) ,Merah (#df0f0f)

Text Attributes: Avenir LT Black Font size 31pt, 27pt., Arial Font size 30pt.

83

Still Images: buatprofil-BG.png


Video:

Animation: animasi in/out apabila notifikasi (screen ID : 19) dipanggil.

Tabel 3.10 Storyboard hapus profil




84

Screen Description:

1. Latar belakang untuk halaman hapus profil. 2. Tombol untuk menghapus akun profil terpilih. Menuju halaman pilih profil (

screen ID : 02 ) 3. Tombol untuk membatalkan proses penghapusan akun profil terpilih. menuju

halaman pilih profil ( screen ID : 02 ) 4. Text label yang diisi nama akun yang telah dipilih pada halaman pilih akun (

screen ID : 02 ).

Link From Screen ID: 02 Link to Screen ID: 02

Color Scheme: Putih (#ffffff ) , Hitam (#000000),(#0e0e0e)

Coklat (#693800),(#9a5703),(#c57520),(#ffca48) ,Hijau (#00ff37) ,Merah (#df0f0f)

Text Attributes: Avenir LT Black Font size 31pt, 27pt., Arial Font size 30pt.

Still Images: hapusprofil-BG


Video:

Animation:

Tabel 3.11 Storyboard prolog




85

Screen Description:

1. Latar belakang untuk halaman prolog berwarna putih. 2. Gambar karakter pendukung. 3. Teks prolog. 4. Penanda adanya teks selanjutnya. User dapat meng-klik dimana saja untuk

mengganti teks pada no.3.

Setelah halaman Prolog (screen ID : 05), user akan dibawa ke halaman Tutorial Menu (screen ID : 22).


Color Scheme: Putih (#ffffff ) ,Hitam (#000000) ,Abu-abu (#242424) ,Coklat (#a77432) ,Kuning (#ffe323) ,Krem (#f8d297)

Text Attributes: Avenir LT Black Font size 20pt. ,Avenir LT Medium Font size 16pt. Arial Font size 25pt, 18pt.

Still Images: Garuda.png, dialog.png

Audio: chat.midi (repeat forever)

86

Video:

Animation:

Tabel 3.12 Storyboard menu utama




Screen Description:

1. Latar belakang untuk halaman menu utama. 2. Kolom yang berisi menu-menu yang dapat dipilih. 3. Tombol menuju halaman toko barang (screen ID : 08 ). 4. Tombol menuju halaman atur barang (screen ID :09 ). 5. Tombol menuju pilih lawan (screen ID : 07), user harus memilih daerah terlebih

dahulu. Apabila akun user baru pertama kali bermain, maka user akan dibawa ke

87

halaman Tutorial Battle (screen ID : 23). 6. Tombol menuju halaman bicara 1 (screen ID : 10) , user harus memilih daerah

terlebih dahulu. 7. Tombol menuju halaman profil (screen ID : 12). 8. Tombol menuju halaman opsi (screen ID : 21). 9. Tombol menuju halaman keluar (screen ID : 24).

-19. Tombol untuk memilih daerah,baik yang hendak dimainkan sebelum menekan tombol no.5, ataupun yang hendak dilihat informasinya sebelum menekan tombol no.6. apabila daerah belum selesai maka icon akan berwarna merah. Bila sudah selesai, icon akan berwarna biru. Bila tidak bisa dimainkan (belum terbuka), icon berwarna abu-abu. Untuk membuka daerah, user harus menyelesaikan daerah yang ber icon merah. Secara default penunjuk daerah menunjuk ke daerah yang sudah terbuka untuk dimainkan, namun belum pernah diselesaikan user (warna merah ).

20. Gambar dari daerah yang ditunjuk.

21. Penunjuk daerah yang dipilih user.

Link From Screen ID: 02,05,07,08,09,10,12, 21,22,24

Link to Screen ID: 07,08,09,10,12, 21,24

Color Scheme: Putih (#ffffff ) ,Hitam (#000000),(#0e0e0e), (#b9b9b9), (#222222) ,Coklat (#693800),(#9a5703),(#c57520),(#ffca48), (#f8d297) ,Krem (#f8d297) ,Hijau (#00ff37), (#033402), (#3bde0f), (#bef439) ,Kuning (#ffe508) ,Biru (#4e89fd), (#a8c8fa), (#95c2ff), (#0a1bfd) ,Merah (#ff0000)

Text Attributes: Avenir LT Black Font size 16pt, 38pt.

Still Images: BG.jpg, BG atas.png, gambar-atas-aceh.png, gambar-atas-sumbar.png, gambar-atas-kaltim.png, gambar-atas-maluku.png, gambar-atas-papua.png, gambar-atas-bali.png, gambar-atas- jateng.png, gambar-atas-jakarta.png, pointer.png, menu.png.

Audio: song1.midi, song2.midi, song3.midi (pemunculan lagu di acak diantara 3 audio, repeat forever)

Video:

Animation: Penunjuk pilihan daerah bergerak turun (selama 0.5 detik, repeat)

Tabel 3.13 Storyboard pilih musuh

88




Screen Description:

1. Latar belakang untuk halaman pilih lawan. 2. Kolom yang berisi menu-menu yang dapat dipilih. 3. Tombol untuk kembali ke menu utama ( screen ID : 06 ).

4-6. Tombol untuk memilih lawan yang hendak dihadapi. Untuk mengaktifkan tombol no 5,user harus sudah mengalahkan musuh pada tombol 4 dan untuk mengaktifkan tombol no 6,user harus sudah mengalahkan musuh pada tombol 5. Apabila ketiga musuh telah dihadapi, user dapat bebas memilih musuh pada daerah ini. Tombol menuju halaman intro (screen ID : 13 ).

7-9. Keterangan nama musuh.

Link From Screen ID: 06 Link to Screen ID: 06,13

Color Scheme: Putih (#ffffff ) ,Hitam (#000000),(#0e0e0e), (#b9b9b9), (#222222)

89

,Coklat (#693800),(#9a5703),(#c57520),(#ffca48), (#f8d297) ,Krem (#f8d297) ,Hijau (#00ff37), (#033402), (#3bde0f), (#bef439) ,Kuning (#ffe508) ,Biru (#4e89fd),(# a8c8fa), (#95c2ff), (#0a1bfd) ,Merah (#ff0000)

Text Attributes: Avenir LT Black Font size 16pt, 38pt, 20pt, 31pt.

Still Images: Pilih musuh BG.png, menu.png.


Video:

Animation:

Tabel 3.14 Storyboard toko barang




90

Screen Description:

1. Latar belakang untuk halaman toko barang. 2. Kolom yang berisi menu-menu yang dapat dipilih. 3. Tombol untuk kembali ke menu utama ( screen ID : 06 ). 4. Detail dari barang yang dipilih, detail memuat nama barang, deskripsi barang,

bobot barang dan harga barang. barang harus dipilih terlebih dahulu. 5. Tombol untuk membeli barang yang telah dipilih, barang harus dipilih terlebih

dahulu. Bila digunakan saat jumlah uang user kurang dari persyaratan yang diberikan untuk item yang ingin dibeli, akan muncul suara penanda gagal beli. Bila digunakan saat jumlah uang user cukup atau lebih dari persyaratan yang diberikan untuk item yang ingin dibeli, akan muncul suara penanda berhasil beli.

6. Keterangan jumlah uang yang dimiliki user. 7-8. Tombol untuk mengganti barang yang ditampilkan.

9-12. Tombol barang yang dapat dipilih.


Color Scheme: Putih (#ffffff ) ,Hitam (#000000),(#0e0e0e), (#222222) ,Coklat (#693800),(#9a5703),(#c57520),(#ffca48), (#f8d297) ,Krem (#f8d297) ,Hijau (#00ff37), (#033402), (#3bde0f), (#bef439) ,Kuning (#ffe508) ,Biru (#4e89fd),(#

91

a8c8fa), (#95c2ff), (#0a1bfd) ,Merah (#ff0000)

Text Attributes: Avenir LT Black Font size 31pt, 24 pt, 28 pt. ,Avenir LT Heavy Font size 17 pt. ,Avenir LT Medium Font size 14 pt, 19 pt. Arial Font size 20pt, 15pt.

Still Images: tokoitem-BG.png, tokoitem-dialog box.png, box-uang.png, menu.png


kurang.wav efek suara apabila tombol beli ditekan namun uang pemain tidak mencukupi

cash-register-01.wav efek suara apabila tombol beli ditekan dan uang pemain mencukupi

Video:

Animation:

Tabel 3.15 Storyboard atur barang




92

Screen Description:

1. Latar Belakang untuk halaman atur barang. 2. Kolom yang berisi menu-menu yang dapat dipilih. 3. Tombol untuk kembali ke menu utama ( screen ID : 06 ). 4-8. Tombol slot barang yang dapat diisi dengan barang yang telah dibeli.

9-13. Keterangan jumlah item yang dibawa user untuk battle 14-18. Tombol barang yang bisa atau telah dibeli oleh user. 19-23. Keterangan jumlah barang yang dimiliki user.

24. Keterangan jumlah bobot dari barang-barang yang dimasukan user ke slot. Bila melebihi kapasitas pada no 25, maka barang tidak dapat ditambahkan lagi.

25. Keterangan kapasitas bobot maksimal yang dapat dibawa user. Dapat ditambah kapasitas maksimalnya dengan membeli item khusus di toko barang.

Untuk memasukan barang kedalam slot kosong, user harus meng-klik pada barang yang ingin diisikan, secara otomatis barang tersebut akan masuk ke slot dan keterangan jumlah barang akan berkurang 1.

Untuk mengosongkan slot dari barang yang telah dipilih, user harus meng-klik slot yang akan dikosongkan, secara otomatis slot akan menjadi kosong dan keterangan jumlah barang akan bertambah 1.

93


Color Scheme: Putih (#ffffff ) ,Hitam (#000000),(#0e0e0e), (#222222) ,Coklat (#693800),(#9a5703),(#c57520),(#ffca48), (#f8d297) ,Krem (#f8d297) ,Hijau (#00ff37), (#033402), (#3bde0f), (#bef439) ,Kuning (#ffe508) ,Biru (#4e89fd),(# a8c8fa), (#95c2ff), (#0a1bfd) ,Merah (#ff0000)

Text Attributes: Avenir LT Black Font size 31pt, 24 pt, 28 pt, 18 pt, Avenir LT Medium Font size 22pt.

Still Images: BG-aturbarang.png, kuantitas.png, kuantitas-slot.png, menu.png


Video:

Animation:

Tabel 3.16 Storyboard info-pilih narasumber




94

Screen Description:

1. Latar Belakang untuk halaman info 1. 2. Kolom yang berisi menu-menu yang dapat dipilih. 3. Tombol untuk kembali ke halaman menu utama ( screen ID : 06 ). 4. Tombol untuk menuju ke halaman info 2 ( screen ID : 11 ). 5. Tombol untuk menuju ke halaman info 2 ( screen ID : 11 ).


Color Scheme: Putih (#ffffff ) ,Hitam (#000000),(#0e0e0e), (#222222) ,Coklat (#693800),(#9a5703),(#c57520),(#ffca48), (#f8d297) ,Krem (#f8d297) ,Hijau (#00ff37), (#033402), (#3bde0f), (#bef439) ,Kuning (#ffe508) ,Biru (#4e89fd),(# a8c8fa), (#95c2ff) ,Merah (#ff0000)

Text Attributes: Avenir LT Black Font size 31pt, 24 pt, 28pt, 39 pt, Avenir LT Medium Font size 26pt

Still Images: bicara-BG.png, menu.png


95

Video:

Animation:

Tabel 3.17 Storyboard info-isi informasi




Screen Description:

1. Latar belakang untuk halaman info 2. 2. Kolom yang berisi menu-menu yang dapat dipilih. 3. Tombol untuk kembali ke halaman info 1 ( screen ID : 10 ). 4. Gambar karakter yang dipilih pada halaman info 1 (screen ID : 10). 5. Keterangan informasi dari tombol yang dipilih pada halaman info 1 (screen ID :

10) dan tombol pilihan daerah pada halaman menu utama ( screen ID : 06 ).

96

Informasi pada no.5 dan gambar karakter pada no.4 akan disesuaikan dari pilihan user pada tombol no.4 atau no.5 pada halaman info 1 (screen ID : 10).

Informasi akan berubah-ubah dan diacak untuk pemilihan informasi yang akan diberikan.


Color Scheme: Putih (#ffffff ), Hitam (#000000),(#0e0e0e), (#222222) ,Coklat (#ffca48), (#4d3600),(# 5b2700) ,Krem (#f8d297) ,Hijau (#00ff37), (#033402), (#3bde0f), (#bef439) ,Kuning (#ffe508) ,Biru (#4e89fd),(# a8c8fa), (#95c2ff), (#0a1bfd) ,Merah (#ff0000)

Text Attributes: Avenir LT Black Font size 20pt, 28pt. ,Avenir LT Medium Font size 16pt. Arial Font size 17pt, 20pt.

Still Images: ahli kebudayaan.png, ahli sejarah.png, dialog box.png, menu.png


Video:

Animation:

Tabel 3.18 Storyboard halaman data profil




97

Screen Description:

1. Latar Belakang dari halaman profil. 2. Kolom yang berisi menu-menu yang dapat dipilih. 3. Tombol untuk kembali ke halaman menu utama ( screen ID : 06 ). 4. Gambar karakter user. 5. Nama profil yang dibuat oleh user. 6. Keterangan nilai HP user, HP user dapat bertambah dengan membeli item khusus

di toko item. Akan ter-update pada halaman profil. 7. Keterangan jumlah kemenangan yang diraih user. 8. Keterangan jumlah kekalahan yang didapat user. 9. Keterangan jumlah uang yang dimiliki user, uang didapat dari musuh yang

dikalahkan user. Akan ter-update pada halaman profil.


Color Scheme: Putih (#ffffff ) ,Hitam (#000000),(#0e0e0e) ,Coklat (#693800),(#9a5703),(#c57520),(#ffca48) ,Krem (#f8d297) ,Hijau (#00ff37) ,Biru (#014eff),(#017efe) ,Merah (#df0f0f)

Text Attributes: Avenir LT Black Font size 28pt, 20pt, 30 pt. Arial Font size 25pt.

98

Still Images: profil-BG.png, profil-dialog-box+foto.png, garis.png, menu.png


Video:

Animation:

Tabel 3.19 Storyboard intro battle




99

Screen Description:

1. Latar belakang halaman intro. Disesuaikan dengan daerah yang dipilih user. 2. Gambar karakter user. 3. Gambar karakter musuh. Disesuaikan dengan daerah yang dipilih user dan stage

yang sedang dimainkan. 4. Gambar Versus. Apabila akun user baru pertama kali dimainkan, maka user akan dibawa ke halaman Tutorial Battle (screen ID : 23). Apabila akun user sudah pernah dimainkan, maka user akan dibawa ke halaman Battle 1 (screen ID : 14).


Color Scheme: Putih (#ffffff ) ,Hitam (#000000),(#0e0e0e) ,Coklat (#693800), (#9a5703),(#c57520),(#ffca48) ,Krem (#f8d297) ,Hijau (#00ff37) ,Biru (#014eff), (#017efe) ,Merah (#df0f0f)

Text Attributes: Avenir LT Black Font size 40 pt.

Still Images: hero.png, aceh.png, sumbar.png, kaltim.png, maluku.png, papua.png, bali.png, jateng.png, jakarta.png, kroco1.png, kroco2.png, vs.png

Audio: Audio:battle.midi, boss2.midi (battle1.midi untuk melawan musuh biasa, boss2.midi untuk melawan boss)

Video:

Animation:

Gambar karakter no 1 muncul dari kiri luar layar bergerak ke kanan hingga ke posisi seperti pada gambar.

Gambar musuh no 2 muncul dari kanan luar layar bergerak ke kiri hingga ke posisi seperti pada gambar.

Gambar vs no 3 muncul dari atas luar layar bergerak ke bawah hingga ke posisi seperti pada gambar.

Tabel 3.20 Storyboard battle 1



100


Screen Description:

1. Latar belakang halaman battle 1. Disesuaikan dengan daerah yang dipilih user. 2. Gambar karakter user. 3. Gambar karakter musuh. Disesuaikan dengan daerah yang dipilih user dan stage

yang sedang dimainkan. 4. Keterangan HP user. Berubah sesuai update pada halaman battle 4 (screen ID :

17). 5. Keterangan HP musuh. Berubah sesuai update pada halaman battle 4 (screen ID :

17). 6. Tombol pilihan bom kecil. 7. Tombol pilihan bom besar. 8. Tombol mulai,untuk berganti ke halaman battle 2 ( screen ID : 15) atau ke

halaman battle 3 (screen ID : 16 ). User harus memilih tipe bom yang akan digunakan, setelah itu meng-klik mulai untuk melanjutkan ke halaman battle 2 ( screen ID : 15) atau ke halaman battle 3 (screen ID : 16 ).

Tombol no.8 akan berganti ke halaman battle 2 (screen ID : 15 ) apabila stage yang dijalani adalah stage 1 atau 2. Dan akan berganti ke halaman battle 3 (screen ID : 16 ) apabila stage yang dijalani adalah stage 3.

101


Color Scheme: Putih (#ffffff ) ,Hitam (#000000),(#0e0e0e) , Coklat (#693800), (#9a5703),(#c57520),(#ffca48) ,Krem (#f8d297) ,Hijau (#00ff37) ,Biru (#014eff), (#017efe) ,Merah (#df0f0f)

Text Attributes: Avenir LT Black Font size 16pt, 24 pt.

Still Images: pilih-BG.png, HP-bar.png, logo-battle.png, Aceh.jpg, SumBar.jpg, KalTim.jpg, Maluku.jpg, Papua.jpg, Bali.jpg, JaTeng.jpg, DKI.jpg

Audio: battle.midi, boss2.midi (battle1.midi untuk melawan musuh biasa, boss2.midi untuk melawan boss)

Video:

Animation:





102

Screen Description:

1. Latar belakang pada halaman battle 2. Halaman battle 1 yang diredupkan. 2. Gambar karakter user. 3. Gambar karakter musuh. Disesuaikan dengan daerah yang dipilih user dan

stage yang sedang dimainkan. 4. Teks pertanyaan yang dipilih secara acak dari basis data. 5. Kolom yang berisi hitungan mundur untuk user menjawab pertanyaan. 6-7. Pilihan jawaban yang dapat dipilih user. Tombol akan menuju ke halaman

battle 4 (screen ID : 17). 8-12. Slot barang yang dapat dipakai user saat menjalankan misi. Untuk memilih

barang, user dapat meng-klik salah satu barang yang ada di slot (bila slot kosong, maka tidak dapat digunakan).

13-17. keterangan jumlah barang yang dapat dipakai.



Text Attributes: Avenir LT Black Font size 20pt. Avenir LT Medium Font size 16pt.

103

Arial Font size 17pt, 15pt, 70pt.

Still Images: BG-90%.png, box-barang png, char-Aceh.png, char-SumBar.png, char-KalTim.png, char-Maluku.png, char-Papua.png, char-Bali.png, char-JaTeng.png, char-DKI.png, dialog jawaban1 png, dialog pertanyaan1 png.

Audio:

battle.midi, boss2.midi (battle1.midi untuk melawan musuh biasa, boss2.midi untuk melawan boss)

benar.wav efek suara apabila user menjawab dengan benar.

Salah.wav efek suara apabila user menjawab dengan salah.

Video:

Animation:

Gambar user (no.2) muncul dari sisi kiri layar bergerak ke kanan hingga posisi seperti di storyboard.

Gambar musuh (no.3) muncul dari sisi kanan layar bergerak ke kiri hingga posisi seperti di storyboard.

Latar belakang halaman battle 2 ini adalah halaman battle 1 yang diredupkan.





104

Screen Description:

1. Latar belakang pada halaman battle 3. Halaman battle 1 yang diredupkan. 2. Gambar karakter user. 3. Gambar karakter musuh. Disesuaikan dengan daerah yang dipilih user dan

stage yang sedang dimainkan. 4. Teks pertanyaan yang dipilih secara acak dari basis data. 5. Kolom yang berisi gambar bila terpilih pertanyaan yang menyertakan gambar. 6-9. Pilihan jawaban yang dapat dipilih user. Tombol akan menuju ke halaman

battle 4 (screen ID : 17). 10-14. Slot barang yang dapat dipakai user saat menjalankan misi. Untuk memilih

barang, user dapat meng-klik salah satu barang yang ada di slot (bila slot kosong, maka tidak dapat digunakan). 15-19.keterangan jumlah barang yang dapat dipakai.


Color Scheme:

Putih (#ffffff ) ,Hitam (#000000),(#0e0e0e) ,Coklat (#693800), (#9a5703),(#c57520),(#ffca48) ,Krem (#f8d297) ,Hijau (#00ff37) ,Biru (#014eff), (#017efe) ,Merah (#df0f0f)

Text Attributes: Avenir LT Black Font size 20pt., Avenir LT Medium Font size 16pt. Arial Font size 17pt, 15pt, 70pt.

105

Still Images: BG-90%.png, box-barang png, char-Aceh.png, char-SumBar.png, char-KalTim.png, char-Maluku.png, char-Papua.png, char-Bali.png, char-JaTeng.png, char-DKI.png, dialog jawaban1 png, dialog pertanyaan1 png.

Audio:


benar.wav efek suara apabila user menjawab dengan benar.

Salah.wav efek suara apabila user menjawab dengan salah.

Video:

Animation:

Gambar user (no.2) muncul dari sisi kiri layar bergerak ke kanan hingga posisi seperti di storyboard.

Gambar musuh (no.3) muncul dari sisi kanan layar bergerak ke kiri hingga posisi seperti di storyboard.

Latar belakang halaman battle 3 ini adalah halaman battle 1 yang diredupkan.





106

Screen Description:

1. Latar belakang halaman battle 4. Disesuaikan dengan daerah yang dipilih user. 2. Gambar karakter user. 3. Gambar karakter musuh. Disesuaikan dengan daerah yang dipilih user dan stage

yang sedang dimainkan. 4. Keterangan HP user.akan berubah sesuai dengan item yang dipakai dan

kerusakan yang diterima. 5. Keterangan HP musuh. Akan berubah sesuai dari kerusakan yang diterima 6. Gambar bom.

Setelah pembaharuan HP yang disebabkan, baik kerusakan dari user ataupun dari musuh. Maka player akan kembali ke halaman battle 1 (screen ID : 14).

Apabila HP dari user atau musuh menjadi <=0, maka akan ditampilkan animasi kalah untuk karakter dengan HP<=0 dan memunculkan notifikasi battle (screen ID :19).

Link From Screen ID: 15,16 Link to Screen ID: 14


107

Text Attributes:

Still Images: HP-bar.png, logo-battle.png, Aceh.jpg, SumBar.jpg, KalTim.jpg, Maluku.jpg, Papua.jpg, Bali.jpg, JaTeng.jpg, DKI.jpg, bom besar.png, bom kecil.png, ledak1.png, ledak2.png

Audio:


Throwbom.wav efek suara musuh yang melemparkan bom.

Shotbom.wav efek suara musuh dan karakter user yang menembakan bom.

Bomb-02.wav efek ledakan bom

Video:

Animation:

Bom akan bergerak seperti kurva. Bila jawaban pada battle 2 atau battle 3 benar, maka arah pergerakan dari kiri ke kanan. Bila jawaban pada battle 2 atau battle 3 salah, maka arah pergerakan dari kanan ke kiri.

Bila jawaban pada battle 2 (screen ID : 15 ) atau battle 3 (screen ID : 16 ) benar, maka akan ada animasi melempar bom dari karakter user dan animasi terkena bom dari karakter musuh.

Bila jawaban pada battle 2 (screen ID : 15 ) atau battle 3 (screen ID : 16 ) salah, maka akan ada animasi melempar bom dari karakter musuh dan animasi terkena bom dari karakter user.

Animasi pemakaian barang untuk karakter yang menggunakan.

Animasi pengurangan HP karakter yang terkena bom,dan gradasi warna sesuai persentase HP.

Animasi kalah bagi karakter yang memiliki HP <= 0.

Tabel 3.24 Storyboard kredit




108

Screen Description:

1. Latar belakang halaman kredit. 2. Gambar karakter user dan karakter pendukung. 3. Teks kredit.

User dapat mengklik dimana saja untuk keluar dari halaman ini dan menuju halaman title (screen ID : 01).




Still Images: BG kredit.png

Audio: startgame.midi

Video:

109

Animation:

Teks kredit bergerak dari bawah ke atas.

Animasi karakter user dan karakter pendukung no 2 sedang berlari.

Tabel 3.25 Storyboard notifikasi




Screen Description:

1. Latar belakang notifikasi. Disesuaikan dari halaman yang memunculkan notifikasi ini.

2. Teks notifikasi. Disesuaikan dengan halaman yang memunculkan notifikasi ini dan kondisinya. - Silahkan masukkan nama. Apabila user menekan tombol ‘\/’ tanpa mengisi

110

nama profil yang akan dibuat pada halaman buat profil. - Panjang nama makasimal 10 karakter. Apabila user mengisi nama profil

lebih dari 10 karakter dan menekan ‘\/’ pada halaman buat profil. - Nama profil sudah digunakan. Apabila user mengisi nama profil tetapi sudah

digunakan dan menekan ‘\/’ pada halaman buat profil. 3. Penanda untuk menutup notifikasi dan kembali ke halaman yang memunculkan

notifikasi ini. User dapat meng-klik dimana saja.


Color Scheme: Putih (#ffffff ) , Hitam (#000000),(#0e0e0e) ,Coklat (#693800), (#9a5703),(#c57520),(#ffca48) ,Krem (#f8d297) ,Hijau (#00ff37) ,Biru (#014eff), (#017efe) ,Merah (#df0f0f)


Still Images: box notifikasi.png

Audio:

Video:

Animation:

Tabel 3.26 Storyboard notifikasi-battle




111

Screen Description:

1. Latar belakang halaman notifikasi battle. Disesuaikan dengan kondisi battle yang memunculkan notifikasi ini. Bila user menang, maka berlatar belakang musuh kalah,bila musuh menang, maka berlatar belakang user kalah.

2. Notifikasi kemenangan atau kekalahan. Tergantung kondisi battle yang memunculkan notifikasi ini. - Menang . Apabila user menang. - Kalah. Apabila user kalah.

3. Keterangan uang hadiah yang didapat. Jumlah uang yang didapat tergantung dari status menang atau kalah user dan musuh yang dilawan. (Dapat dilihat pada lampiran)

4. Tombol untuk menuju halaman menu utama (screen ID : 06).



Text Attributes: Avenir LT Black Font size 30pt. ,Avenir LT Medium Font size 16pt.

112

Still Images:Kalah.png, menang.png

Audio:

Kalah.wav efek suara apabila pemain kalah

Menang.wav efek suara apabila pemain menang

Video:

Animation:

Tabel 3.27 Storyboard opsi




113

Screen Description:

1. Latar belakang halaman opsi. 2. Radio button untuk mengaktifkan musik latar. 3. Radio button untuk menon-aktifkan musik latar. 4. Radio button untuk mengaktifkan efek suara. 5. Radio button untuk menon-aktifkan efek suara. 6. Button untuk kembali ke halaman yang memunculkan halaman opsi ini, halaman

menu awal ( screen ID : 01 ), atau halaman menu utama ( screen ID : 06 ).


Color Scheme: Putih (#ffffff ) ,Hitam (#000000),(#0e0e0e) ,Coklat (#693800),(#9a5703),(#c57520),(#ffca48) ,Krem (#f8d297) ,Hijau (#00ff37) ,Biru (#014eff),(#017efe) ,Merah (#df0f0f)

Text Attributes: Avenir LT Black Font size 20pt. ,Avenir LT Medium Font size 16pt.

Still Images: Opsi-BG.png

Audio:

Startgame.midi (repeat forever) apabila di aktifkan dari menu awal

song1.midi, song2.midi, song3.midi (pemunculan lagu di acak diantara 3 audio, repeat forever) apabila di aktifkan dari menu utama

Video:

Animation:

Tabel 3.28 Storyboard tutorial menu




114

Screen Description:

1. Latar belakang untuk halaman Tutorial Menu. 2. Kolom yang berisi menu-menu yang dapat dipilih. 3-7. Tombol pada menu utama, tidak bisa di-klik. 8. Teks isi dari tutorial. 9. Penanda adanya teks selanjutnya. User dapat meng-klik dimana saja untuk

mengganti teks pada no.8. 10. Gambar penunjuk tombol yang dijelaskan



Text Attributes: Avenir LT Black Font size 16pt, 38pt., Arial Font size 25pt, 18pt.

Still Images: dialog.png, BG.jpg, BG atas.png, gambar-atas-aceh.png, gambar-atas-sumbar.png, gambar-atas-kaltim.png, gambar-atas-maluku.png, gambar-atas-papua.png, gambar-atas-bali.png, gambar-atas- jateng.png, gambar-atas-jakarta.png, pointer.png, menu.png.

115


Video:

Animation:

Penunjuk pilihan daerah bergerak turun (selama 0.5 detik, repeat).

Tombol-tombol pada no.3-7 akan berubah menjadi kondisi hover dan ditunjuk dengan panah sesuai dengan hal yang dijelaskan pada teks tutorial no.8.

Tabel 3.29 Storyboard tutorial battle




116

Screen Description:

1. Latar belakang halaman Tutorial Battle 2-3. Tombol-tombol pada halaman battle 1, tidak bisa di-klik. 4. Teks isi dari tutorial. 5. Penanda adanya teks selanjutnya. User dapat meng-klik dimana saja untuk

mengganti teks pada no.4.


Color Scheme: Putih (#ffffff ) ,Hitam (#000000),(#0e0e0e) , Coklat (#693800), (#9a5703),(#c57520),(#ffca48) ,Krem (#f8d297) ,Hijau (#00ff37) ,Biru (#014eff), (#017efe) ,Merah (#df0f0f)

Text Attributes: Avenir LT Black Font size 16pt, 24 pt., Arial Font size 25pt, 18pt.

Still Images: dialog.png, pilih-BG.png, HP-bar.png, logo-battle.png, Aceh.jpg, SumBar.jpg, KalTim.jpg, Maluku.jpg, Papua.jpg, Bali.jpg, JaTeng.jpg, DKI.jpg

Audio: battle.midi, boss2.midi (battle1.midi untuk melawan musuh biasa, boss2.midi untuk melawan boss)

Video:

Animation: Tombol-tombol pada no.2 dan no.3 akan berubah menjadi kondisi hover sesuai dengan hal yang dijelaskan pada teks tutorial no.4.

Tabel 3.30 Storyboard keluar




117

Screen Description:

1. Latar belakang untuk halaman keluar. 2. Teks pesan pada halaman keluar. 3. Tombol untuk keluar dari permainan. 4. Tombol menuju halaman menu utama (screen ID : 06 ).



Text Attributes: Avenir LT Black Font size 16pt, 38pt.

Still Images: keluar.png


Video:

Animation:

Documents

BAB 3 ANALISIS DAN PERANCANGAN - thesis.binus.ac.idthesis.binus.ac.id/Doc/Bab3/2011-1-00158-if 3.pdf · responden tentang sejarah kerajaan di Indonesia, dan ketiga untuk mengetahui