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. 3. Perancangan Database
35
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
Gambar 3.1 Super Mario Bros Screenshot 1
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.
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.
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
http://www.mikanse.com/PacMan/pacman.html .
situs
40
Gambar 3.5 Pacman Screenshot 2 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.
Gambar 3.6 Pacman Screenshot 3 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.
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
http://www.scirra.com/arcade/349/project-blaze-zero.
pada
situs
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.
Gambar 3.9 Project Blaze Zero Screenshot 3
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
Survival, menghindari
Melawan semua
akhir tujuan tiap
enemy serta memakan
enemy yang ada di
level.
semua titik kuning
hadapan hingga
yang ada di arena.
level terakhir.
Fitur
Terdapat item
Ada item khusus untuk Perbedaan senjata
pendukung untuk
melawan enemy.
membantu User.
Grafis
serta ada bom untuk melawan enemy.
Mempunyai live
Mempunyai live atau
Mempunyai live
atau nyawa.
nyawa.
atau nyawa.
Tampilan 2D
Tampilan hanya
Menggunakan
dengan warna
menggunakan warna
gambar yang cukup
yang sederhana,
dasar saja sebagai
halus untuk tiap
serta tekstur yang
pembeda antara User
sprite yang
masih terkesan
dan lawan.
digunakan.
Berupa Jamur,
Hanya titik kecil dan
Ada peluru amunisi
Bintang, Bunga.
besar serta buah-
serta bom.
pixel. Item
buahan. Challenge
Arena yang
Arena permainan yang
Semakin banyaknya
berubah tiap level
berbeda serta adanya
lawan yang datang.
dan tantangan
lawan yang bergerak
Serta jumlah peluru
44
dalam bentuk
semakin cepat.
bangunan maupun
lawan yang sangat banyak.
pasukan enemy yang berbeda. 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
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.
46
3.
Apa Profesi Anda sekarang? Jawab: Tabel 3.4 Profesi Jawaban
Jumlah
Persentase
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
Tidak
4
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 Jawaban
Jumlah
Persentase
Kurang dari 1 Jam
9
10%
1~2 Jam
43
42%
3~4 Jam
24
24%
4~6 Jam
13
12%
Lebih dari 6 jam
12
12%
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
Inggris
68
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 Jawaban
Jumlah
Persentase
Grafik
55
19%
Alur Ceritanya
54
18%
Efek Suara
40
14%
Gameplay
88
30%
Animasi
57
19%
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
Tercepat
54
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
Game Console
8
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 Jawaban
Jumlah
Persentase
320x240
2
1%
640x480
4
3%
800x600
15
11%
1024x768
34
25%
1280x960
17
13%
1600x1200
9
7%
Tidak ada dalam pilihan
54
40%
atau tidak tahu
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
Tidak
9
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
Tidak
28
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 Jawaban
Jumlah
Persentase
Internet Exploler
6
2%
Mozilla Firefox
53
31%
Google Chrome
85
49%
Safari
12
7%
Opera
13
8%
Lainnya
4
2%
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
Benda mati
5
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
2
mengambang
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
Lainnya
7
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
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. 5. Desain karakter akan dibuat lebih umum untuk pria remaja.
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.3 Game 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. 8. Skor tertinggi akan dipasang pada menu highscore.
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
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.
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.
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.
66
3.3.4.8 Komponen Permainan 1. Karakter Tabel 3.18 Karakter Gambar
Deskripsi
Keahlian
Ozan
Melompat dan
(Playable character) menembak Seorang petani yang
enemy.
memiliki Lobak Shooter peninggalan nenek moyangnya. Kakek Ozan
-
(Non-Playable Character) Kakek Ozan yang diculik oleh alien untuk dijadikan bahan eksperimen.
Bebek
Menembak
(Non-Playable
musuh dari
Character)
mulutnya.
Anak buah Bos Bebek di Stage pertama.
67
Bos Bebek
Menembak
(Non-Playable
musuh dari
Character)
mulutnya sambil
Bos di Stage
terbang ke atas
pertama.
dan kebawah.
Kambing
Berlari cepat
(Non-Playable
untuk menabrak
Character)
player dengan
Anak buah Bos
tanduknya.
Kambing di Stage kedua Bos Kambing
Menabrak musuh
(Non-Playable
dan menyerang
Character)
dengan sabitnya.
Bos di Stage kedua. Sapi
Menembak dari
(Non-Playable
kepalanya.
Character)
Bos Sapi
Menabrak dan
(Non-Playable
menembak dari
Character)
kepalanya.
Bos di Stage ketiga.
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
Ia bisa mengeluarkan
Tanduk
tembakan dari kepalanya dan menabrak user dengan tanduknya.
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, melewati
Ozan
harus
pegunungan
70
untuk
menolong
kakeknya,
dan
menghadapi
Bos
Kambing. Misi: Temui dan kalahkan Bos Kambing. Kondisi menang: Mengalahkan
Bos
Kambing. Kondisi kalah: User
kehabisan
nyawa
atau Life. Stage 3 Lokasi: Daerah padang pasir di malam hari. Cerita: Setelah sampai di padang pasir,
Ozan
mengalahkan untuk
Bos
harus Sapi
menyelamatkan
kakeknya. Misi: Temui dan kalahkan Bos Sapi lalu selamatkan sang Kakek. Kondisi menang: Mengalahkan Bos Sapi. Kondisi kalah: User
kehabisan
atau Life.
nyawa
71
3.4 Perancangan Sistem 3.4.1 Use Case Diagram
Gambar 3.26 Use Case Game dan Admin
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
Lihat Video Pembuka
Case Pelaku
User
Deskripsi
Menampilkan video pembuka yang berisi sinopsis dari game
Pemicu
Membuka halaman website Ozan The Lobak shooter
Bagian
Kegiatan User
Respon sistem
Step 1 : Membuka website
Step 2 : Menampilkan
“Ozan the Lobak Shooter”
video pada saat halaman
umum
website terbuka
Step 3 : sistem menampilkan halaman registrasi
73
3.4.3.2 Use Case Description Melakukan Registrasi Tabel 3.22 Use Case Description Melakukan Registrasi Nama Use
Melakukan Registrasi
Case Pelaku
User
Deskripsi
Melakukan registrasi dengan menggunakan Nama atau akun Facebook
Pemicu
Melewati halaman video
Bagian
Kegiatan User
umum
Step 1 : User menginput
Respon sistem
nama
Step 2 : User menekan
Step 3 : Sistem
button Ok
memvalidasi data, Jika data valid
Step 4 : Sistem menyimpan data dalam database
Step 5 : Sistem menampilkan halaman menu utama 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” Alternate
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
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
Step 2 : Sistem
button Play
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 5 : User menekan
Step 4 : Sistem
button Next
menampilkan halaman tutorial dalam bentuk animasi gambar.
Step 6 : Sistem menampilkan halaman game
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
Step 2 : Sistem
Enter pada keyboard
menampilkan animasi
atau
avatar melakukan
menyentuh/menekan
tembakan
Fire pada layar 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 Alt-Step 5: Jika Life enemy belum habis ke Step 7
76
3.4.3.5 Use Case Description Melakukan Melompat Tabel 3.25 Use Case Description Melakukan Melompat Nama Use
Melakukan Melompat
Case Pelaku
User
Deskripsi
Animasi avatar melompat
Pemicu
Menekan button keyboard Space Bar atau Jump pada layar
Bagian
Kegiatan User
Respon sistem
umum
Step 1 : User menekan
Step 2 : Sistem
button keyboard Space Bar menampilkan animasi atau Jump pada layar
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 Alt-Step 3 : Avatar tidak terbentur Alternate
Alt-Step 6 : Jika Life avatar belum habis, maka menampilkan pengurangan Life dan kembali ke Step 1
77
3.4.3.6 Use Case Description Melakukan Pause Game Tabel 3.26 Use Case Description Melakukan Pause Game Nama Use
Melakukan Pause Game
Case Pelaku
User
Deskripsi
Untuk melakukan Pause
Pemicu
Menekan button keyboard ESC atau Pause pada layar
Bagian
Kegiatan User
Respon sistem
umum
Step 1 : Menekan button
Step 2 : Melakukan
keyboard ESC atau Pause penghentian game pada layar 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
Melakukan Resume Game
Case Pelaku
User
Deskripsi
Melanjutkan permainan
Pemicu
Menekan button Resume
Bagian
Kegiatan User
Respon sistem
umum
Step 1 : Menekan button
Step 2 : Menampilkan
Resume
halaman game Step 3 : Menjalankan game
78
3.4.3.8 Use Case Description Menang Game Tabel 3.28 Use Case Description Melakukan Menang Game Nama Use
Menang Stage
Case Pelaku
User
Deskripsi
Berhasil memenangkan Stage
Pemicu
Memenangkan Stage
Bagian umum
Kegiatan User
Respon sistem
Step 1 : User menang
Step 2 : Sistem mendeteksi
Stage
Stage, Jika Stage < Stage 3
Step 4 : User menekan
Step 3 : Sistem
button Next Stage
Menampilkan halaman End of Stage Step 5 : Menampilkan halaman Stage selanjutnya
Alt-Step 3 : Menang Stage = Stage 3, Sistem Alternate
menampilkan halaman Akhir Cerita Dan menampilkan halaman Congratulation
79
3.4.3.9 Use Case Description Melakukan Share Tabel 3.29 Use Case Description Melakukan Share Nama Use
Melakukan Share
Case Pelaku
User
Deskripsi
Untuk berbagai nilai yang di peroleh ke Facebook
Pemicu
Menekan button Share
Bagian
Kegiatan User
Respon sistem
umum
Step 1 : Menekan button
Step 2 : Sistem melakukan
Share
deteksi Registrasi
Step 3 : Sistem belum teregistrasi dengan akun facebook
Step 5 : User memilih
Step 4 : Sistem menampilkan
Allow
halaman sinkronisasi facebook
Step 7 : User memilih
Step 6 : Sistem menampilkan
Share
konfirmasi Share Score ke facebook
Step 8 : Sistem memproses posting Step 9 : Menampilkan halaman Highscore Alt-Step 3 : Sudah registrasi Alternate
dengan akun facebook menuju ke Step 6 Alt-Step 5 dan 7 : User memilih Close, Sistem mendeteksi halaman kemudian kembali ke halaman sebelumnya
80
3.4.3.10
Use Case Description Memilih Option Tabel 3.30 Use Case Description Memilih Option
Nama Use
Memilih Option
Case Pelaku
User
Deskripsi
Mengatur suara dan memilih avatar
Pemicu
Menekan button Option
Bagian
Kegiatan User
Respon sistem
umum
Step 1 : Menekan button
Step 2 : Menampilkan
Option
halaman Option
Step 3 : Memilih Avatar atau Mematikan suara Step 4 : Menekan button Ok
Step 5 : Merubah kondisi sesuai yang diatur oleh user
Step 6 : Save data kondisi Step 7 : Menampilkan ke halaman Menu utama Alt-Step 4 : Jika menekan button Reset, Maka Alternate
mengembalikan pengaturan menjadi default, kembali ke Step 2
81
3.4.3.11
Use Case Description Melakukan Login Tabel 3.31 Use Case Description Melakukan Login
Nama Use
Melakukan Login
Case Pelaku
Admin
Deskripsi
Untuk masuk ke halaman admin
Pemicu
Meload halaman Web Admin
Bagian umum
Kegiatan admin
Respon sistem
Step 1 : Admin membuka
Step 2 : Menampilkan
web admin
halaman Login Admin
Step 3 : Melakukan pengisian username dan password
Step 4 : Menekan button
Step 5 : Melakukan validasi
Login
Password dan Username, Jika validasi benar Step 6 : Menampilkan halaman Admin
Alt-Step 5 : Jika validasi salah, maka sistem Alternate
menampilkan notifikasi kalimat berwarna merah dan kembali ke step 2
82
3.4.3.12
Use Case Description Melakukan Update
Tabel 3.32 Use Case Description Melakukan Update Nama Use
Melakukan Update
Case Pelaku
Admin
Deskripsi
Membuat perubahan Attribute Value game
Pemicu
Menekan button Update
Bagian
Kegiatan admin
umum
Step 1 : Mengganti
Respon sistem
Attribute Value
3.4.3.13
Step 2 : Menekan button
Step 3 : Menyimpan
Update
perubahan Attribute Value
Use Case Narrative Melakukan Logout Tabel 3.33 Use Case Description Melakukan Logout
Nama Use
Melakukan Logout
Case Pelaku
Admin
Deskripsi
Keluar dari halaman admin
Pemicu
Menekan button Logout
Bagian
Kegiatan admin
Respon sistem
umum
Step 1 : Menekan button
Step 2 : Sistem
Logout
membersihkan session
Step 3 : Sistem menampilkan halaman Login Admin
83
3.4.3 Activity Diagram 3.4.3.1 Activity Diagram Melihat Video
Gambar 3.27 Activity Diagram Melihat Video
84
3.4.3.2 Activity Diagram Melakukan Registrasi
Gambar 3.28 Activity Diagram Melakukan Registrasi
85
3.4.3.3 Activity Diagram Main Game
Gambar 3.29 Activity Diagram Main Game
86
3.4.3.4 Activity Diagram Melakukan Menembak
Gambar 3.30 Activity Diagram Melakukan Menembak
87
3.4.3.5 Activity Diagram Melakukan Melompat
Gambar 3.31 Activity Diagram Melakukan Melompat
88
3.4.3.6
Activity Diagram Melakukan Pause
Gambar 3.32 Activity Diagram Melakukan Pause
3.4.3.7 Activity Diagram Melakukan Resume
Gambar 3.33 Activity Diagram Melakukan Resume
89
3.4.3.8 Activity Diagram Menang Game
Gambar 3.34 Activity Diagram Menang Game
90
3.4.3.9 Activity Diagram Melakukan Share
Gambar 3.35 Activity Diagram Melakukan Share
91
3.4.3.10 Activity Diagram Memilih Option
Gambar 3.36 Activity Diagram Memilih Option
92
3.4.3.11 Activity Diagram Melakukan Login
Gambar 3.37 Activity Diagram Melakukan Login
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
Gambar 3.39 Activity Diagram Melakukan Log Out
94
3.4.4
Class Diagram
Gambar 3.40 Class Diagram
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
2
score
int
11
Skor User
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
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 Screen: 1 of 20
Date: 17/5/2013 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) Animation:
98
3.4.6.2 Storyboard Register Tabel 3.40 Storyboard Halaman Register Multimedia Storyboard Project: Ozan The Lobak Shooter Screen: 2 of 20
Date: 17/5/2013 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: Animation:
99
3.4.6.3 Storyboard Menu Tabel 3.41 Storyboard Halaman Menu Multimedia Storyboard Project: Ozan The Lobak Shooter Screen: 3 of 20
Date: 17/5/2013 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: SS-Reg, SSLink to Screen ID: SS-Load, SS-Opti, Konfrm,SS-Opti, SS-Score, SS-Credit 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:
100
3.4.6.4 Storyboard Loading Tabel 3.42 Storyboard Halaman Loading Multimedia Storyboard Project: Ozan The Lobak Shooter Screen: 4 of 20
Date: 17/5/2013 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: Animation:
101
3.4.6.5 Storyboard Story Tabel 3.43 Storyboard Halaman Story Multimedia Storyboard Project: Ozan The Lobak Shooter Screen: 5 of 20
Date: 17/5/2013 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: Animation:
102
3.4.6.6 Storyboard Tutorial Tabel 3.44 Storyboard Halaman Tutorial Multimedia Storyboard Project: Ozan The Lobak Shooter Screen: 6 of 20
Date: 17/5/2013 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: Animation:
103
3.4.6.7 Storyboard Stage 1 Tabel 3.45 Storyboard Halaman Stage 1 Multimedia Storyboard Project: Ozan The Lobak Shooter Screen: 7 of 20
Date: 17/5/2013 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: SS-Tutorial, SS- Link to Screen ID: SS-EndStage, SSPause 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: Animation:
104
3.4.6.8 Storyboard Stage 2 Tabel 3.46 Storyboard Halaman Stage 2 Multimedia Storyboard Project: Ozan The Lobak Shooter Screen: 8 of 20
Date: 17/5/2013 Screen ID: SS-Stage2
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 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 - 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 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, Link to Screen ID: SS-EndStage, SSSS-Pause 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: Animation:
105
3.4.6.9 Storyboard Stage 3 Tabel 3.47 Storyboard Halaman Stage 3 Multimedia Storyboard Project: Ozan The Lobak Shooter Screen: 9 of 20
Date: 17/5/2013 Screen ID: SS-Stage3
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 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 - 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 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, Link to Screen ID: SS-EndStory, SSSS-Pause 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: Animation:
106
3.4.6.10 Storyboard End Stage Tabel 3.48 Storyboard Halaman End Stage Multimedia Storyboard Project: Ozan The Lobak Shooter Screen: 10 of 20
Date: 17/5/2013 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: SS-Konfrm, SSLink to Screen ID: SS-Konfrm, SSStage1, SS-Stage2 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: Animation:
107
3.4.6.11 Storyboard Pause Tabel 3.49 Storyboard Halaman Pause Multimedia Storyboard Project: Ozan The Lobak Shooter Screen: 11 of 20
Date: 17/5/2013 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: SS-Stage1, SSLink to Screen ID: SS-Stage1, SSStage2, SS-Stage3, SS-Konfrm 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: Animation:
108
3.4.6.12 Storyboard Konfirmasi Tabel 3.50 Storyboard Halaman Konfirmasi Multimedia Storyboard Project: Ozan The Lobak Shooter Screen: 12 of 20
Date: 17/5/2013 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: SS-Stage1, SSStage2, 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: Animation:
109
3.4.6.13 Storyboard Game Over Tabel 3.51 Storyboard Halaman Game Over Multimedia Storyboard Project: Ozan The Lobak Shooter Screen: 13 of 20
Date: 17/5/2013 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: SS-Stage1, SSLink to Screen ID: SS-Konfrm 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_over.png, btn_back_to_menu.png Audio: gameover.wav Video: Animation:
110
3.4.6.14 Storyboard Option Tabel 3.52 Storyboard Halaman Option Multimedia Storyboard Project: Ozan The Lobak Shooter Screen: 14 of 20
Date: 17/5/2013 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: Animation:
111
3.4.6.15 Storyboard Highscore Tabel 3.53 Storyboard Halaman Highscore Multimedia Storyboard Project: Ozan The Lobak Shooter Screen: 15 of 20
Date: 17/5/2013 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: Animation:
112
3.4.6.16 Storyboard Credit Tabel 3.54 Storyboard Halaman Credit Multimedia Storyboard Project: Ozan The Lobak Shooter Screen: 16 of 20
Date: 17/5/2013 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: Animation:
113
3.4.6.17 Storyboard Akhir Cerita Tabel 3.55 Storyboard Halaman Akhir Cerita Multimedia Storyboard Project: Ozan The Lobak Shooter Screen: 17 of 20
Date: 17/5/2013 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: Animation:
114
3.4.6.18 Storyboard Congratulation Tabel 3.56 Storyboard Halaman Congratulation Multimedia Storyboard Project: Ozan The Lobak Shooter Screen: 18 of 20
Date: 17/5/2013 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: Animation:
115
3.4.6.19 Storyboard Login Admin Tabel 3.57 Storyboard Halaman Login Admin Multimedia Storyboard Project: Ozan The Lobak Shooter Screen: 19 of 20
Date: 17/5/2013 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: Animation:
116
3.4.6.20 Storyboard Admin Tabel 3.58 Storyboard Halaman Admin Multimedia Storyboard Project: Ozan The Lobak Shooter Screen: 20 of 20
Date: 17/5/2013 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: Animation: