BAB 3 ANALISIS DAN PERANCANGAN

(1)

35 BAB 3

ANALISIS DAN PERANCANGAN

3.1 Planning

Software pendukung pembuatan game ini : 1. XAMPP

Digunakan sebagai virtual webserver dalam pembuatan game ini. 2. Notepad++

Sebagai software pembuatan program. 3. Adobe Photoshop CS5

Digunakan pada pembuatan design story dan button.

Perencanaan kuesioner: 1. Kuesioner Pertama:

Dilakukan sebelum program dibuat, dalam kurun waktu dua minggu dengan target responden sebanyak minimal 100 peserta. Dan dilakukan melalui media google docs.

2. Kuesioner Kedua

Dilakukan setelah program selesai dibuat, dalam kurun waktu satu minggu dengan target responden sebanyak minimal 30 peserta. Dan dilakukan melalui media google docs.

3. Kuesioner Ketiga

Dilakukan untuk menambah data yang lebih lengkap dari kuesioner sebelumnya dengan jumlah responden yang sama.

Perencanaan pengerjaan: 1. Perancangan UML

Dilakukan selama kurun waktu satu hingga dua minggu. 2. Perancangan Design Game

Dilakukan bersamaan dengan UML dengan kurun waktu sekitar satu hingga dua minggu.

(2)

36

Setelah UML selesai maka dilakukan tahapan ini dengan estimasi waktu sekitar satu minggu.

4. Pembuatan Program

Pengerjaan dimulai setelah perancangan UML dan design game telah disepakati bersama. Kurun waktu pengerjaan dua hingga tiga minggu.

3.2 Analisis Game

3.2.1 Analisis Game Sejenis

Penulis akan menganalisis beberapa game yang sejenis sebagai referensi. Game yang dipilih adalah beberapa jenis game yang diciptakan melalui pemanfaatan teknologi HTML5. Berikut adalah game yang digunakan sebagai referensi:

Super Mario Bros

(3)

37

Super Mario Bros adalah game yang sudah terkenal dari tahun 1985 yang hingga saat ini masih menjadi icon utama untuk perusahaan game ternama Nintendo. Dengan menggunakan teknologi HTML5 dan tujuan penggunanya adalah user desktop. Game ini

dicoba dan dibuat ulang pada situs

http://www.gameshtml5.net/games.php?id=2 .

Gambar 3.2 Super Mario Bros Screenshot 2

Game ini bertujuan untuk menyelamatkan sang putri yang ditahan di kastil oleh tokoh antagonis. User harus melewati berbagai rintangan untuk sampai pada tahap tersebut.

(4)

38

Gambar 3.3 Super Mario Bros Screenshot 3

Tantangan dalam game ini adalah seberapa cepat user menghindari, melawan serta memilih jalan yang akan dilalui. Poin menarik dari game ini adalah banyaknya jalan-jalan rahasia yang cukup unik di mana user ditantang untuk bisa meraih skor tertinggi maupun lokasi-lokasi yang sulit dijangkau. Namun tentu ada sisi yang kurang dalam game ini di mana storyline kurang ditonjolkan sehingga user hanya bermain tanpa mengetahui alur cerita hingga pada saat melewati tantangan terakhir user baru disadarkan akan alur cerita dalam game ini.

(5)

39

Pacman

Gambar 3.4 Pacman Screenshot 1

Pacman adalah game yang dikenal dari generasi ke generasi yang tentunya sudah berubah banyak baik dari segi tampilan hingga berbagai macam jenis fitur barunya. Game ini awalnya dibuat di Jepang pada tahun 1979. Saat ini banyak sekali jenis Pacman yang sudah diadaptasi. Permainan ini sudah menjadi legendaris sejak pertama kali diluncurkan pada tahun 1980. Game ini dicoba dan

dibuat ulang pada situs

(6)

40

Tujuan dari game ini adalah untuk memakan semua objek kuning yang ada di arena, tanpa tersentuh oleh monster lain yang berjalan, namun bila memakai objek kuning yang lebih besar akan mendapatkan efek lain.

Efek yang ditimbulkan membuat user dapat memakan lawan atau enemy tersebut saat berwarna biru, lalu bila memakan item seperti buah maka poin User akan bertambah.

(7)

41

Tantangan dalam game ini adalah seberapa cepat user menghindari, melawan serta memilih jalan yang akan dihadapi. Poin menarik dari game ini adalah bagaimana cara user meloloskan diri serta mendapat poin yang tertinggi.

Project Blaze Zero

Gambar 3.7 Project Blaze Zero Screenshot 1

Game ini merupakan salah satu karya dari produksi Construct 2 engine yang merupakan salah satu engine pendukung game HTML5. Game ini dibuat oleh Beextend games sebagai salah satu demo game mereka yang diunggah pada situs http://www.scirra.com/arcade/349/project-blaze-zero.

(8)

42

Gambar 3.8 Project Blaze Zero Screenshot 2

Target dari game ini adalah untuk menghindari serta melawan semua serangan lawan agar User dapat sampai ke tujuan. Fitur-fitur yang ada dalam game ini adalah fitur senjata utama dan bom. User diharuskan untuk menghindari semua peluru lawan yang akan ditembakkan ke User. Lalu User harus menyerang balik lawan untuk mendapatkan poin.

(9)

43

Kecepatan tangan dan kemampuan prediksi serangan tentunya menjadi nilai lebih untuk User dalam game ini. Tampilan yang diberikan cukup menarik dan halus untuk dipandang, serta efek-efek yang cukup memukau. Meski sayang jalur cerita dari game ini tidak ditemukan serta kurang adanya fitur lain selain senjata utama dan bom yang menjadi alat untuk melawan enemy yang ada.

Tabel 3.1 Analisis Game Sejenis

Faktor Super Mario Bros Pacman Project Blaze Zero

Jenis Action Action Action

Game Story Ada Tidak Ada Tidak Ada

Gameplay Berjalan hingga akhir tujuan tiap level.

Survival, menghindari enemy serta memakan semua titik kuning yang ada di arena.

Melawan semua enemy yang ada di hadapan hingga level terakhir. Fitur Terdapat item

pendukung untuk membantu User.

Ada item khusus untuk melawan enemy.

Perbedaan senjata serta ada bom untuk melawan enemy. Mempunyai live

atau nyawa.

Mempunyai live atau nyawa. Mempunyai live atau nyawa. Grafis Tampilan 2D dengan warna yang sederhana, serta tekstur yang masih terkesan pixel.

Tampilan hanya menggunakan warna dasar saja sebagai pembeda antara User dan lawan.

Menggunakan gambar yang cukup halus untuk tiap sprite yang digunakan.

Item Berupa Jamur, Bintang, Bunga.

Hanya titik kecil dan besar serta buah-buahan.

Ada peluru amunisi serta bom.

Challenge Arena yang berubah tiap level dan tantangan

Arena permainan yang berbeda serta adanya lawan yang bergerak

Semakin banyaknya lawan yang datang. Serta jumlah peluru

(10)

44

dalam bentuk bangunan maupun pasukan enemy yang berbeda.

semakin cepat. lawan yang sangat banyak.

Ending Ada Ada Ada

3.2.2 Hasil Kuesioner

Pengumpulan data dilakukan melalui penyebaran kuesioner kepada khalayak umum. Penyebaran kuesioner dilakukan dengan media internet melalui google docs yang dimulai pada tanggal 12 April 2013 hingga 25 April 2013.

Jumlah responden yang didapat sebanyak 105 responden. Berikut pengolahan dari hasil pengumpulan data.

1. Apakah Anda pria atau wanita? Jawab: Tabel 3.2 Gender Jawaban Jumlah Pria 81 Wanita 24 Gambar 3.10 Gender

(11)

45

Berdasarkan data ini terlihat lebih banyaknya kaum pria, maka desain game Ozan The Lobak Shooter akan lebih medekati game yang dimainkan oleh para pria namun tetap ditujukan pula pada kaum wanita.

2. Berapa usia Anda? Jawab:

Tabel 3.3 Usia

Jawaban Jumlah Persentase

<15 Tahun 0 0% 15~20 Tahun 12 11% 21~25 Tahun 88 84% 26~30 Tahun 3 3% >30 Tahun 2 2% Gambar 3.11 Usia

Menurut data ini perancangan game yang dibuat akan lebih diutamakan pada target yang memiliki umur sekitar 21 hingga 25 tahun.

(12)

46

3. Apa Profesi Anda sekarang? Jawab:

Tabel 3.4 Profesi

Pelajar 2 2% Mahasiswa 71 68% Karyawan 19 18% Wirausaha 6 6% Tidak bekerja 3 3% Lainnya 4 4% Gambar 3.12 Profesi

Berdasarkan hasil kuesioner yang didapat, maka game yang akan dibuat ditargetkan terutama untuk mahasiswa.

4. Apakah Anda pernah bermain game? Jawab:

Tabel 3.5 Pernah bermain game

Jawaban Jumlah

Ya 101

(13)

47

Gambar 3.13 Pernah bermain game

Dengan hasil kuesioner berikut maka tentunya membuktikan bahwa hampir semua responden pernah bermain game.

5. Berapa lama waktu yang Anda butuhkan untuk bermain game dalam satu hari?

Jawab:

Tabel 3.6 Lama bermain game

Kurang dari 1 Jam 9 10%

1~2 Jam 43 42%

3~4 Jam 24 24%

4~6 Jam 13 12%

(14)

48

Gambar 3.14 Lama bermain game

Terlihat dalam hasil kuesioner di mana para user lebih cenderung bermain game sekitar 1 hingga 2 jam. Oleh karena itu range waktu untuk game yang akan dibuat tentunya sekitar 1 hingga 2 jam saja agar tidak membosankan.

6. Bahasa pengantar apa yang Anda sukai dalam bermain game? Jawab:

Tabel 3.7 Bahasa Pengantar

Jawaban Jumlah

Indonesia 33

(15)

49

Gambar 3.15 Bahasa Pengantar

Berdasarkan hasil ini, game Ozan The Lobak Shooter akan menggunakan bahasa pengantar bahasa Inggris.

7. Apa yang membuat Anda tertarik dalam bermain game? Jawab:

Tabel 3.8 Daya tarik bermain game

Grafik 55 19%

Alur Ceritanya 54 18%

Efek Suara 40 14%

Gameplay 88 30%

(16)

50

Gambar 3.16 Daya tarik bermain game

Sesuai hasil kuesioner maka game Ozan The Lobak Shooter akan menitik beratkan pada sisi gameplay namun tetap mengandung semua elemen-elemen lain seperti grafik, alur cerita, efek suara dan animasi.

8. Performa terbaik atau tercepat yang menjadi pilihan Anda dalam bermain game?

NB: Terbaik (performa game yang maksimal tanpa pertimbangan kemampuan perangkat) atau Tercepat (performa game yang nyaman dan disesuaikan pada perangkat)

Jawab:

Tabel 3.9 Performa game

Jawaban Jumlah

Terbaik 47

(17)

51

Gambar 3.17 Performa game

Dengan hasil berikut tentunya game akan dirancang dengan mengutamakan kemampuan yang disesuaikan pada kemampuan perangkat dan tetap memberikan performa maksimal yang disesuaikan tentunya.

9. Perangkat apa yang sering Anda gunakan untuk bermain game? Jawab:

Tabel 3.10 Perangkat bermain game

Jawaban Jumlah

Komputer/Laptop/Notebook 76

Mobile/Smartphone 14

TabletPC 3

(18)

52

Gambar 3.18 Perangkat bermain game

Dari hasil kuesioner menunjukkan dominasi user komputer sebagai perangkat yang sering digunakan dalam bermain game. Oleh karena itu game yang dibuat akan diberikan optimalisasi utama untuk user komputer.

10. Berapa resolusi layar yang biasa Anda pakai untuk bermain game? Jawab:

Tabel 3.11 Resolusi layar

320x240 2 1% 640x480 4 3% 800x600 15 11% 1024x768 34 25% 1280x960 17 13% 1600x1200 9 7%

Tidak ada dalam pilihan atau tidak tahu

(19)

53

Gambar 3.19 Resolusi layar

Dari hasil kuesioner didapat banyaknya user yang kurang paham tentang resolusi yang biasa mereka gunakan oleh sebab itu game Ozan The Lobak Shooter akan dibuat sesuai device user dan mengutamakan resolusi 1024x768 untuk para user komputer.

11. Apakah anda pernah bermain game yang dimainkan dengan media web browser?

Jawab:

Tabel 3.12 Pernah bermain game dengan media web browser

Jawaban Jumlah

Ya 92

(20)

54

Gambar 3.20 Pernah bermain game dengan media web browser

Sesuai dengan kuesioner maka dapat dilihat sebagian besar user pernah bermain game dengan media web browser. Hal ini menunjukkan game dalam media web browser diminati oleh sebagian besar responden.

12. Apakah anda pernah memposting skor atau nilai yang Anda dapat dari game ke jejaring sosial?

Jawab:

Tabel 3.13 Pernah memposting skor ke jejaring sosial

Jawaban Jumlah

Ya 73

(21)

55

Gambar 3.21 Pernah memposting skor ke jejaring sosial

Kueisioner ini menunjukan sebagian besar responden pernah melakukan posting nilai atau skor ke sosial media. Oleh sebab itu maka game Ozan The Lobak Shooter juga akan menyediakan fitur posting ke sosial media.

13. Web Browser apa yang biasa Anda gunakan? Jawab:

Tabel 3.14 Web Browser

Internet Exploler 6 2% Mozilla Firefox 53 31% Google Chrome 85 49% Safari 12 7% Opera 13 8% Lainnya 4 2%

(22)

56

Gambar 3.22 Web Browser

Berdasarkan hasil ini maka Ozan The Lobak Shooter akan dimaksimalisasi dalam browser Google Chrome dan Mozilla Firefox.

14. Bentuk karakter apa yang Anda sukai dalam bermain game? Jawab:

Tabel 3.15 Karakter dalam game

Jawaban Jumlah

Manusia 81

Hewan 15

(23)

57

Gambar 3.23 Karakter dalam game

Berdasarkan hasil kuesioner ini maka karakter utama yang ada dalam Ozan The Lobak Shooter akan berbentuk manusia.

15. Akhir cerita (ending) seperti apakah yang Anda inginkan dalam bermain game?

Jawab:

Tabel 3.16 Akhir cerita dalam game

