Download - Gui tikta kavya 80%
![Page 1: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/1.jpg)
Seto Aji Nugroho 3408100079
Perancangan Desain Antarmuka Pada Game Visual Novel “Tikta
Kavya” Dengan Mengadaptasi Latar Belakang Majapahit
![Page 2: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/2.jpg)
Pendahuluan
![Page 3: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/3.jpg)
Perkembangan Industri Game di Indonesia
![Page 4: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/4.jpg)
“Game Made In Indonesia”
![Page 5: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/5.jpg)
“Orang Indonesia sangat sosial. Jadi kalau ada aspek sosial dan budaya, tentu game Indonesia akan sangat
Menarik”
Mari Elka Pangestu - Menteri Pariwisata dan Ekonomi Kreatif Indonesia
Game Indonesia : Konten Sosial & Budaya
Ami Raditya, 22 September 2012, live-from-tgs-2012-kunjungan-menteri-pariwisata-dan-ekonomi-kreatif-indonesia, Duniaku.net
![Page 6: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/6.jpg)
“pilihlah buku petualanganmu sendiri”
Visual Novel
Chris Klug; Josiah Lebowitz ,2011, Interactive Storytelling for Video Games: A Player-Centered Approach to Creating Memorable Characters and Stories
![Page 7: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/7.jpg)
Visual Novel di Indonesia
![Page 8: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/8.jpg)
GUI developmentMerancang antarmuka yang memiliki transparansi, juiciness, dan sesuai dengan tema game tersebut
Graphic User Interface
![Page 9: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/9.jpg)
Graphic User Interface
![Page 10: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/10.jpg)
Berkembangnya industri game, munculnya pengembang lokal yang go internasional
Game buatan developer game di Indonesia jarang yang mengusung tema sosial budaya Indonesia.
Format visual novel adalah buku berbentuk video game yang mudah diterima oleh kalangan muda.
Identifikasi Masalah
![Page 11: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/11.jpg)
Perancangan ini dibatasi hanya untuk variabel GUI (antarmuka)
Proramming, dan perancangan musik ditangani oleh pihak developer, Elven Games selaku stakeholder
Batasan Masalah
![Page 12: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/12.jpg)
Bagaimana merancang antarmuka kedalam sebuah
game visual novel fiksi dengan setting Kerajaan Majapahit yang interaktif
dalam mengenalkan budaya dan sejarah Indonesia ?
Rumusan Masalah
![Page 13: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/13.jpg)
menciptakan game Indonesia, khususnya visual novel yang mampu bersaing di kancah internasional.
Menciptakan antarmuka yang sesuai tema dan membantu player dalam bernavigasi dalam game.
Menunjukkan potensi media game, terutama genre visual novel sebagai media yang baik untuk mengenalkan budaya dan sejarah Indonesia.
Tujuan Penelitian
![Page 14: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/14.jpg)
Pelaku Industri game, referensi media penyampaian budaya dan sosial indonesia
Mahasiswa DKV, acuan penelitian perancangan serupa
Masyarakat Indonesia, membangun rasa cinta terhadap budaya dan sejarah Indonesia
Manfaat Penelitian
![Page 15: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/15.jpg)
Ruang lingkup output adalah perancangan GUI, layout game dan cerita bertema fiksi dengan basis sejarah dan budaya faktual Majapahit.
Ruang lingkup studi meliputi studi eksisting, studi literatur, studi desain GUI, dan studi elemen pendukung.
Ruang Lingkup
![Page 16: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/16.jpg)
Tinjauan Pustaka
![Page 17: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/17.jpg)
Visual novel seringkali khas dengan gameplay “pilihlah jalanmu” ketika terdapat
sebuah event yang mengharuskan user
menentukan jalan cerita dalam game tersebut
Visual Novel
Chris Klug; Josiah Lebowitz ,2011, Interactive Storytelling for Video Games: A Player-Centered Approach to Creating Memorable Characters and Stories
![Page 18: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/18.jpg)
Kapan user menggunakan interface, apakah user diarahkan ke tempat yang diharapkan melalui antarmuka?
antarmuka intuitif memberikan perasaan “mengontrol” , mudah dikuasai atau tidak?
Apakah user memiliki pengaruh kuat atas hasil dari permainan?
Apakah user merasa kuat berada dalam game?
Interface Control
![Page 19: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/19.jpg)
Konsep Antarmuka
Schell, Jesse, 2008, The Art of Game Design, Massachusetts, Morgan Kauffman Publisher
![Page 20: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/20.jpg)
Apa penghubung user dengan game world?
Bagaimana cara user berinteraksi dengan world?
Alat input apa yang digunakan untuk berinteraksi sebagai antarmuka fisik?
Physical Interface
![Page 21: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/21.jpg)
Informasi mana yang kurang jelas jika hanya melihat world dalam game?
Kapan informasi tersebut ditampilkan?
Bagaimana menyampaikan informasi tersebut tanpa mengganggu tampilan world dengan user?
Apakah ada elemen dalam game yang lebih mudah berinteraksi dengan menggunakan virtual interface, daripada mereka berinteraksi langsung?
Apakah jenis virtual interface untuk platform game yang memiliki konsol sederhana?
Desain Antarmuka Virtual
Schell, Jesse, 2008, The Art of Game Design, Massachusetts, Morgan Kauffman Publisher
![Page 22: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/22.jpg)
Menu Title menu Pause menu Save/load menu Button
HUD HUD gameplay Button gameplay HUD side
gameplay Icon button
gameplay
Antarmuka Virtual
![Page 23: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/23.jpg)
Kebebasan user bertindak
Pemahaman user terhadap ikon
Antarmuka dapat kompatibel dengan segala kondisi
Desain Antarmuka Virtual: Transparansi Antarmuka Virtual
dan Keleluasaan User
![Page 24: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/24.jpg)
Informasi yang dibutuhkan user pada saat tersebut
Membuat user agar membuat feedback
Tujuan user setelah memberi feedback
Membuat user terus-menerus memberikan feedback
Membuat user “ketagihan” memainkan game
Juicy sistem memberikan sistem reward, penyampaian reward harus dengan cara menarik
Desain Antarmuka Virtual: Feedback & Juiciness
Schell, Jesse, 2008, The Art of Game Design, Massachusetts, Morgan Kauffman Publisher (hal230)
![Page 25: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/25.jpg)
Jumlah HUD yang ditampilkan
Warna HUDUkuran tipografiFont tipografi yang
dipakai
Desain Antarmuka Virtual: Dimensi antarmuka
Schell, Jesse, 2008, The Art of Game Design, Massachusetts, Morgan Kauffman Publisher (hal2)
![Page 26: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/26.jpg)
Apakah mode dalam game berubah?
Apakah gameplay utama dihilangkan? Bisakah mode gameplay digabung?
Ketika mode game berubah, bagaimana user mengetahui hal tersebut? Bisakah game mengkomunikasikan mode berubah lebih dari satu cara?
Desain Antarmuka Virtual:Modes
![Page 27: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/27.jpg)
Metodologi Desain
![Page 28: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/28.jpg)
Primer: wawancara mendalam, kuisioner, observasi lapangan (audiens, industri game, situs candi, FGD)
Sekunder: literatur, internet, jurnal ilmiah, eksisting.
Sumber Data
![Page 29: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/29.jpg)
Teknik perancangan
![Page 30: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/30.jpg)
Teknik perancangan
![Page 31: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/31.jpg)
CeritaFlow gameplayAntarmuka (main
gameplay+side gameplay)
Kriteria Desain
Variabel Desain
![Page 32: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/32.jpg)
Konsep Desain
![Page 33: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/33.jpg)
Game Visual NovelGenre: historikal, fiksi,
romanceTema: sejarah kerajaan
majapahit pada timeline pemberontakan Ra Kuti
Hardware: iOS, Android, Flash Game
Output : GUI
Produk
![Page 34: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/34.jpg)
Geografis: perkotaan besar di Indonesia
Demografis:Rentang usia young adult (16-
24 tahun)Pendidikan minimum SMA
atau sederajatPelajar atau mahasiswaMasyarakat perkotaanPengeluaran 100.000 –
1.000.000 rupiahSES BPernah memainkan visual
novel
Segmentasi
![Page 35: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/35.jpg)
modern lifestylepenikmat media hiburan
(game, komik, tv, musik, dll)suka mencoba hal yang barumemiliki rasa ingin tahu
yang tinggimenggunakan waktu luang
untuk hobiselalu update informasi
Psikografis
![Page 36: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/36.jpg)
AKTIFITAS Bermain Game Membaca Menonton
INTEREST Suka budaya pop Jepang Suka genre romance Menyukai lawan jenis
OPINI Tertarik dengan sejarah
kerajaan Indonesia dengan ditambahkan elemen fiksi
![Page 37: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/37.jpg)
Lifestyle modern. Pernah memainkan visual novel. Menyukai genre romance. Mengikuti perkembangan
informasi dan teknologi. Menyukai sejarah dan budaya
Indonesia. Memiliki ketetarikan pada media
entertainment seperti game, buku, komik, film, animasi, dan sebagainya.
Melakukan hobi di waktu luang.
Karakteristik Audiens
![Page 38: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/38.jpg)
konsumen membutuhkan interaksi game yang nyaman baik
dalam bentuk visual serta fungsi untuk
bernavigasi di dalam game
User needs
![Page 39: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/39.jpg)
Genre Visual Novel merupakan genre game yang masih asing di Indonesia dan belum di eksplorasi
Penggunaan antarmuka yang interaktif sehingga dapat berkomunikasi langsung dengan world
Pengenalan sistem cutscene dalam game
Platform mobile game yang cenderung handheld memudahkan player memainkan game dimana saja
Unique Selling Point
![Page 40: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/40.jpg)
![Page 41: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/41.jpg)
Interactive berarti saling melakukan aksi, saling berhubungan dan saling aktif.
Juicy dalam istilah pengembang game berarti “menarik” dan “tidak kering” sehingga membuat user ketagihan memainkannya
Virtual User Interface dapat diartikan antarmuka bagi pengguna dalam bentuk virtual
Interactive Juicy Virtual User Interface
Makna Denotatif
![Page 42: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/42.jpg)
User interface yang memiliki interaktif yang terhubung dengan karakter dan game world sehingga memberikan efek “ketagihan” kepada user.
Interactive Juicy Virtual User Interface
Makna Konotatif
![Page 43: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/43.jpg)
Hardware: iOS, Android, PC (flash)
Dimensi: 960 X 640 pixel (3:2)
Seri game: demo/lite version, full version
Strategi Media
![Page 44: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/44.jpg)
CeritaMenuHUDButtonLogo gameSupergrafis dalam
game
Kriteria Desain
![Page 45: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/45.jpg)
Cerita
![Page 46: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/46.jpg)
![Page 47: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/47.jpg)
Menu pada game merupakan rangkaian
antarmuka user dengan game yang juga
menghubungkan user terhadap gameplay, menu harus memiliki
kekuatan untuk memberikan arahan kepada user untuk
bernavigasi di dalam game
Desain Antarmuka
![Page 48: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/48.jpg)
Desain Antarmuka: game flow
![Page 49: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/49.jpg)
Moodboard Game Secara Keseluruhan
![Page 50: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/50.jpg)
Menggunakan pernak-pernik budaya Indonesia
seperti peninggalan sejarah dan budaya
Indonesia yang mendukung visualisasi
kerajaan Hindu-Budha di Indonesia, khususnya Kerajaan Majapahit.
Visualisasi Antarmuka
![Page 51: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/51.jpg)
Interactive Button
sistem: tombol beranimasi dan mudah dipahami oleh user.
![Page 52: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/52.jpg)
Memberikan kesan orang pertama kedalam cerita dan memerankan tokoh Tikta sebagai peran utama. User akan dihadapkan pilihan Tikta untuk menentukan cerita. Sehingga karakter utama tidak ditampilkan.
HUD gameplay: simulasi cerita
![Page 53: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/53.jpg)
Di dalam Visual Novel “Tikta Kavya” terdapat gameplay utama yaitu pada sesi storytelling dan satu gameplay
sampingan berupa minigame bergenre “push and conquer”
Maka dibutuhkan 2 HUD berbeda setiap gameplaynya
Perubahan mode gameplay
![Page 54: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/54.jpg)
Title menu Interactive buttonLogo gameBackground Paralax
Save/Load menu (data management)Data propertiesButtonRewrite warning windowPage scrollerBackground
Setting menuPengatur volume BGMPengatur volume SFXPengatur kecepatan textPengatur displayBackground
Gallery menu (extra)CutsceneHistory ArtworkBattle history
Pause menuButtonHistory windowProgress bar (game status)
Menu
![Page 55: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/55.jpg)
Minigame HUD Skill box Tombol Forward,
backward Tombol pause HP bar/statistik karakter
Storytelling HUD Kotak dialog
(menyesuaikan karakter) Tombol (pause, skip,
auto) Next/tap notice Jendela interaksi (event)
Interactive HUD
![Page 56: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/56.jpg)
![Page 57: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/57.jpg)
Title Menu
![Page 58: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/58.jpg)
Title Menu
![Page 59: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/59.jpg)
![Page 60: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/60.jpg)
![Page 61: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/61.jpg)
Setelah user menyelesaikan salah satu storyline, user akan membuka title screen baru dengan tema masing-masing cerita
Sesuai kesepakatan dengan karakter desainer maka title bonus akan ditampilkan dengan tema seperti ini: Jayanegara: Ular Naga Emas Gajahmada: Kerbau dan Pohon Ra Kuti: Rangda dan Angin Game complete 100% : Tikta dan garuda
Title menu rewards
![Page 62: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/62.jpg)
Save/Load Menu
![Page 63: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/63.jpg)
Setting Menu
![Page 64: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/64.jpg)
Gallery Menu(Extra)
![Page 65: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/65.jpg)
Pause Menu
![Page 66: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/66.jpg)
HUD in game
![Page 67: Gui tikta kavya 80%](https://reader035.vdocuments.net/reader035/viewer/2022081506/55c0d4f0bb61eb00038b4610/html5/thumbnails/67.jpg)
HUD in game