Persiapan dan Integrasi Media Media and Issue Perancangan Layar

Dalam perancangan layar intro terdapat tampilan video pembuka aplikasi. Selain itu juga terdapat 2 buah ikon navigasi yaitu menu enter yang menghubungkan dengan layar menu utama serta menu exit untuk keluar dari aplikasi. - Perancangan Layar Menu Utama Gambar 4.4 Rancangan Layar Menu Utama Dalam perancangan layar menu utama terdapat tampilan virtual reality yang menggunakan konsep suatu ruangan virtual dimana didalamnya terdapat suatu objek yang berfungsi sebagai NPC Non Personal Character yang akan memberikan penjelasan seputar aplikasi serta petunjuk penggunaan selanjutnya. Di dalam tampilan tersebut juga terdapat 2 buah objek yang dapat di klik untuk berpindah ke menu selanjutnya, yaitu objek visualisasi 3D yang akan mengarahkan pengguna menuju menu visualiasi pergerakan bumi dan bulan serta objek game evaluasi yang akan Exit Virtual Reality Teks mengarahkan pengguna menuju menu game evaluasi. Dalam layar menu utama juga terdapat suatu kolom penjelasan atau narasi dari NPC yang akan muncul ketika NPC di klik. - Perancangan Layar Menu Visualisasi Pergerakan bumi dan bulan Gambar 4.5 Rancangan Layar Menu Visualisasi Pada gambar 4.5 merupakan perancangan layar menu visualisasi pergerakan bumi dan bulan. Dalam tampilan ini terdapat sebuah video ilustrasi, logo serta sebuah teks yang berisikan penjelasan singkat mengenai pergerakan bumi dan bulan. Selain itu juga terdapat tombol-tombol yang berfungsi menghubungkan menu utama dengan tampilan-tampilan materi yang disajikan, konten penunjang dan tombol yang berfungsi untuk keluar dari aplikasi. Pergerakan Bumi Bulan Video Teks Logo Ger. Bumi Ger. Bulan PGBB about exit - Perancangan Layar Gerakan Bumi Gambar 4.6 Rancangan Layar Gerakan Bumi Pada gambar 4.6 merupakan perancangan layar gerakan bumi. Dalam tampilan ini terdapat logo serta sebuah teks yang berisikan penjelasan singkat mengenai gerakan bumi. Selain itu juga terdapat tombol-tombol yang berfungsi menghubungkan tampilan ini dengan tampilan-tampilan materi yang disajikan, konten penunjang dan tombol yang berfungsi untuk keluar dari aplikasi. Gerakan Bumi Logo about exit home Revolusi Bumi Rotasi Bumi Teks - Perancangan Layar Gerakan Bulan Gambar 4.7 Rancangan Layar Gerakan Bulan Pada gambar 4.7 merupakan perancangan layar gerakan bulan. Dalam tampilan ini terdapat logo serta sebuah teks yang berisikan penjelasan singkat mengenai gerakan bulan. Selain itu juga terdapat tombol-tombol yang berfungsi menghubungkan tampilan ini dengan tampilan-tampilan materi yang disajikan, konten penunjang dan tombol yang berfungsi untuk keluar dari aplikasi. Gerakan Bumi Logo about exit home Revolusi Bulan Rotasi Bulan Teks - Perancangan Layar Gerakan Bumi dan Bulan Gambar 4.8 Rancangan Layar Gerakan Bumi Bulan Pada gambar 4.8 merupakan perancangan layar gerakan bumi bulan. Dalam tampilan ini terdapat logo serta sebuah teks yang berisikan penjelasan singkat mengenai pengaruh gerakan bumi bulan. Selain itu juga terdapat tombol-tombol yang berfungsi menghubungkan tampilan ini dengan tampilan-tampilan materi yang disajikan, konten penunjang dan tombol yang berfungsi untuk keluar dari aplikasi. Pengaruh Gerakan Bumi Bulan Logo about exit home Gerhana Bulan Terjadinya Pasang Teks Gerhana Matahari - Perancangan Layar Profil Creator Gambar 4.9 Rancangan Layar Profil Creator Pada gambar 4.9 merupakan perancangan layar profil pembuat. Dalam tampilan ini terdapat foto serta identitas dari pembuat aplikasi. Selain itu juga terdapat tombol-tombol yang berfungsi menghubungkan tampilan ini dengan tampilan menu utama dan tombol yang berfungsi untuk keluar dari aplikasi. Profil Pembuat exit home Teks Foto - Perancangan Layar Cerita Pengantar Permainan Rancangan layar cerita pengantar permainan tersusun atas 3 jenis tampilan yaitu tampilan yang menampilkan teks, tampilan yang menampilkan video serta tampilan yang menampilkan virtual reality. Gambar 4.10 Rancangan Layar Cerita Menggunakan Teks Pada gambar 4.10 merupakan perancangan layar cerita pengantar permainan dengan menggunakan teks. Pada layar ini terdapat teks yang menceritakan cerita pengantar dari game yang digunakan sebagai modul evaluasi. Selain itu juga terdapat tombol untuk berpindah ke halaman selanjutnya. Teks Next back Gambar 4.11 Rancangan Layar Cerita Menggunakan Video Pada gambar 4.11 merupakan rancangan layar cerita pengantar permainan yang menggunakan video sebagai penyaji ceritanya. Dalam layar ini terdapat video yang menggambarkan cerita pengantar dari permainan. Selain itu juga terdapat tombol yang berfungsi untuk berpindah ke halaman selanjutnya. Video Next back Gambar 4.12 Rancangan Layar Cerita Virtual Reality Pada gambar 4.12 merupakan rancangan layar cerita pengantar permainan yang menggunakan virtual reality sebagai penyaji ceritanya. Dalam layar ini terdapat tampilan virtual reality dimana pengguna akan berinteraksi dengan objek berupa NPC di dalamnya untuk mendapatkan informasi serta untuk berpindah menuju tampilan berikutnya. Selain itu terdapat juga kolom teks yang berfungsi untuk menampilkan narasi yang dikeluarkan oleh NPC. Virtual Reality Teks back - Perancangan Layar Permainan Labirin Gambar 4.13 Rancangan Layar Permainan Labirin Pada gambar 4.13 merupakan rancangan layar permainan labirin. Dalam layar ini terdapat tampilan virtual reality dimana pengguna akan menjelajah dalam suatu lingkungan virtual. Lingkungan virtual tersebut dibuat menyerupai labirin yang hanya memiliki satu jalan keluar dan untuk menemukan jalan keluar tersebut pengguna harus berhasil menjawab pertanyaan-pertanyaan seputar pergerakan bumi dan bulan yang secara acak akan diajukan oleh NPC yang terdapat di dalam tampilan. Selain itu pengguna hanya memiliki 3 kali kesempatan untuk salah dalam menjawab, jika telah 3 kali salah menjawab maka permainan akan berakhir dan akan kembali ke awal permainan. Virtual Reality Teks NPC back Lives : 3 Gambar 4.14 Rancangan Layar Pertanyaan Pada gambar 4.14 merupakan rancangan layar pertanyaan pada permainan labirin. Tampilan layar ini akan muncul ketika NPC mengajukan pertanyaan pada pengguna. Di dalam layar ini terdapat video ilustrasi dari pertanyaan yang diajukan, soal berupa teks serta 4 buah tombol pilihan jawaban. Selain itu juga terdapat sebuah kolom teks yang akan menunjukkan hasil dari jawaban yang telah dipilih. Teks exit Lives : 3 Video Virtual Reality A B C D menyerah - Perancangan Layar Permainan Puzzle Gambar 4.15 Rancangan Layar Permainan Puzzle Pada gambar 4.15 merupakan rancangan layar permainan puzzle. Dalam layar ini terdapat suatu puzzle berupa gambar mengenai pergerakan bumi dan bulan yang telah dipotong-potong serta telah diacak posisi dari tiap potongannya. Pengguna diharuskan membetulkan posisi setiap potongan ke posisinya yang benar untuk dapat menyelesaikan permainan sebelum waktu yang diberikan habis. Jika saat waktu habis namun pengguna belum berhasil menyelesaikan puzzle tersebut maka permainan akan berakhir dan akan kembali ke awal permainan. back Puzzle Teks Waktu