Jawaban Jumlah

Happy ending 45

Bad ending 2

Ending tak terduga 52 Ending yang tak jelas dan mengambang

(24)

58

Gambar 3.24 Akhir cerita dalam game

Terlihat dalam kuesioner ini para responden kebanyakan lebih memilih akhir cerita yang tak terduga serta berakhir dengan bahagia. Oleh karena ini Ozan The Lobak Shooter akan dibuat memadukan dua unsur ini.

16. Kendala apa yang pernah Anda alami saat bermain web game? Jawab:

Tabel 3.17 Kendala dalam bermain web game

Jawaban Jumlah

Server Down 52

Koneksi Internet Lambat 72

404 Not Found 37

(25)

59

Gambar 3.25 Kendala dalam bermain web game

Dari hasil kuesioner ini kendala utama responden disebabkan oleh koneksi internet lambat, server down dan 404 Not Found . Oleh karena itu Ozan The Lobak Shooter akan dibuat secara lebih efisien serta kualitas server yang maksimal agar hal-hal ini tidak menjadi kendala dalam bermain.

3.2.3 Analisis Kebutuhan

Analisis kebutuhan yang dibuat berdasarkan data yang telah diperoleh dari kuesioner dan analisis game sejenis adalah berikut:

1. Setiap permainan action memiliki tingkat kesulitan level yang membedakan antara tahapan awal permainan dengan tahapan berikutnya.

2. Dari setiap permainan ini story atau alur cerita tidak terlalu ditonjolkan sebagai elemen utama namun tetap boleh dipergunakan dan ada ending dalam akhir permainan.

3. Tantangan yang diberikan dalam action game adalah tantangan yang membutuhkan kemampuan user untuk berjuang dalam menghindari, melawan serta mencapai tujuan dalam game tersebut

(26)

60

dengan kemampuan kecepatan tangan maupun ketepatan dalam bermain.

4. Setiap permainan memiliki live atau nyawa sebagai batas dalam permainan dan ada item pendukung untuk membantu user dalam menyelesaikan misi atau level.

5. Responden menyukai permainan yang tidak terlalu memakan waktu lama, adanya sistem posting skor serta performa tercepat yang disesuaikan dengan perangkat.

6. Responden lebih tertarik dengan akhir cerita yang tak terduga namun bahagia, serta karakter utama manusia.

7. Kebanyakan responden mengalami kendala pada koneksi internet mereka yang lambat.

8. Sebagian besar responden lebih memilih gameplay yang menarik dan bermain dengan Google Chrome dan Mozilla Firefox sebagai web browser-nya.

9. Kebanyakan responden memakai perangkat atau media untuk bermain game berupa komputer dan laptop dengan bahasa Inggris di dalam game-nya, serta resolusi 1024x768 untuk user komputer walau kebanyakan responden tidak tahu atau tidak bisa memilih resolusi yang mereka sering pakai.

3.2.4 Solusi & Pemenuhan Kebutuhan

Untuk memenuhi kebutuhan user dari hasil analisis, maka hal-hal penting yang akan diterapkan ke dalam game adalah sebagai berikut:

1. Memasukkan cerita yang menarik dan tidak rumit dengan akhir cerita yang tak terduga dan bahagia.

2. Membuat beberapa tingkat kesulitan yang tidak memerlukan waktu lama untuk menyelesaikannya.

3. Memasang fitur sharing score ke jejaring sosial. 4. Memakai bahasa Inggris.

(27)

61

6. Memasukkan sistem nyawa dan power-up item untuk menguatkan senjata user.

7. Resolusi akan diterapkan secara otomatis sesuai perangkat yang dipakai.

8. Resource yang dipakai tidak besar.

9. Kompatibel dengan banyak perangkat seperti komputer dan laptop dengan web browser yang sudah ter-Update. Perangkat seperti smartphone atau tablet juga bisa digunakan.

3.3Game Design

3.3.1 High Concept

User akan bermain sebagai Ozan untuk menyelamatkan kakeknya dari alien. Hindari dan kalahkan enemy dengan Lobak Shooter serta selesaikan semua level untuk menyelamatkan kakek Ozan.

3.3.2 Fitur

1. Permainan side-scrolling dengan kamera yang selalu mengikuti user.

2. Menghindari enemy dengan button lompat atau mengalahkannya dengan tembakan untuk menambahkan skor

3. Menghindari rintangan dan tidak terjatuh agar tidak mati. 4. Mengambil power-up item dari bos yang dikalahkan pada tiap Stage untuk meningkatkan daya serang senjata. 5. Jika nyawa berkurang, user bisa mengambil item

penambah nyawa untuk menambah satu kotak nyawa. 6. Koin-koin yang berserakkan pada semua Stage bisa

diambil untuk menambah skor.

7. Skor akhir dapat diposting oleh user ke dinding facebook mereka.

(28)

62

3.3.3 Overview

3.3.3.1 Player Motivation

User harus menyelesaikan semua rintangan pada tiap Stage untuk mendapatkan hadiah power-up item dan bisa mendapatkan lanjutan cerita dari game. Sepuluh nama pemilik skor tertinggi akan dimuat pada menu highscore.

3.3.3.2 Genre

Action-shooter. 3.3.3.3 License

Engine yang digunakan adalah enchant.js dan lisensinya free. 3.3.3.4 Target Customer

Semua usia pemilik perangkat elektronik berupa komputer, smartphone, game console dan perangkat apa pun yang mendukung fitur web browser dan HTML5 yang menyukai cerita yang unik dan suka bersaing skor tinggi dengan banyak orang.

3.3.3.5 Competition

User bisa bersaing skor dengan banyak user lain.

3.3.3.6 Unique Selling Point

1. User bermain sebagai Ozan melawan alien seperti bebek, kambing dan sapi.

2. Akhir cerita tidak seperti kebanyakan game pada umumnya.

3. Multiplatform.

4. Resource game yang digunakan kecil, sehingga waktu pemuatan tidak lama walau pun koneksi internet user tidak cepat.

3.3.3.7 Target Hardware

Komputer, laptop, smartphone dengan sistem operasi Android, iOS atau windows, game console yang memiliki web browser

(29)

63

dan semua perangkat lain yang mendukung HTML5. Untuk optimalisasi yang terbaik ada pada komputer dan laptop. 3.3.3.8 Design Goal

Untuk memberikan kisah yang unik pada user dan menunjukkan bahwa game HTML5 bisa dimainkan di banyak platform sekaligus dan resource yang digunakan cukup kecil. User bisa menghabiskan waktu kosong atau menjadikan dirinya yang terbaik di antara user lain.

3.3.4 Further Details 3.3.4.3 Story

Ozan The Lobak Shooter merupakan game yang diawali dari sebuah kisah di saat bumi diserang oleh alien (hewan). Para alien menculik kakek Ozan di sawah untuk dijadikan bahan eksperimen. Karena Ozan ingin menyelamatkan kakeknya, ia teringat benda pusaka peninggalan nenek moyangnya. akhirnya Ozan menggunakan Lobak Shooter sebagai senjata untuk melawan para alien dan menyelamatkan kakeknya.

3.3.4.4 Control

Untuk mengendalikan karakter ada dua cara, yaitu menggunakan keyboard atau menyentuh button di layar. 1. Melompat : Menekan button ‘space’ di keyboard atau

‘Jump’ di layar.

2. Menembak : Menekan button ‘enter’ di keyboard atau ‘Fire’ di layar.

3.3.4.5 Rules

1. Aturan yang berlaku pada game:

a. User tidak boleh menyentuh lawan dalam bentuk apapun.

b. Lawan dapat dikalahkan hanya dengan cara ditembak dengan senjata yang dimiliki oleh user.

(30)

64

c. Permainan berakhir jika nyawa atau Life yang dimiliki oleh user telah habis.

d. Life user akan terus berkurang jika User menyentuh lawan atau terkena serangan lawan.

e. Jika user jatuh ke bawah, permainan akan berakhir.

2. Rumus nyawa atau Life

a. Di setiap awal Stage permainan user mendapatkan lima kotak Life.

b. Maksimal Life yang dimiliki adalah lima kotak. c. Setiap bersentuhan dengan lawan dan terkena

serangan lawan maka Life akan berkurang satu kotak untuk setiap jumlah sentuhan dan serangan yang diterima.

d. Life bisa dipulihkan dengan mengambil item tertentu atau mengulang permainan dari awal. e. Setelah Life berkurang, user akan kebal serangan

selama satu sampai dua detik terhadap serangan enemy.

3. Rumus skor:

a. Setiap koin yang diambil akan bertambah 100 poin. b. Mengambil item penambah nyawa dan power-up

akan menambah 1.000 poin

c. Setiap tembakkan yang mengenai lawan akan bertambah 10 poin.

d. Setiap Bebek yang dikalahkan akan mendapat 100 poin.

e. Setiap Kambing yang dikalahkan akan mendapat 200 poin.

f. Setiap Sapi yang dikalahkan akan mendapat 300 poin.

(31)

65

g. Mengalahkan Bos Bebek akan mendapatkan 1.000 poin.

h. Mengalahkan Bos Kambing akan mendapatkan 2.500 poin.

i. Mengalahkan Bos Sapi akan mendapatkan 10.000 poin.

4. Daya serang senjata:

a. Lobak Shooter : satu damage b. Lobak Shooter X : dua damage c. Lobak Shooter Xtreme : tiga damage

3.3.4.6 Resource

Ukuran atau size resource game berupa gambar, suara dan script tidak melebihi 5MB.

3.3.4.7 Game Balance

Beberapa unsur game balance yang diambil adalah:

1. Understanding positive feedback : adanya peningkatan daya serang senjata user pada tiap level dengan perubahan sprite peluru.

2. Making PvE games fair : peningkatan jumlah life musuh yang tidak terlau signifikan disertai kecepatan serangan musuh yang meningkat pada tiap level. 3. Managing difficulty : yang dipakai adalah absolute

difficult, yaitu pemain harus menggunakan kemampuan dan insting mereka untuk menyerang dan menghindari serangan musuh yang bisa muncul bertubi-tubi.

(32)

66

3.3.4.8 Komponen Permainan 1. Karakter

Tabel 3.18 Karakter

Gambar Deskripsi Keahlian

Ozan

(Playable character) Seorang petani yang memiliki Lobak Shooter peninggalan nenek moyangnya. Melompat dan menembak enemy. Kakek Ozan (Non-Playable Character) Kakek Ozan yang diculik oleh alien untuk dijadikan bahan eksperimen. - Bebek (Non-Playable Character) Anak buah Bos Bebek di Stage pertama.

Menembak musuh dari mulutnya.

(33)

67 Bos Bebek (Non-Playable Character) Bos di Stage pertama. Menembak musuh dari mulutnya sambil terbang ke atas dan kebawah. Kambing (Non-Playable Character) Anak buah Bos Kambing di Stage kedua Berlari cepat untuk menabrak player dengan tanduknya. Bos Kambing (Non-Playable Character)

Bos di Stage kedua.

Menabrak musuh dan menyerang dengan sabitnya. Sapi (Non-Playable Character) Menembak dari kepalanya. Bos Sapi (Non-Playable Character)

Bos di Stage ketiga.

Menabrak dan menembak dari kepalanya.

(34)

68

Tabel 3.19 Keterangan Status Karakter

Nama Hit Point Senjata Keterangan

Bebek 1 Laser Alien ini menembakkan

laser dari mulutnya.

Bos Bebek 30 Laser Bos ini menembakkan

laser dari mulutnya sambil terbang ke atas dan kebawah.

Kambing 8 Tanduk Alien ini berlari dengan

kecepatan tinggi untuk menabrak user. Bos Kambing 100 Sabit besar Menggunakan sabit

besar yang dimiliki untuk menebas dan menabrak user kecepatan tinggi .

Sapi 20 Laser Bisa menembakkan dari

kepalanya.

Bos Sapi 180 Laser dan

Tanduk

Ia bisa mengeluarkan tembakan dari kepalanya dan

menabrak user dengan tanduknya.

(35)

69

2. Stage details

Stage terdiri dari tiga lokasi dan memiliki suasana yang berbeda.

Tabel 3.20 Stage Details

Gambar Deskripsi

Stage 1

Lokasi: Ladang sawah di pagi hari.

Cerita:

Kakek Ozan diculik oleh alien dan dibawa ke tempat yang Ozan tidak ketahui. Desa Ozan dikuasai Bos Bebek dan Ozan harus mengalahkan Bos Bebek sebelum mencari kakeknya.

Misi:

Temui dan kalahkan Bos Bebek.

Kondisi menang: Mengalahkan Bos Bebek. Kondisi kalah:

User kehabisan nyawa atau Life.

Stage 2

Lokasi: Daerah pegunungan di sore hari. Cerita:

Setelah mengalahkan Bos Bebek, Ozan harus melewati pegunungan

(36)

70 untuk menolong kakeknya, dan menghadapi Bos Kambing. Misi:

Temui dan kalahkan Bos Kambing.

Kondisi menang:

Mengalahkan Bos Kambing.

Kondisi kalah:

Stage 3

Lokasi: Daerah padang pasir di malam hari. Cerita:

Setelah sampai di padang pasir, Ozan harus mengalahkan Bos Sapi untuk menyelamatkan kakeknya.

Misi:

Temui dan kalahkan Bos Sapi lalu selamatkan sang Kakek.

Kondisi menang: Mengalahkan Bos Sapi. Kondisi kalah:

(37)

71

3.4 Perancangan Sistem 3.4.1 Use Case Diagram

(38)

72

3.4.2 Use Case Description

3.4.3.1 Use Case Description Video Pembuka

Tabel 3.21 Use Case Description Video Pembuka Nama Use

Case

Lihat Video Pembuka

Pelaku User

Deskripsi Menampilkan video pembuka yang berisi sinopsis dari game

Pemicu Membuka halaman website Ozan The Lobak shooter Bagian

umum

Kegiatan User Respon sistem

Step 1 : Membuka website “Ozan the Lobak Shooter”

Step 2 : Menampilkan video pada saat halaman website terbuka

Step 3 : sistem

menampilkan halaman registrasi

(39)

73

3.4.3.2 Use Case Description Melakukan Registrasi

Tabel 3.22 Use Case Description Melakukan Registrasi Nama Use

Case

Melakukan Registrasi

Pelaku User

Deskripsi Melakukan registrasi dengan menggunakan Nama atau akun Facebook

