3.

PERANCANGAN DAN ANALISIS

3.1. Inisiasi
Game AstroLost adalah aplikasi yang dibuat untuk menghibur dan diharapkan
dapat mengedukasi agar dapat melakukan kerjasama tim, bentuk edukasi yang ingin
ditampilkan pada game ini adalah dengan cara berkerja sama untuk melewati rintangan
yang diberikan agar para pemain dapat melanjutkan ke tahap selanjutnya.

Rintangan yang diberikan berupa pintu besar yang menghalangi para pemain
untuk ke tahap selanjutnya, cara membuka pintu tersebut adalah dengan mendekatkan
pemain ke kunci berbentuk kristal sehingga pintu akan terbuka, pemain lain harus
mencari kunci yang sama pada area berlawanan arah agar pemain yang masih ditahap
sebelumnya dapat melanjutkan ke tahap berikutnya. Dan terdapat rintangan yang harus
dihindari oleh pemain agar tidak kembali ke tahap sebelumnya.

3.2. Pre-Produksi
Tahap pre-produksi merupakan tahap merancang flowchart aplikasi, struktur
navigasi, dan tampilan aplikasi. Rancangan flowchart aplikasi berfungsi menjelaskan
secara detail berupa tampilan diagram alir mengenai bagaimana aplikasi ini akan
digunakan oleh penggunakan. Rancangan struktur navigasi menjelaskan tampilan apa
saja yang akan ditampilkan dari aplikasi kepada pengguna.

3.2.1. Flowchart Aplikasi

Flowchart atau dalam bahasa Indonesia adalah diagram alir merupakan bagan
yang menampilkan urutan dan dan hubungan antar proses berjalannya aplikasi. Bagan
dalam flowchart dinyatakan berupa simbol – simbol dengan menggambarkan proses
tertentu. Urutan dan hubungan antar proses dinyatakan dengan garis penghubung.
Flowchart merupakan langkah awal dari pembuatan suatu program agar proses
kegiatan dalam penggunaan program akan menjadi lebih jelas.
 Pada Gambar 3.1 flowchart permainan yang menggambarkan urutan yang dapat
dilakukan pengguna dalam permainan. Ketika pemain membuka aplikasi maka akan
menampilkan menu utama. jika pengguna tidak memilih mulia maka dilanjutkan ke
bantuan, jika pemain memilih bantuan maka akan menampilkan tampilan bantuan dan
akan kembali ke menu utama. jika pemain memilih untuk mulai maka akan
menampilkan masukan nama, dilanjutkan pengisian nama server dan akan
menampilkan tampilan permainan. Didalam tampilan permainan terdapat jeda untuk
pemain dapat melanjutkan permainan atau tidak melanjutkan permainan. Jika pemain
melanjutkan permainan maka permainan selesai dan kembali ke menu utama, jika
pemain tidak melanjutkan permainan maka akan kembali ke menu utama. jika pemain
tidak memilih mulai dan bantuan maka pemain memilih keluar pada menu utama dan
aplikasi permainan akan tertutup.

Gambar 3. 1 flowchart permainan

3.2.2. Perancangan Struktur Navigasi
Pada perancangan aplikasi ini, penulis menggunakan struktur navigasi. Struktur
navigasi adalah struktur yang menjelaskan segala macam kegiatan yang ada didalam
suatu aplikasi. Struktur navigas ini menggambarkan urutan-urutan perancangan agar
mudah dalam pembuatan aplikasi. Tampilan struktur navigasi dapat dilihat pada
Gambar 3. 2 Struktur Navigasi.

Gambar 3. 2 Struktur Navigasi

Pada struktur navigas di atas dapat dijelaskan sebagai berikut:

1. Menu Utama
Pada halaman utama menampilkan 3 menu yang terdiri dari menu bantuan,
menu mulai, dan keluar dari game.
2. Mulai
Pada menu mulai akan menampilkan halaman Masukan Nama, setelah
memasukan nama akan diarahkan ke menu masukkan server. Jika player telah
melakukan masukan server akan diarahkan ke Tampilan Permainan.
3. Tampilan permainan
 Pada tampilan permainan, pemain dapat melakukan jeda. Jeda pada menu ini
terdapat bantuan cara bermain dan terdapat tombol keluar dari tampilan
permainan dan kembali ke menu utama.
4. Permainan Selesai
Pemain yang telah menyelesaikan permainan akan kembali ke menu utama atau
dapat tetap berada di tampilan permainan.

3.2.3. Perancangan Tampilan

Perancangan tampilan permainan ini diawali dengan merancang tampilan
permainan untuk tiap bagian. Pada bagian pertama akan dirancang untuk menampilkan
pilihan untuk memulai, bantuan, dan keluar. Berikut adalah rancangan detail tiap
halaman.

3.2.3.1. Perancangan Tampilan Menu Utama

Perancangan menu utama terdiri dari 3(tiga) menu pilihan dalam bentuk
tombol, diantaranya adalah 1) tombol mulai (button 1) untuk pindah ke menu masukan
nama, 2) tombol bantuan(button 2) untuk pindah ke menu bantuan yang berisikan
petunjuk untuk memulai permainan, 3) tombol keluar(button 3) untuk keluar dari game.
Hasil rancangannya dapat dilihat pada Gambar 3. 3 Tampilan Menu Utama.

Gambar 3. 3 Tampilan Menu Utama

3.2.3.2. Perancangan Tampilan Menu Bantuan
Perancangan menu bantuan berisi keterangan(text 1) yang menjelaskan
panduan untuk memulai permainan secara singkat, dan tombol kembali(button 1) untuk
kembali ke menu utama. Hasil rancangannya dapat dilihat pada Gambar 3.4 Tampilan
Menu Bantuan.

Gambar 3. 4 Tampilan Menu Bantuan

3.2.3.3. Perancangan Tampilan Menu Mulai

Perancangan mulai berisikan 2 text dan 2 tombol dalam bentuk diantaranya
adalah 1) keterangan username(text 1) untuk mengetahui kolom dibawah untuk
memasukan nama pemain, 2) kolom kosong(text 2) kolom untuk memasukan nama
pemain, 3) Start(button 1) untuk masuk ketampilan menu selanjutnya, 4)
kembali(button 2) untuk kembali ke menu utama. Hasil rancangannya dapat dilihat
pada Gambar 3. 5 Tampilan Menu Mulai.
 Gambar 3. 5 Tampilan Menu Mulai

3.2.3.4. Perancangan Tampilan Menu Server

Perancangan menu server berisikan 2 tombol dan 2 kolom teks dalam bentuk
diantaranya adalah 1) join game(button 1) jika pemain memiliki nama server maka
memasukan nama server pada text 1(input server), 2) create server(button 2) untuk
pemain yang belum memiliki server maka memasukan nama server pada text 2(input
server). Hasil rancangannya dapat dilihat pada Gambar 3. 6 Tampilan Menu Server.

Gambar 3. 6 Tampilan Menu Server

3.2.3.5. Perancangan Tampilan Masuk Permainan

Pada tampilan ini membantu untuk pemain mengetahui jika pemain sudah
memasuki kedalam tampilan permainan. Pada tampilan ini terdapat panduan cara
 bermain(text 1) yang berisi penjelasan secara detail mengenai cara bermain. Hasil
rancangannya dapat dilihat pada Gambar 3. 7 Tampilan Masuk Permainan.

Gambar 3. 7 Tampilan Masuk Permainan

3.2.3.6. Perancangan Tampilan Antarmuka Permainan

Pada halaman ini akan digunakan untuk setiap para pemain. Pada halaman ini
akan dirancang posisi pemain, posisi arena yang diacak. Lalu dihalaman ini terdapat
kolom kosong(text 1) untuk memasukan teks agar pemain dapat bercakapan dengan
pemain lain, dan terdapat bubble teks(text 2) untuk menampilkan percakapan yang
telah diinput oleh pemain. Hasil rancangannya dapat dilihat pada Gambar 3. 8
Tampilan Antarmuka Permainan.
 Gambar 3. 8 Tampilan Antarmuka Permainan

3.2.3.7. Perancangan Tampilan Menu Jeda

Perancangan menu jeda terdiri dari panduan cara bermain(text 1) untuk
memberikan penjelasan singkat cara bermain, dan terdapat tombol keluar(button 1)
untuk kembali ke menu utama. Hasil rancangannya dapat dilihat pada Gambar 3. 9
Tampilan Menu Jeda.

Gambar 3. 9 Tampilan Menu Jeda

3.2.3.8. Perancangan Tampilan Menu Selesai

Perancangan menu selesai berisikan 2 menu(button) yaitu 1) tombol keluar dari
permainan(button 1) untuk kembali ke menu utama, dan tombol kembali(button
2) untuk tetap berada dalam permainan. Hasil rancangannya dapat dilihat pada Gambar
3. 10 Tampilan Menu Selesai.

Gambar 3. 10 Tampilan Menu Selesai