4.5.6 Perancangan STD State Transition Diagram

Perancangan State Transition Diagram STD aplikasi dilakukan untuk mengetahui transisi keadaan yang terjadi pada aplikasi saat digunakan. Gambar 4.16 Rancangan STD Tampilan Intro Pada tampilan intro terdapat sebuah tombol navigasi “enter” menuju menu utama. Gambar 4.17 Rancangan STD Tampilan Menu Utama Tampilan menu utama aplikasi dikemas dalam bentuk virtual reality yang di dalamnya terdapat 2 buah objek 3 dimensi yang berfungsi sebagai tombol navigasi. Objek “visualisasi” mengarahkan pengguna menuju tampilan menu visualisasi Intro Menu Utama Klik “Enter” Tampilkan Menu Utama Menu Utama Menu Visualisasi Klik “Visualisasi” Tampilkan Menu Visualiasi Game Evaluasi Klik “Game” Tampilkan Game Evaluasi Klik “Back” Tampilkan Menu Utama Klik “Back” Tampilkan Menu Utama sedangkan objek “game evaluasi” mengarahkan pengguna menuju tampilan cerita pengantar game evaluasi. Gambar 4.18 Rancangan STD Tampilan Menu Visualisasi Pada gambar 4.17 merupakan rancangan STD tampilan menu visualisasi. Dalam tampilan ini terdapat 4 buah tombol navigasi, yaitu tombol gerakan bumi yang akan mengarahkan pengguna menuju tampilan visualisasi gerakan bumi, tombol gerakan bulan menuju tampilan visualisasi gerakan bulan, tombol gerakan bumi dan bulan menuju tampilan visualisasi gerakan bumi dan bulan serta tombol about me yang akan menuju tampilan profil creator. Klik “Gerakan Bumi” Tampilkan Gerakan Bumi Menu Visualisasi Gerakan Bumi Gerakan Bulan Pergerakan Bumi dan Bulan Profil Creator Klik “Gerakan Bulan” Tampilkan Gerakan Bulan Klik “Back” Tampilkan Menu Visualisasi Klik “Back” Tampilkan Menu Visualisasi Klik “Back” Tampilkan Menu Visualisasi Klik “Back” Tampilkan Menu Visualisasi Klik “About me” Tampilkan Profil Creator Klik “Gerakan Bumi Bulan ” Tampilkan Gerakan Bumi Bulan Gambar 4.19 Rancangan STD Tampilan Gerakan Bumi Pada gambar 4.19 merupakan rancangan STD tampilan gerakan bumi. Dalam tampilan ini terdapat sebuah tombol navigasi yaitu “Back” yang akan mengarahkan pengguna kembali meuju tampilan menu visualisasi. Gambar 4.20 Rancangan STD Tampilan Gerakan Bulan Pada gambar 4.20 merupakan rancangan STD tampilan gerakan bulan. Dalam tampilan ini terdapat sebuah tombol navigasi yaitu “Back” yang akan mengarahkan pengguna kembali meuju tampilan menu visualisasi. Gambar 4.21 Rancangan STD Tampilan Gerakan Bumi Bulan Gerakan Bumi Menu Visualisasi Klik “Back” Tampilkan Menu Visualisasi Klik “Gerakan Bumi” Tampilkan Gerakan Bumi Gerakan Bulan Menu Visualisasi Klik “Back” Tampilkan Menu Visualisasi Klik “Gerakan Bulan” Tampilkan Gerakan Bulan Gerakan Bumi bulan Menu Visualisasi Klik “Back” Tampilkan Menu Visualisasi Klik “Gerakan Bumi Bulan ” Tampilkan Gerakan Bulan