Pemicu Melewati halaman video Bagian

umum

Step 1 : User menginput nama

Step 2 : User menekan button Ok

Step 3 : Sistem

memvalidasi data, Jika data valid

Step 4 : Sistem menyimpan data dalam database

Step 5 : Sistem

menampilkan halaman menu utama

Alternate

Alt-Step 1 : Jika user menggunakan akun facebook sistem akan meminta ijin user untuk game dan akun facebook milik user, menampilkan halaman sinkronisasi facebook berisi button “Allow” dan “Close”

Jika user memilih “Close”, kembali ke step 1 Jika user memilih “Allow”, ke step 4

Alt-Step 3 : Jika data tidak valid, Sistem menampilkan kalimat berwarna merah dan kembali ke Step 1

(40)

74

3.4.3.3 Use Case Description Main Game

Tabel 3.23 Use Case Description Main Game Nama Use Case Main Game

Pelaku User

Deskripsi Memulai permainan Pemicu Menekan button Play

Bagian umum Kegiatan User Respon sistem Step 1 : User menekan

button Play

Step 5 : User menekan button Next

Step 2 : Sistem

menampilkan halaman loading, sebagai persiapan sistem untuk masuk ke halaman berikutnya

Step 3 : Sistem

menampilkan halaman cerita yang di tampilkan dalam bentuk animasi yang mempunyai durasi

Step 4 : Sistem

menampilkan halaman tutorial dalam bentuk animasi gambar.

Step 6 : Sistem

menampilkan halaman game

(41)

75

3.4.3.4 Use Case Description Melakukan Menembak

Tabel 3.24 Use Case Description Melakukan Menembak Nama Use Case Memilih Melakukan Menembak

Pelaku User

Deskripsi Animasi avatar menembak enemy

Pemicu Menekan Enter pada keyboard atau Fire pada layar Bagian umum Kegiatan User Respon Sistem

Step 1 : User menekan Enter pada keyboard atau

menyentuh/menekan Fire pada layar

Step 2 : Sistem menampilkan animasi avatar melakukan tembakan

Step 3 : Sistem mendeteksi tembakan, Jika tembakan kena Enemy

Step 4 : Sistem mendeteksi Life Enemy

Step 5 : Sistem melakukan pengurangan Life, Jika Life Enemy habis

Step 6 : Sistem menampilkan animasi avatar Enemy lenyap

Step 7 : Sistem menambah

score yang di peroleh User Alternate Alt-Step 3: Tembakan tidak kena Enemy

(42)

76

3.4.3.5 Use Case Description Melakukan Melompat

Tabel 3.25 Use Case Description Melakukan Melompat Nama Use

Case

Melakukan Melompat

Pelaku User

Deskripsi Animasi avatar melompat

Pemicu Menekan button keyboard Space Bar atau Jump pada layar

Bagian umum

Step 1 : User menekan button keyboard Space Bar atau Jump pada layar

Step 2 : Sistem menampilkan animasi avatar melompat

Step 3 : Mendeteksi benturan, Jika avatar kena benturan

Step 4 : Menampilkan animasi avatar blink

Step 5 : Mendeteksi Life avatar

Step 6 : Mengurangi Life, Jika Life avatar habis Step 7 : Menampilkan halaman Game Over

Alternate

Alt-Step 3 : Avatar tidak terbentur

Alt-Step 6 : Jika Life avatar belum habis, maka menampilkan pengurangan Life dan kembali ke Step 1

(43)

77

3.4.3.6 Use Case Description Melakukan Pause Game

Tabel 3.26 Use Case Description Melakukan Pause Game Nama Use

Case

Melakukan Pause Game

Pelaku User

Deskripsi Untuk melakukan Pause

Pemicu Menekan button keyboard ESC atau Pause pada layar Bagian

umum

Step 1 : Menekan button keyboard ESC atau Pause pada layar

Step 2 : Melakukan penghentian game

Step 3 : Menampilkan halaman Pop-up Pause

3.4.3.7 Use Case Description Melakukan Resume Game

Tabel 3.27 Use Case Description Melakukan Resume Game Nama Use

Case

Melakukan Resume Game

Pelaku User

Deskripsi Melanjutkan permainan Pemicu Menekan button Resume Bagian

umum

Step 1 : Menekan button Resume

Step 2 : Menampilkan halaman game

(44)

78

3.4.3.8 Use Case Description Menang Game

Tabel 3.28 Use Case Description Melakukan Menang Game Nama Use

Case

Menang Stage

Pelaku User

Deskripsi Berhasil memenangkan Stage Pemicu Memenangkan Stage

Bagian umum Kegiatan User Respon sistem Step 1 : User menang

Stage

Step 4 : User menekan button Next Stage

Step 2 : Sistem mendeteksi Stage, Jika Stage < Stage 3 Step 3 : Sistem

Menampilkan halaman End of Stage

Step 5 : Menampilkan halaman Stage selanjutnya

Alternate

Alt-Step 3 : Menang Stage = Stage 3, Sistem menampilkan halaman Akhir Cerita

(45)

79

3.4.3.9 Use Case Description Melakukan Share

Tabel 3.29 Use Case Description Melakukan Share Nama Use

Case

Melakukan Share

Pelaku User

Deskripsi Untuk berbagai nilai yang di peroleh ke Facebook Pemicu Menekan button Share

Bagian umum

Step 1 : Menekan button Share

Step 5 : User memilih Allow

Step 7 : User memilih Share

Step 2 : Sistem melakukan deteksi Registrasi

Step 3 : Sistem belum teregistrasi

dengan akun facebook

Step 4 : Sistem menampilkan halaman sinkronisasi

facebook

Step 6 : Sistem menampilkan konfirmasi Share Score ke facebook

Step 8 : Sistem memproses posting

Step 9 : Menampilkan halaman Highscore

Alternate

Alt-Step 3 : Sudah registrasi

dengan akun facebook menuju ke Step 6

Alt-Step 5 dan 7 : User memilih Close, Sistem mendeteksi halaman kemudian kembali ke halaman sebelumnya

(46)

80

3.4.3.10 Use Case Description Memilih Option Tabel 3.30 Use Case Description Memilih Option Nama Use

Case

Memilih Option

Pelaku User

Deskripsi Mengatur suara dan memilih avatar Pemicu Menekan button Option

Bagian umum

Step 1 : Menekan button Option

Step 3 : Memilih Avatar atau Mematikan suara Step 4 : Menekan button Ok

Step 2 : Menampilkan halaman Option

Step 5 : Merubah kondisi sesuai yang diatur oleh user

Step 6 : Save data kondisi Step 7 : Menampilkan ke halaman Menu utama

Alternate

Alt-Step 4 : Jika menekan button Reset, Maka

mengembalikan pengaturan menjadi default, kembali ke Step 2

(47)

81

3.4.3.11 Use Case Description Melakukan Login Tabel 3.31 Use Case Description Melakukan Login Nama Use

Case

Melakukan Login

Pelaku Admin

Deskripsi Untuk masuk ke halaman admin Pemicu Meload halaman Web Admin

Bagian umum Kegiatan admin Respon sistem Step 1 : Admin membuka

web admin

Step 3 : Melakukan pengisian username dan password

Step 4 : Menekan button Login

Step 2 : Menampilkan halaman Login Admin

Step 5 : Melakukan validasi Password dan Username, Jika validasi benar Step 6 : Menampilkan halaman Admin

Alternate

Alt-Step 5 : Jika validasi salah, maka sistem

menampilkan notifikasi kalimat berwarna merah dan kembali ke step 2

(48)

82

3.4.3.12 Use Case Description Melakukan Update Tabel 3.32 Use Case Description Melakukan Update Nama Use

Case

Melakukan Update

Pelaku Admin

Deskripsi Membuat perubahan Attribute Value game Pemicu Menekan button Update

Bagian umum

Kegiatan admin Respon sistem Step 1 : Mengganti

Attribute Value

Step 2 : Menekan button Update

Step 3 : Menyimpan perubahan Attribute Value

3.4.3.13 Use Case Narrative Melakukan Logout

Tabel 3.33 Use Case Description Melakukan Logout Nama Use

Case

Melakukan Logout

Pelaku Admin

Deskripsi Keluar dari halaman admin Pemicu Menekan button Logout Bagian

umum

Kegiatan admin Respon sistem Step 1 : Menekan button

Logout Step 2 : Sistem membersihkan session Step 3 : Sistem menampilkan halaman Login Admin

(49)

83

3.4.3 Activity Diagram

3.4.3.1 Activity Diagram Melihat Video

(50)

84

3.4.3.2 Activity Diagram Melakukan Registrasi

(51)

85

3.4.3.3 Activity Diagram Main Game

(52)

86

3.4.3.4 Activity Diagram Melakukan Menembak

(53)

87

3.4.3.5 Activity Diagram Melakukan Melompat

(54)

88

3.4.3.6 Activity Diagram Melakukan Pause

Gambar 3.32 Activity Diagram Melakukan Pause

3.4.3.7 Activity Diagram Melakukan Resume

(55)

89

3.4.3.8 Activity Diagram Menang Game

(56)

90

3.4.3.9 Activity Diagram Melakukan Share

(57)

91

3.4.3.10 Activity Diagram Memilih Option

(58)

92

3.4.3.11 Activity Diagram Melakukan Login

(59)

93

3.4.3.12 Activity Diagram Melakukan Update

Gambar 3.38 Activity Diagram Melakukan Update

3.4.3.13 Activity Diagram Melakukan Log out

(60)

94

3.4.4 Class Diagram

(61)

95

3.4.5 Perancangan Kamus Data 3.4.5.1 Tabel Admin

Tabel 3.34 Tabel Admin

No Nama Kolom Tipe Data Lebar Data Keterangan 1 username varchar 100 Username untuk

admin

2 password varchar 100 Kata sandi untuk admin

3.4.5.2 Tabel Enemy

Tabel 3.35 Tabel Enemy

No Nama Kolom Tipe Data Lebar Data Keterangan 1 enemy_type varchar 100 Tipe enemy 2 enemy_name varchar 100 Nama enemy

3 enemy_Life int 11 Jumlah nyawa

enemy

3.4.5.3 Tabel Weapon Hero

Tabel 3.36 Tabel Weapon_Hero

No Nama Kolom Tipe Data Lebar Data Keterangan 1 weapon_name varchar 100 Nama Senjata

2 weapon_damage int 11 Daya serang

senjata

3.4.5.4 Tabel Score

Tabel 3.37 Tabel Score

No Nama Kolom Tipe Data Lebar Data Keterangan 1 player_name varchar 100 Nama User

(62)

96

3.4.5.5 Tabel Enemy Number

Tabel 3.38 Tabel Enemy Number

No Nama Kolom Tipe Data Lebar Data Keterangan

1 stage_id int 11 Id pada tiap stage

2 enemy_number int 11 Jumlah musuh pada tiap stage

(63)

97

3.4.6 Storyboard

3.4.6.1 Storyboard Video

Tabel 3.39 Storyboard Halaman Opening Video Multimedia Storyboard

Project: Ozan The Lobak Shooter Date: 17/5/2013

Screen: 1 of 20 Screen ID: SS-Video

Screen Description:

- Halaman ini untuk menampilkan video pembuka yang menampilkan synopsis dari game, halaman dapat dilewat dengan menekan button skip menuju ke halaman Registrasi (SS-Reg)

Link From Screen ID: - Link to Screen ID: SS-Reg Color Scheme: Hijau #669933, Hijau #336633

Text Attributes:

Still Images: bg.jpg, btn_skip.png Audio:

Video: video pembuka game Ozan The Lobak Shooter (0:08)

(64)

98

3.4.6.2 Storyboard Register

Tabel 3.40 Storyboard Halaman Register Multimedia Storyboard

Screen: 2 of 20 Screen ID: SS-Reg

Screen Description:

- Halaman ini menampilkan logo game “ Ozan The Lobak Shooter” - Form pengisian nama Enter Your Name sebagai identitas User dalam

game

- Untuk bermain bisa juga menggunakan ID Facebook

- Jika sudah mengisikan nama, User bisa langsung klik button OK yang menuju halaman MENU (SS-Menu)

Link From Screen ID: SS-Video Link to Screen ID: SS-Menu Color Scheme: Hijau #669933, Hijau #336633

Text Attributes: - Comic Sans, 14

- Comic Sans, 12 pada “with facebook”

Still Images: Ozan-Logo.png, button_enter.png, facebook.png Audio:

Video:

(65)

99

3.4.6.3 Storyboard Menu

Tabel 3.41 Storyboard Halaman Menu Multimedia Storyboard

Screen: 3 of 20 Screen ID: SS-Menu

Screen Description: Halaman ini merupakan halaman utama game Ozan The Lobak Shooter, yang terhubung dengan halaman-halaman lainnya melalui button sebagai berikut:

- Button PLAY menuju halaman Loading (SS-Load) - Button OPTION menuju halaman Option (SS-Opti)

- Button HIGHSCORE menuju halaman Highscore (SS-Score) - Button CREDITS menuju halaman Credits (SS-Credit) Link From Screen ID: Reg,

SS-Konfrm,SS-Opti, SS-Score, SS-Credit

Link to Screen ID: SS-Load, SS-Opti, SS-Score, SS-Credit

Color Scheme: Hijau #669933, Hijau #336633

Text Attributes: Menu - Comic Sans MS, Hijau #009900

Still Images: Ozan-Logo.png, button_credit.png, button_highscore.png, button_option.png, button_play.png

Audio: Video: Animation:

(66)

100

3.4.6.4 Storyboard Loading

Tabel 3.42 Storyboard Halaman Loading Multimedia Storyboard

Screen: 4 of 20 Screen ID: SS-Load

Screen Description: Halaman LOADING untuk meload data untuk kebutuhan program yang selanjutnya menuju halaman STORY (SS-Story)

Link From Screen ID: SS-Menu Link to Screen ID: SS-Story Color Scheme: Hitam #000000, Putih #ffffff

Text Attributes: Still Images: Audio: Video:

(67)

101

3.4.6.5 Storyboard Story

Tabel 3.43 Storyboard Halaman Story Multimedia Storyboard

Screen: 5 of 20 Screen ID: SS-Story

Screen Description:

- Halaman ini menampilka cerita dari game dalam bentuk gambar.

- Halaman ini bisa langsung dilewat dengan button SKIP yang selanjutnya menuju TUTORIAL (SS-Tutorial)

Link From Screen ID: SS-Load Link to Screen ID: SS-Tutorial Color Scheme: Hijau #669933, Hijau #336633

Text Attributes: Skip - Comic Sans MS, 14, Hitam (#000000)

Still Images: btn_skip.png, p_1.jpg,p_2.jpg, p_3.jpg, p_4.jpg, p_5.jpg, p_6.jpg, p_7.jpg, p_8.jpg, p_9.jpg

Audio: Video:

(68)

102

3.4.6.6 Storyboard Tutorial

Tabel 3.44 Storyboard Halaman Tutorial Multimedia Storyboard

Screen: 6 of 20 Screen ID: SS-Tutorial

Screen Description: Memberikan tutorial singkat untuk menggunakan controller, halaman ini bisa langsung dilewati dengan menekan button NEXT yang langsung memulai game (SS-Stage1).

Link From Screen ID: SS-Story Link to Screen ID : SS-Stage1 Color Scheme: Hijau #669933, Hijau #336633

Text Attributes: Comic Sans 40, 14 Hitam #00000 Still Images: btn_next.png, tutorial.jpg

Audio: Video:

(69)

103

3.4.6.7 Storyboard Stage 1

Tabel 3.45 Storyboard Halaman Stage 1 Multimedia Storyboard

Screen: 7 of 20 Screen ID: SS-Stage1

Screen Description: Halaman ini menampilkan User yang memainkan game, halaman ini menampilkan karakter User dan enemy. Di bawah terdapat dua button JUMP dan FIRE, pada bagian atas terdapat button PAUSE, LIFE, SCORE dan Nama dari User.

- Warna biru muda di-background pada storyboard menggambarkan STAGE 1 yang pada game akan menjadi waktu pagi/siang hari

- Button JUMP, berfungsi untuk melompat dan menghindari enemy - Button FIRE, berfunsi untuk menembak enemy

- LIFE, berfungsi untuk menampilkan kotak hidup yang dimiliki User, sekali permainan; User akan diberi LIFE : 5

- Di pojok kanan ditampilkan score yang telah di dapat dan nama User. - Di pojok kiri atas, menampilkan button PAUSE yang akan menuju ke

halaman PAUSE (SS-Pause)

- Jika User berhasil menyelesaikan STAGE 1 maka akan dilanjutkan ke halaman (SS-EndStage)

- Jika User gagal menyelesaikan STAGE 1 maka akan dilanjutkan ke halaman (SS-Gameover)

Link From Screen ID: Tutorial, SS-Pause

Link to Screen ID: EndStage, SS-Pause, SS-Gameover

Color Scheme: Biru Muda #66ccff, Hijau # 99cc33, Kuning #ffff66, Cokelat #cc9966

Text Attributes: Comic Sans

Still Images: bg_1.jpg, health.png, health_mini.png, lobak.png, map2.gif, coin.png, btn_fire.png, btn_jump.png, btn_pause.png

Audio: gun.wav, jump.wav Video:

(70)

104

- Warna orange di-background pada storyboard menggambarkan STAGE 2 yang pada game akan menjadi waktu sore

- button JUMP, berfungsi untuk melompat dan menghindari enemy - button FIRE, berfunsi untuk menembak enemy

- Jika User berhasil menyelesaikan STAGE 2 maka akan dilanjutkan ke halaman (SS-EndStage)

- Jika User gagal menyelesaikan STAGE 2 maka akan dilanjutkan ke halaman (SS-Gameover)

Link From Screen ID: SS-EndStage, SS-Pause

Link to Screen ID: EndStage, SS-Pause, SS-Gameover

Color Scheme: Orange #ff9933, Hijau #999933, Abu-abu #666666 Text Attributes: Comic Sans

Still Images: : bg_1.jpg, health.png, health_mini.png, lobak_x.png, map2.gif, coin.png, btn_fire.png, btn_jump.png, btn_pause.png

Audio: gun.wav, jump.wav Video:

(71)

105

- Warna biru tua di-background pada storyboard menggambarkan STAGE 3 yang pada game akan menjadi waktu malam

- button JUMP, berfungsi untuk melompat dan menghindari enemy - button FIRE, berfunsi untuk menembak enemy

- Jika User berhasil menyelesaikan STAGE 3 maka akan dilanjutkan ke halaman (SS-EndStory)

- Jika User gagal menyelesaikan STAGE 3 maka akan dilanjutkan ke halaman (SS-Gameover)

Link From Screen ID: SS-EndStage, SS-Pause

Link to Screen ID: EndStory, SS-Pause, SS-Gameover

Color Scheme: Biru Malam #3399cc, Cokelat # cc9966 Text Attributes: Comic Sans

Still Images: bg_1.jpg, health.png, health_mini.png, lobak_xtreme.png, map2.gif, coin.png, btn_fire.png, btn_jump.png, btn_pause.png

Audio: gun.wav, jump.wav Video:

(72)

106

3.4.6.10 Storyboard End Stage

Tabel 3.48 Storyboard Halaman End Stage Multimedia Storyboard

Screen: 10 of 20 Screen ID: SS-EndStage

Screen Description: Halaman ini menampilkan akhir dari setiap STAGE yang dilewati, dan memberitahu User hasil permainan yang dimainkan User dan juga bonus STAGE untuk User. Halaman ini mempunyai dua button, yaitu BACK TO MENU dan NEXT STAGE

- User bisa langsung berhenti bermain dengan memilih button BACK TO MENU (SS-Konfrm)

- NEXT STAGE, button ini berfungsi untuk melanjutkan ke STAGE berikutnya (SS-Stage1, SS-Stage2)

Link From Screen ID: Konfrm, SS-Stage1, SS-Stage2

Link to Screen ID: Konfrm, SS-Stage2, SS-Stage3

Color Scheme: Hijau #669933, Hijau #336633, White #ffffff

Text Attributes: - Judul - Comic Sans MS, 40, Hitam (#000000), Comic Sans MS, 14, Hitam (#000000)

Still Images: f_end_stage.jpg, lobak_x.png, lobak_xtreme.png, btn_back_to_menu.png, btn_next_stage.png

Audio: Video:

(73)

107

3.4.6.11 Storyboard Pause

Tabel 3.49 Storyboard Halaman Pause Multimedia Storyboard

Screen: 11 of 20 Screen ID: SS-Pause

Screen Description: Halaman ini menampilkan beberapa pilihan dari saat User sedang bermain dan menekan button PAUSE.

- User bisa melanjutkan permainan kembali dengan memilih button RESUME (SS-Stage1, SS-Stage2, SS-Stage3)

- User bisa langsung berhenti bermain dengan memilih button BACK TO MENU (SS-Konfrm)

Link From Screen ID: Stage1, SS-Stage2, SS-Stage3, SS-Konfrm

Link to Screen ID: Stage1, SS-Stage2, SS-Stage3, SS-Konfrm Color Scheme: Hitam #000000

Text Attributes: - Judul - Comic Sans MS, 40, Putih (#ffffff) Still Images: btn_resume.png, btn_back_to_menu.png Audio:

Video:

(74)

108

3.4.6.12 Storyboard Konfirmasi

Tabel 3.50 Storyboard Halaman Konfirmasi Multimedia Storyboard

Screen: 12 of 20 Screen ID: SS-Konfrm

Screen Description: Halaman ini untuk meyakinkan User bahwa jika User memilih NO maka akan kembali ke halaman (SS-Stage1, SS-Stage2, SS-Stage3,) sesuai halaman sebelumnya, jika User memilih YES maka User sudah benar ingin berhenti yang langsung menuju halaman Menu (SS-Menu)

Link From Screen ID: SS-Pause Link to Screen ID: Stage1, SS-Stage2, SS-Stage3, SS-Menu Color Scheme: Hitam #000000

Text Attributes: Comic Sans MS, 14, Putih (#ffffff) Still Images: btn_yes.png, btn_no.png

Audio: Video:

(75)

109

3.4.6.13 Storyboard Game Over

Tabel 3.51 Storyboard Halaman Game Over Multimedia Storyboard

Screen: 13 of 20 Screen ID: SS-Gameover

Screen Description: Halaman ini menampilkan hasil dari permainan yang gagal menyelesaikan STAGE. Dan di halaman ini ada button BACK TO MENU yang bisa kembali ke halaman menu yang terlebih dahulu menampilkan halaman Konfirmasi (SS-Konfrm).

Link From Screen ID: Stage1, SS-Stage2, SS-Stage3

Link to Screen ID: SS-Konfrm Color Scheme: Hijau #669933, Hijau #336633, White #ffffff

Text Attributes:

- Judul - Comic Sans MS, 40, Hitam (#000000), - Comic Sans MS, 14, Hitam (#000000) Still Images: f_over.png, btn_back_to_menu.png Audio: gameover.wav

Video:

(76)

110

3.4.6.14 Storyboard Option

Tabel 3.52 Storyboard Halaman Option Multimedia Storyboard

Screen: 14 of 20 Screen ID: SS-Opti

Screen Description: Halaman ini menampilkan pengaturan suara dan pemilihkan karakter.

- Pada bagian atas ada Check Box untuk mematikan atau menghidupkan suara

- Pada bagian tengah, User bisa memilih karakter yang diinginkannya - Pada bagian bawah terdapat tiga button, BACK, RESET dan OK. Untuk

RESET dan OK merupakan pengaturan, untuk BACK merupakan button kembali ke halaman sebelumnya yaitu Menu (SS-Menu)

Link From Screen ID: SS-Menu Link to Screen ID: SS-Menu Color Scheme: Hijau #669933, Hijau #336633

Text Attributes:

- Judul - Comic Sans MS, 40, Putih (#ffffff), Comic Sans MS, 14, Putih (#ffffff) Still Images: bg.jpg, btn_back.png, btn_reset.png, btn_ok.png, ozan1.png, ozan2.png

Audio: Video:

(77)

111

3.4.6.15 Storyboard Highscore

Tabel 3.53 Storyboard Halaman Highscore Multimedia Storyboard

Screen: 15 of 20 Screen ID: SS-Score

Screen Description: Halaman ini menampilkan score tertinggi dari banyak User yang memainkan game Ozan the Lobak Shooter. Urutan teratas merupakan pemilik score yang tertinggi. Pada halaman ini hanya mempunyai satu buah button,yang berfungsi untuk kembali kehalaman Menu (SS-Menu)

Link From Screen ID: SS-Menu Link to Screen ID: SS-Menu Color Scheme: Hijau #669933, Hijau #336633

Text Attributes:

- Judul – Comic Sans MS, 40, Putih (#ffffff)

- Hasil perolehan score – Comic Sans MS, 14, Putih (#ffffff) Still Images: btn_back.png, bg.jpg

Audio: Video:

(78)

112

3.4.6.16 Storyboard Credit

Tabel 3.54 Storyboard Halaman Credit Multimedia Storyboard

Screen: 16 of 20 Screen ID: SS-Credit

Screen Description: Halaman ini menampilkan credits pembuat game Link From Screen ID: SS-Menu Link to Screen ID: SS-Menu Color Scheme: Hijau #669933, Hijau #336633

Text Attributes:

- Judul CREDITS - Comic Sans MS, 40, Putih (#ffffff) - Nama pembuat game – Comic Sans MS, 14, Putih (#ffffff) Still Images: photo.jpg, btn_back.png, bg.jpg

Audio: Video:

(79)

113

3.4.6.17 Storyboard Akhir Cerita

Tabel 3.55 Storyboard Halaman Akhir Cerita Multimedia Storyboard

Screen: 17 of 20 Screen ID: SS-EndStory

Screen Description:

- Halaman ini menampilkan akhir cerita dari game dalam bentuk gambar. Link From Screen ID: SS-Stage3 Link to Screen ID: SS-Congrat Color Scheme: Hijau #669933, Hijau #336633

Text Attributes: Comic Sans MS, 18, Hitam (#000000) Still Images: e_1.jpg, e_2.jpg, e_3.jpg, e_4.jpg, e_5.jpg Audio:

Video:

(80)

114

3.4.6.18 Storyboard Congratulation

Tabel 3.56 Storyboard Halaman Congratulation Multimedia Storyboard

Screen: 18 of 20 Screen ID: SS-Congrat

Screen Description: Halaman ini memberikan kata selamat kepada User yang sukses menyelesaikan semua STAGE dan menampilkan perolehan score.

Halaman ini mempunyai dua button, SHARE dan BACK TO MENU. Button Share untuk men-Share hasil perolehan score ke account facebook dan BACK TO MENU (SS-Konfrm) untuk berhenti bermain.

Link From Screen ID: SS-EndStory Link to Screen ID: SS-Konfrm Color Scheme: Hijau #669933, Hijau #336633, White #ffffff

Text Attributes:

- Judul - Comic Sans MS, 40, Putih (#ffffff) - Score – Comic Sans MS, 14, Putih (#ffffff) Still Images: f_congratz.png, btn_share.png Audio:

Video:

(81)

115

3.4.6.19 Storyboard Login Admin

Tabel 3.57 Storyboard Halaman Login Admin Multimedia Storyboard

Screen: 19 of 20 Screen ID: SS-LoginAdmin

Screen Description:

- Halaman ini menampilkan logo game “ Ozan The Lobak Shooter” - Form pengisian nama username dan password sebagai syarat masuk ke

halaman Admin (SS-Admin)

Link From Screen ID: - Link to Screen ID: SS-Admin Color Scheme: Hijau #669933, Hijau #336633

Text Attributes: Comic Sans Ms 14, Putih (#ffffff) Still Images: Ozan-Logo.png, btn_login.png, bg.jpg Audio:

Video:

(82)

116

3.4.6.20 Storyboard Admin

Tabel 3.58 Storyboard Halaman Admin Multimedia Storyboard

Project: Ozan The Lobak Shooter Date: 17/5/2013 Screen: 20 of 20 Screen ID: SS-Admin

Screen Description: Halaman ini admin bisa mengupdate value dari karakter yang ada di game

Link From Screen ID: SS-LoginAdmin Link to Screen ID: SS-LoginAdmin Color Scheme: Hijau #669933, Hijau #336633

Text Attributes: Judul - Comic Sans MS, 40, Putih (#ffffff) - Comic Sans MS, 14, Putih (#ffffff)

Still Images: bg.jpg, btn_logout.png, btn_reset.png, btn_update.png Audio:

Video: