TUGAS AKHIR - RD 091581
PERANCANGAN USER INTERFACE GAME MOBILE GARUDAYANA SAGA : ASHURA HUNTER DENGAN KONSEP NARRATIVE ETHNIC FANTASY DIMAS NOVAN DELFIANO NRP 3409100013 Dosen Pembimbing Nugrahardi Ramadhani, S.Sn, MT
PROGRAM STUDI DESAIN KOMUNIKASI VISUAL JURUSAN DESAIN PRODUK INDUSTRI Fakultas Teknik Sipil dan Perencanaan Institut Teknologi Sepuluh Nopember Surabaya 2014
FINAL PROJECT - RD 091581
DESIGNING USER INTERFACE FOR GARUDAYANA SAGA : ASHURA HUNTER MOBILE GAME WITH NARRATIVE ETHNIC FANTASY CONCEPT DIMAS NOVAN DELFIANO NRP 3409100013 Counsellor Nugrahardi Ramadhani, S.Sn, MT
VISUAL COMMUNICATION DESIGN STUDY PRORTAM DEPARTMENT OF INDUSTRIAL PRODUCT DESIGN Faculty of Civil Engineering and Planning Sepuluh Nopember Institute of Technology Surabaya 2014
iii
PERANCANGAN USER INTERFACE GAME MOBILE GARUDAYANA SAGA : ASHURA HUNTER DENGAN KONSEP NARRATIVE ETHNIC FANTASY
Nama Mahasiswa
: DIMAS NOVAN DELFIANO
NRP
: 3409100013
Jurusan
: Desain Produk Industri FTSP - ITS
Dosen Pembimbing
: Nugrahardi Ramadhani, S.Sn, M.T
Abstrak
Garudayana Saga adalah komik karya Is Yuniarto yang mengadaptasi cerita Mahabharata. Komik Garudayana Saga telah memenangkan berbagai macam penghargaan seperti Lollipop Award 2010 dan Lollipop Award 2011 untuk kategori komik indonesia favorit pilihan pembaca XY Kids. Kesuksesan komik Garudayana Saga tersebut membuatnya layak untuk diangkat ke media lain, khususnya game mobile mengingat pertumbuhan SDM dan juga konsumennya di Indonesia. Dan versi game mobile-nya akan memiliki judul Garudayana Saga : Ashura Hunter. Salah satu elemen pada game mobile adalah UI ( User Interface ) dan UI memiliki sebuah peranan yang krusial yaitu menghubungkan antara game dan pemainnya. Dalam perancangan UI untuk game mobile Garudayana Saga : Ashura Hunter ini telah diketahui beberapa hal yang menjadi standar dalam mendesain sebuah UI dan juga berbagai macam perubahan dalam pengeksekusian UI untuk atas pertimbangan baik dari pemain maupun pengembang game. Selain itu diperlukan solusi interface yang baik untuk alat kendali layar sentuh, karena layar sentuh memilki batasan, interaksi dan cara tersendiri bagi user untuk memahaminya. Dalam perancangan ini dihasilkan sebuah konsep UI yang dapat menampilkan fitur secara jelas dan sekaligus memberikan pengalaman bermain yang menggabungkan konsep naratif dengan tema visual fantasi etnis pada game dengan genre action. Dengan adanya konsep tersebut diharapkan dapat memberikan pemain pengalaman bermain yang baik. Kata Kunci : Is Yuniarto, Garudayana Saga, Mobile Game, User Interface
iv
DESIGNING USER INTERFACE FOR GARUDAYANA SAGA : ASHURA HUNTER MOBILE GAME WITH NARRATIVE ETHNIC FANTASY CONCEPT Student Name
: DIMAS NOVAN DELFIANO
Student ID
: 3409100013
Department
: Industrial Product Design FTSP - ITS
Councellor Lecturer
: Nugrahardi Ramadhani, S.Sn, M.T
Abstract
Garduyana Saga is a comic created by Is Yuniarto which adapt Mahabharata story. Garudayana has won several awards such as Lollipop Award 2010 and Lollipop Award 2011 for the category favorite Indonesian comic based on XY Kids reader's choice. Garudayana's succes makes it worth to be transformed into another form of media, especially mobile games, because the increase of talent and consument in the gaming industry of Indonesia. The mobile game version will be named Garudayana Saga : Ashura Hunter. One of the mobile game's important element is UI ( User Interface ) which has a crucial function as a connector between player and the game. In this project, designing Garudayana Saga : Ashura Hunter UI, there is several discoveries regarding UI design standard that need to be applied and a various UI improvement methods based on feedback from players and developers. Therefore, because the primary controller is a touch screen which is has its own uniqueness, limitations, interaction methods and a way for user to understand it, a good UI design solution is needed. This project produce a UI concept that show game features clearly and also give the player an unique gaming experiences through combining narrative concept and ethnic fantasy UI visual theme in action game. Keyword : Is Yuniarto, Garudayana Saga, Mobile Game, User Interface
v
KATA PENGANTAR Segala puji syukur penulis panjatkan atas kekadirat Tuhan Yang Maha Esa, yang telah memberikan kekuatan dan segala rahmayNya untuk kelancaran penulisan "Laporan Tugas Akhir Perancangan User Interface Game Mobile Garudayana Saga : Ashura Hunter dengan Konsep Narrative Ethnic Fantasy" dari awal hingga laporan ini selesai. Laporan ini ditulis untuk menyajikan proses perancangan desain dari user interface game mobile Garudayana Saga : Ashura Hunter mulai dari latar belakang masalah, studi pustaka, metode penelitian, konsep desain hingga implemtasi desain. Dengan adanya laporan ini penulis berharap dapat membantu siapa saja yang membutuhkan
dan
ingin
menggunakan
laporan
ini
sebagai
inspirasi,
penyempurnaan penelitian dan juga sumber belajar. Penulis menyadari bahwa dalam laporan ini masih banyak kekurangan, oleh karena itu penulis meminta maaf sebesar - besarnya apabila terdapat kesalahan dalam laporan baik konten maupun penulisan dan penulis juga menerima masukan. Atas kelancaran terselesaikannya laporan ini penulis ingin menyampaikan rasa terima kasih atas dukungan dari berbagai pihak yaitu : 1. Allah Subhanahu wa ta'ala Yang Maha Esa dan Maha Mencipta. 2. Orang tua penulis yaitu Bapak Bambang Sarwono dan Ibu Retno Nagayomi yang selalu mendukung. 3. Bapak Nugrahardi Ramadhani S.Sn, MT, Bapak Rahmatsyam Lakoro, S.Sn, MT dan Bapak R. Eka Rizkiantono S.Sn, M.Ds sebagai dosen pembimbing. Terima kasih atas bimbingan, arahan dan masukannya yang telah diberikan. 4. Kepada ko Is Yuniarto yang telah memberi ijin kepada kami untuk mengadaptasi karyanya dan menjadi stakeholder sekaligus narasumber wawancara. Kepada mas Adhicipta R. Wirawan, mas Arief Bahari, mas Eka Pramudita Muharram dan mas Assaji Tjahjadi yang juga sebagai narasumber wawancara. 5. Kepada rekan - rekan di Mojiken Studio yang telah membantu dalam proses pengembangan game, terutama mas Eka, Septian dan mas Dito. Pada mba Eva dan
vi
Erel sebagai teman satu tim. Mba Tya, Elwin dan Rena sebagai teman seperjuangan. Kepada Paman, mas Bagus, mas Aji dan mas Tomo sebagai supporter 6. Kepada teman - teman angkatan 2009 Despro ITS yang tidak bisa saya sebutkan satu per - satu, yang membuat saya berkembang sampai seperti saya saat ini. Terima kasih banyak, saya bersyukur mengenal teman - teman. 7. Kepada teman - teman 2011, Bima, Chibi, Erin, Izza dan Anyak yang bersedia menjadi partisipan usability test. 8. Kepada teman - teman, seluruh dosen dan karyawan Despro ITS. Demikian laporan ini disusun, atas segala perhatian dan dukungannya penulis mengucapkan terima kasih.
Surabaya, Agustus 2014
Penulis
vii
DAFTAR ISI
LEMBAR PENGESAHAN .......................................................................................................... i PERNYATAAN KEASLIAN KARYA ......................................................................................... ii ABSTRAK................................................................................................................................. iii KATA PENGANTAR ................................................................................................................. v DAFTAR ISI ............................................................................................................................. vii DAFTAR GAMBAR ................................................................................................................ xiv DAFTAR TABEL ................................................................................................................... xxii BAB I PENDAHULUAN ............................................................................................................ 1 1.1 Latar Belakang Masalah ................................................................................................ 1 1.2 Identifikasi Masalah ....................................................................................................... 8 1.3 Batasan Masalah ........................................................................................................... 9 1.4Rumusan Masalah.......................................................................................................... 9 1.5 Tujuan Penelitian ........................................................................................................... 9 1.6 Manfaat Penelitian ......................................................................................................... 9 1.7 Ruang Lingkup Penelitian ........................................................................................... 10 1.7.1 Ruang Lingkup Studi.......................................................................................... 10
1.7.2 Ruang Lingkup Output ....................................................................................... 10 1.8 Sistematika Penulisan ................................................................................................. 10 BAB II STUDI PUSTAKA ........................................................................................................ 12 2.1 Landasan Teori............................................................................................................ 12 2.1.1 Mobile Game ...................................................................................................... 12
viii
2.1.1.1 Definisi Game.............................................................................................. 12 2.1.1.2 Definisi Mobile Game .................................................................................. 12 2.1.1.3 Komponen dalam Game ............................................................................. 13 2.1.2 Graphic User Interface ...................................................................................... 14 2.1.2.1 Graphic User Interface dalam Game .......................................................... 14 2.1.2.2 Hubungan antara User Interface dengan Fitur dalam Game ..................... 16 2.1.3 Prinsip Desain User Interface ........................................................................... 17 2.1.3.2 Prinsip User Interface dalam Game ............................................................ 17 2.1.4 Elemen User Interface....................................................................................... 20 2.1.4.1 Usability ....................................................................................................... 20 2.1.4.1.1 Problema Umum Usability .................................................................... 21 2.1.4.2 Ikon ............................................................................................................. 23 2.1.4.2.1 Hubungan Ikon dengan Usability .......................................................... 24 2.1.4.3 Model Navigasi............................................................................................ 25 2.1.4.3.1 Jenis - Jenis Model Navigasi ................................................................ 26 2.1.4.3.2 Perencanaan Model Navigasi dalam Game ......................................... 28 2.1.4.4 Feedback .................................................................................................... 30 2.1.4.4.1 Elemen - Elemen Feedback ................................................................. 31 2.1.4.5 Alat Kendali ................................................................................................. 32 2.1.4.5.1 Layar Sentuh ........................................................................................ 32 2.1.4.5.1.1 Gestur Sentuh .................................................................................. 32 2.1.4.5.2 Tombol .................................................................................................. 36 2.1.5 Flat Design ........................................................................................................ 39 2.2 Studi Eksisting ............................................................................................................ 41
ix
2.2.1 Product Knowledge ............................................................................................ 41 2.2.2 Studi Eksisting Sebelumnya .............................................................................. 43 2.2.2.1 Garudayana : Rise of Garuda...................................................................... 43 2.2.2.2 Garudayana Legends .................................................................................. 44 2.2.3 Studi Kompetitor ................................................................................................ 44 2.2.3.1 The Advantures of Wanara - Astra Mantra - .............................................. 44 2.2.3.2 Inheritage - Boundary of Existence - ........................................................... 46 2.2.4 Studi Komparator ............................................................................................... 47 2.2.4.1 Deep Dungeons of Doom ............................................................................ 47 2.2.4.2 Punch Quest ................................................................................................ 47 2.2.4.3 Third Blade .................................................................................................. 48 2.2.4.4 Epic Battle Dude .......................................................................................... 48 BAB III METODE PENELITIAN .............................................................................................. 50 3.1 Metode Penelitian ........................................................................................................ 50 3.1.1 Wawancara Mendalam ...................................................................................... 50 3.1.2 Observasi ........................................................................................................... 50 3.1.3 Usability Test ..................................................................................................... 50 3.1.4 Studi Literatur ..................................................................................................... 51 3.2 Populasi ....................................................................................................................... 51 3.2.1 Sampel ............................................................................................................... 52 3.3. Analisa Data ............................................................................................................... 52 3.3.1 Hasil Wawancara ............................................................................................... 52 3.3.1.1 Is Yuniarto.................................................................................................... 53 3.3.1.2 Arief Bahari .................................................................................................. 53
x
3.3.1.3 Tim Developer Vamp's Revenge ................................................................ 54 3.3.2 Hasil Observasi ................................................................................................. 55 3.3.2.1 Deep Dungeons of Doom ........................................................................... 55 3.3.2.1.1 Model Navigasi ..................................................................................... 55 3.3.2.1.2 Kontrol................................................................................................... 57 3.3.2.1.3 Konsep Interaksi Unik ........................................................................... 57 3.3.2.2 Punch Quest ............................................................................................... 58 3.3.2.2.1 Model Navigasi ..................................................................................... 58 3.3.2.2.2 Konsep Interaksi Unik ........................................................................... 59 3.3.2.3 Third Blade .................................................................................................. 60 3.3.2.3.1 Model Navigasi ..................................................................................... 61 3.3.2.3.2 Konsep Interaksi Unik ........................................................................... 62 3.3.2.4 Epic Battle Dude ......................................................................................... 62 3.3.2.4.1 Model Navigasi ..................................................................................... 63 3.3.2.4.3 Konsep Interaksi Unik ........................................................................... 63 3.3.3 Usability Test ..................................................................................................... 64 3.4 Teknik Perancangan ................................................................................................... 65 3.4.1 Variabel Desain ................................................................................................. 66 3.4.1.1 Usability ....................................................................................................... 66 3.4.1.2 Tema Visual ................................................................................................ 66 3.4.2 Kriteria Desain ................................................................................................... 66 3.4.3 Implementasi Desain ......................................................................................... 66 3.4.4 Diagram Proses Perancangan .......................................................................... 67 BAB IV KONSEP DESAIN ..................................................................................................... 68
xi
4.1 Konsep Desain ............................................................................................................ 68 4.1.1 Output Perancangan .......................................................................................... 68 4.1.2 Data Konsep ...................................................................................................... 68 4.1.2.1 Game Design Document ............................................................................. 68 4.2 Konsep Desain Narrative Ethnic Fantasy ................................................................... 74 4.3 Kriteria Desain ............................................................................................................. 76 4.3.1 Usability.............................................................................................................. 76 4.3.1.1 Model Navigasi / Flow Chart........................................................................ 76 4.3.1.2 Layout & Wireframing .................................................................................. 78 4.3.2 Tema Visual ....................................................................................................... 88 4.3.2.1 Warna .......................................................................................................... 88 4.3.2.2 Elemen Dekoratif ......................................................................................... 91 4.3.2.3 Tipografi ....................................................................................................... 96 4.3.3 Rough Design .................................................................................................... 98 4.3.3.1 Desain Border Window ................................................................................ 98 4.3.3.2 Ikon .............................................................................................................. 99 4.3.3.2.1 Ikon Advanture Menu .......................................................................... 100 4.3.3.2.2 Ikon Cakraka, Zakti dan Rasa ............................................................. 100 4.3.3.3 Desain Tombol........................................................................................... 103 4.3.3.4 Desain Logotype ........................................................................................ 104 4.3.3.5 Desain HUD ............................................................................................... 105 4.3.3.6 Konsep Pengendalian dalam Game .......................................................... 107 4.3.3.7 Desain Ilustrasi .......................................................................................... 108 4.4 Alternatif Desain ........................................................................................................ 112
xii
4.4.1 Alternatif Desain 1 ........................................................................................... 112 4.4.2 Alternatif Desain 2 ........................................................................................... 114 4.4.3 Alternatif Desain 3 ........................................................................................... 115 4.4.4 Alternatif Desain 4 ........................................................................................... 117 BAB V IMPLEMENTASI DESAIN ........................................................................................ 119 5.1 Elemen Desain.......................................................................................................... 119 5.1.1 Desain Logotype ............................................................................................. 119 5.1.2 Desain Ikon ..................................................................................................... 119 5.1.2.1 Desain Ikon Combo, Skill, Item dan Quest ............................................... 119 5.1.2.2 Desain Ikon Cakraka, Zakti, dan Rasa ..................................................... 120 5.1.2.3 Desain Ikon Fitur Teknis ........................................................................... 120 5.1.3 Desain HUD .................................................................................................... 121 5.1.3.1 Desain Health Bar ..................................................................................... 121 5.1.3.2 Layout Virtual Controller ........................................................................... 121 5.1.4 Desain Ilustrasi ................................................................................................ 122 5.1.4.1 Desain Ilustrasi Title Screen ..................................................................... 122 5.1.4.2 Desain Ilustrasi Chapter Select................................................................. 122 5.1.4.2 Panel Komik Finisher Mode ...................................................................... 124 5.1.5 Desain Tombol ................................................................................................ 126 5.2 Layout dan Interaksi.................................................................................................. 127 5.2.1 Title Screen ..................................................................................................... 127 5.2.1.1 Options ...................................................................................................... 128 5.2.1.2 Credits ....................................................................................................... 128 5.2.2 Main Menu ....................................................................................................... 129
xiii
5.2.2.1 Combo Menu ............................................................................................. 131 5.2.2.2 Skill Menu .................................................................................................. 132 5.2.2.3 Item Menu .................................................................................................. 133 5.2.2.4 Quest Menu ............................................................................................... 134 5.2.3 Chapter Select ................................................................................................. 134 5.2.4 Gameplay / In-Game HUD ............................................................................... 135 5.2.4.1 Battle .......................................................................................................... 136 5.2.4.2 Pause Menu............................................................................................... 137 5.2.4.3 Next Battle ................................................................................................. 138 5.2.4.4 Finisher Mode ............................................................................................ 138 5.2.4.5 Result Screen ............................................................................................ 141 BAB VI KESIMPULAN DAN SARAN ................................................................................... 142 6.1 Kesimpulan ................................................................................................................ 143 6.2 Saran ......................................................................................................................... 143 DAFTAR PUSTAKA .............................................................................................................. 144 BIODATA PENULIS .............................................................................................................. 146 LAMPIRAN ............................................................................................................................ 148
xiv
DAFTAR GAMBAR Gambar 1.1 Pertumbuhan Pendapatan untuk Games di Seluruh Dunia (sumber : http://www.slideshare.net/AppAnnie/casual-connect-2012-app-store-economy) ........3 Gambar 1.2 Pertumbuhan Jumlah Download untuk Games di Seluruh Dunia (sumber
:
ttp://www.slideshare.net/AppAnnie/casual-connect-2012-app-store-
economy) .....................................................................................................................3 Gambar 1.3 Daftar 10 aplikasi terbaik pada platform iOS yang di-download oleh Masyarakat
Indonesia
(sumber
:
(http://www.appannie.com/top/iphone/indonesia/overall/) ...........................................4 Gambar 1.4 Tampilan menu utama dalam game Mario vs. Donkey Kong : Minis March Again! dimana UI tombol Main Game dan Erase Data .....................................6 Gambar 1.5 Tampilan jenela konfirmasi dalam game Mario vs. Donkey Kong : Minis March Again! dimana ikon grafis merah dan hijau memiliki analogi yang kurang jelas .................................................................................................................6
Gambar 1.6 Perbandingan antara UI game Wildstar lama (kiri) dan UI yang baru (kanan) setelah menerima berbagai macam feedback dari pemainpada forum. .........7
Gambar 1.7 Perbandingan antara UI game Phantom Imperial lama (kiri) dan UI yang baru (kanan)........................................................................................................8 Gambar 2.1 Bagan hubungan interaksi antara pemain, interface, dan dunia dalam game ...............................................................................................................15 Gambar 2.2 Model navigasi Hub & Spoke ................................................................26 Gambar 2.3 Model navigasi Fully Connected ...........................................................27 Gambar 2.4 Model navigasi Stepwise .......................................................................27 Gambar 2.5 Model navigasi Pyramid ........................................................................28 Gambar 2.6 Langkah Brent Fox dalam mendesain flow chart ................................. 29
xv
Gambar
2.7
Contoh
model
navigasi
(
sumber
:
http://bulletproofoutlaws.com/category/elusive-ninja-the-shadowy-thief/ ) ................ 30 Gambar 2.8 Gestur tap ( sumber : msdn.microsoft.com ) ........................................ 34 Gambar 2.9 Gestur double tap ( sumber : msdn.microsoft.com ) ............................. 34 Gambar 2.10 Gestur pan ( sumber : msdn.microsoft.com ) ..................................... 35 Gambar 2.11 Gestur flick ( sumber : msdn.microsoft.com ) ..................................... 35 Gambar 2.12 Gestur flick ( sumber : msdn.microsoft.com ) ..................................... 36 Gambar 2.13 Interface pada Windows 8 dan iOS7 ( sumber : iberita.com, mashable.com ) ......................................................................................................... 39 Gambar 2.14 Beberapa contoh desain bergaya Swiss International Style ( sumber : thenextweb.com ) ..................................................................................... 40 Gambar 2.15 Interface pada game The Witcher 2 dan FIFA 14 ( sumber : behance.net,ign.com ) ............................................................................................... 40 Gambar 2.16 Cuplikan komik Garudayana............................................................... 42 Gambar 2.17 Cuplikan komik Garudayana yang menggambarkan kekuatan Antareja ..................................................................................................................... 43 Gambar
2.18
Garudayana
:
Rise
of
Garuda
(
sumber
:
ferryapriyanto.deviantart.com ) .................................................................................. 43 Gambar
2.19
Garudayana
Legends
(
sumber
http://www.youtube.com/watch?v=KpLffWxC8O8 )................................................... 44 Gambar 2.20 Screenshot game The Advantures of Wanara - Astra Mantra ( sumber : id.gamesinasia.com ) ............................................................................... 44 Gambar
2.21
Screenshot
gameplay
Astra
Mantra
(
sumber
:
id.gamesinasia.com ) ................................................................................................ 45 Gambar
2.22
Inheritage
-
Boundary
of
Existence
-
(
sumber
:
id.gamesinasia.com ) ................................................................................................ 46
xvi
Gambar 2.23 Screenshot gameplay Inheritage - Boundary of Existence ( sumber : id.gamesinasia.com ) ............................................................................... 46 Gambar 2.24 Screenshot game Deep Dungeons of Doom ..................................... 47 Gambar 2.25 Screenshot Punch Quest ................................................................... 47 Gambar 2.26 Screenshoot Third Blade .................................................................... 48 Gambar 2.27 Screenshoot Epic Battle Dude ........................................................... 48 Gambar 3.1 Screenshot game Deep Dungeons of Doom ....................................... 55 Gambar 3.2 Model navigasi atau flow chart game Deep Dungeons of Doom ......... 56 Gambar 3.3 Screenshot Punch Quest ..................................................................... 58 Gambar 3.4 Model navigasi atau flow chart game Punch Quest ............................. 58 Gambar 3.5 Adanya tanda "!" membuat pemain memahami tentang adanya fitur baru pada game........................................................................................................ 59 Gambar 3.6 Penggunaan navigasi scroll dengan persegi panjang memudahkan pemain untuk bermain game dengan posisi landscape ............................................ 60 Gambar 3.7 Screenshoot Third Blade ...................................................................... 60 Gambar 3.8 Model navigasi atau flow chart game Third Blade ............................... 61 Gambar 3.9 Screenshoot Epic Battle Dude ............................................................. 62 Gambar 3.10 Model navigasi atau flow chart game Epic Battle Dude ..................... 63 Gambar 3.11 Salah satu proses pre - test ............................................................... 64 Gambar 3.12 Diagram proses perancangan ............................................................ 67 Gambar 4.1 Mockup dasar game............................................................................. 69 Gambar 4.2 Konsep model navigasi ........................................................................ 77 Gambar 4.3 Tampilan layout dan wireframe menu Opening Screen ....................... 79
xvii
Gambar 4.4 Tampilan layout dan wireframe halaman Option .................................. 80 Gambar 4.5 Tampilan layout dan wireframe halaman Credits ................................. 81 Gambar 4.6 Tampilan layout dan wireframe halaman Prepare Combo ................... 82 Gambar 4.7 Tampilan layout dan wireframe halaman Prepare Skill ........................ 83 Gambar 4.8 Tampilan layout dan wireframe halaman Prepare Item ........................ 84 Gambar 4.9 Tampilan layout dan wireframe halaman Quest ................................... 85 Gambar 4.10 Tampilan layout dan wireframe halaman Advanture Menu ................ 87 Gambar 4.11 Cover komik Garudayana Saga yang memuat kriteria palet warna ... 88 Gambar 4.12 Cover komik Garudayana yang memuat palet warna Gatotkaca ....... 89 Gambar 4.13 Beberapa motif batik ( sumber : Batik Design, Pepin van Roojen ) .... 90 Gambar 4.14 Palet Warna yang digunakan untuk tema visual interface .................. 90 Gambar 4.15 Palet warna yang digunakan warna fungsional .................................. 91 Gambar 4.16 Contoh motif batik.( sumber : Batik Design, Pepin van Roojen ) ........ 92 Gambar 4.17 Motif Lar, Mirong dan Sawat ( sumber : Batik Design, Pepin van Roojen ) ..................................................................................................................... 93 Gambar 4.18 Motif cemukiran dan pinggiran batik ( sumber : Indonesian Ornamental Design, Pepin Press ) ............................................................................ 93 Gambar 4.19 Motif kotak sirih Jawa ( sumber : Indonesian Ornamental Design, Pepin Press ) ............................................................................................................. 94 Gambar 4.20 Perisai bali dan beberapa alat penyimpan dari Jawa( sumber : Indonesian Ornamental Design, Pepin Press ) ......................................................... 94 Gambar 4.21 Desain pilar pada candi - candi secara umum ( sumber : Indonesian Ornamental Design, Pepin Press ) ......................................................... 94
xviii
Gambar 4.22 Warna kemerahan candi dan drtil ornamen candi Bajang Ratu ( sumber : Memories of Majapahit, East Java Government Tourism Service) ......... 95 Gambar 4.23 Ornamen Api ( sumber : Indonesian Ornamental Design, Pepin Press ) ...................................................................................................................... 96 Gambar 4.24 Aksara Devanagari yang menjadi konsep dasar dari tipografi ( sumber : blog.luke.org ) .......................................................................................... 96 Gambar 4.25 Font Sitka Text Bold ........................................................................... 97 Gambar 4.26 Font Sitka Text Bold Italic .................................................................. 97 Gambar 4.27 Beberapa alternatif rough design pinggiran window .......................... 98 Gambar 4.28 Beberapa alternatif rough design bingkai window .............................. 99 Gambar 4.29 Beberapa alternatif rough design window .......................................... 99 Gambar 4.30 Beberapa alternatif rough design ikon - ikon dalam prepare menu . 100 Gambar 4.31 Rough design ikon combo ................................................................ 101 Gambar 4.32 Alternatf-alternatif rough design ikon skill ........................................ 101 Gambar 4.33 Rough Design dari ikon boost .......................................................... 102 Gambar 4.34 Rough Design dari ikon perwakilan .................................................. 103 Gambar 4.35 Beberapa alternatif rough design tombol yang menampung ikon .... 103 Gambar 4.36 Beberapa alternatif rough design tombol yang menampung teks .... 104 Gambar 4.37 Logotype Garudayana Saga versi komik ......................................... 104 Gambar 4.38 Rough design logotype Garudayana Saga : Ashura Hunter ............ 104 Gambar 4.39 Mockup dasar tampilan permainan .................................................. 105 Gambar 4.40 Rough design Health Bar pemain dan musuh ................................. 106 Gambar 4.41 Rough design pemberitahuan awal pengaktifan finisher mode ....... 106
xix
Gambar 4.42 Rough design saat finisher mode diaktifkan ..................................... 107 Gambar 4.43 Rough design ilustrasi title screen .................................................... 109 Gambar 4.44 Rough design ilustrasi chapter select ............................................... 110 Gambar 4.45 Rough design saat finisher mode diaktifkan ..................................... 111 Gambar 4.46 Model navigasi alternatif ................................................................... 112 Gambar 4.47 Menu chapter select pada alternatif desain 1 ................................... 113 Gambar 4.48 Halaman combo menu pada alternatif desain 1 ............................... 113 Gambar 4.49 Halaman gameplay pada alternatif desain 1 .................................... 114 Gambar 4.50 Menu chapter select pada alternatif desain 2 ................................... 114 Gambar 4.51 Halaman combo pada alternatif desain 2 ......................................... 115 Gambar 4.52 Menu gameplay pada alternatif desain 2 .......................................... 115 Gambar 4.53 Menu chapter select pada alternatif desain 3 ................................... 116 Gambar 4.54 Halaman combo menu pada alternatif desain 3 ............................... 116 Gambar 4.55 Halaman gameplay pada alternatif desain 3 .................................... 116 Gambar 4.56 Halaman gameplay alternatif pada alternatif desain 3 ...................... 117 Gambar 4.57 Halaman gameplay alternatif pada alternatif desain 3 ...................... 117 Gambar 4.58 Menu chapter select pada alternatif desain 3 ................................... 118 Gambar 4.59 Menu combo menu pada alternatif desain 3 ..................................... 118 Gambar 5.1 Logotype Garudayana Saga : Ashura Hunter ..................................... 119 Gambar 5.2 Desain Ikon Combo, Skill, Item dan Quest ......................................... 120 Gambar 5.3 Desain Ikon Cakraka, Zakti & Rasa .................................................... 120 Gambar 5.4 Desain Ikon Fitur Teknis ..................................................................... 120
xx
Gambar 5.5 Desain Health Bar .............................................................................. 121 Gambar 5.6 Layout Virtual Controller ..................................................................... 121 Gambar 5.7 Ilustrasi Title Screen........................................................................... 122 Gambar 5.8 Ilustrasi Chapter Select ...................................................................... 123 Gambar 5.9 Ilustrasi Chapter Select dengan Penyatuan Background ................... 123 Gambar 5.10 Panel 1 Finisher Mode ..................................................................... 124 Gambar 5.11 Panel 2 Finisher Mode ..................................................................... 124 Gambar 5.12 Panel 3 Finisher Mode ..................................................................... 125 Gambar 5.13 Panel 4 Finisher Mode ..................................................................... 125 Gambar 5.14 Tombol Title Screen ......................................................................... 126 Gambar 5.15 Tombol Main Menu .......................................................................... 126 Gambar 5.16 Tombol Stage Select ........................................................................ 127 Gambar 5.17 Implementasi opening screen .......................................................... 127 Gambar 5.18 Implementasi options ....................................................................... 128 Gambar 5.19 Implementasi credits ........................................................................ 129 Gambar 5.20 Implementasi combo menu .............................................................. 132 Gambar 5.21 Implementasi skill menu ................................................................... 133 Gambar 5.22 Implementasi boost menu ................................................................ 133 Gambar 5.23 Implementasi chapter part menu ...................................................... 134 Gambar 5.24 Implementasi chapter part menu ...................................................... 135 Gambar 5.25 Implementasi in-game HUD ............................................................. 137 Gambar 5.26 Implementasi pause menu ............................................................... 137
xxi
Gambar 5.27 Implementasi next battle ................................................................... 138 Gambar 5.28 Logotype "Finisher" ........................................................................... 139 Gambar 5.29 Implementasi finisher mode awal ..................................................... 140 Gambar 5.30 Implementasi finisher mode pemasukan input ................................. 140 Gambar 5.31 Implementasi panel komik pada finisher mode ................................. 140 Gambar 5.32 Implementasi result screen ............................................................... 141
xxii
DAFTAR TABEL Tabel 4.1 Kebutuhan asset Title Screen ................................................................................. 79 Tabel 4.2 Kebutuhan asset Options........................................................................................ 80 Tabel 4.3 Kebutuhan asset Credits......................................................................................... 81 Tabel 4.4 Kebutuhan asset Combo Menu .............................................................................. 82 Tabel 4.5 Kebutuhan asset Skill ............................................................................................. 84 Tabel 4.6 Kebutuhan asset Item ............................................................................................. 85 Tabel 4.7 Kebutuhan asset Quest .......................................................................................... 86 Tabel 4.8 Kebutuhan asset Chapter Select ............................................................................ 87 Tabel 4.9 Simbol dan makna motif batik ................................................................................. 92 Tabel 4.10 Kebutuhan asset saat gameplay dan finisher mode........................................... 108
BAB I PENDAHULUAN
1.1 Latar Belakang Masalah
Indonesia merupakan negara yang memiliki banyak kebudayaan dan kebudayaan tersebut merupakan sebuah kekayaan yang harus dilestarikan agar bisa diwariskan ke generasi muda. Agar kebudayaan lokal ini dapat diwariskan kepada generasi muda maka dibutuhkan sebuah kemasan yang modern. Salah satu kebudayaan lokal yang diangkat dalam kemasan modern adalah komik Garudayana. Garudayana merupakan komik fiksi karya Is Yuniarto yang memiliki konsep menceritakan cerita pewayangan khususnya Mahabarata dengan gaya yang lebih modern. Gaya modern yang dimaksud adalah gaya gambar dan gaya penceritaan yang mengadaptasi gaya populer saat ini yaitu gaya komik Jepang. Komik ini bercerita tentang petualangan Kinara, seorang pemburu harta karun yang secara tidak sengaja menemukan telur emas Garuda. Meskipun mengadaptasi cerita Mahabarata, Is Yuniarto memberi bumbu orisinal dalam cerita Garudayana, contohnya penambahan karakter ORISINAL seperti Kinara, mengganti beberapa kesaktian tokoh dari versi aslinya ke versi Garudayana agar pembaca-pembaca muda saat ini dapat menerima dengan mudah cerita yang memiliki unsur Mahabarata ini. Garudayana berhasil terjual sebanyak 10000 eksemplar1. Selain itu Garudayana telah berhasil banyak meraih penghargaan diantaranya adalah Indigo Fellowship Award 2012 untuk kategori Comic dan Social Games, Lollipop Award 2010 kategori Komik Indonesia Favorit pilihan pembaca XY Kids dan Lollipop Award 2011 kategori Komik Indonesia Favorit pilihan pembaca XY Kids2.
Awalnya
volume
1
sampai
4
dari
komik
Garudayana diterbitkan oleh penerbitan Koloni. Sejak 2009 hingga tahun 2010, Garudayana berhasil terjual sebanyak 10000 eksemplar. Pada tahun 2013, Garudayana berpindah penerbit dari penerbit Koloni ke penerbit Curhat Anak Bangsa dan mengalami remaster dengan judul baru yaitu Garudayana Saga. Edisi remaster ini tidak melanjutkan dari volume komik 1 2
Depth Interview dengan Is Yuniarto pengarang Garudayana Saga, 14 September 2013 http://komik-indonesia.blogspot.com/2011/12/garudayana-kembali-mendapat-penghargaan.html
1
2
Garudayana yang sudah terbit sebelumnya secara langsung, tetapi Garudayana Saga ini merupakan perbaikan ulang dari sebelumnya dengan menambah beberapa hal baru seperti penambahan halaman berwarna, penampilan karakter baru, pengaturan dan penambahan adegan. Saat ini jumlah penjualan Garudayana Saga telah mencapai 50% dari seluruh eksemplar yang sudah dicetak. Tak hanya berhenti di komik, Garudayana sudah merambah ke berbagai media lain seperti animasi 2D karya Mata Wayang Studio, animasi 3D karya Manimonki Studio dan juga mainan chibi figure dari karakter Garudayana. Dengan adanya fenomena kesuksesan Garudayana di masyarakat dan telah diangkatnya Garudayana ke berbagai macam media, maka bisa dikatakan Garudayana memiliki potensi untuk diangkat ke media lain. Pengembangan sebuah properti intelektual dari sebuah media ke media lain dapat menciptakan cross-selling
antar
media.
Bagi
Is
Yuniarto
sendiri
dengan
adanya
pengembangan Garudayana Saga ke media yang baru, hal ini maka berpotensi untuk menjaring fans baru untuk komiknya dan tetap mempertahankan fans lama bagi komiknya. Dari sekian banyaknya pilihan media yang dapat dimanfaatkan, Is Yuniarto mengatakan bahwa ia tertarik dengan media game mobile. Saat ini di Indonesia, industri game development sedang mengalami perkembangan yang pesat. Game development sendiri saat ini sudah terdaftar dalam salah satu dari 15 sub-kategori ekonomi kreatif di Indonesia. Selain itu berkembangnya industri game development dapat dilihat dari banyaknya developer game di Indonesia yang mulai bermunculan. Gamedevid.org, sebuah forum game development Indonesia, tercatat telah memiliki anggota sebanyak 8968 anggota3. Selain itu, tercatat pula 66 studio game development yang aktif di Indonesia 4 . Tidak hanya studio game development lokal saja yang mulai bermunculan, studio game internasional juga sudah membuka cabangnya di Indonesia, seperti Gameloft dan Square Enix Smileworks. Industri game di Indonesia juga memiliki potensi SDM yang luar biasa, hal ini dibuktikan dengan prestasi Solite Studio asal Madura yang berhasil menyabet juara kedua kategori game dalam kompetisi dunia Imagine Cup 2013 yang diadakan oleh Microsoft. Selain memiliki SDM yang memadai, Indonesia juga memiliki potensi pasar yang amat besar. Berdasarkan data dari Ideosource, pada tahun 2011, 3 4
http://forum.gamedevid.org/index.php https://bit.ly/gamedevDB
3
pertumbuhan pengguna handphone di Indonesia mencapai angka 50 % 5 . Indonesia merupakan salah satu negara tertinggi kedua dalam pertumbuhan pendapatan untuk game platform iOS dan Indonesia juga merupakan negara tertinggi pertama dalam pertumbuhan download konten digital untuk platform Android dan iOS di seluruh dunia. Fenomena ini dikemukakan oleh App Annie, perusahaan apps analytics terbesar di Dunia, dalam presentasinya di event Casual Connect Seattle tahun 20126.
Gambar 1.1 Pertumbuhan Pendapatan untuk Games di Seluruh Dunia (sumber :
http://www.slideshare.net/AppAnnie/casual-connect-2012-app-store-economy)
Gambar 1.2 Pertumbuhan Jumlah Download untuk Games di Seluruh Dunia (sumber : ttp://www.slideshare.net/AppAnnie/casual-connect-2012-app-store-economy) 5
http://www.slideshare.net/andisboediman/indonesia-digital-landscape-study-2012-byideosource?from_search=11 6 http://www.slideshare.net/AppAnnie/casual-connect-2012-app-store-economy
4
Selain itu, data dari AppAnnie.com juga menunjukkan bahwa apps jenis game merupakan jenis apps yang masuk dalam kategori 10 besar apps terbaik yang di-download oleh masyarakat pengguna handphone Indonesia.
Gambar 1.3 Daftar 10 aplikasi terbaik pada platform iOS yang didownload oleh Masyarakat Indonesia (sumber : (http://www.appannie.com/top/iphone/indonesia/overall/)
Dari data-data yang ada, dapat disimpulkan bahwa Indonesia merupakan negara yang memiliki potensi pasar terhadap konsumsi konten digital, khususnya game, yang cukup menjanjikan. Dengan perkembangan dunia game development ke arah yang positif baik dari segi SDM hingga potensi pasar yang menjanjikan, maka hal ini tentu memberikan sebuah peluang yang baik bagi Is Yuniarto untuk mengangkat Garudayana Saga ke media lain yaitu game mobile. Konten game mobile dari Garudayana Saga ini nantinya tidak hanya sekedar menampilkan konten yang sudah ada di komik, namun game ini juga akan menampilkan sisi lain dari cerita Garudayana Saga yang tidak ada pada komiknya yaitu tentang perjalanan hidup Gatotkaca, bermula ketika Gatotkaca masih muda sebelum menjadi seperti apa yang diceritakan di komik Garudayana Saga saat ini. Game ini nantinya akan diberi judul Garudayana Saga : Ashura Hunter. Proyek game Garudayana Saga :
5
Ashura Hunter ini merupakan proyek game kerjasama antara Is Yuniarto dengan Mojiken Studio selaku developer dari game. Dalam pengembangan sebuah game ada 3 komponen visual yang membentuk sebuah game itu sendiri, yaitu, karakter, environment, dan UI ( User Interface ). UI memiliki peranan yang sangat penting dalam game. Menurut Jeannie Novak7, menghubungkan antara game dengan pemain. User interface membuat sebuah game dapat dimainkan oleh pemain daan juga banyak sekalai elemen game seperti tugas pemain, pilihan pemain dan kebutuhan yan harus ditampilkan melalui desain interface. Dalam hal ini dapat dianalogikan bahwa game adalah sebuah mesin yang memerlukan sebuah perangkat yaitu UI agar pengguna dapat mengoperasikan game tersebut dengan baik dan dapat mengeksplor pengalaman bermain di dalamnya. Pada dasarnya game adalah sebuah permainan interaktif yang menawarkan sebuah pengalaman bermain yang unik kepada pemainnya. Pengalaman bermain ini biasanya bertujuan memposisikan pemain dengan karakter atau profesi tertentu, di latar tertentu, ditambah tujuan dan cerita tertentu secara imajiner. Apabila tidak ada alat yang membantu interaksi antara pengguna dengan game tersebut maka dapat disimpulkan bahwa nantinya pengguna sendiripun tidak akan dapat merasakan pengalaman bermain game yang maksimal. Oleh karena itu diperlukan sebuah UI
beserta
hirarki
yang
terdesain
dengan
baik
agar
pemain
dapat
mengoperasikan game, memahami mekanik dan pengalaman bermain yang ditawarkan. Dalam sebuah blog yang ditulis oleh Lawrence Eng8, seorang pengamat game, mengemukakan sebuah contoh kasus dimana desain UI yang tidak baik berdampak buruk pada pengalaman pemain memainkan game. Contoh kasus di sini membahas game Mario vs. Donkey Kong : Minis March Again!. Saat putra dari Lawrence Eng memainkan game tersebut, si putra secara tidak sengaja menekan tombol erase data ( menghapus data permainan ) karena tombol tersebut sangat berdekatan dengan tombol untuk memulai permainan.
7
Novak, Jeannie, Game Development Essentials : An Introduction, Third Edition, Delmar, Cengage Learning, 2012 8 http://www.lainspotting.com/2010/09/bad-ui-makes-my-kid-cry.html
6
Gambar 1.4 Tampilan menu utama dalam game Mario vs. Donkey Kong : Minis March Again! dimana UI tombol Main Game dan Erase Data
Setelah itu muncul jendela konfirmasi yang menanyakan tentang kepastian pemain untuk menghapus data tersebut dengan pilihan tombol ikon grafis
berwarna
merah
dan
hijau
dimana
merah
untuk
membatalkan
penghapusan dan hijau melaksanakan penghapusan. Akhirnya si anak memilih tombol hijau karena warna hijau yang dirasa lebih aman dan ternyata hal tersebut menghapus file permainan yang ada karena ketidaksengajaan. Dari sini dapat disimpulkan bahwa tata letak UI dan penggunaan ikon grafis yang digunakan dalam UI memiliki peran yang besar bagi kenyamanan pemain dalam memainkan sebuah game.
Gambar 1.5 Tampilan jenela konfirmasi dalam game Mario vs. Donkey Kong : Minis March Again! dimana ikon grafis merah dan hijau memiliki analogi yang kurang jelas
7
Secara visual, UI juga harus memiliki tampilan yang baik. Menurut Adhicipta R. Wirawan, CEO dari Mechanimotion yang sukses lewat karyanya yang berjudul The Adventures of Wanara, tampilan visual UI yang sesuai dengan tema dari game akan semakin memperkuat suasana game itu sendiri dan juga memberikan pengalaman yang lebih representatif dalam mengoperasikan game dan apabila game UI dalam game dihilangkan maka pemain akan kehilangan banyak informasi tentang apa yang terjadi dalam game9. Oleh karena itu desain visual dari UI yang baik sangat dibutuhkan dalam proses pengembangan sebuah game. Sebuah game berjudul Wildstar yang dikembangkan oleh Carbine melakukan perombakan UI secara signifikan untuk meningkatkan pengalaman bermain bagi pemain game-nya. Menurut pernyataan Rob Martin, desainer UI senior Carbine, perombakan tersebut dilakukan untuk memperbaiki UI yang mendapat berbagai feedback oleh pemain di forum Wildstar10. Dengan adanya perombakan UI tersebut maka pemain dapat lebih fokus terhadap permainan dan dapat mengambil keputusan interaksi yang lebih baik.
Gambar 1.6 Perbandingan antara UI game Wildstar lama (kiri) dan UI yang baru (kanan) setelah menerima berbagai macam feedback dari pemainpada forum.
9
Depth Interview dengan Adchipta R. Wirawan, CEO Mechanimotion Entertainment, 1 Oktober 2013, pukul 15.00 WIB 10 http://wildstar.mmorpg-life.com/news/wildstar-user-interface-improvements-explained/
8
Pada tahun 2011 sebuah game berjudul Phantom Imperial yang dikembangkan oleh Elventales Studio harus mengalami perpanjangan waktu pengembangan game karena banyak elemen - elemen UI yang kurang baik dan menimbulkan kebingungan bagi pemain saat prototype-nya dimainkan. Sehingga perbaikan UI - pun dilakukan.
Gambar 1.7 Perbandingan antara UI game Phantom Imperial lama (kiri) dan UI yang baru (kanan).
Dalam
game
Garudayana
Saga
:
Ashura
Hunter,
yang
akan
dikembangkan nanti, UI sendiri juga memiliki peranan yang sangat penting yaitu agar pemain dapat berinteraksi secara maksimal dengan game dari awal mulai permainan hingga akhir. Selain itu tampilan visual dari UI juga merupaka salah satu aspek yang harus diperhatikan. Tampilan visual UI yang sesuai dengan cita rasa Garudayana Saga yaitu mengangkat unsur fantasi dengan menggabungkan sisi etnis akan semakin memperkuat suasana game dan memperkuat pengalaman bermain game.
1.2 Identifikasi Masalah 1. Garudayana membutuhkan media baru untuk menjaring fans baru pasca perpindahan penerbit dan media game merupakan media yang memiliki potensi untuk dikembangkan karena industri game sedang berkembang. 2. Game mobile Garudayana Saga : Ashura Hunter membutuhkan UI yang dapat digunakan dengan nyaman dan merepresentasikan dunia Garudayana secara visual.
9
1.3 Batasan Masalah 1. Perancangan tidak mencakup penjualan atau pemasaran. 2. Riset tugas akhir ini hanya akan membahas proses perancangan UI game Garudayana Saga : Ashura Hunter untuk platform mobile. 3. Cerita dari game yang diangkat berfokus masa lalu Gatotkaca. 4. Perancangan UI akan menyesuaikan dengan waktu perancangan. 5. Game design, programming, dan musik ditangani oleh Mojiken Studio.
1.4 Rumusan Masalah "Bagaimana merancang UI untuk game mobile Garudayana Saga : Gatotkaca Origins yang dapat digunakan dengan nyaman dan merepresentasikan dunia Garudayana secara visual ? "
1.5 Tujuan Penelitian Dengan adanya hirarki dan konsep visual terhadap UI yang baik dan representatif maka pemain diharapkan dapat mengeksplorasi seluruh mekanik dan pengalaman bermain yang ditawarkan dari awal permainan hingga akhir permainan.
1.6 Manfaat Penelitian - Manfaat Teoritis
Hasil penelitian dari perancangan UI dari game Garudayana Saga : Gatotkaca Origins, dapat menjadi acuan bagi pengembangan desain UI untuk produk sejenis, khususnya game.
Hasil penelitian diharapkan dapat memberikan sebuah kontribusi bagi perkembangan ilmu desain komunikasi visual, khususnyan ilmu desain UI.
- Manfaat Praktis
Manfaat dari perancangan UI dari game Garudayana Saga : Gatotkaca Origins, adalah membantu pemain berinteraksi dengan game secara maksimal lewat platform mobile.
Dengan adanya media baru yang memiliki komponen yang representatif, dalam hal ini adalah UI dalam game, diharapkan media baru ini dapat membuat pemain lebih mengenal Garudayana.
10
1.7 Ruang Lingkup Penelitian 1.7.1 Ruang Lingkup Studi - Studi Eksisting Meliputi studi perbandingan dengan UI game yang sudah ada baik dari game kompetitor maupun game komparator - Studi Literatur Meliputi
pencarian
data
mengenai
referensi
visual
kisah
pewayangan dan kebudayaan Indonesia yang dapat diaplikasikan dalam perancangan - Studi Desain UI Meliputi pencarian data, referensi visual, landasan teori dan teknik yang digunakan dalam perancangan UI dalam sebuah game pada platform mobile
1.7.2 Ruang Lingkup Output Penelitian terfokus pada perancangan UI yang akan digunakan dalam keseluruhan game Garudayana Saga : gatotkaca Origins
1.8 Sistematika Penulisan Penyusunan laporan berdasarkan sistematika yang mengaah kepada konsep dasar, dengan penjelasan sebagai berikut
BAB I. PENDAHULUAN Membahas mengenai latar belakang pentingnya perancangan UI pada game Garudayana Saga : Ashura Hunter untuk platform mobile, identifikasi masalah, ruang lingkup, tujuan, dan manfaat penelitian yang dilakukan dalam perancangan.
BAB II. TINJAUAN PUSTAKA Membahas mengenai landasan teori dan eksisting tentang UI, membahas pendalaman komunikasi dalam UI. Menelii asek-aspek penting perancangan UI seperti studi hirarki, visual, komposisi dan jenis-jenis UI
11
BAB III. METODE PENELITIAN Menguraikan definisi judul yang diambil, teknik sampling, jumlah dan sampel yg diambil, jenis dan sumber data, dan juga metode penelitian yang dipilih untuk digunakan.
BAB IV. KONSEP DESAIN Merupakan konsep yang menjadi acuan setiap output desain secara menyeluruh, termasuk pendkatan dan strategi yang diterapkan dalam menyusun perancangan desain UI dari game Garudayana Saga : Ashura Hunter.
BAB V. IMPLEMENTASI DESAIN Menguraikan implementasi yang langsung diterapkan pada desain UI dari game Garudayana Saga : Ashura Hunter berdasarkan kriteria yang sudah ditentukan, agar produk mampu menyelesaikan masalah yang ada.
BAB VI. KESIMPULAN DAN SARAN Menguraikan apa hasil yang diperoleh setelah melakukan proses perancangan UI game Garudayana Saga : Ashura Hunter ini.
BAB II STUDI PUSTAKA
2.1 Landasan Teori 2.1.1 Mobile Game 2.1.1.1 Definisi Game Game, apabila diterjemahkan dalam bahasa Indonesia berarti permainan. Menurut Ernest Adams 11 , game berarti sebuah jenis aktivitas bermain yang dilakukan dalam konteks realitas berpura-pura yang mana para partisipan mencoba mencapai setidaknya sebuah gol arbiter dengan cara berakting sesuai peraturan.
Pada
dasarnya
game
mengajak
para
partisipannya
untuk
mensimulasikan sebuah kejadian atau peristiwa yang telah disepakati untuk tujuan hiburan. Pemain game selalu memiliki ekspektasi bahwa game dapat menjadi sebuah sarana hiburan yang dapat pengalih perhatian dan perusahaan perusahaan game besar telah melakukan berbagai macam penelitian untuk memahami apa yang diamksud dengan menyenangkan oleh pemain game12. 2.1.1.2 Definisi Mobile Game Mobile game merupakan game yang dimainkan melalui platform mobile seperti handphone, PDA, dan tablet. Hal unik yang dapat diamati dari mobile games adalah layar output dari mobile games relatif berukuran kecil, input yang berbeda dari video game di platform lainnya, sistem operasi yang berbeda, kapasitas hardware yang lebih rendah dan ketajaman warna yang berbeda. sehingga dibutuhkan sebuah solusi desain user interface yang baik13.
11
Adams, Ernest, Fundamentals of Game Design, New Riders, 2010 Feil, John Harold, Scattergood, Marc, Beginning Game Level Design, Cengage Learning PTR, 2005 13 Ibid, Fundamentals of Game Design 12
12
13
2.1.1.3 Komponen Dalam Game 1. Karakter14 Dalam menciptakan sebuah game yang memilki sebuah cerita, game tersebut juga harus memiliki karakter yang menarik dan dapat dikenang agar pemain dapat merasakan sisi emosional dan pengalaman bermain yang baik dalam bermain game. Dalam game karakter yang ditampilkan dan dikendalikan oleh pemain disebut avatar. 2. Dunia15 Dunia dalam game adalah latar belakang dari game dan mendefinisikannya akan menjadi tugas yang besar. Apabila dunia dalam game berdasarkan dunia nyata ( seperti game simulasi penerbangan, atau yang lainnya ), maka tim pengembang game dapat menggunakan fotografi dan peta dunia nyata untuk membuat penampakannya. Tetapi apabila game tersebut berlatar fantasi maka tim pengembang game harus
mengandalkan
imajinasi
mereka.
Dan
dalam
menentukan
bagaimana isi dan kesan yang ada dalam dunia fantasi tersebut merupakan salah satu kunci dari tugas mendesain dunia. Ada beberapa dimensi dalam dunia dalam game yaitu : fisik, waktu, lingkungan, emosional, dan keetisan 3. Mekanik Inti Menurut Ernest Adams, mekanik inti adalah jantung dari game yang nantinya akan membenuk gameplay. Mekanik inti mendefinisikan tantangan yang ditawarkan oleh game dan aksi yang dapat dilakukan pemain atau pengguna untuk menyelesaikan tantangan tersebut. Mekanik inti juga menentukan dampak dari aksi yang dilakukan pengguna dengan lingkungan atau dunia dalam game. Mekanik inti menentukan
14 15
Schell, Jesse, The Art of Game Design, Morgan Kauffman, 2008 Ibid, Fundamentals of Game Design
14
kondisi yang harus dicapai untuk menuju gol dari game dan konsekuensi apa yang didapat dari kekalahan dan kemenangan pemain16. 4. User Interface User Interface ( UI ) adalah sebuah tampilan yang membantu user, pengguna yang menggunakan sebuah alat, untuk dapat berinteraksi dengan mesin untuk mencapai sebuah maksud atau gol tertentu 17 . Dalam game, UI ditampilkan dalam bentuk HUD ( Head-Up Display ) saat permainan dan biasanya berisi informasi - informasi teknis mengenai kondisi pemain saat ini. Menu - menu dalam game juga termasuk UI. 2.1.2 Graphic User Interface 2.1.2.1 Graphic User Interface dalam Game User Interface adalah sebuah tampilan yang membantu user, pengguna yang menggunakan sebuah alat, untuk dapat berinteraksi dengan mesin untuk mencapai sebuah maksud atau gol tertentu. Tanpa user interface maka sebuah benda ataupun mesin tidak akan dapat dioperasikan untuk melakukan tugasnya dengan kata lain mesin akan menjadi mati dan tidak berguna. User interface ini ada dalam dua macam bentuk yaitu fisik dan visual atau grafis18. Interface dalam bentuk fisik adalah interface yang biasa kita jumpai dalam hardware, seperti tombol menghidupkan, memindahkan channel, mengatur volume dalam televisi. Sedangkan user interface dalam bentuk visual, adalah user interface yang dapat dijumpai dalam tampilan layar penampil. Pada dasarnya, antara pemain dan video game yang dimainkan terdapat sebuah hubungan imajiner. Hubungan imajiner yang dimaksud adalah immersion, dimana pemain dapat merasakan apa yang ada di dalam game dan pemain sendiri merasa ada dalam game tersebut secara indrawi dan nantinya hubungan ini akan menghasilkan pengalaman bermain. Agar hubungan antar pemain dan video game dapat terjalin maka dibutuhkan sebuah interaksi berikut cara 16
Ibid, Fundamentals of Game Design Ibid, Game Development Essentials : An Introduction, Third Edition 18 Ibid, Game Development Essentials : An Introduction, Third Edition 17
15
berinteraksinya. Dalam hal ini user Interface ini merupakan sebuah petunjuk bagi pemain yang menuntun dan memberitahukan pemain bagaimana cara mengeksplorasi dunia dari sebuah game, baik cara untuk berinteraksi, menginformasikan tujuan game, kondisi
dalam game dan juga agar pemain
merasakan pengalaman bermain secara maksimal dari awal hingga akhir. User interface bertugas untuk memberikan pemain input yang nantinya akan diproses dan akan menghasilkan sebuah output yang ditampilkan pada layar game sesuai dengan perintah pada input. Dengan adanya user interface yang baik pemain dapat membuat sebuah keputusan secara cepat tentang apa yang ingin dilakukannya dalam game. Jesse Schell dalam bukunya the Art of Game Design19 membuat sebuah bagan tentang logika interaksi antara pemain, user interface dan game itu sendiri :
Gambar 2.1 Bagan hubungan interaksi antara pemain, interface, dan dunia dalam game
Dalam Bagan terebut Schell menampilkan gambar panah beserta nomornya yang mengindikasikan beberapa interaksi yang terjadi melalui berbagai macam contoh: 1. Input Fisik -> Dunia Game : Contohnya, apabila pemain menekan sebuah tombol yang ada pada input maka karakter dalam game akan bergerak sesuai dengan
19
Ibid, The Art of Game Design
16
2. Dunia Game -> Output Fisik : Contohnya, seberapa besar luas area yang dapat pemain lihat di dunia dalam game ? 3. Input Fisik -> Virtual Interface : Contohnya, apabila pemain menggerakkan kursor untuk menggunakan sebuah interface dalam game , perubahan apa yang terjadi pada game ? 4. Virtual Interface -> Dunia Game : Contohnya, apabila data pada user interface menunjukkan bahwa pemain dalam kondisi kritis, dampak apa yang dapat ditimbulkan dalam permainan ? 5. Dunia Game -> Virtual Interface : Contohnya, apabila kondisi kesehatan pemain dalam keadaan kritis, bagaimana user interface menampilkan hal ini ? 6. Virtual Interface -> Output Fisik : Contohnya, bagaimana data kondisi pemain
disajikan,
menggunakan
bentuk
seperti
apa
?
bagaimana
grafisnya ? menggunakan tabel kah atau yang lain ?
2.1.2.2 Hubungan antara User Interface dengan Fitur dalam Game20 1. Hubungan dengan Gameplay Hubungan
antara
interface
pemain
dan
gameplay
sumber
dari
interaktivitas permainan. Dengan adanya interface pemain dapat memahami tentang jalan mana yang harus dilalui oleh pemain, emana pemain harus pergi, apa tujuan permainan, bagaimana konsisi permainan saat ini, dan bagaimana cara bermain. 2. Hubungan dengan Cerita Interface dari game haruslah merepresentasikan cerita dari permainan. Elemen - elemen cerita seperti latar, mood, periode waktu, lingkungan dan kebudayaan yang dalam game harus bisa direpresentasikan oleh gaya visual yang diterapkan oleh user interface. Dengan melakukan pengaplikasian gaya 20
Ibid, Game Development Essentials : An Introduction, Third Edition
17
visual yang sesuai dengan elemen cerita dalam game pemain akan dapat merasa lebih terlibat dalam dunia dalam game sehingga hal tersebut akan menambah pengalaman bermain yang lebih baik. 3. Hubungan dengan Karakter Interface juga memiliki hubungan dengan karakter, apabila pemain memiliki karakter dengan keahlian yang khusus dan membutuhkan penyajian informasi dan pengendalian yang spesifik maka interface harus bisa mewakili kemampuan tersebut dan membantu pemain memanfaatkan karakter tersebut. 4. Hubungan dengan Audio Interface tidak hanya memanfaatkan sesuatu yang berhubungan dengan grafis saja, suara sebenarnya juga termasuk didalamnya. Suara dapat menjadi penanda adanya perubahan dalam game, misalnya saat kita menekan tombol tertentu maka akan ada suara yang menandakan suksesnya interaksi yang dilakukan dan apabila pemain berada dalam kondisi kritis pemain juga dapat mengetahui kondisinya dari suara yang ia dengarkan. Penggunaan suara yang sesuai dengan tema dunia dalam game juga dapat memperkuat suasana dan ketrlibatan pemain di dunia dalam game. 5. Hubungan dengan Lingkungan dalam Game Beberapa game memili banyak mode permainan dan juga menu yang meiliki fungsi yang berbeda - beda karena perubahan mode tersebut. Interface dapa sewaktu - waktu berubah untuk menyesuaikan pemain dengan mode tersebut. 2.1.3 Prinsip Desain User Interface 2.1.3.1 Prinsip User Interface dalam Game 1. Konsisten Konsistensi mencakup kedua hal yatu estetika dan fungsional, game yang pengembang buat haruslah memiliki gaya visual dan operasional yang konsisten. Apabila kita menawarkan aksi yang sama dalam beberapa mode
18
permainan yang berbeda-beda, maka sebaiknya aksi tersebut berada pada tombol atau alat kendali yang sama atau dalam pilihan menu di setiap modenya. Nama yang muncul pada setiap objek
seperti indikator, menu dan sudut
pandang utama harus memiliki lokasi yang identik. Penggunaan warna, kapital, typeface dan layout harus konsisten di setiap wilayah permainan. 2. Umpan Balik yang Baik Ketika pemain berinteraksi dengan game, pemain memiliki ekspektasi bahwa
game
tersebut
akan
bereaksi
setidaknya
dengan
beberapa
pemberitahuan secara cepat. Ketika pemain menekan tombol apapun, maka game haruslah mengeluarkan respon yang dapat dilihat . 3. Pusatkan Pemain sebagai Pengendali Berikan kebebasan kepada pemain untuk mengendalikan seluruh isi permainan,
setidaknya
pemain
dapat
sebebas-bebasnya
mengendalikan
karakter atau kursor utama. Jangan paksa pemain untuk melakukan hal yang tidak ia inginkan. Interface dalam game sedikit berbeda dengan interface dalam aplikasi. Aplikasi pada umumnya adalah sebuah perangkat yang akan memproses setiap masukan dari pengguna dan menampilkan hasilnya, prosespun dilakukan secara terperinci. Dalam game tidak semua informasi tentang apa yang terjadi diberitahukan kepada pemain dan pemain sendiri tidak memilki kuasa penuh untuk mengendalikan segala sesuatu yang ada dalam game, ada beberapa batasan seperti pemain hanya dapat mengendalikan kursor navigasi dan avatar yang dikendalikan. Tetapi batasan-batasan tersebut justru menciptakan sebuah sistem permainan yang akan membuat pemain berinteraksi sesuai peraturan yang ada sehingga pemain akan mendapatkan pengalaman bermain21. 4. Buat Shortcut untuk Pemain yang Berpengalaman Pemain yang telah terbiasa memainkan sebuah game, biasanya tidak ingin mengulangi informasi yang sudah ia ketahui, oleh karena itu agar game
21
Ibid, Game Development Essentials : An Introduction, Third Edition
19
dapat diakses dengan lebih cepat dibutuhkan shortcut atau jalur cepat agar pemain dapat secara cepat menikmati permainan. 5. Permudah Pembalikan Aksi Apabila pemain membuat sebuah kesalahan dalam mengakses fitur permainan maka sebaiknya pemain diberi kesempatan untuk melakukan pembalikan ke aksi sebelum ia berbuat kesalahan. Dengan adanya pembalikan, pemain dapat merasakan perasaan aman dan keinginan untuk mengeksplorasi permainan dalam bermain. 6. Batasi Jumlah Tombol atau Interaksi yang Dilakukan Video game sering kali menyebabkan kelelahan pada jari, dan sayangnya, cedera repetitif yang disebabkan oleh tangan yang digunakan secara berlebihan dapat membuat pemain sangat lelah. Gunakan aksi yang umum dan berkala pada tombol controller yang dapat dengan mudah diakses. Tidak hanya untuk mengurangi kemungkinan luka pada pemain tetapi juga akan membuat pemain berah dan menikmati permainan. 7. Tekan Penggunaan Jumlah Memori Jangka Pendek Pemain Pada dasarnya UI berfungsi untuk membuat pemakaian sebuah game ataupun aplikasi menjadi lebih nyaman dan dapat dikendalikan. Melakukan pengaturan halaman dan pengelompokan informasi yang sistematis dan mudah diingat akan membantu meningkatkan mutu sebuah kenyamanan UI tersebut. Apabila sebuah UI memaksakan pemain untuk mengingat sejumlah informasi dalam satu tempat secara bersamaan, pemain akan mengalami stress dan sulit untuk menghapalkan fitur - fitur dalam permainan, malah nantinya hal tersebut akan mengurangi nila dari game. Dengan membuat menu yang efektif makan pemain akan dapat dengan mudah mengingat fitur - fitur dalam game, di mana posisi pemain saat ini dan bagaimana pemain dapat pergi dari menu satu ke menu lainnya untuk menyelesaikan sebuah tugas. 8. Kelompokkan Informasi Pengelompokan informasi bertujuan merancang sebuah arsitektur dasar dari informasi yang akan ditampilkan. Sekumpulan informasi ini akan
20
dikelompokkan dan diurutkan berdasarkan bagaimana sebuah tugas dan fitur dalam game akan dikerjakan. Dengan melakukan pengelompokan maka pemain akan lebih mudah untuk mendalami seluruh nilai guna dalam game. 9. Desain Dialog untuk Menciptakan Closure22 Desain sebuah dialog khusus agar pemain dapat mengetahui apabila ia telah menyelesaikan sebuah aksi. 10. Berikan Nilai Immersive Immersive adalah sebuah kondisi dimana seorang user memusatkan seluruh kesadaran dan inderanya dalam keadaan fokus sehingga dirinya menjadi "hilang" di dunia nyata. Kondisi immersive, mengakibatkan perasaan senang dan kepuasan (Lidwell,et al. 2003). Dalam game pemain diberikan sejumlah tugas yang haris diselesaikan dengan melakukan bernagai macam aktivitas dan pemain diberikan sebuah alat kendali untuk mengendalikan avatar dirinya yang berada dalam sebuah lingkungan artifisial dalam game. Saat pemain benar benar merasa terlibat dalam game tersebut maka sebenarnya pemain sendiri merasakan kondisi immersive. UI yang baik dapat mempermudah pemain berinteraksi dengan game sehingga pemain akan merasakan kondisi immersive. 2.1.4 Elemen User Interface 2.1.4.1 Usability Usability adalah atribut kualitas tentang seberapa mudah sebuah user interface digunakan. Istilah usability juga merujuk pada metode untuk memperbaiki dan meningkatkan kemudahan pemakaian. Shackel (1991) 23 mendefinisikan usability adalah " sebuah kapabilitas yang akan digunakan oleh manusia secara mudah dan efektif, yang mana,
22
Saini, Reena, Graphical User Interface Design Essentials & Process, International Journal of Advanced Research in Computer Science and Software Engineering, 2013 23 Galitz, Wilbert O. The Essential Guide to User Interface Design An Introduction to GUI Design Principles and Techniques, 3rd Edition. 2007
21
kemudahan diukur hingga mencapai tataran subyektivitas dan keefektivitasan diukur berdasarkan performa manusia (pengguna). Nielsen (2003)24 berpendapat usability harus memiliki 5 komponen yaitu : 1. Learnability : Seberapa mudah pengguna menyelesaikan tugas - tugas dasar saat pertama kali ia menghadapi sebuah desain ? 2. Efficiency : Setelah pengguna mempelajari desain yang disajikan, seberapa cepat ia dapat menyelesaikan tugas ? 1. 3.Memorability : Ketika pengguna pengguna kembali menggunakan desain yang sudah lama ia tidak gunakan, seberapa mudah pengguna memahaminya kembali ? 3. Errors : Seberapa banyak error yang pengguna lakukan, seberapa berat error-nya, dan seberapa mudah mereka pulih dari error ? 4. Satisfaction : Seberapa menyenangkan desain digunakan ?
2.1.4.1.1 Problema Umum Usability Mandel (1994)25 membuat daftar tentang 10 problema umum yang sering dijumpai pada usability dalam sistem grafis berdasarkan laporan dari spesialis usability IBM. Antara lain : 1. Menu dan ikon yang ambigu 2. Bahasa yang hanya memperbolehkan perpindahan satu arah dalam sistem 3. Terbatasnya input dan direct manipulation 4. Terbatasnya highlight dan pilihan 5. Sekuens langkah yang tidak jelas 6. Lebih banyak langkah yang harus dilakukan daripada melakukan tugas 7. Hubungan yang kompleks antara dan di dalam aplikasi 8. Feedback dan konfirmasi yang tidak memadai
24
Ibid, The Essential Guide to User Interface Design An Introduction to GUI Design Principles and Techniques, 3rd Edition 25 Ibid, The Essential Guide to User Interface Design An Introduction to GUI Design Principles and Techniques, 3rd Edition
22
9. Rendahnya antisipasi dan intelegensi sistem 10. Pesan error, help, tutorial dan dokumentasi yang tidak memadai
1.
Visual
Clutter.
Merupakan
sebuah
istilah
yang
digunakan
untuk
merepresentasikan banyaknya distraksi visual pada UI. Dekorasi pada visual yang berlebihan akan menciptakan ambiguitas informasi dan elemen interface mana yang dapat 2. Keterbacaan informasi tidak tersampaikan. Sebuah iterface harsu memiliki pemamparan informasi yang jelas. Terkadang karena pemilihan font ataupun ukuran huruf ataupun elemen grafis yang kurang baik dapat membuat kebingungn bagi pengguna tentang apa yang dapat dilakukan terhadap interface. 3. Komponen yang sulit dimengerti. Terkadang terdapat elemen grafis yang memiliki makna yang tidak jelas, hal itu dapat disebabkan oleh ikon yang tidak jelas maknanya atau sebagainya. 4. Distraksi yang mengganggu. Terdapatnya distraksi pada layar dapat membuat pengguna kehilangan fokus dalam menggunakan interface, apabila pada layar terdapat banyak elemen - elemen menganggu seperti adanya animasi yang terus mengganggu maka sebaiknya hal tersebut dikurangi agar peengguna dapat dengan mudah menemukan hal yang dia inginkan pada interface. 5. Navigasi yang membingungkan. Terkadang terdapat hirarki menu yang sulit untuk dihafalkan ataupun sulit untuk menuju ke menu lain. Hirarki - hirarki yang membingungkan dapat membuat pemain kehilangan posisi dimana ia saat ini. 6. Navigasi yang tidak efektif. Terkadang ada sebuah interface yang mengharuskan pengguna untuk menggerakkan kursornya ke tempat yang sulit dijangkau atau jauh dan membuat pengguna kesulitan menemukan fungsi yang ia inginkan. Hal ini sebaiknya dihindari karena kefektifan navigasi adalah salah satu kelebihan pada interface yang baik 7. Pengoperasian yang tidak efektif. Sebuah halaman yang memilki grafis beukuran besar, banyak warna akan membuat performa perangkat melambat.
23
8. Scrolling halaman yang tidak efektif. Terkadang terdapat sebuah halaman menu yang memiliki halaman yang sangat panjang. Halaman yang terlalu panjang dapat membuat pengguna kesulitan mencari informasi dan bisa membuatnya terlewat dalam mencari informasi. 9. Penuhnya informasi. Pengorganisasian informasi yang tidak tertata, baik secara layout maupun hirarki akan menyebabkan pengguna kenbingungan untuk menemukan informais apa yang ia inginkan. 10. Inkosistensi desain. Eksekusi desain yang memiliki ketidakkonsistenan membuat pengguna harus mempelajari terus - menerus menu sehingga akan menambah waktu belajar UI bagi pengguna. 2.1.4.2 Ikon Ikon adalah tanda yang mirip dengan objek yang diwakilinya. Dapat pula dikatakan, ikon adalah tanda yang memiliki ciri - ciri yang sama dengan apa yang dimaksudkan. Contohnya, foto Sri Sultan Hamengkubuwono X sebagai Raja Keraton Ngayogyakarta Hadinigrat adalah ikon Sultan. Peta Yogyakarta adalah ikon dari wilayah Yogyakarta yang digambarkan dalam peta tersebut. Cap jempol Sultan adalah ikon dari ibu jari Sultan26 Menurut Wilbert O. Galitz 27 , ikon adalah gambar piktorial yang biasa digunakan untuk merepresentasikan obyek dan aksi yang dapat dimanipulasi atau berinteraksi dengan pengguna. Kegunaan lain dari ikon adalah untuk memperkuat penyampaian informasi yang penting, seperti ikon warning dalam sebuah kotak pesan dialog. Rogers (1989) mengemukakan definisi yang lebih luas tentang macam macam ikon :
26 27
Resemblance : Sebuah gambar yang terlihat sebagaimana maknanya
Symbolic : Sebuah gambar abstrak yang merepresentasikan sesuatu
Tinarbuko, Sumbo, Semiotika Komunikasi Visual,2009
Ibid, The Essential Guide to User Interface Design An Introduction to GUI Design Principles and Techniques, 3rd Edition
24
Exemplar : Sebuah gambar yang mengilustrasikan sebuah contoh atau karakteristik dari sesuatu
Arbitrary : Sebuah gambar yang penampakannya sepenuhnya arbitrer yang mana maknanya harus dipahami
Analogi
:
Sebuah
gambar
yang
secara
fisik
atau
semantik
terasosiasikan dengan sesuatu
2.1.4.2.1 Hubungan Ikon dengan Usability 1. Familiarity ( Kefamiliaran) Ikon yang dapat dipahami dengan baik adalah ikon yang memiliki kemiripian dengan objek lain. Apabila ikon tidak memiliki kemiripan dengan objek lain maka pengguna akan kesulitan memahami makna ikon tersebut. 2. Clarity ( Kejelasan ) Dalam berbagai macam kondisi resolusi layar, kejelasan visual ikon harus tetap terjaga. Begitu juga dengan kesesuaian warna background layar. 3. Simplicity ( Simplisitas ) Kerumitan visual ikon akan sangat mengganggu pengguna. Tampilan ikon sebaiknya sederhana 4. Consistency ( Konsistensi ) Ikon yang baik memiliki ciri khas yang sesuai dengan ikon lainnya 5. Directness ( Kelangsungan ) Pada umumnya ikon memiliki makna tersendiri untuk menunjukkan sebuah fungsi tertentu dan mengirim pengguna ke halaman atau tempat tertentu. 6. Efficiency ( Efisiensi ) Dalam situasi tertentu ikon dapat mempercepat interaksi pengguna dengan sistem . Terkadang pengguna lebih cepat menangkap ikon daripada harus membaca sebuah tulisan. Ikon yang secara visual sudah mewakili sebuah
25
maksud atau tulisan dapat menembah efisiensi pengguna dalam menggunakan sistem. 7. Discriminable ( Dapat Dibedakan ) Setiap ikon hendaknya dapat dibedakan antara stu dengan yang lainnya, sehingga pengguna tidak keliru dalam memaknai setiap makna ikon. 8. Context ( Konteks ) Konteks dari sebuah simbol dapat menyebabkan perubahan makna. Apabila dilihat dari sudut pandang kontekstual, ikon memiliki kemiripan dengan kata - kata 9. Expectancies ( Ekspektasi ) Sebuah ikon sebaiknya memiliki makna yang sama dengan ekspektasi pengguna. Contohnya apabila ada ikon tempat sampah maka ikon tersebut dapat dikaitkan dengan makna buang ataupun tempat pembuangan. Jangan sampai ikon tidak sesuai dengan ekspektasi pengguna. 10. Complexity of Task ( Kerumitan tehadap Fungsi ) Beberapa ikon belum tentu dapat menggantikan sebuah fungsi yang bersifat kompleks, oleh karena beberapa ikon hanya dapat digunakan untuk fungsi - fungsi yang sudah umum diketahui pengguna. 2.1.4.3 Model Navigasi Dalam desain user interface, pengguna harus mengetahui di mana ia berada sekarang, kemana setelah ini dan bagaimana cara pindah dari halaman tertentu. Seluruh informasi dan bagaimana cara pengguna berpindah dapat dikategorikan dalam navigasi28.
28
Tidwell, Jeniffer,2010, Designing Interface Second Edition, O'Reilly
26
2.1.4.3.1 Jenis - Jenis Model Navigasi Jeniffer Tidwell menjelaskan tentang beberapa jenis sistem flow chart atau yang ia sebut sebagai model navigasi ke dalam beberapa jenis sesuai dengan bentuk hubungan antar menu. Jenis - jenis tersebut antara lain : 1. Hub and Spoke Model navigasi hub & spoke sering dijumpai pada sistem operasi yang ada pada perangkat mobile. Biasanya sistem memiliki beranda utama yang akan menyambungkan pengguna ke berbagai menu atau fitur. Apabila pengguna sudah memasuki sebuah menu maka biasanya pengguna pengguna harus kembali ke beranda utama untuk menuju menu lainnya.
Gambar 2.2 Model navigasi Hub & Spoke
2. Fully Connected Model navigasi ini menawarkan pengguna untuk dapat dengan mudah pergi dari satu anak menu ke anak menu lai tetapi tetap diikat oleh satu beranda. Model navigasi seperti ini biasa digunakan pada website - website saat ini. Menu yang mengantarkan pengguna menuju anak menu tergabung dalam suatu tempat tersebdiri yang juga menghubungkan pengguna ke beranca.
27
Gambar 2.3 Model navigasi Fully Connected
3. Stepwise Stepwise merupakan model navigasi yang merujuk pada penggunaan menu yang menuntun pengguna langkah demi langkah dan menu ke menu yang sudah ditentukan dan biasanya berupa satu jalur ataupun linear. Model stepwise biasa dapat ditemukan di slideshow dan wizard yang biasa digunakan untuk menginstal software.
Gambar 2.4 Model navigasi Stepwise
4. Pyramid Piramid merupakan variasi dari model stepwise. Di sini pengguna dapatmeluncur dari menu satu ke menu lain dan pengguna dapat kembali ke beranda kapanpun ia mau. Model piramid menggunakan beranda atau main menu yang memiliki daftar dari seluruh pilihan atau submenu dalam satu tempat. Pengguna memilih opsi manapun, kemudian memasuki halaman berdasarkan opsi tersebut kemudian halaman tersebut memiliki opsi lanjut dan kembali untuk membuka keseluruhan halaman berdasarkan urutan tertentu.
28
Gambar 2.5 Model navigasi Pyramid
2.1.4.3.2 Perencanaan Model Navigasi dalam Game29 Perencanaan model navigasi bertujuan untuk merancang bagaimana sebuah menu akan digunakan dan dibuat sistematis sehingga mudah dipahami dan dioperasikan. Perencanaan ini bertujuan untuk memaparkan seluruh menu yang diutuhkan dalam game, mengetahui fitur apa saja yang ada di setiap menu, bagaimana mengakses menu - menu tersebut dan asset apa saja yang dibutuhkan
dalam
menu
tersebut,
menggunakan suara tertentu, atau
bagaiaman
eksekusinya,
apakah
menggunakan animasi tertentu. Dengan
melakukan perencanaan menu yang baik dari awal hingga akhir pemain, tim pengembang game daoat bekerja secara terorganisir dan dapat memudahkan komunikasi antar artist dalam game dengan programmernya. Dengan melakukan perencanaan UI, tim pengembang game dapat meminimalisir terjadinya kesalahan saat pengembangan karena seluruh halaman sudah dipaparkan secara keseluruhan sehingga tim pengembang dapat selalu melakukan pengecekan terhadap game. Perencanaan UI yang baik akan sangat membantu peengembangan sebuah game. Pada dasarnya dengan memaparkan semua rancangan menu dan UI kita dapat melihat keseluruhan lingkup ruang yang ada dalam game. Dengan melihat keseluruhan lingkup tersebut tim pengembang game dapat memperbaiki berbagai macam elemen dalam game seperti bagaimana user
29
Fox, Brent, 2005, Game Interface Design
29
interface-nya, bagaimana mekanik permainanannya, bagaimana suara yang akan digunakan dan sebagainya. Sistem menu yang muncul sebelum permainan dimulai biasa disebut sebagai front-end. Isitilah ini membantu membedakan menu ini dengan menu lain yang muncul ketika game dimulai dan pause menu yang muncul dalam game. Cara terbaik untuk merencanakan dan mengorganisir front-end menu adalah dengan cara mebuat flow chart atau dalam desain web biasa disebut dengan struktur menu. Hal ini akan memberi desainer kesempatan untuk mengoerganisir sebuah ide. Flow chart yang baik dapat membantu programmer untuk memulai programming meskipun dengan asset sementara sebelum asset sepenuhnya selesai. Hal terpenting dari pembuatan flow chart adalah konsistensi dan kejelasan. Fungsi utama dari membuat flow chart adalah untuk keterorganisasian. Komunikasi yang jelas dari aliran interface adalah kunci utama dari flow chart. Flow chart tidak harus sepebuhnya jadi, yang jelas, flow chart menampung aliran dari halaman satu ke halaman lain. Pada bagan 2. 1Brent Fox menyuguhkan langkah - langkah dalam membuat konsep flow chart.
Buat box menu utama dengan meletakkan isi opsi dan judul menu
tentukan setiap ke halaman mana pengguna akan dibawa dari setiap pilihan di menu
Buat box baru setiap halaman baru berdasarkan pilihan sebelumnya dengan konten tertentu yang sudah ditetapkan
Gunakan tanda panah untuk menunjukkan aliran interface dan menghubungkan antara tombol dengan menu
Tentukan tombol apa yang digunakan untuk menavigasi halaman
Gambar 2.6 Langkah Brent Fox dalam mendesain flow chart
Metode yang digunakan Brent Fox mendahulukan membuat rancangan dasar tentang isi setiap halaman beserta opsi yang akan memindahkan pemain
30
ke halaman tertentu. Setelah itu halaman lain juga ikut dibuat beserta opsinya kemudian dibuatlah jalur aliran setiap halaman berdasarkan fungsi apa yang dipilih pemain. Salah satu contoh rancangan flow chart atau model navigasi dapat dilihat pada gambar berikut.
Gambar 2.7 Contoh model navigasi ( sumber : http://bulletproofoutlaws.com/category/elusive-ninjathe-shadowy-thief/ )
Dalam contoh rancangan flow chart, dapat dilihat bahwa hal ini akan sangat memudahkan tim pengembang game baik artist maupun programmer. di satu sisi programmer sudah bisa mulai membuat program dengan berdasarkan dari flow chart sembari artist atau desainer dapat membuat asset yang lebih komprehensif. Selain itu fitur - fitur dan cara interaksi sudah bisa dijabarkan pada tahap ini. 2.1.4.4 Feedback Feedback adalah sebuah reaksi dari game yang terjadi akibat pemain yang berinteraksi dengan game dengan cara melakukan sebuah aksi. Ketika pengguna menekan sebuah tombol, maka game tersebut harus menghasilkan respon meskipun tombol tersebut tidak aktif. Tampilan dari tombol yang tengah aktif haruslah berubah secara sesaat atau permanen untuk menginformasikan pada pengguna bahwa pengguna melakukan sebuah aksi.
31
Saat pengguna menggunakan sebuah sistem, pengguna memiliki ekspektasi bahwa tata cara dan runtutaan penggunaan sistem tersebut dapat disamakan dengan kegiatan sehari - hari. Ekspektasi tersebut biasa dikenal sebagai mental model. Pengguna selalu memiliki konsep mental model tersendiri saat berinteraksi dengan sebuah sistem, khususnya digital. Tetapi mental model di dunia nyata dengan mental model pada sistem digital tidak bisa sepenuhnya disamakan karena pada mental model sistem digital terdapat batasan tampilan, apa yang dilakukan sistem atau mesin, pengguna tidak dapat mengetahuinya secara
langsung.
Oleh
karena
itu
dibutuhkan
sebuah
feedback
yang
menampilkan informasi tentang apa yang terjadi pada sebuah sistem ketika pengguna melakukan sebuah aksi dan bagaimana keadaan dar proses aksi tersebut. Pemain pada umumnya selalu ingin mengetahui apa yang sekarang terjadi dalam dunia game, dan apa yang harus ia lakukan setelah ini dan yang paling penting, pemain membutuhkan informasi apakah aksi yang telah mereka lakukan berbuah sukses atau gagal, mendekatkan mereka pada menang atau kalah. Ernest Adams menjelaskan beberapa hal yang ingin diketahui pengguna saat pengguna bermain game yaitu30 :
Dimana posisi saya saat ini ? Hal ini berfungsi agar pemain memahami dimana ia saat ini dan lebih tepatnya dalam dunia game yang sangat luas pemain berada di posisi mana.
Apa yang saat ini saya lakukan ? Hal ini dimaksudkan agar pemain memahami tentang apa yang dilakukannya saat ini dari sekian banyak aksi yang dapat ia lakukan. Interface dapat memberitahu pemain tentang fitur apa yang saat ini ia akses ataupun tentang aksi yang dilakukan pemain saat bermain
Tantangan apa yang saya hadapi ? Hal ini berfungsi untuk memberitahu pemain tentang tujuan permainan dan tantangan apa yang ia hadapi agar tujuan bermain menjadi jelas.
Apakah aksi yang saya lakukan sukses atau gagal ? Hal ini berfungsi untuk memberitahu pemain tentang sukses atau tidaknya
30
Ibid, Fundamentals of Game Design
32
aksi yang ia lakukan. Semisal apakah pemain berhasil mematikan atau menyalakan suara dalam game. Juga untuk memeberi tahu pemain apakah aksi yang ia lakukan ketika bermain mengasilkan dampak tertentu atau malah tidak menghasilkan apapun.
Apakah saya memilki hal-hal yang dapat membantu untuk menang ? Dalam permainan pemain harus diberi tahu tentang keunggulan yang ia miliki yang dapa membantu ia menyelesaikan tantangan
Apakah saya berada dalam bahaya ? apakah saya akan kalah ? Hal ini berguna untuk memberi tahu pemain tentang keadaan permainan saat ini, apakah permainan mendekati kondisi kalah, apakah pemain akan kehabisan waktu permainan.
Apakah saya berprogres ? Hal ini berfungsi untuk menunjukkan progres
apa
yang
telah
dilakukan
pemain.
Apakah
pemain
mendapatkan skor, berapa banyak level yang telah diselesaikan oleh pemain, apakah pemain masih jauh dari gol permainan.
Apa yang harus saya lakukan setelah ini ? Setelah pemain mencapai kondisi tertentu, pemain sebaiknya selalu diberi informasi tentang hal apa yang dapat ia lakukan setelah ini, apakah melanjutkan permainan atau mengubah setelan permainan, atau mengakses fitur yang lain. Selain itu pemain juga dapat mendapatkan informasi tentang bagaimana cara ia menuju ke kondisi yang pemain maksud.
Bagaimana performa bermain saya ? Hal ini berguna untuk memberi tahu pemain tentang hasil bermain pemain, apakah pemain bermain baik atau buruk.
2.1.4.5 Alat Kendali 2.1.4.5.1 Layar Sentuh Layar sentuh atau yang biasa dikenal dengan touch screen adalah sebuah layar yang memiliki permukaan khusus yang sensitif terhadap sentuhan
33
jari atau stylus. Objek - objek pada layar ditunjuk kemudian disentuh untuk memilih objek tersebut. Keuntungan utama pada layar sentuh adalah fitur layar sentuh yang mengijinkan hubungan secara langsung antara jari dengan object pada layar. Hubungan langsung ini berlaku untuk gestur gerakan, jarak dan kecepatan. Interaksi ini bersifat langsung, karena alat kendali ( jari atau stylus ) berada pada posisi yang sama dengan pointer. Keuntungan lain dari layar sentuh adalah tidak dibutuhkannya ruang lain pada meja kerja karena alat kendali sudah ada pada layar. Layar sentuh juga memiliki beberapa kelemahan. Layar sentuh dapat mengakibatkan kelelahan bagi pengguna apabila digunakan terlalu lama. Selain itu, apabila jari adalah alat sentuhnya, ada kemungkinan sebagian area layar akan terhalang oleh jari dan kurangnya ketepatan dalam memilih tombol layar yang berukuran kecil. Jari juga memiliki kemungkinan untuk mengotori layar, dan stylus kemungkinan akan menggores atau merusak layar. Jari dan stylus membutuhkan gerakan tangan secara terus menerus, dan apabila menggunakan stylus, stylus tersebut harus diambil terlebih dahulu. 2.1.4.5.1.1 Gestur Sentuh Dalam berinteraksi dengan layar sentuh, terdapat beberapa standar gestur atau jenis - jenis gestur yang dapat dilakukan untuk melakukan aksi ataupun interaksi dengan sistem. Pada perangkat mobile phone dengan alat interaksi terdapat beberapa gestur sentuh sebagai berikut : 1. Single Touch Merupakan gestur sentuh yang memanfaatkan satu jari untuk berinteraksi. Gestur single touch dibagi menjadi beberapa gestur yaitu : Tap. Tap adalah sentuhan yang cepat dalam area tertentu pada layar kemudian sentuhan tersebut dilepaskan dari layar. Terdapat dua behaviour berkenaan dengan gestur tap, yaitu : - Jari saat menyentuh layar berfungsi sebagai indikasi touch.
34
- Jari saat lepas dari layar mengeksekusi perintah. Selain itu, tap juga menghentikan konten yang bergerak pada layar.
Gambar 2.8 Gestur tap ( sumber : msdn.microsoft.com )
Double Tap. Double tap merupakan gestur dua kali tap yang dilakukan dengan cepat pada area tertentu pada layar. Pada beberapa aplikasi, double tap biasa digunakan untuk mengaktifkan fitur zoom in dan zoom out.
Gambar 2.9 Gestur double tap ( sumber : msdn.microsoft.com )
Pan. Pan merupakan gestur dimana salah satu jari diletakkan pada layar kemudian jari yang menempel tersebut digerkkan ke arah tertentu. Gestur pan berakhir saat jari diangkat dari layar. Terdapat dua behaviour terkait dengan gestur pan : - Konten dapat digerakkan melalui manipulasi langsung. Konten akan mengikuti pergerakan jari. Penentuan kendali pada aplikasi dapat memastikan kemana arah pan. Gerakan pan dapat berupa gerakan horizontal, vertikal, atau gerakan lain yang telah ditentukan. Apabila konten digerakkan pada dalam posisi yang
35
berada di tengah - tengah konten, maka konten harus menempel kembali ke posisi terdekat. - Gestur pan dapat menggerakkan atau menata ulang konten spesifik. Sebuah konten mengikuti arah gerakan jari dan berhenti ke lokasi yang baru ketika jari dilepaskan dari layar.
Gambar 2.10 Gestur pan ( sumber : msdn.microsoft.com )
Flick. Gestur flick adalah gestur dimana satu jari diletakkan pada layar dan digerakkan dengan cepat ke berbagai arah dan diakhiri dengan jari terangkat pada layar. Flick dapat mengikuti gestur pan. Gerakan flick menggerakkan konten dari satu tempat ke tempat lain. Kemana arah gerakan konten ditentukan oleh aplikasi. Arah bergeraknya konten dapat bergerak ke arah horizontal, vertikal, atau arah lain yang telah ditentukan. Apabila jalur horizontal dan vertikal telah ditentukan, maka gerakan lain yang berlawanan juga memiliki jalur vertikal atau horizontal. Gestur flick menggerakkan keseluruhan kanvas, tetapi pengguna dapat memilih object secara individu untuk digerakkan.
Gambar 2.11 Gestur flick ( sumber : msdn.microsoft.com )
36
Touch and Hold. Gestur touch and hold adalah gestur dimana satu jari menyentuh layar pada area tertentu selama beberapa saat. Gestur ini sering sebaiknya digunakan untuk menampilkan sebuah konteks dari menu atau popsi pada halaman untuk sebuah objek. 2. Multi Touch Merupakan gestur sentuh yang memanfaatkan dua jari untuk berinteraksi. Gestur multi touch dibagi menjadi beberapa gestur yaitu : A. Pinch and Stretch Gestur pinch and stretch adalah gestur dimana dua jari menyentuh layar pada sebagian area layar secara terpisah kemudian diikuti dengan gerakan jari yang merapat ( pinch ) atau menjauh ( stretch ). Gestur ini sering digunakan untuk fungsi zoom in dan zoom out.
Gambar 2.12 Gestur flick ( sumber : msdn.microsoft.com )
2.1.4.5.2 Tombol Tombol adalah kendali berbentuk persegi, persegi panjang atau bangun dasar geometri lainnya yang diberi label bentuk tersebut untuk mengindikasikan aksi yang mewakili fungsinya. Label tersebut dapat berupa teks, grafis atau keduanya.31
31
Ibid, The Essential Guide to User Interface Design An Introduction to GUI Design Principles and Techniques, 3rd Edition
37
Tombol memiliki fungsi untuk melakukan sebuah aksi, mengubah properti dalam ( properties ) atau untuk memunculkan menu pop-up. Tombol memiliki beberapa keuntungan yaitu :
Selalu visibel, mengingatkan pengguna adanya pilihan yang dapat dipilih.
Mudah digunakan
Dapat diatur dengan mudah pada area layar.
Dapat memberikan deskripsi yang helas tentang aksi yang akan dilakukan
Semakin besarnya ukuran, memungkinkan lebih cepatnya tombol untuk dipilih
Dapat memiliki penampilan 3D, yang mana akan memiliki bentuk yang baik secara estetika, dan dapat menampilkan feedback melalui gerakan ketika tombol tersebut diaktifkan.
Memungkinkan penggunaan dengan keyboard
Lebih cepat daripada menggunakan menu bar two-step atau pull-down.
Beberapa kerugian penggunaan dari tombol adalah :
Menghabiskan spasi pada layar.
Ukuran pada tombol memungkinkan untuk terbatasnya jumlah tombol yang ditampilkan.
Membutuhkan pengguna untuk melihat tombol dimana tombol biasa berada di tampilan layar utama.
Membutuhkan penggerakan pointer untuk memilih tombol.
Tombol biasa digunakan untuk keperluan :
Untuk menyebabkan sesuatu terjadi sesegera mungkin.
Untuk memunculkan halaman lain atau jendela lain.
Untuk menampilkan pilihan pada menu.
Untuk mengatur nilai dari sebuah mode atau properti.
Untuk menampilkan informasi tertentu.
38
Untuk menampilkan feedback tombol memiliki beberapa kondisi yaitu32 : 1. Standard Kondisi standar adalah kondisi di mana tombol dibiarkan apa adanya tanpa adanya pemilihan atau aksi oleh pengguna. Tombol dalam kondisi standar haruslah memiliki tampilan seperti tombol agar pengguna dapat mengetahui bahwa tombol tersebut dapat ditekan. 2. Selected Selected ( terpilih ), adalah kondisi dimana tombol sedang dipilih atau disorot ( highlighted ) oleh pengguna. Pada kondisi ini tampilan visual pada tombol haruslah mencolok agar pengguna dapat membuat sebuah keputusan pilihan. 3. Pressed Pressed ( tertekan ) adalah keadaan dimana tombol telah ditekan dan dipilih oleh pengguna. Pada kondisi ini tampilan visual tombol harus mengindikasikan representasi dari makna terpilih ataupun tertekan, agar pemain mengetahui tombol mana yang ia pilih dan untuk mengetahui feedback sebelum kondisi pada layar berubah. 4. Active Active ( aktif ) adalah kondisi dimana sebuah tombol atau plihan terlihat aktif meskipun tombol lain telah disorot. Sebagai contoh, dalam game sepakbola, pemain diperbolehkan memilih opsi diantara 15 stadium yang berbeda. Pemain harus mengetahui yang mana stadium yang saat ini telah aktif walaupun tombol tombol lain telah disorot. Tampilan visual aktif harus mencolok , meskipun tidak semencolok tampilan selected.
32
Ibid, Game Interface Design
39
5. Active-Selected Active-selected ( aktif-terpilih ) adalah kondisi dimana sebuah tombol yang dipilih atau disorot dalam keadaan aktif. 6. Disabled Disabled ( tidak aktif/lumpuh ) adalah kondisi dimana tombol tidak bisa dipilih tetapi pengguna tetap harus mengetahui bahwa tombol tersebut ada dalam sistem. Kondisi ini dapat digunakan untuk level atau stage dalam game yang masih terkunci dan pengguna harus menyelesaikan beberapan tugas agar terbuka. Tampilan visual dari kondisi disabled haruslah tidak tampak seperti bisa dipilih. Tampilan ini biasa ditampilkan dengan warna yang semi - transparan. 2.1.5 Flat Design Flat design adalah istilah yang digunakan untuk mengacu pada perkembangan gaya desain pada interface saat ini. Gaya desain ini memiliki ciri khas meminimalisir bentukan, tekstur dan menggunakan warna berkontras tinggi serta penggunaan yang berfokus pada tipografi dan grid. Gaya desain ini menyebar luas di masyarakat karena penerapannya pada sistem operasi Windows 8 oleh Microsoft dan iOS7 oleh Apple33.
Gambar 2.13 Interface pada Windows 8 dan iOS7 ( sumber : iberita.com, mashable.com )
Gaya desain flat pada Windows 8 oleh Microsoft dipengaruhi oleh semakin sibuknya para pengguna gadget dan keinginan untuk membuat interface perangkat - perangkat keluaran Microsoft menjadi satu keluarga. Para desainer dari Microsoft semakin memfokuskan diri pada kemudahan berinteraksi 33
http://thenextweb.com/dd/2014/03/19/history-flat-design-efficiency-minimalism-made-digitalworld-flat/?fromcat=all
40
dengan meminimalisir gaya visual pada interface. Saat ini penggunaan internet ataupun aplikasi tidak hanya ada pada komputer saja tetapi juga pada tablet ataupun smartphone yang menggunakan layar sentuh. Dengan digunakannya layar sentuh maka ukuran setiap objek/ tombol haruslah cukup besar agar menyusaikan dengan jari - jari pengguna dan dengan besarnya ukuran tombol yang memakan area layar maka ornamen visual yang hanya berfungsi sebagai unsur dekoratif harus dihilangkan untuk menekan distraksi visual 34. Gaya visual ini dipengaruhi oleh tiga macam gaya yang telah ada sejak dulu yaitu, Bauhaus Movement, Swiss International Style dan karya desain ciptaan Saul Bass.
Gambar 2.14 Beberapa contoh desain bergaya Swiss International Style ( sumber : thenextweb.com )
Beberapa game juga mengadaptasi gaya visual flat design seperti game Spelltower dan Dragow. Selain itu beberapa game sekelas AAA untuk platform konsol juga mulai menerapkan gaya visual yang mengarah ke flat semenjak tahun 2011 keatas contohnya seperti Dragon Age 2, The Witcher 2, Elder Scrolls V : Skyrim, FIFA 14 dan lainnya.
Gambar 2.15 Interface pada game The Witcher 2 dan FIFA 14 ( sumber : behance.net,ign.com )
34
http://bits.blogs.nytimes.com/2013/04/23/the-flattening-of-design
41
Menurut Amber Leigh Turner35 flat design merupakan gaya desain yang mendukung usability pada interface karena gaya desain tersebut membersihkan berbagai macam ornamental desain. Dengan bersihnya berbagai macam ornamen maka pengguna bisa terfokus untuk menyelesaikan tugas dalam menggunakan sebuah aplikasi tanpa ada distraksi visual. Selain itu flat design juga akan mempermudah pengguna dalam berinteraksi menggunakan perangkat yang berukuran kecil. 2.2 Studi Eksisting 2.2.1 Product Knowledge Garudayana Saga merupakan sebuah IP karya Is Yuniarto yang memiliki sebuah keunikan karena mengemas konten budaya dengan balutan fantasi. Garudayana Saga berkisah tentang petualangan Garu dan Kinara untuk menjadikan Garu raja langit di Arcapada. Dalam komik ini Kinara akan bertemu dengan berbagai macam tokoh pewayangan seperti keluarga Pandawa, Gattotkaca, keluarga Kurawa, Petruk, Gareng, Bagong dan Semar. Garudayana Saga mengadaptasi kisah Mahabarata versi India dan Indonesia dengan penambahan beberapa unsur orisinal seperti penambahan kemampuan bela diri orisinal dan pendalaman jalan cerita yang disesuaikan dengan selera pembaca saat ini yang lebih kritis. Dalam pengembangan visual-nya, Garudayana Saga terinspirasi dengan kebudayaan yang berdasarkan kerajaan bercorak Hindu dan Buddha. Inspirasi visual tersebut diambil dari India dan juga kerajaan bercorak Hindu dan Buddha yang ada di Asia termasuk Indonesia.
35
ibid, http://thenextweb.com/
42
Gambar 2.16 Cuplikan komik Garudayana
Menurut Is Yuniarto, Garudayana Saga bersettingkan di sebuah wilayah orisinal yang bernama Arcapada, hal ini dilakukan agar komik Garudayana Saga bernuansa lebih global dan tidak hanya terfokus pada Indonesia saja. Selain itu Garudayana Saga adalah komik bergenre fantasi, semua elemen dunia yang ada di dalamnya bersifat imajinasi dan tercipta karena inspirasi dari dunia nyata, tidak ada referensi khusus melainkan batasan - batasan dasar yang menjadi rujukan dalam mendesain semua elemen dunia. Penggunaan bahasa Sansekerta dan aksara Devanagari juga merupakan bentuk upaya tersebut. Dari segi cerita, Garudayana Saga pada dasarnya mengadaptasi kisah Mahabarata baik dari versi pewayangan maupun versi India-nya namun dilakukan sedikit penyesuaian dengan selera pembaca saat ini. Contohnya seperti kemampuan Antareja yang dapat membunuh lawan dengan menjilat jejak kaki lawan diganti dengan kuku beracun. Garudayana Saga mengadaptasi berbagai macam motif batik dan juga wayang kulit. motif - motif seperti cemukiran, tumbuhan dan motif parang sering digunakan sebagai unsur dekoratif pada halaman dan panel - paneldalam komik. Logo Garudayana mengadaptasi bentukan motif Garuda karena memang cerita berfokus pada kisah petualangan garuda bernama Garu. Sedang dalam Garudayana Saga : Ashura Hunter. Kisah berfokus pada petualangan Gatotkaca.
43
Gambar 2.17 Cuplikan komik Garudayana yang menggambarkan kekuatan Antareja
2.2.2 Studi Eksisting Sebelumnya 2.2.2.1 Garudayana : Rise of Garuda
Gambar 2.18 Garudayana : Rise of Garuda ( sumber : ferryapriyanto.deviantart.com )
Garudayana : Rise of Garuda merupakan game 3D action advanture yang dikembangkan oleh Apriyanto Kingdom untuk platfom PC. Game ini sebenarnya adalah game hasil dari tugas akhir Ferry Apriyanto di salah satu universitas di Taiwan. Game ini dibuat non - komersil bisa diunduh secara gratis. Sampai saat ini game ini ada dalam tahap demo dan tidak ada rencana untuk dilanjutkan. Game Garudayana : Rise of Garuda mengadaptasi kisah komiknya, yaitu petualangan Kinara, sang pemburu harta karun, yang menmukan telur Garuda. Pada game ini pemain mengendalikan Kinara. Game ini dipresentasikan
44
dengan sudut pandang orang ketiga. Kinara dapat melakukan aksi melompat, berlari dan menembak. 2.2.2.2 Garudayana Legends
Gambar 2.19 Garudayana Legends ( sumber : http://www.youtube.com/watch?v=KpLffWxC8O8 )
Garudayana Legends merupakan game 2D action side-scrolling yang dikembangkan oleh Elagotech. Game ini rencananya akan dirilis di platform mobile, yaitu android dan iOS. Garudayana Legends merupakan spin-off dari Garudayana Saga. Dalam game ini pemain akan mengendalikan Kinara untuk menyusuri berbagai macam tempat di dunia Garudayana Saga sambil mengalahkan berbagai macam musuh. Kinara akan bertemu dengan berbagai macam karakter dari cerita rakyat Indonesia seperti Timun Mas, Cinderalas, dan sebagainya. Tanggal rilis game ini masih belum dikonfirmasikan. 2.2.3 Studi Kompetitor 2.2.3.1 The Advantures of Wanara - Astra Mantra -
Gambar 2.20 Screenshot game The Advantures of Wanara - Astra Mantra ( sumber : id.gamesinasia.com )
45
The Advantures of Wanara - Astra Mantra - merupakan game yang dikembangkan oleh Mechanimotion Studio dan Elven Games untuk platform iOS. Game ini merupakan salah satu produk pengembangan media dari IP The Advantures of Wanara. Segala konten meliputi tokoh, setting dunia dan juga cerita mengacu kepada produk novelnya yaitu The Advantures of Wanara. Kisah The Advantures of Wanara mengisahkan tentang petualangan Naradja, seorang anak ras Wanara yang merupakan keturunan dari ras Manusia dan Ashura, dalam mencari 8 elemen dewa Hastabrata. Petualangan Naradja akan dihadapi oleh banyak rintangan dengan munculnya berbagai macam musuh yang menghadang dirinya. Konsep dasar dari game ini adalah mengantarkan pengalaman bermain menggunakan Astra dan Mantra untuk melawan musuh.
Astra dan Mantra
merupakan 2 jenis serangan yang dapat dilakukan oleh Naradja dengan menggambar simbol tertentu. Dalam game ini pemain berpetualang dalam berbagai macam pulau, dan di dalam pulau tersebut terdapat beberapa level. Di setiap level pemain akan dihadapkan dengan sejumlah musuh sambil mengeksplorasi area. Saat menghadapi musuh pemain dapat memilih serangan Astra (serangan fisik) atau Mantra (serangan sihir) kemudian pemaindiharuskan mengingat pola - pola tertentu yang muncul pada layar lalu menggambarnya lagi untuk melancarkan serangan keapada musuh.
Gambar 2.21 Screenshot gameplay Astra Mantra ( sumber : id.gamesinasia.com )
46
Game ini memiliki grafis yang baik. Seluruh elemen visual baik dari karakter , environment dan user interface mencerminkan kebudayaan Indonesia. 2.2.3.2 Inheritage - Boundary of Existence -
Gambar 2.22 Inheritage - Boundary of Existence - ( sumber : id.gamesinasia.com )
Inheritage - Boundary of Existence - merupakan game bergenre horizontal shoot 'em up yang dikembangkan oleh Tinker Games untuk platform iOS. Game ini mengadaptasi seni yang didasarkan dari kebudayaan Indonesia. Pemain akan berperan sebagai Nala seorang Arca yang bertugas melindungi kota dari ancaman para Yaksha. Game ini memiliki penceritaan yang mengadaptasi gaya bercerita visual novel dengan adanya berbagai macam cutscene dan juga voice acting. Secara gameplay, pemain hanya perlu untuk menghindari serangan musuh yang datang dengan cara menggeser tokoh ke arah yang dituju. Secara otomatis pemain akan mengeluarkan serangan apabila pemain telah menyentuh layar.
Gambar 2.23 Screenshot gameplay Inheritage - Boundary of Existence - ( sumber : id.gamesinasia.com )
47
Game ini memiliki grafis yang cantik selain itu berbagai macam ornamen khas Indonesia semakin menambah value dari game ini. 2.2.4 Studi Komparator 2.2.4.1 Deep Dungeons of Doom
Gambar 2.24 Screenshot game Deep Dungeons of Doom
Deep
Dungeons
of
Doom adalah
game
bergenre
action
yang
dikembangkan oleh Bossa Studio. Game ini telah dirilis dalam 3 platform yaitu, Android, iOS dan Ouya. Dalam game ini pemain akan berperan sebagai ksatria yang melawan iblis yang berada di ruang bawah tanah (dungeon) . Pemain dapat mengeksplor berbagai macam ruang bawah tanah di berbagai area dan melawan banyak monster untuk mendapatkan harta karun. Game ini memiliki tema fantasi di wilayah Eropa dengan eksekusi visual pixel art lengkap dengan suara dan musik yang bernuansa 16 - bit. 2.2.4.2 Punch Quest
Gambar 2.25 Screenshot Punch Quest
Punch
Quest
adalah
game
bergenre
action
dan
arcade
yang
dikembangkan oleh RocketCat Games. Game ini telah dirilis untuk platform Android dan iOS. Dalam game ini pemain akan menggunakan karakter yang
48
terus berlari sambil memukul demi mengalahkan sekelompok musuh yang menghalangi jalannya karkater utama dalam mencari penganggu tidur siangnya. Pemain dapat menkustomisasi serangan dan serangan super karakter yang nantinya akan didapat pemain dengan cara menukarkan mata uang dalam game dengan barang -barang tertentu termasuk serangan. Selain itu dalam game ini pemain juga dapat mengganti - ganti kostum karakter. Game ini memiliki sistem permainan arcade di mana pemain harus bermain ulang kembali dari awal apabila pemain mencapai game over dan bisa dibilang game arcade tidak memiliki opsi pemilihan lawan ataupun tempat. 2.2.4.3 Third Blade
Gambar 2.26 Screenshoot Third Blade
Third Blade merupakan game bergenre action yang dikembangkan oleh . Game ini telah dirilis untuk platform Android dan iOS. Dalam game ini pemain akan berperan sebagai pemuda yang melakukan petualangan bersama rekannya. Di tengah perjalanan rekannya diculik oleh monster dan sang tokoh utama pergi mengejar jejak musuh untuk mengalahkannya. Pemain dapat mengeksplor berbagai macam wilayah dan menemui berbagai macam musuh. Game ini memiliki tema fantasi. 2.2.3.4 Epic Battle Dude
Gambar 2.27 Screenshoot Epic Battle Dude
49
Epic Battle Dude merupakan game bergenre action arcade yang dikembangkan oleh Handy Games untuk platform
Android. Dalam game ini
pemain akn berperan sebagai seorang raja yang diberi hadiah oleh seseorang misterius. Hadiah yang ia terima ternyata adalah jebakan yang membuat dirinya pingsan. Setelah sang raja sadar ternyata seluruh harta sang raja telah menghilang kemudian sang raja bertualang dengan Jinnie untuk menguak misteri ini. Game ini berlatar di timur tengah dengan unsur fantasi dan memiliki konsep permainan yang sederhana.
BAB III METODE PENELITIAN
3.1 Metode Penelitian 3.1.1 Wawancara Mendalam Wawancara dilakukan untuk mengetahui bagaimana konsep visual berkenaan tema yang sebaiknya digunakan dalam perancangan user interface. Lalu wawancara juga dilakukan untuk mengetahui tren desain user interface apa yang saat ini sedang berlangsung dan juga hal - hal teknis apa saja yang harus diperhatikan pada tahap perancangan user interface agar dapat menyesuaikan diri dengan teknologi dan kebutuhan modern. 3.1.2 Observasi Pengamatan dilakukan pada beberapa game yang memiliki genre dan platform yang kurang lebih sejenis. Observasi ini bertujuan untuk mengetahui solusi interface apa saja yang umum digunakan dan penggunaan simbol apa yang umum digunakan agar mengetahui standar user interface yang sudah dipahami oleh audiensi. 3.1.3 Usability Test Usability test, Usability test merupakan serangkaian tes yang melibatkan audiens bertujuan untuk mengetahui apakah user interface yang telah dibuat bekerja dengan baik, menyajikan data dengan baik dan juga untuk mengetahui hal - hal apa saja yang dapat kita perbaiki dalam user interface. Tes ini dilakukan dengan cara meminta audiens untuk menggunakan user interface dari game tertentu ataupun prototype hasil perancangan dan mengamati audiens sambil memberinya tugas kecil dalam menggunakan interface dan memberinya pertanyaan untuk mengetahui apakah user interface dapat berjalan dengan baik, bagaimana tanggapan audiens berikut kelebihan dan kekurangannya. Tes ini
50
51
digunakan untuk mengetahui apakah interface dapat bekerja dengan baik dan bagaimana memperbaikinya36. 3.1.4 Studi Literatur Studi terhadap literatur dilakukan dengan cara mempelajari : 1. Teori dan literatur yang mendukung penyusunan konten dan teknis dalam perancangan desain user interface. 2. Jurnal ilmiah yang mendukung penelitian, khususnya penelitian dengan topik desain user interface. 3. Sumber data yang berasal dari internet, pencarian informasi yang terkait pengembangan game mobile, pengembangan user interface dan juga pencarian beberapa referensi visual dan referensi istilah. 3.2 Populasi Garudayana Saga adalah sebuah komik yang ditulis oleh Is Yuniarto untuk pembaca di Indonesia. Berdasarkan depth interview dengan Is Yuniarto, pembaca Garudayana Saga berkisar antara 14 - 24 tahun. Berdasarkan hasil pengamatan pada fan page Facebook Garudayana Saga mayoritas follower adalah audiens berusia 18 - 24 tahun. Pada perancangan ini diputuskan audiens yang menjadi segmen adalah audiens berusia 17 - 21 tahun. Audiens pada usia ini termasuk dalam kategori umur yang mengonsumsi produk budaya populer, seperti game musik, animasi, novel, juga komik. Selain itu mereka juga terbuka terhadap perkembangan teknologi.
Keterbukaan audiens dengan game dan
komik merupakan salah satu jembatan. a) Geografis Perkotaan besar - Indonesia. Lingkungan perkotaan yang dekat dengan perkembangan teknologi informasi dan masuknya budaya pop memiliki audiens yang berpotensi mengonsumsi game.
36
Steve Krug, Don't Make Me Think, (The Circle.com Library : Indiana ), 76
52
b ) Demografis Jenis kelamin laki - laki dan wanita, berusia 17 - 21 tahun dan memiliki ketertarikan
dengan
game,
animasi,
dan
komik.
Pendidikan
minimu
SMA/Sederajat. c ) Psikografis Gaya hidup modern, terbuka hal yang baru, memilki rasa ingin tahu yang tinggi, selalu update terhadap informasi, update dengan teknologi dan juga penikmat media hiburan seperti game, animasi, televisi, internet dan sejenisnya. 3.2.1 Sampel Dalam
perancangan
ini,
wawancara
dilakukan
pada
beberapa
narasumber yang memiliki pengetahuan di bidang seputar user interface yaitu Arief Bahari, bidang game development yaitu Tim Vamp's Revenge yang terdiri dari Assaji Tjahjadi dan Eka Pramudita M., juga kepada pemilik properti intelektual Garudayana Saga, Is Yuniarto. Wawancara mendalam ini bertujuan untuk mengetahui bagaimana perkembangan desain user interface mulai dari tren yang berlaku saat ini, apa penyebab tren, bagaimana user interface dapat menyelesaikan masalah desain, elemen - elemen apa saja yang dapat mendukung desain user interface yang baik yang sesuai dengan kebutuhan saat ini, dan bagaimana user interface dapat mendukung kenyamanan bermain bagi pemain. Selain itu wawancara mendalam ini juga bertujuan untuk menentukan tema visual apa yang akan diaplikasikan dan bagaimana eksekusinya. Selain itu sampel pada usability test akan merujuk kepada data pada populasi. 3.3 Analisa Data 3.3.1 Hasil Wawancara Wawancara dilakukan dengan beberapa narasumber untuk mendapatkan data tentang hal - hal apa saja yang digunakan sebagai acuan dalam mendesain user interface untuk game Garudayana Saga : Ashura Hunter.
53
3.3.1.1 Is Yuniarto Wawancara dengan Is Yuniarto, selaku pengarang dari Garudayana, untuk mengetahui dasar - dasar konsep visual dari dunia Garudayana Saga. Setelah dilakukannya wawancara diambilah beberapa kesimpulan yaitu :
Garudayana Saga mengangkat kisah Mahabarata versi India dan digabungkan
dengan
kisah
Mahabarata
versi
Indonesia
dengan
penambahan unsur - unsur orisinal.
Di dalam dunia Garudayana terdapat beberapa penambahan tokoh orisinal dan jalan cerita orisinal agar dapat menarik pembaca.
Dunia dalam Garudayana terinspirasi dari kerajaan – kerajaan yang memiliki corak Hindu - Buddha di Asia Tenggara, tetapi lebih dominan dengan kebudayaan Indonesia.
Dalam penggunaan ornamen dan batik Garudayana lebih berfokus dengan ornamen dan batik asal Jawa.
Istilah – istilah dalam Garudayana lebih berfokus kepada penggunaan bahasa sanskrit.
Aksara jawa digunakan sebagai inspirasi desain pada ornamen ataupun tipografi di dunia Arcapada.
Palet warna yang digunakan pada Garudayana adalah cerah secara umum.
3.3.1.2 Arief Bahari Wawancara dengan Arief Bahari, desainer website dan user interface, untuk mengetahui trend desain apa yang sedang berlaku saat ini dan bagaimana trend desain saat ini merefleksikan behaviour pengguna. Setelah dilakukannya wawancara diambilah beberapa kesimpulan yaitu :
Trend desain saat ini mengarah kepada flat design yang mengutamakan warna – warna cerah, hilangnya tekstur dan penggunaan ikon grafis yang lebih simpel.
54
Pengguna saat ini lebih membutuhkan directness, dan layar yang lebih bersih karena sifat user yang sudah terbiasa dengan user interface. Pengguna menginginkan sifat user interface yang lebih “direct”.
Layout pada interface web saat ini mengacu kepada simetris karena pertimbangan user yang lebih mudah apabila menggunakan model interaksi “scroll” atau “swipe”. Selain itu navigasi konten juga menjadi lebih cepat.
Perilaku pengguna dalam berinteraksi dengan sebuah user interface pada umumnya dengan melakukan scanning, tanpa ada aturan tertentu, apa yang menarik perhatiannya maka akan ia tuju.
3.3.1.3 Tim Developer Vamp's Revenge Wawancara dengan tim developer game Vamp's Revenge yang terdiri dari Eka Pramudita Muharram dan Assaji Tjahjadi. Wawancara ini dilakukan untuk mengetahui bagaimana medesain sebuah user interface dalam game dan keinginan pengguna apa saja yang harus diperhatikan. Setelah dilakukannya wawancara diambilah beberapa kesimpulan yaitu :
Desain interface yang baik adalah menuntun tanpa memberi paksaan. Pengguna dapat tetap mengakses semua menu sebebasnya.
Desainer user interface diharuskan menyediakan tempat khusus bagi investor atau jalan pemasukan komersil. Dapat berupa hyperlink space ataupun ads space dalam halaman tertentu.
Trend desain pada user interface game saat ini adalah multi resolusi dan floating asset. Memudahkan porting ke device yang berbeda dan mempercepat waktu pengembangan sekaligus tetap mempertahankan estetika.
Penggunaan mugshot merupakan salah satu upaya untuk membuat interaksi pemain dengan sistem lebih memiliki hubungan emosional.
55
3.3.2 Hasil Observasi 3.3.2.1 Deep Dungeons of Doom
Gambar 3.1 Screenshot game Deep Dungeons of Doom
3.3.2.1.1 Model Navigasi Dalam game Deep Dungeons of Doom model navigasi terbagi dalam beberapa tingkatan menu. Setiap menu mengelompokkan beberapa fitur. Permainan dimulai dengan pembukaan pada opening screen dengan kalimat perintah touch anywhere to start. Setelah melaksanakan perintah tersebut pemain akan dibawa pada main menu. Pada main menu pemain dapat memilih setting permainan yang mereka inginkan melalui option. Pemain juga dapat melihat ensiklopedia yang berisi tentang pengetahuan dasar karakter karakter yang ada pada permainan. Pemilihan opsi "advanture!" akan membawa pemain menuju menu besar selanjutnya yaitu advanture menu.
56
Gambar 3.2 Model navigasi atau flow chart game Deep Dungeons of Doom
Pada advanture menu pemain dapat melakukan banyak hal yang berkaitan dengan persiapan diri sebelum bermain atau berpetualang. Pada menu ini terdapat akses ke anak menu seperti pemilihan dungeon yang akan dimainkan, pembelian in app purchase, pengecekan harta karun yang telah didapatkan, pengecekan misi dan statistik permainan dan pengaturan tentang kemampuan karakter.
Pemilihan dungeon untuk dimainkan akan membawa
karkater pada gameplay. Dalam gameplay pemain masih bisa mengakses anak menu lain seperti pengecekan perlengkapan petualang pemain dan juga pengaturan beberapa opsi permainan melalui menu "pause". Dalam pause menu pemain pemain juga dapat membatalkan petualangan dan kembali ke halaman advanture menu. Apabila dalam gameplay pemain dinyatakan menang atau kalah maka pemain akan memasuki jendela result, yang mana di sana pemain dapat melihat statistik performa permainan pemain. Setelah jendela result muncul pemain dapat menuju ke advanture menu ataupun bermain kembali di dungeon yang sama.
57
3.3.2.1.2 Kontrol Pada game ini, aksi yang dapat dilakukan oleh pemain saat gameplay berlangsung adalah menyerang musu, bertahan dari musuh, turun ke lantai bawah serta mengatur perlengkapan di tengah permainan. Menyerang dapat dilakukan dengan melakukan tap pada sisi kanan layar. Bertahan dapat dilakukan dengan melakukan tap pada sisi kiri layar, dan turun lantai dapat dilakukan dengan flick layar ke atas. 3.3.2.1.3 Konsep Interaksi Unik Keunggulan utama konsep interaksi pada game ini adalah kontrol saat gameplay-nya yang mudah digunakan bagi pengguna. Saat gameplay pemain dapat melakukan 2 aksi utama yaitu bertahan dan menyerang. Pada beberapa game dengan genre sejenis biasanya disediakan virtual joypad pada layar sebagai pengganti joystick. Penggunaan virtual joypad pada umumnya cukup menyulitkan karena pemain diharuskan meletakkan jari pada layar datar yang terdapat grafis virtual joypad dengan presisi. Secara umum ukuran jari pemain berbeda antar satu dengan yang lainnya. sehingga pemain akan mengalami kesulitan untuk meletakkan jari di tempat yang presisi dan grafis dari virtual joypad cukup memekan spasi layar hingga sempitnya tampilan visual yang dapat dilihat pemain. Pada game ini cara pengendalian karakter diubah ke arah lebih simpel. Virtual joystick tidak digunakan dan sebagai gantinya seluruh layar merupakan area joystick. Apabila pemain melakukan tap di area sisi kiri layar maka pemain akan melakukan aksi bertahan dan apabila pemain melakukan tap pada sisi kanan layar pemain akan menyerang. Agar pemain tidak kebingungan tentang fungsi area kanan dan kiri layar pemain dapat melihat ikon grafis kecil di bawah layar sebagai penanda fungsi area. Penggunaan konsep interaksi seperti ini merupakan hal yang unik karena konsep ini berhasil menarik keluar kelebihan alat kendali yang menggunakan touch screen.
58
3.3.2.2 Punch Quest
Gambar 3.3 Screenshot Punch Quest
3.3.2.2.1 Model Navigasi Dalam game Punch Quest model navigasi terbagi dalam beberapa tingkatan menu. Setiap menu mengelompokkan beberapa fitur.
Gambar 3.4 Model navigasi atau flow chart game Punch Quest
Permainan dimulai dengan munculnya opening screen berisi logo developer. Setelah pemain menyentuh layar untuk menuju ke menu berikutnya pemain akan diahdapkan dengan main menu yang berisi fitur - fitur yang terkait persiapan sebelum bermain seperti pengaturan kustomisasi, belanja dalam aplikasi, misi - misi yang dapat diselesaikan pemain berikut hadiah apa saja yang
59
didapat apabila pemain berhasil menyelesaikan misi. Pemain akan memasuki halaman baru yaitu gameplay apabila pemain memilih opsi "start" pada main menu. Pada gameplay pemain akan memulai permainan. Di tengah permainan pemain juga dapat mengakses pause menu untuk mengatur beberapa opsi permainan atau kembali ke main menu. Apabila pemain menyelesaikan permainan maka akan muncul menu result. Dalam menu result ini pemain dapat mengetahui performa bermainnya. Menu result ini juga merangkap akses ke fitur - fitur yang ada di main menu seperti pengaturan kustomisasi dan lainnya. Pemain dapat bermain kembali dengan memilih opsi untuk bermain lagi yang ada pada menu result. 3.3.2.2.2 Konsep Interaksi Unik Game Punch Quest memiliki beberapa fitur interaksi menarik yang mendukung kenyamanan bermain bagi pengguna. Salah satu yang menarik adalah metode tuntunan eksplorasi fitur. Pada game ini pemainakan selalu diberitahu ada fitur baru atau item baru apa saja yang bisa diakses dengan munculnya tanda "!" yang diletakkan di atas tombol yang memilki akses ke fitur baru tersebut. Dengan adanya tanda "!" ini pemain dapat dengan langsung mengetahui mana saja yang memiliki fitur baru dan mana saja fitur yang tidak memiliki fitur baru, hal ini akan mempersingkat waktu bermain kerana pemain tidak perlu memeriksa satu - persatu lewat berbagai menu terkait item baru apa saja yang ia miliki.
Gambar 3.5 Adanya tanda "!" membuat pemain memahami tentang adanya fitur baru pada game
Penggunaan ikon "Gnome" yang bergerak - gerak juga merupakan salah satu fitur yang menarik. Ikon "Gnome" ini berfungsi sebagai saran dan masukan
60
bagi pemain untuk mengakses fitur dalam game dan ikon ini akan hilang apabila pemain telah melakukan akses pada fitur yang disarankan oleh ikon ini. Ikon "Gnome" ini diletakkan di sekitar tombol opsi fitur dan memiliki animasi dan warna yang cukup mencolok sehingga pemain akan sulit mengabaikan ikon ini. Secara fungsi, keberadaan ikon "Gnome" ini akan menjadi tutoral bagi pemain untuk
mengeksplor
setiap
fungsi
yang
ada
dan
menuntun
pemain
mempelajarinya tetapi juga tidak memaksanya. Konsep menarik lainnya adalah penggunaan menu scrolling dengan opsi yang memiliki bentuk persegi panjang agar mudah diseleksi oleh pemain. Hal ini sangat memudahkan pemain yang memgang smartphone-nya dalam posisi landscape.
Gambar 3.6 Penggunaan navigasi scroll dengan persegi panjang memudahkan pemain untuk bermain game dengan posisi landscape
Secara gameplay, Punch Quest juga memiliki konsep kontrol yang hampir sama dengan game Deep Dungeons of Doom, Yaitu penggunaan area layar sentuh sebagai alat kendali dalam game. 3.3.2.3 Third Blade
Gambar 3.7 Screenshoot Third Blade
61
3.3.2.3.1 Model Navigasi Dalam
game Third Blade model navigasi terbagi dalam beberapa
tingkatan menu. Setiap menu mengelompokkan fitur.
Gambar 3.8 Model navigasi atau flow chart game Third Blade
Permainan dimulai dengan munculnya opening screen berisi logo developer, ilustrasi , logotype dan juga terdapat perintah sentuh layar untuk memulai permainan. Setelah menyentuh layar pemain akan masuk ke main menu. Dalam main menu pemain dapat mengakses beberapa menu lain seperti option untuk mengatur setelan permainan, ranking untuk mengetahui peringkat pemain secara worldwide, menu how to untuk melihat cara bermain dan ke menu new game / resume untuk memulai permainan atau melanjutkan permainan. Apabila pemain memilih new game / resume pemain akan memasuki halaman advanture menu. Dalam advanture menu pemain juga dapat memilih lokasi permainan yang akan dimainkan, mengganti tingkat kesulitan, melihat infromasi pemain dan mengakses shop. Dalam menu informasi pemain
pemain dapat
melihat informasi status pemain, mengganti dan memasang perlengkapan pemain, mengkustomisasi kemampuan pemain, mengatur setelan permainan ataupun keluar dari advanture menu. Menu akses shop membuat pemain dapat
62
membeli berbagai macam perlengkapan dalam game, memperkuat senjata, mempelajari kemampuan dan lain - lainnya. Apabila pemain memilih lokasi yang ada di peta maka permainan akan dimulai di tempat yang dipilih tersebut dan pemain akan memasuki gameplay. Dalam gameplay pemain masih bisa mengakses setelan permainan. Setelah pemain menyelesaikan gameplay pemain akan dihadapkan dengan menu result
untuk mengetahui performa
bermain pemain. Setelah menu result selesai pemain akan kembali ke advanture menu. 3.3.2.3.2 Konsep Interaksi Unik Game ini memiliki beberapa fitur interaksi yang menarik yang mendukung kenyamanan bermain. Salah satu yang fitur yang menarik adalah virtual joypad pada gameplay. Birtual joypad dibagi menjadi dua wilayah besar di sisi layar, sisi kiri layar untuk menggerakkan karakter dan sisi kanan layar untuk melakukan aksi. Virtual joypad memiliki ukuran wilayah yang spesifik yang menuntut pemain untuk meletakkan jarinya di atas visual dari virtual joypad. Pemain dapat mengatur ukuran dan letak dari visual virtual joypad melalui menu penyetelan. Gambar ikon kemampuan khusus memiliki gambar yang sesuai dengan kemampuan yang telah dipilih pemain selain itu apabila terdapat cooldown setelah pemain menggunakan kemampuan maka akan ada fill up meter yang ada pada ikon untuk mengindikasikan sisa waktu cooldown. 3.3.2.4 Epic Battle Dude
Gambar 3.9 Screenshoot Epic Battle Dude
63
3.3.2.4.1 Model Navigasi Dalam game Third Blade model navigasi terbagi dalam beberapa tingkatan menu. Setiap menu mengelompokkan fitur.
Gambar 3.10 Model navigasi atau flow chart game Epic Battle Dude
Permainan dimulai dengan munculnya berisi opening screen yang berisi ilustrasi game, logotype dan juga terdapat perintah untuk menyentuh layar untuk memulai permainan. Setelah menyentuh lar pemain akan masuk ke main menu. Dalam main menu pemain dapat mengakses pilihan seperti melanjutkan permainan sebelumnya, bermain dari awal dan juga mengatur setelan permainan. Apabila pemain memilih new game ( permainan baru ) pemain akan dihadapkan dengan cerita dari game kemudian masuk ke permainan. apabila pemain memilih resume ( melanjutkan permianan ) pemain akan langsung melanjutkan ke permainan yang telah dimainkan sebelumnya. Setelah bermain pemain akan dihadapkan dengan pilihan untuk memperkuat diri, setelah itu pemain akan diberi gambaran cerita untuk misi selanjutnya dan juga dimunculkannya jendela konfirmasi bagi pemain. 3.3.2.4.2 Kosep Interaksi Unik Pada game Epic Battle Dude, terdapat interaksi menarik terkait dengan pengendalian saat permainan. Pemain akan mendapati dua kelompok area tombol yaitu kiri dan kanan. Kelompok area kiri berfungsi untuk melakukan aksi
64
bagi pemain seperti menyerang. Kelompok area kanan berfungsi untuk melakukan aksi yang berkaitan dengan apa yang akan dihadapi pemain seperti musuh ataupun item yang akan didapat. Area tombol dibagi secara simetris sehingga pemain akan dengan mudah menangkap fungsinya. 3.3.3 Usability Test Usability test dilakukan dengan 2 tahap yaitu, pre - test dan post test 1. Pre - Test Pre - test dilakukan dengan cara mengetes sebuah UI yang memiliki fitur dan game design yang memilki kemiripan dengan game yang akan dibuat di perancangan. Tes ini dilakukan pada 5 orang dengan cara memperhatikan kebiasaan bermain pemain, bagaimana tanggapan mereka terhadap UI dan perbaikan apa yang dapat dilakukan untuk memperbaiki UI tersebut. Game yang digunakan pada test ini adalah game Deep Dungeons of Doom, game yang dikembangkan oleh Bossa Studio.
Gambar 3.11 Salah satu proses pre - test
2. Post - Test Post - test dilakukan dengan cara mengetes prototype UI maupun hasi final UI dari game. Test dilakukan oleh tim developer saat pengembangan dan juga kepada publik saat UI bisa diakses untuk demo.
65
3.4 Teknik Perancangan Teknik perancangan pada perancangan user interface terbagi menjadi beberapa
tahapan
untuk
menghasilkan
sebuah
konsep
desain
yang
komprehensif yang nantinya akan menjadi dasar yang penting dalam mengimplementasi sebuah desain . Tahapan pertama sebelum menentukan konsep desain adalah dengan cara meneliti fenomena yang ditemui. Setelah dilakukannya penelitian terhadap fenomena, tahapan selanjutnya adalah mengidentifikasi masalah berdasarkan fenomena tersebut. Ketika identifikasi masalah sudah dipaparkan, selanjutnya dibuatlah batasan masalah untuk merumuskan masalah. Penjabaran pada perumusan masalah ini nantinya akan menjadi latar belakang
dari semua proses perancangan dan menjadi dasar
tentang solusi desain apa yang akan diimplemetasikan sebagai pemecahan masalah tersebut. Setelah rumusan masalah dibuat, tahapan selanjutnya adalah melakukan penelitian melalui studi literatur dan studi eksisting. Tahap ini bertujuan untuk mengetahui fundamental ilmu pengetahuan yang digunakan dalam mendukung proses teknis dan proses pembentukan konsep dalam mendesain. Dilakukan juga penelitian terhadap eksisting untuk mengetahui dan membandingkan bagaimana sebuah implementasi desain yang sudah ada diluncurkan di puclik dapat menyelesaikan permasalahan. Kemudian dilakukan juga pengumpulan data melalui wawancara dengan beberapa ahli, stakeholder dan juga melakukan serangkaian tes pada audiens untuk mengetahui hal - hal lain yang harus dipertimbangkan dari segi teknis maupun pembentukan konsep terkait dengan pemecahan rumusan masalah. Tahap berikutnya adalah melakukan analisa terhadap data - data yang telah dikumpulkan melalui penelitian baik dari studi literatur maupun penelitian langsung terhadap ahli, stakeholder dan audiens, dibuatlah sebuah batasan dan kriteria yang akan membentuk konsep desain. Konsep desain ini nantinya akan menjadi acuan bagi implementasian desain.
66
3.4.1 Variabel Desain 3.4.1.1 Usability Variabel desain usability meliputi segala aspek dari konsep interaksi sebuah user interface agar user interface tersebut dapat digunakan secara maksimal dan mengijinkan pemain untuk berinteraksi dengan sistem dengan nyaman. Variabel usability ini meliputi model navigasi, kontrol, ikon, layout dan feedback akan dirancang berdasarkan kesimpulan dari observasi terhadap game - game bergenre sejenis yang sudah populer terlebih dahulu agar tidak menimbulkan kebingungan bagi pemain dalam memahami sistem. Selain itu perancangan hirarki akan mengacu kepada literatur - literatur yang sudah ada. Perancangan dasar dan penyempurnaannya akan mengacu kepada hasil dari usability test. 3.4.1.2 Tema Visual Perancangan aspek tema visual yang digunakan akan mengacu kepada hasil wawancara mendalam dengan pemilik properti intelektual Garudayana Saga, Is Yuniarto untuk menentukan batas - batas tema visual dan juga referensi dasar yang mewakili citra Garudayana Saga. Tema visual yang dirancang akan lebih berfokus kepada unsur fantasi yang terinspirasi dari budaya yang berasal dari kerajaan bercorak HIndu dan Budha Perancangan tema visual juga akan berdasarkan literatur baik literatur fisik seperti ensiklopedia maupun literatur dari internet. 3.4.2 Kriteria Desain Kriteria desain dari perancangan ini akan dihasilkan dari seluruh variabel yang didapat berdasarkan hasil analisis dari penelitian. Kriteria desain juga didasarkan atas kontrol kualitas dari pihak Mojiken Studio dan Is Yuniarto selaku stakeholder dari perancangan ini dan masukan dari audiens saat usability test. 3.4.3 Implementasi Desain Setelah
menentukan
kriteria
desain,
variabel
desain
dapat
diimplementasikan dalam bentuk konsep usability dan user interface asset untuk game mobile Garudayana Saga : Ashura Hunter. Game mobile yang dihasilkan
67
melalui perancangan ini akan berada pada thap beta dan disesuaikan dengan waktu pengeraan tugas akhir. 3.4 Diagram Proses Perancangan
Gambar 3.12 Diagram proses perancangan
BAB IV KONSEP DESAIN
4.1 Konsep Desain 4.1.1 Output Perancangan Output yang dihasilkan dari perancangan ini adalah user interface dari game Garudayana Saga : Ashura Hunter untuk platform mobile dengan alat kendali touch screen. Hasil desain dari user interface mengkhususkan diri kepada user interface untuk game bergenre action dengan alat kendali touch screen. Secara visual user interface akan merepresentasikan dunia dari Garudayana Saga. Output perancangan meliputi konsep usability yang terdiri dari model navigasi, feedback, penggunaan ikon dan juga pengaplikasian tema visual pada asset yang merepresentasikan Garudayana Saga. 4.1.2 Data Konsep Konsep usability dan konsep tema visual pada perancangan user interface akan mengacu kepada beberapa sumber yang berhubungan dengan dokumen desain game, hasil interview terkait user interface, dan identitas visual dari Garudayana Saga. Selain itu pengembangan konsep juga berdasarkan masukan dari audiens yang didapat dari usability test yang dilaksanakan beberapa kali. 4.1.2.1 Game Design Document Game design document (GDD) dari game Garudayana Saga : Ashura Hunter berisi tentang seluruh fitur pada game dan bagaimana cara bermain game. GDD ini akan menjadi konten dari user interface. User interface pada game berfungsi menjelaskan dan menuntun pengguna untuk mengeksplorasi seluruh fitur pada game yang ada pada GDD. GDD ini telah dikembangkan
68
69
bersama tim game developer dari Mojiken Studio. Berikut adalah detail dari game desain berdasarkan GDD : A. Konsep Dasar Pemain berperan sebagai Gatotkaca dan menelusuri cerita kehidupannya. Cerita Gatotkaca dibagi menjadi 6 Episode, yaitu episode 0 - 5. Di setiap episode terdapat musuh, yang harus dikalahkan Gatotkaca. Permainan akan memiliki tampilan seperti game dengan genre fighting, yaitu tampilan satu lawan satu dengan komposisi simetris untuk menciptakan kesan duel dan keseimbangan antara dua petarung. Pada beberapa bagian tertentu pemain akan dihadapkan dengan adegan yang menyerupai komik interaktif.
Gambar 4.1 Mockup dasar game
B. Kontrol Pemain Dalam mengalahkan musuh yang dihadapi oleh Gatotkaca, pemain dapat memanfaatkan beberapa aksi yang ada antara lain : -
Defense ( Bertahan ) : Dengan menyentuh sisi kiri layar pada perangkat, pemain akan mengaktifkan aksi bertahan sekilas. Dengan timing yang tepat maka serangan musuh dapat dinetralkan.
70
-
Combo Strike ( Serangan Berturutan ) : Dengan menyentuh ikon tombol serangan pada sisi kanan layar perangkat maka pemain akan melakukan serangan pada musuh. Gatotkaca memiliki set serangan, dimana setiap set serangan berisi 3 gerakan serangan. 3 serangan ini dilakukan dengan cara menyentuh layar beberapa kali, sentuhan layar pertama akan menghasilkan menghasilkan
gerakan gerakan
pertama, kedua,
dan
sentuhan
kedua
sentuhan
ketiga
akan akan
menghasilkan gerakan ketiga. Sentuhan keempat akan kembali mengaktifkan serangan pertama dan sentuhan keenam akan mengaktifkan serangan kedua dan seterusnya. Set serangan dapat
dicapai
apabila
pemain
menyentuh
tombol
secara
berturutan dalam waktu yang singkat, apabila pemain tidak segera melanjutkan serangan, maka serangan akan kembali ke serangan pertama. -
Special Skill ( Keahlian Khusus ) : Dengan menyentuh ikon tombol keahlian khusus pada sisi kanan layar perangkat maka pemain akan melakukan keahlian khusus. Keahlian khusus akan membuat pemain melakukan serangan kuat ataupun memberi dampak negatif pada musuh. Keahlian khusus dapat dilakukan asalkan energi Gatotkaca terpenuhi. Apabila keahlian khusus sudah dilakukan maka pemain harus menunggu beberapa saat agar energi Gatotkaca penuh kembali dan siap melakukan keahlian khusus.
-
Item ( Bantuan ) : Dengan menyentuh ikon item pada sisi kanan layar perangkat maka pemain akan mendapatkan bantuan dalam permainan dengan jumlah yang terbatas. Bantuan ini akan menghasilkan dampak tertentu sesuai dengan yang pemain pilih sebelum bermain. Bantuan ini berjumlah terbatas sebanyak yang dibeli oleh pemain.
-
Finisher ( Pengakhir ) : Dengan menyentuh ikon finisher pada tengah layar pemain akan memasuki mode pengakhir. Dalam mode ini pemain akan dihadapkan dengan sejumlah panel komik yang memiliki berbagai ikon perintah. Ikon ini akan meminta
71
pemain untuk menyentuh layar, meng-swipe layar pada tempattempat tertentu dengan jumlah waktu yang terbatas. Apabila rentetan perintah dapat dilaksanakan maka akan muncul animasi pada panel yang tertampil.
C. Fitur Pemain a. Spirit : Setiap pemain berhasil menyelesaikan sebuah permainan dalam episode, pemain akan mendapatkan spirit. Spirit ini nantinya berguna untuk mempelajari kemampuan baru serta memperkuat pemain. b. Rating / Star Score : Setiap pemain berhasil menyelesaikan sebuah permainan maka pemain akan mendapatkan peringkat sesuai dengan performa bermainnya. Peringkat ditandai dengan tanda 3 bintang. Setiap bintang memiliki tiga jenis penilaian performa bermain : 1. Bintang 1 ( Time Play ) : Waktu yang dibutuhkan pemain untuk menyelesaikan permainan 2. Bintang 2 ( Total Score ) : Total Skor yang didapat. Skor memiliki beberapa dasar penilaian yaitu :
Jumlah kombo yang dilakukan ( semakin banyak maka semakin
baik )
Jumlah item yang digunakan (semakin sedikit maka semakin baik
ataupun sebaliknya tergantung jenis item )
Jumlah damage yang diterima pemain ( semakin sedikit damage
yang didapat maka semakin baik )
Apabila pemain kalah maka akan mengurangi skor
3. Bintang 3 ( Finisher ) : Keakuratan saat Finisher Mode ( semakin akurat dan semakin cepat , maka semakin baik ) c. Customization : Fitur dimana pemain dapat meng-kustomisasi sendiri serangan sesuai dengan keinginan.
72
-
Custom Combo : Pemain dapat mengkustomisasi set serangan
yang nantinya akan pemain gunakan saat bermain. Set serangan berisi 3 blok dan setiap blok berisi 1 serangan. Blok serangan dapat diisi sesuai dengan serangan yang sudah dimiliki oleh pemain. -
Custom Skill : Selain itu pemain juga dapat mengkustomisasi
special skill apa yang ia akan gunakan nantinya. Special skill hanya memillopkkpp,iki 1 blok saja dan hanya dapat diisi dengan special skill yang telah dimiliki oleh pemain. d. Combo & Skill Learning : Fitur dimana pemain dapat mempelajari kemampuan baru seperti serangan dan special skill baru. Dalam mempelajari kemampuan baru pemain diharuskan menukarkan spirit yang ia miliki dengan kemampuan yang ingin ia pelajari. Selain persyaratan experience yang harus terpenuhi, pemain juga harus meningkatkan beberapa persyaratan lainnya dalam mempelajari kemampuan, contohnya : -
Mencapai atribut tertentu
-
Mencapai peringkat tertentu
-
Menyelesaikan episode tertentu, dan lainnya Berikut adalah daftar yang kemampuan yang bisa dipelajari
Gatotkaca : Active Skill : - Combo Move : Mempelajari satu jenis serangan baru yang dapat dilakukan Gatotkaca - SKill Move : Mempelajari satu jenis special skill baru yang dapat dilakukan Gatotkaca Apabila pemain ingin menukarkan spirit yang dengan combo, skill ataupun item, pemain harus memiliki sejumlah spirit yang diperlukan Spirit didapat dari setiap stage yang terselesaikan dan spirit yang didapat berjumlah tetap dan tidak tergantung dengan performa bermain pemain.
73
Beberapa combo dan skill dapat ditukarkan dengan spirit apabila syarat telah terpenuhi. Contohnya combo tertentu dapat ditukarkan apabila quest tertentu telah selesai. Apabila syarat sebuah combo belum terpenuhi maka combo tersebut tidak dapat ditukarkan dengan spirit atau bisa disebut juga dengan terkunci. e. Item : Fitur ini berfungsi untuk menukarkan yang didapat Gatotkaca dengan item tertentu. Berikut adalah daftar barang yang dapat ditukarkan : - Potion : Memulihkan ketahanan Gatotkaca sebanyak 50% - Shock Fist : Memberikan energi listrik pada musuh. Membuat musuh dalam kondisi stunned dan memberi damage secara berkala - Quicken : Mempercepat serangan dan memperpanjang jangka waktu kombo. e. Energy : Pemain memiliki energy yang merupakan nilai tukar bagi pemain untuk bisa memainkan permainan. Setiap pemain bermain maka pemain akan kehilangan energy. Agar energy dapat terisi kembali pemain harus menunggu sesuai dengan waktu yang ditentukan selama permainan. f. Shop : Fitur ini berfungsi untuk mengakses halaman shop. Tempat dimana pemain dapat melakukan pembelian dalam aplikasi ( in-app purchase ). Berikut adalah daftar IAP yang dapat dibeli : - Energy Pack : Pemain dapat kembali mengisi energy tanpa perlu menunggu lama - Spirit Pack : Pemain mendapat sejumlah spirit - Unlock Slot : Pemain membuka slot skill yang dapat digunakan g. Quest : Fitur dimana pemain mendapat sejumlah kondisi atau perintah tertentu saat bermain. Apabila perintah ini terpenuhi maka
74
pemain akan mendapat gelar dan juga dapat mempelajari combo atau skill. h. Chapter, Stage & Battle : Dalam permainan terdapat chapter yang menandai progress cerita permainan. Setiap chapter berisi setiap cerita inti dari permainan. Dalam satu chapter terdapat lebih dari satu stage. Stage adalah dimana pemain bermain dan di setiap stage terdapat perhitungan total Star Score. Dalam setiap stage terdapat lebih dari 4 pertarungan dan di pertarungan akhir setiap stage pemain akan menghadapi boss. 1 Chapter = +2 Stage 1 Stage =+5 Pertarungan i. Daily Bonus : Apabila pemain yang memainkan game ini terhubung dengan internet, maka setiap bermain ia akan mendapat bonus fitur dalam permainan. Bonus ini dapat berupa item, spirit ataupun yang lainnya. Bonus ini hanya didapatkan sekali setiap harinya. C. Platform Spesifikasi Minimum Hardware Sistem operasi : HTML5, iOS, Android Device Minimum : Ukuran Layar : 3.5 in dengan resolusi 960 x 640 Alat Kendali : Layar Sentuh Prosessor : Single Core 4.2 Konsep Desain Narrative Ethnic Fantasy Konsep Narrative Ethnic Fantasy mewakili dasar filosofi desain dari UI game Garudayana Saga : Ashura Hunter. Pada dasarnya Garudayana Saga merupakan properti intelektual yang didasarkan pada komik yang mengangkat kisah pewayangan, sehingga nilai utama dari karya ini adalah cerita dan juga
75
nilai legenda dan budaya yang merupakan dasar fondasi dari cerita tersebut. Agar game Garudayana Saga tetap memilki nuansa bercerita atau naratif yang juga mengangkat kebudayaan diperlukan sebuah konsep usability dan tema visual yang sesuai yaitu Narrative Ethnic Fantasy. Secara mendasar konsep desain Narrative Ethnic Fantasy merupakan panggabungan dari dua konsep yaitu konsep naratif dan konsep fantasi etnis.Menurut Kamus Besar Bahasa Indonesia, naratif berarti bersifat narasi, bersifat menguraikan. Apabila dikaitkan dengan konsep desain dari UI game mobile Garudayana Saga : Ashura Hunter maka konsep UI ini menawarkan pengalaman menggunakan UI yang memudahkan pemain mengoperasikan dan mengakses berbagai fungsi dalam game sambil menyajikan cerita dalam game dan juga potongan adegan yang menggambarkan suasana dan kegiatan dalam game. Dengan adanya konsep ini diharapkan pemain dapat memiliki pengalaman bermain yang immersive. Berdasarkan
hasil observasi pada
beberapa game terdapat beberapa kekurangan dan kelebihan dalam metode interaksinya. Konsep naratif pada game Garudayana Saga : Ashura Hunter, menitikberatkan pada kemudahan akses pemain dari satu menu ke menu lain, kenyamanan pemain serta memberikan pengalaman menggunakan UI yang naratif. Selain itu penggunaan tombol dan alat kendali juga dibuat mudah dijangkau dengan meletakkannya pada posisi yang menguntungkan. Fantasi merupakan genre fiksi yang secara umum memanfaatkan sihir dan fenomena supernatural sebagai elemen plot utama, tema dan latar. Banyak karya yang termasuk dalam genre fantasi mengambil latar pada dunia imajinasi dimana sihir dan makhluk mistik sering dijumpai. Pada dasarnya genre fantasi berbeda dengan genre science fiction dan horror. Meskipun ketiga genre tersebut memiliki banyak perbedaan, ketiga genre tersebut dikategorikan dalam subgenre speculative fiction 37 . Ciri -ciri dari genre fantasi adalah terdapatnya
37
Tolmie, Jane, Medievalism and Fantasy Heroine, Journal of Gender Studies, 2006
76
elemen bersifat fantasi pada latar yang telah disusun sedemikian rupa oleh pengarang, dimana inspirasi berasal dari mitologi dan cerita rakyat38. Menurut Pasal1 Angka 3 Undang-Undang No.40 tahun 2008, Etnis adalah penggolongan manusia berdasarkan kepercayaan, nilai, kebiasaan, adat istiadat, norma bahasa, sejarah, geografis dan hubungan kekerabatan39. Tema fantasi etnis merupakan tema yang secara umum mengangkat tema fantasi berkonten mitologi atau cerita rakyat uang mengacu kepada kepercayaan, nilai, kebiasaan, norma bahasa,sejarah dan geografis golongan manusia tertentu. Tema visual pada user interface berfungsi sebagai penguat pengalaman bermain pada game Garudayana Saga : Ashura Hunter. Tema visual semakin menambah nilai immersive dalam game sehingga pemain dapat merasa berada dalam dunia dalam game. Tema visual pada game ini mengacu pada hasil wawancara. dengan pengarang Garudayana Saga terkait konsep dasar visual dan apa saja batasan - batasan konsep desain. 4.3. Kriteria Desain 4.3.1 Usability Usability mengacu kepada keterbisaan sebuah user interface untuk digunakan oleh pengguna dalam berinteraksi dengan game. Dalam perancangan ini digunakan konsep usability bernama "Narrative Operation" 4.3.1.1 Model Navigasi/ Flow Chart Model navigasi atau flow chart pada game Garudayana Saga : Ashura Hunter ini mengadaptasi dari model navigasi pada game - game lain yang memiliki genre dan fitur yang mendekati game ini. Adaptasi ini dilakukan agar tidak menciptakan kebingungan bagi pengguna yang telah terbiasa memainkan game yang memiliki genre dan fitur yang mirip, karena pada dasarnya game -
38 39
Grant, John, Clute, John, The Encyclopedia of Fantasy, 1997 http://luk.staff.ugm.ac.id/atur/UU40-2008PenghapusanDiskriminasi.pdf
77
game yang telah dirilis telah mengadaptasi mental model dan proses kegiatan manusia sehari - hari dalam beraktivitas40. Konsep flow chart pada game Garudayana Saga : Ashura Hunter memiliki 4 menu utama yang nantinya akan memiliki anak menu lain. Penggolongan menu ini akan dimaksudkan agar pengguna dapat dengan mudah mempelajari model navigasi ini dan memudahkan pengguna untuk menuju dari satu menu ke menu yang lain ataupun kembali ke menu yang sebelumnya. 4 Menu utama ini adalah Title Screen, Main Menu, Chapter Select dan gameplay.
Gambar 4.2 Konsep model navigasi
Pada setiap menu utama telah terpetakan fungsi umum dari menu dan anak menu - anak menu apa saja yang nantinya berada pada setiap menu. Pada Title Screen pemain dapat mengetahui judul game dan juga dapat menikmati ilustrasi pembuka game agar pemain mendapat possitive first impression terhadap game. Pada Title Screen ini, pemain juga dapat mengakses hal - hal terkait teknis dalam game seperti pengaturan opsi permainan, melihat credit dari tim pengembang, mengakses game - game lain, dan menentukan jenis permainan apa yang akan dimainkan. Apabila pemain memilih opsi play berikut anak opsinya pemain akan mengakses menu besar, Main Menu. Apabila pemain mengakses selain play maka yang muncul adalah anak menu berupa jendela kecil. Pada Main Menu, pemain sudah memulai memasuki dunia dalam game. Menu ini mengadaptasi kegiatan persiapan bepergian orang - orang pada umumnya yaitu mempersiapkan barang bawaan, menentukan destinasi dan tujuan bepergian. Dalam Main Menu pemain dapat mengakses anak menu yang 40
Ibid, Fundamentals of Game Design
78
berhubungan dengan persiapan berpetualang atau bertarung, seperti akses menu combo dan skill yang menampung fitur kustomisasi kemampuan aktif pemain, akses ke menu shop yang menampung fitur in app purchase atau belanja dalam aplikasi, dan akses ke menu quest yang menampung fitur quest agar pemain dapat mengetahui misi apa yang dapat dijalankan pemain. Apabila pemain mengakses tombol menu yang bergambar anak panah dan bertuliskan go maka pemain akan memasuki menu besar Chapter Select. Dalam Main Menu ini pemain akan dapat melihat tokoh utama yang sedang beraktivitas sesuai dengan menu yang dipilih. Apabila pemain memilih menu combo maka tokoh utama akan melakukan gerakan yang sesuai dengan combo yang pemain pilih. Pada halaman gameplay ini pemain akan mulai bermain. Di saat bermain terdapat dua mode permainan yang akan ditemui, yaitu fight dan finisher. Mode fight adalah mode permainan yang menjadi inti permainan yang akan selalu muncul yaitu pertarungan pemain dengan musuh. Mode finisher adalh mode permainan khusus yang muncul apabila pemain menghadapai musuh tertentu dengan jenis, boss. Di saat bermain pemain dapat mengakses pause menu untuk melakukan pengaturan atau kembali ke advanture menu. Setelah pemain menyelesaikan permainan baik dalam kondisi kalah atau menang, pemain akan menemui akan menemui anak menu atau jendela result. Jendela result akan memberikan informasi tentang bagaimana performa bermain kepada pemain. Setelah jendela result pemain dapat kembali ke advanture menu atau bermain kembali di gameplay. 4.3.1.2 Layout & Wireframing Setiap halaman memiliki layout yang memusatkan tata letak interaksi atau alat pengendalian di sisi kanan, kiri dan bawah layar. Dan informasi yang di tampilkan berpusat pada bagian tengah dan atas layar agar pengguna fokus terhadap informasi, dengan penempatan informasi pada tengah layar dan peletakan alat kendali pada sisi layar maka akan memperkuat konsep easy operation yang mengutamakan kemudahan dalam mengoperasikan bagi pengguna. Berikut akan ditampilkan layout dan wireframe dasar beserta pemetaan fungsinya , antara lain :
79
1. Title Screen Title screen di sini merupakan elemen UI yang akan menciptakan possitive first impression sehingga dibutuhkan layout yang berfokus kepada tipografi dan ilustrasi pembuka. a. Title Screen - Basic Menu -
Gambar 4.3 Tampilan layout dan wireframe menu Opening Screen
Fungsi dalam menu ini adalah : -
Mengetahui judul game
-
Mengetahui metode kendali apa yang akan digunakan
-
Mengantar
pemain
secara
perlahan
sebelum
memasuki
permainan -
Memulai permainan
-
Menuntun pemain melakukan pengaturan permainan sebelum bermain
-
Mengetahui Tim dibalik layar game
Asset yang dibutuhkan dalam halaman ini adalah : Asset Title Screen Logotype Button Text : Story Mode Button Frame : Type 1 Title Illustration Icon : Options Button Icon : Back Button
Tabel 4.1 Kebutuhan asset Title Screen
80
b. Options
Gambar 4.4 Tampilan layout dan wireframe halaman Option
Fungsi dalam menu ini adalah : -
Mengatur, mematikan & menyalakan volume suara
-
Mengatur, mematikan & menyalakan volume musik
-
Menghapus data permainan saat ini
-
Kembali ke Main Menu
Asset yang dibutuhkan dalam halaman ini adalah :
Asset Options Headline Text : Options Icon : Music Icon : Sfx Slider (Cursor & Filler): Music Slider (Cursor & Filler): Sfx Slider (Empty) : Music Slider (Empty) : SFx Mini Window Button Frame : Type 2 x2 Button Text : Reset Data Button Text : Back
Tabel 4.2 Kebutuhan asset Options
81
c. Credits
Gambar 4.5 Tampilan layout dan wireframe halaman Credits
Fungsi dalam menu ini adalah :
-
Mengetahui nama-nama yang terlibat dalam pengembangan game
Asset yang dibutuhkan dalam halaman ini adalah : Asset Credits Headline Text : Options Text : Credit List Button Frame : Type 2 Button Text : Back
Tabel 4.3 Kebutuhan asset Credits
2. Main Menu Untuk menciptakan kesan naratif, dalam halaman Main Menu ini akan ditampilkan tempat beristirahat tokoh utama dan dalam tempat tersebut akan terdapat beberapa interaksi yang dapat dilakukan. Dalam halaman ini Gatotkaca akan memperagakan gerakan berdasarkan menu dan pilihan yang dipilih pemain hal ini dimaksudkan agar pemain dapat mengetahui terlebih dahulu bagaimana fitur yang ia pilih akan mempengaruhi gaya bertarung Gatotkaca. Selain itu hal ini juga akan menambah nilai immersive, interaktif dan naratif.
82
a. Combo
Gambar 4.6 Tampilan layout dan wireframe halaman Prepare Combo
Fungsi dalam menu ini adalah : -
Memilih combo
-
Melihat deskripsi combo
-
Melihat daftar combo
-
Memasang combo
-
Mempelajari combo dengan menukarkan XP
-
Melihat preview combo
-
Melihat dan memasang combo 1, combo 2 & combo 3
-
Melihat kondisi XP saat ini
-
Kemudahan akses ke Shop
Asset yang dibutuhkan dalam halaman ini adalah :
Asset Combo Menu Icon : Options Button Icon : Back Button Energy Socket Spirit Socket Icon : IAP Button x2 Container : Upper Container : Bottom Combo/Skill/Item Tree Combo/Skill/Item Window Button Frame : type 2
83
Button Frame : type 3 Button Text : Learn Button Text : Equip Button Text : Combo Button : Navigation Icon : Combo xX
Tabel 4.4 Kebutuhan asset Combo Menu
b. Skill
Gambar 4.7 Tampilan layout dan wireframe halaman Prepare Skill
Fungsi dalam menu ini adalah : -
Memilih skill
-
Melihat deskripsi skill
-
Melihat daftar skill
-
Memasang skill
-
Mempelajari skill dengan menukarkan XP
-
Melihat preview skill
-
Melihat kondisi XP saat ini
-
Kemudahan akses ke Shop
-
Mengakses menu combo, pow - up
-
mengakses item
Asset yang dibutuhkan dalam halaman ini adalah :
84
Skill Menu Icon : Options Icon : Back Energy Socket Spirit Socket Icon : IAP Button x2 Container : Upper Container : Bottom Combo/Skill/Item Tree Combo/Skill/Item Window Button Frame : type 2 Button Frame : type 3 Button Text : Learn Button Text : Equip Button Text : Skill Button : Navigation Icon : Skill xX Tabel 4.5 Kebutuhan asset Skill
c. Item
Gambar 4.8 Tampilan layout dan wireframe halaman Prepare Item
Fungsi dalam menu ini adalah : -
Memilih Item
-
Melihat deskripsi Item
-
Melihat daftar Item
-
Mendapatkan Item dengan menukarkan XP
-
Melihat preview Item
-
Melihat kondisi XP saat ini
85
-
Mengakses menu combo, skill, pow - up
-
Melihat kondisi XP saat ini
Asset yang dibutuhkan dalam halaman ini adalah :
Item Menu Icon : Options Icon : Back Energy Socket Spirit Socket Icon : IAP Button x2 Container : Upper Container : Bottom Combo/Skill/Item Tree Combo/Skill/Item Window Button Frame : type 2 Button Frame : type 3 Button Text : Purchase Button Text : Item Button : Navigation Icon : Item
Tabel 4.6 Kebutuhan asset Item
d. Quest Menu
Gambar 4.9 Tampilan layout dan wireframe halaman Quest
Fungsi dalam menu ini adalah : -
Melihat quest yang sedang berjalan
86
-
Melihat definisi quest
-
Melihat reward quest
-
Melihat progres quest
-
Mengakses menu other
-
Melihat jumalh XP saat ini
-
Kemudahan akses shop
Asset yang dibutuhkan pada halaman ini adalah : Quest Menu Icon : Options Icon : Back Energy Socket Spirit Socket Icon : IAP Button x2 Container : Upper Container : Bottom Combo/Skill/Item Tree Combo/Skill/Item Window Button Frame : type 3 Button Text : Quest Button : Navigation Icon : Quest x Progress Bar : Empty Progress Bar : Filler
Tabel 4.7 Kebutuhan asset Quest
3. Chapter Select Pada halaman Chapter Select ini pemain dapat melihat sinopsis dari bab cerita yang akan ia mainkan. Dalam UI terdapat ilustrasi yang menggambarkan cerita dari bab beserta beberapa kalimat sinopsis, hal ini dimaksudkan agar pemain lebih bisa terlibat dan mendalami cerita yang ada dan memunculkan pengalaman bermain yang immersive, interaktif dan naratif.
87
Gambar 4.10 Tampilan layout dan wireframe halaman Advanture Menu
Fungsi dalam menu ini adalah : -
Memilih chapter yang akan dimainkan
-
Melihat sinopsis chapter
-
Memilih stage yang akan dimainkan
-
Mengakses menu shop
-
Mengakses menu Achievement
-
Melihat kondisi XP saat ini
-
Mengakses sub - chapter
-
Melihat peringkat pengguna pada chapter yang telah diselesaikan
Asset yang dibutuhkan pada halaman ini adalah :
Chapter Select Button Text : 1,2,3,… Button Frame : type 4 Chapter Illustrations xX Button : Chapter Arrow Button : Navigation Text : Narasi Chapter Text : Judul Chapter Icon : Arrow Judul x2 Icon : Score Star x3
Tabel 4.8 Kebutuhan asset Chapter Select
88
4.3.2 Tema Visual 4.3.2.1 Warna Palet warna yang digunakan dalam game Garudayana Saga : Ashura Hunter akan dibagi menjadi 2 golongan yaitu : 1. Palet Warna Tema Visual Konsep palet warna pada user interface berhubungan erat dengan konsep dunia dari Garudayana Saga dan kosep game Garudayana Saga : Ashura Hunter untuk menambah nilai imersif dalam game. Berdasarkan depth interview dengan Is Yuniarto, selaku pemilik IP, didapatkan konsep dasar warna yaitu cerah secara umum. Warna - warna cerah secara umum ini dapat dilihat dari ilustrasi - ilustrasi pada komik Garudayana Saga. Warna yang diambil dari komik akan menjadi warna dasar tema pada tema visual user interface. Dapat dilihat pada gambar 4. warna - warna yang digunakan pada komik Garudayana Saga cukup beragam. Dalam pengimplementasiannya warna pada komik memiliki tingkat saturasi yang cerah meskipun kondisi lingkungan sekitar adalah tempat yang secara umum memiliki kondisi pencahayaan gelap.
Gambar 4.11 Cover komik Garudayana Saga yang memuat kriteria palet warna
89
Setelah warna dasar didapatkan, untuk memperkuat kesan genre action dengan tokoh utama Gatotkaca, yaitu kesan kekuatan, keagungan, petualangan dan juga kemegahan, digunakanlah warna merah dan kunin. Warna merah adalah warna yang melambangkan energi, dinamis, kekuatan, keberanian, petualangan 41 . Warna merah ini sangat cocok dengan genre game dari Garudayana Saga Ashura Hunter yang pada dasarnya memiliki sistem permainan mengalahkan musuh dengan serentetan serangan tertentu. Warna kuning memiliki makna panas, matahari, dan juga energi. Dalam dunia Garudayana Saga, salah satu utama warna Gatotkaca adalah warna kuning dan Gatotkaca sendiri memiliki lambang matahari di dadanya, sehingga warna kuning dapat digunakan untuk memperkuat tema visual pada user interface. Selain itu palet warna juga mengadaptasi palet warna dari pertunjukan wayang yang memilki warna coklat kekuningan.
Gambar 4.12 Cover komik Garudayana yang memuat palet warna Gatotkaca
Menurut Pepin van Roojen dalam bukunya Batik Design, warna dari pewarna alami yang umum digunakan pada kain batik klasik adalah warna biru, coklat, indigo, merah dan kuning42.
41 42
Joliffe, Carrey, http://www.cjolliffe.com/Resources/CJGA-Color-Theory.pdf Pepin van Roojen, Batik Design, (Amsterdam: The Pepin Press), 31
90
Warna merah dan kuning juga merepresentasikan bangunan - bangunan kuno Indonesia yang mewakili corak Hindu contohnya seperti candi. Beberapa candi di Indonesia menggunakan material bata merah sehingga warna candi menjadi kemerahan, salah satu contohnya adalah candi Bajang Ratu di daerah Trowulan.
Gambar 4.13 Beberapa motif batik ( sumber : Batik Design, Pepin van Roojen )
Gambar 4.14 Palet Warna yang digunakan untuk tema visual interface
Warna - warna ini nantinya akan digunakan sebagai acuan dalam mendesain tema visual pada interface sebagai penambah nilai immersive dan juga unsur dekoratif. 2. Palet Warna Fungsional Palet warna fungsional digunakan untuk merepresentasikan setiap fungsi dari sebuah tombol dan menciptakan diferensiasi antar satu tombol dengan tombol yang lain. Pembedaan warna ini dimaksudkan agar pengguna dapat dengan cepat membuat keputusan interaksi hanya dengan melihat warna saja. Warna - warna yang digunakan adalah warna kuning, hijau, merah, oranye, dan biru.
91
Gambar 4.15 Palet warna yang digunakan warna fungsional
Contoh penggunaan palet warna ini adalah saat pemain memasuki halaman gameplay pemain harus diberikan serangkaian tombol perintah yang akan membuat pemain melakukan aksi yang berbeda - beda. Aksi - aksi ini 4.3.2.2 Elemen Dekoratif Ornamen dekoratif yang diimplementasikan pada user interface dalam game Garudayana Saga : Ashura Hunter berfungsi untuk memperkuat kesan imersif dalam game dan juga menghidupkan genre pada game. Selain itu, secara estetika, ornamen akan memperindah tampilan visual user interface dan juga membuatnya berkesinambungan dengan dunia Garudayana Saga. Berdasarkan hasil interview dengan Is Yuniarto, kreator Garudayana Saga, ornamen dasar dari dunia Garudayana Saga mengambil tema desain berdasarkan cerita Mahabarata yang mulai muncul saat adanya kerajaan bercorak Hindu dan Buddha di Indonesia. Secara arsitektural, Garudayana Saga mengeksplor bangunan - bangunan di Asia Tenggara dan India yang memilki unsur corak Hindu dan Buddha. Secara ornamen, dunia pada Garudayana Saga berfokus pada ornamen - ornamen yang ada di pulau Jawa. Ornamen - ornamen ini meliputi ukiran pada candi, ornamen pada batik dan kain, juga ornamen pada benda - benda seni lainnya. Dalam tradisi Jawa, batik memiliki berbagai macam makna pada setiap motifnya. Motif - motif pada batik dihasilkan karena pengaruh dari berbagai macam agama dan kebudayaan yang ada di Indonesia sejak abad ke - 9. Di antaranya pengaruh dari Hindu dan Buddha yang sudah ada sejak abad ke - 9 dan mulai menyebar luas ke berbagai wilayah nusantara saat abad ke 13 - 15
92
khususnya saat Kerajaan Majapahit mengalami puncak kejayaan 43 . Selain itu batik - batik di indonesia juga banyak mendapat pengaruh dari Cina dan juga Islam. Dalam perancangan ini makna penggunaan motif akan disesuaikan dengan perancangan. Berikut adalah tabel yang memuat makna motif batik yang akan digunakan pada perancangan44. Jenis Simbol
Makna Simbol
Garuda
Dunia atas, Penguasa, Raja
Kewan / Hewan
Kesaktian, Keagungan
Cemukiran
/ Kehebatan, keagungan
Pinggiran Sawat / Sayap
Pembawa Rezeki
Tluntum
Bunga kecil - kecil
Geni / Api
Pemberani, kekuatan mistik
Ada
-
ada
/ Inisiatif / Prakarsa
Kerangka tulang daun Naga
Dunia bawah
Sulur
Regenerasi
Tabel 4.9 Simbol dan makna motif batik
Gambar 4.16 Contoh motif batik.( sumber : Batik Design, Pepin van Roojen )
43 44
Ibid, Batik Design, 9 - 10 Haryanto, Sindung. 2013. Dunia Simbol orang Jawa
93
Gambar 4.17 Motif Lar, Mirong dan Sawat ( sumber : Batik Design, Pepin van Roojen )
Gambar 4.18 Motif cemukiran dan pinggiran batik ( sumber : Indonesian Ornamental Design, Pepin Press )
Selain dari kain motif batik, konsep desain tema visual juga diambil dari beberapa ornamen yang ada pada alat perkakas, dan juga bangunan seperti candi. Hal ini juga dimaksudkan untuk semakin memperkuat kesan etnis dan juga sebagai rujukan pengambangan konsep ikon dengan makna tertentu. Dalam perancangan ini digunakan beberapa motif ornamental yang telah didokumentasikan dalam buku "Indonesian Ornamental Design" yang diterbitkan oleh The Pepin Press. Ornamen - ornamen yang dipilih terfokus pada ornamen yang berada di pulau Jawa untuk mengikuti pakem tema visual dari duni Garudayana Saga.
94
Gambar 4.19 Motif kotak sirih Jawa ( sumber : Indonesian Ornamental Design, Pepin Press )
Gambar 4.20 Perisai bali dan beberapa alat penyimpan dari Jawa( sumber : Indonesian Ornamental Design, Pepin Press )
Gambar 4.21 Desain pilar pada candi - candi secara umum ( sumber : Indonesian Ornamental Design, Pepin Press )
95
Agar tema visual dapat memperkuat kesan genre game action dengan tokoh utama Gatotkaca, akan digunakan beberapa konsep ornamen hewan, cemukiran, garis kurva dan garis tegas. Dalam tradisi Jawa, makna motif batik hewan dan cemukiran merupakan lambang dari kesaktian, kekuatan, kehebatan dan keagungan. Makna batik tersebut merepresentasikan Gatotkaca yang sakti dan juga kuat. Selain itu konsep desain nantinya juga akan banyak menggunakan gabungan garis tegas dan garis kurva. Garis tegas untuk menggambarkan kekuatan dan ketegasan dan garis kurva menggambarkan kesan naturalis yang menjadi latar dari dunia Garudayana Saga. Elemen dekoratif dari UI game ini juga akan mengadaptasi elemen elemen candi seperti tekstur batu, ornamen candi, beserta relief yang ada. Tekstur batu digunakan untuk memperkuat kesan kekuatan dan juga game action. Ornamen candi, contohnya seperti ornamen berwujud kala akan digunakan untuk merpresentasikan wujud Ashura yang menjadi lawan utama dari Gatotkaca. Sedang penggunaan relief bertujuan untuk mencapai pengalaman bermain yang bernuansa naratif, fantasi dengan unsur budaya yang kental.
Gambar 4.22 Warna kemerahan candi dan drtil ornamen candi Bajang Ratu ( sumber : Memories of Majapahit, East Java Government Tourism Service)
Elemen dekoratif UI juga berfokus pada penggunaan ornamen api untuk menciptakan sebuah keterikatan grafis. Ornamen api dipilih karena maknanya yang berarti pemberani sehingga ornamen ini dukup sesuai dengan cerita dari game ini yang mengisahkan lahirnya Gatotkaca sebagai pahlawan.
96
Gambar 4.23 Ornamen Api ( sumber : Indonesian Ornamental Design, Pepin Press )
4.3.2.3 Tipografi Elemen tipografi juga salah satu unsur yang penting dalam pembuatan user interface. Tipografi yang digunakan pada game Garudayana Saga : Ashura Hunter, akan mengacu pada dunia Garudayana Saga. Berdasarkan depth interview dengan pengarang Garudayana Saga, bahasa yang digunakan sebagai istilah - istilah khusus pada dunia Garudayana Saga adalah bahasa Sansekerta. Dengan adanya bahasa Sansekerta.
Gambar 4.24 Aksara Devanagari yang menjadi konsep dasar dari tipografi ( sumber : blog.luke.org )
97
Apabila dilihat dari dua kriteria tipografi yaitu aksara Devanagari dan aksara Jawa maka dapat disimpulkan, penggunaan font untuk game Garudayana Saga : Ashura Hunter akan mengacu kepada dua sifat dasar dari aksara tersebut. Aksara Devanagari dan aksara Jawa memiliki kesan dekoratif dengan ukuran stem dan crossbar yang berbeda sehingga menciptakan sebuah karakter tebal dan tipis dalam setiap huruf. Selain itu aksara Devanagari dan aksara Jawa memiliki campuran unsur garis lengkung, garis lurus dan terdapat pula unsur kait pada anatominya. Merujuk pada sifat - sifat dasar dari aksara Devanagari dan aksara Jawa maka kriteria font yang digunakan adalah font yang memilki karakter old-style serif . Dalam konsep desain visual akan digunakan 2 jenis font family yang merepresentasikan konsep permainan dengan genre action, mengandung karakteristik aksara Jawa dan aksara Devanagari yaitu keluarga font Sitka.
Gambar 4.25 Font Sitka Text Bold
Gambar 4.26 Font Sitka Text Bold Italic
98
4.3.3 Rough Design Setelah menentukan konsep tema visual dibuatlah beberapa rough design yang mengacu pada konsep tersebut. Pembuatan rough design merupakan proses dari brainstorming akan menghasilkan alternatif - alternatif desain yang akan membantu dalam pencapaian desain akhir dari perancangan. Selain itu rough desigh juga berfungsi sebagai gambaran umum tentang implemntasi awal desain. Rough design ini akan mencakup beberapa aspek mulai dari desain border window, desain ikon, desain tombol, dan desain HUD. 4.3.3.1 Desain Window Aspek rough desain ini mencakup bagaimana desain window yang akan muncul pada halaman. Dengan mengimplementasikan konsep tema visual pada window, akan terbentuklah sebuah hasil desain yang merepresentasikan game Garudayana Saga : Ashura Hunter. Pada pembuatan rough design dihasilkan beberapa alternatif yang mewakili sifat fantasi etnis dari dunia Garudayana Saga.
Gambar 4.27 Beberapa alternatif rough design pinggiran window
Pada gambar di atas telah ditampilkan beberapa desain alternatif dari ujung pinggir window. Selain itu telah dibuat juga beberapa rough desain untuk bingkai window.
99
Gambar 4.28 Beberapa alternatif rough design bingkai window
Setelah
dibuat
pinggiran
window
maka
dibuatlah
window
yang
digabungkan dengan pinggirannya untuk melihat desain window secara keseluruhan.
Gambar 4.29 Beberapa alternatif rough design window
4.3.3.2 Desain Ikon Aspek rough design ini mencakup bagaimana desain ikon yang ada pada halaman. Setiap ikon merepresentasikan fungsinya dan juga apabila ikon dijadikan tampilan visual pada sebuah tombol maka representasi maknanya juga harus tepat. Rough design ikon dibagi menjadi 2 kelompok yaitu, ikon Advanture Menu dan ikon Prepare Menu.
100
4.3.3.2.1 Ikon Combo, Skill, Item dan Quest Kelompok ikon ini terletak pada main menu dan memiliki fungsi untuk mengakses kemampuan - kemampuan Gatotkaca seperti combo, skill, pow - up dan boost. Bentuk ikon didasarkan kepada aksi yang dapat dilakukan oleh Gatotkaca dan beberapa ikon lainnya mengacu kepada manfaat dari kemampuan Gatotkaca. Aksi - aksi ini tersedia dalam Tampilan visual pada ikon dapat berupa bagian tubuh yang mewakili gerakan Gatotkaca, efek visual yang merepresentasikan aksi dari Gatotkaca dan juga ikon yang sudah umum untuk beberapa aksi atau manfaat tertentu.
Gambar 4.30 Beberapa alternatif rough design ikon - ikon dalam prepare menu
Alternatif rough design diatas beberapa diantaranya memilki bentuk yang rumit dan kurang cocok untuk diimplementasikan ke layar kecil dan beberapa bentuk ikon kurang dikelompokkan. Pada tahap selanjutnya ikon akan dikelompokkan menjadi 4 kelompok berdasarkan fungsinya yaitu combo, skill, pow - up dan boost. Alternatif visual dikembangkan dari bagian motif batik ceplok yang pada dasarnya memilki bentukan geometris dan berpola secara teratur. Ikon - ikon ini nantinya juga akan digunakan sebagai tombol aksi saat bermain sehingga membutuhkan beberapa sentuhan khusus agar dapat dengan cepat ditangkap pemain. a. Combo
101
Gambar 4.31 Rough design ikon combo
Fitur combo menampung berbagai macam aksi dan setiap aksi memilki keunikannya masing - masing. Sehingga tampilan visual dari setiap aksi harus dapat dibedakan. Setiap visual diadaptasi dari gerakan - gerakan Gatotkaca. Ikon combo memilki bentuk dasar seperti bintang, hal ini dimaksudkan untuk menggambarkan efek impact yang mewakili serangan. Penggunaan warna oranye juga digunakan untuk mewakili kesan penyerangan. b. Skill
Gambar 4.32 Alternatf-alternatif rough design ikon skill
Fitur skill mirip dengan fitur combo hanya saja skill lebih efektif dan kuat daripada combo meskipun terdapat beberapa batasan - batasan tertentu. Visual pada skill merepresentasikan aksi Gatotkaca. Icon skill memiliki bentuk dasar yang mirip dengan combo hanya saja bentukan runcing pada ikon lebih banyak. Hal ini untuk memberikan kesan impact yang juga lebih kuat dan efektif. Warna merah mewakilkan serangan yang lebih tajam dari oranye.
102
d. Item
Gambar 4.33 Rough Design dari ikon boost
Fitur boost adalah fitur suportif yang digunakan untuk membantu Gatotkaca selama beberapa saat atau saat - saat tertentu seperti memulihkan kesehatan saat kritis, membantu melumpuhkan musuh, dan menambah jumlah serangan Gatotkaca. Bentuk dasar ikon ini mengambil bentuk lingkaran untuk memberi kesan pertahanan, dan suportif. Warna biru juga untuk melambangkan pertahanan. d. Quest Fitur quest adalah fitur di mana pemain diberikan sejumlah misi atau tantangan dengan kondisi tertentu. Apabila pemain berhasil menyelesaikan tantangan tersebut maka pemain mendapat keuntungan tertentu. Gambar dalam ikon mewakili judul dari setiap tantangan yang disajikan pada pemain. 4.3.3.2.2 Ikon Cakraka, Zakti dan Rasa Ikon ini digunakan sebagai penanda menu dan penanda halaman koleksi fitur yang sedang dibuka. Ikon ini berfungsi untuk memberi tahu pemain posisinya saat ini dan juga agar pemain mudah mengingat fitur - fitur yang ada pada
game.
Setiap
ikon
merepresentasikan
combo/cakraka, skill/zakti dan item/rasa
kegunaan
fitur
seperti
103
Gambar 4.34 Rough Design dari ikon perwakilan
4.3.3.3 Desain Tombol Aspek rough desain ini mencakup bagaiman desain tombol ditampilkan. Dengan mengimplementasikan konsep tema visual pada tombol, akan terbentuklah sebuah hasil desain yang merepresentasikan dunia Garudayana Saga. Dari pemuatan rough design dihasilkan beberapa alternatif. Desain tombol dikelompokkan menjadi dua jenis yaitu tombol yang menampung teks dan tombol yang menampung ikon.
Gambar 4.35 Beberapa alternatif rough design tombol yang menampung ikon
104
Desain tombol ini memiliki benuk yang cenderung memilki sisi yang sama, karena tombol ini berisi ikon.
Gambar 4.36 Beberapa alternatif rough design tombol yang menampung teks
Desain tombol ini memiliki benuk yang cenderung panjang, karena tombol ini berisi teks. 4.3.3.4 Desain Logotype Desain logotype dibuat berdasarkan logotype asli dari komik dengan menambahkan grafis yang mewakili konsep dasar cerita dari game yaitu kisah tentang Gatotkaca melawan Ashura.
Gambar 4.37 Logotype Garudayana Saga versi komik
Gambar 4.38 Rough design logotype Garudayana Saga : Ashura Hunter
105
4.3.3.5 Desain HUD Aspek desain HUD (Head - Up Display ) melputi segala informasi yang ditampilkan saat bermain. Game ini memilki konsep gameplay pertarungan satu lawan satu dengan komposisi tampilan yang simetris. Sehingga peletakan dan penerapan tema visual juga dilakukan sedemikian rupa untuk mendukung gameplay. HUD pada permainan mencakup , meter kesehatan pemain, meter kesehatan musuh, virtual controller untuk sebagai alat pengendali sekaligus penampil aksi apa saja yang dapat dilakukan oleh pemain, mengakses pause menu dan fitur boost apa yang saat ini sedang pemain gunakan atau dapatkan. Pada perancangan ini , sebelum melakukan brainstorming secara menyeluruh, dilakukanlah pembuatan mockup dasar tampilan beserta peletakan fungsi fungsi dasarnya.
Gambar 4.39 Mockup dasar tampilan permainan
Setelah dilakukan pembuatan mockup kemudian dikembangkan lagi ke konsep yang lebih komprehensif yaitu pengaplikasian konsep tampilan simetris untuk memperkuat kesan pertarungan satu lawan satu. Konsep ini diwujudkan melalui membuat rough design meter kesehatan pemain dan musuh.
106
Gambar 4.40 Rough design Health Bar pemain dan musuh
Pada game Garudayana Saga : Ashura Hunter terdapat mode permainan yang diakses ketika saat musuh sudah mencapai tahap kritis yaitu finisher mode. Finisher mode dapat diaktifkan dengan melakukan tap pada tengah layar saat pemberitahuan
sudah
muncul.
Pemberitahuan
ini
bertujuan
untuk
memperingatkan pemain untuk bersiap - siap memasuki finisher mode, yang mana metode pengendaliannya berbeda dengan mode permainan sebelumnya. Dalam mode ini pemain diharuskan melakukan tap pada wilayah - wilayah tertentu pada layar dengan cepat. Setiap beberapa tap yang berhasil dilakukan maka pemain akan melihat potongan adegan yang ditampilkan layaknya komik. Tampilan komik merupakan perwakilan dari karya asal Garudayana Saga, yaitu komik. Rough sketch dibuat untuk memberi gambaran tentang layout dan wireframe serta implentasi awal desain.
Gambar 4.41 Rough design pemberitahuan awal pengaktifan finisher mode
107
Gambar 4.42 Rough design saat finisher mode diaktifkan
4.3.3.6 Konsep Pengendalian dalam Game Alternatif 1 Saat permainan, terdapat 4 tombol utama yang dapat digunakan antara lain adalah bertahan, combo, skill dan pause game. Area layar dibagi menjadi 3 area besar yaitu bagian kiri area untuk tombol bertahan dan bagian kanan area untuk menyerang dan bagian bawah tengah bawah area untuk mengaktifkan pause game. Aksi bertahan diwakilkan dapat diakses dengan menyentuh separuh layar sebelah kiri, hal ini dimaksudkan agar alat kendali dapat selalu menyesuaikan dengan ukuran jari pemain dan juga ukuran device yang berbeda - beda, sehingga pemain tidak perlu susah payah menyetel ukuran tombol. Begitu juga dengan aski serangan, aksi serangan dapat diakses dengan menyentuh separuh layar sebelah kanan dengan perincian sisi kanan - bawah untuk mengaktifkan serangan combo dan sisi kanan
- atas layar untuk
mengaktifkan serangan skill. Tombo Pause berada di tengah bawah layar agar pemain mudah menjangkau tombol sekaligus mengurangi ketidaksengajaan tertekan. Alternatif 2 Saat permainan, terdapat 4 tombol utama yang dapat digunakan antara lain adalah bertahan, combo, skill dan pause game. Area layar dibagi menjadi 3 area besar yaitu bagian kiri area untuk tombol bertahan dan bagian kanan area
108
untuk menyerang dan bagian atas tengah area untuk mengaktifkan pause game. Di sisi area kiri layar terdapat tombol item dan bertahan. Area tombol/sentuh disesuaikan dengan ukuran asset ikon. Dengan adanya penyesuaian tersebut, komposisi
visual
game
dapat
tertata
dengan
baik
dan
juga
dapat
memaksimalkan area penglihatan bagi pemain sekaligus mengurangi visual clutter antara UI dengan asset karakter dan background. Area tombol sebelah kanan yang berisi tombol combo dan skill juga dibuat dengan desain interaksi yang sama untuk memaksimalkan tampilan permainan. Tombol pause diletakkan di atas agar tidak memberi visual clutter antara UI dengan permainan. Dalam game baik saat permainan dan finisher mode, juga dibutuhkan asset - asset yang juga spesifik. Gameplay HUD
Finisher Mode
Health Bar : Hero Health Bar : Hero Fill Health Bar : Enemy Health Bar : Hero Fill Icon : Combo x3 Icon : Skill x3 Icon : Defend Icon : Item x3 Button : Pause Cooldown : Skill Cooldown : Item Feedback : Defend Glow Feedback : Attack Glow Feedback : Attacked Feedback : Hit
Logotype : Finisher Button : Tap Button Button Frame : Crosshair Text : Perfect Text : Good Text : Bad Comic Panel xX
Tabel 4.10 Kebutuhan asset saat gameplay dan finisher mode
4.3.3.7 Desain Ilustrasi Ilustrasi digunakan pada beberapa halaman UI untuk menambah kesan immersive dan juga memberikan nilai narrative pada penyajian menu - menu.
109
Selain itu ilustrasi ini juga berfungsi sebagai penyambung antara produk komik yang penuh dengan Ilustrasi dengan gamenya. a. Ilustrasi Title Screen Ilustrasi pada halaman ini menggambarkan pertarungan Gatotkaca dengan Ashura untuk memberi sinopsis sistem permainan dan cerita dalam game.
Gambar 4.43 Rough design ilustrasi title screenn
b. Ilustrasi Chapter Select Dalam memilih area permainan, pada dasarnya pemain diharuskan memilih bab cerita yang akan ia mainkan. Game ini akan menyajikan sebuah cerita yang bersifat linear dan di setiap bab merangkum berbagai macam peristiwa yang akan terjadi di dalam. Ilustrasi ini berfungsi untuk memberi gambaran secara umum tentang peristiwa - peristiwa tersebut.
110
Gambar 4.44 Rough design ilustrasi chapter select
c. Ilustrasi Panel Komik Finisher Mode Selain pada penyajian ilustrasi berbentuk komik juga digunakan dalam finisher mode untuk memberikan sebuah benang merah antara produk komik Garudayana Saga dengan game-nya.
111
Gambar 4.45 Rough design ilustrasi panel komik finisher mode
4.3.3.6 Penggabungan Rough Design Untuk mendapatkan gambaran yang lebih jelas tentang bagaimana penggabungan semua aspek rough design yang telah dibuat maka dibuatlah roug design yang mencakup satu halaman penuh tentang pengimplementasian awal dari desain. Proses ini dilakukan untuk mendapatkan komposisi warna dan visual yang lebih baik sehingga saat semua aspek disatukan tidak terjadi visual clutter.
112
Penggabungan juga dilakukan pada saat gameplay untuk mendapatkan gambaran tentang pengaplikasian konsep yang lebih baik. Dari rough design yang sebelumnya proses dilanjutkan dengan memperbaiki tampilan dan konsep virtual controller untuk meminimalisir tampilan yang mengganggu layar permainan sekaligus juga nyaman untuk digunakan. Kemudian beberapa konsep tema
visual
juga
diaplikasikan untuk
mendukung
nilai
immersive
dan
perepresentasian dunia Garudayana Saga. 4.4 Alternatif Desain Sebelum terimplementasikannya desain final dari iuser interface, beberapa alternatif desain sebelumnya juga telah dibuat untuk menemukan solusi desain user interface yang paling tepat untuk game Garudayana Saga : Ashura Hunter ini. Pada alternatif desain juga dilakukan pembuatan model navigasi yang berbeda dengan model navigasi desain final yang lebih memprioritaskan menu chapter select daripada menu lainnya.
Gambar 4.46 Model navigasi alternatif
Dengan mengadaptasi model navigasi seperti pada gambar 4.46, dibuatlah beberapa desain yang mengacu kepada model navigasi tersebut. 4.4.1 Alternatif Desain 1 Alternatif pertama ini mengacu kepada penggabungan konsep flat design yang
saat
ini
digunakan
oleh
beberapa
desain
user
interface
untuk
memaksimalkan usability dengan ornamen. Di sini penggunaan warna abu - abu digunakan untuk membuat fokus perhatian pemain lebih terarah kepada alat navigasi dan juga konten.
113
Pada halaman gameplay, virtual controller dibuat dengan konsep perwakilan area, dimana pada saat bermain, diaplikasikanlah boundary ( pembatas ) untuk mewakili setiap fungsi layar.
Gambar 4.47 Menu chapter select pada alternatif Desain 1
Gambar 4.48 Halaman combo menu pada alternatif Desain 1
114
Gambar 4.49 Halaman gameplay pada alternatif Desain 1
4.4.2 Alternatif Desain 2 Alternatif 2 ini berfokus kepada pengembangan alternatif pertama hanya saja dengan memaksimalkan unsur flat design. Unsur flat design dieksekusi dengan banyak menggunakan warna bergradasi lembut dan bentukan persegi. Halaman
gameplay
pada
alternatif
ke-2
ini
juga
pengembangan dari alternatif yang pertama.
Gambar 4.50 Menu chapter select pada alternatif desain 2
merupakan
115
Gambar 4.51 Halaman combo pada alternatif desain 2
Gambar 4.52 Menu gameplay pada alternatif desain 2
4.4.3 Alternatif Desain 3 Alternatif desain ke-3 merupakan pengembangan dari alternatif desain ke-2.
Pada
alternatif
ini
lebih
banyak
diimplemntasikan
warna
yang
mengadaptasi warna batik untuk memunculkan kesan etnik. Gaya flat design tetap dipertahankan untuk memaksimalkan usability. Pada halaman gameplay dikembangkan juga beberapa layout alternatif untuk implemntasi virtual controller.
116
Gambar 4.53 Menu chapter select pada alternatif desain 3
Gambar 4.54 Halaman combo menu pada alternatif desain 3
Gambar 4.55 Halaman gameplay pada alternatif desain 3
117
Gambar 4.56 Halaman gameplay alternatif pada alternatif desain 3
Gambar 4.57 Halaman gameplay alternatif pada alternatif desain 3
4.4.4 Alternatif Desain 4 Alternatif
desain
ke-4
merupakan
pengembangan
dari
alternatif
sebelumnya sekaligus juga perubahan eksekusi yang pada awalnya mengarah ke flat design menjadi ke arah skeuomorfis. Gaya eksekusi skeuomorfis digunakan untuk menciptakan kesan naratif atau menceritakan lingkungan sehingga nilai immersive dari game semakin meningkat.
118
Gambar 4.58 Menu chapter select pada alternatif desain 3
Gambar 4.59 Menu combo menu pada alternatif desain 3
BAB V IMPLEMENTASI DESAIN 5.1 Elemen Desain 5.1.1 Desain Logotype Desain Logotype pada perancangan game mengadaptasi desain logtype dari komik aslinya dengan menambah beberapa elemen yang mewakili tema visual UI dan juga konten dalam game. Desain logotype versi Garudayana Saga : Ashura Hunter mengambil dasar lagotype versi komik dengan penambahan sub judul "Ashura Hunter" dan dengan menambahkan logogram yang mewakili kisah pertarungan antara Gatotkaca melawan Ashura.
Gambar 5.1 Logotype Garudayana Saga : Ashura Hunter
5.1.2 Desain Ikon 5.1.2.1 Desain Ikon Combo, Skill, Item dan Quest Desain final dari ikon yang berkenaan dengan kemampuan yang dimiliki pemain menggunakan bentukan dasar lingkaran untuk memaksimalkan usability dan juga tampilan yang lebih bersih saat permainan dimulai. Gaya eksekusi menggunakan bayangan dan bertekstur keras untuk membuat kesan batu 3 dimensi.
119
120
Gambar 5.2 Desain Ikon Combo, Skill, Item dan Quest
5.1.2.2 Desain Ikon Cakraka, Zakti dan Rasa Desain Ikon Cakraka, Zakti & Rasa mengadaptasi aksara Devanagari yang dibentuk dengan bentuk dasar dekoratif. Penggunaan aksara Devanagari diputuskan untuk menunjukkan kekhasan dunia Garudayana Saga.
Gambar 5.3 Desain Ikon Cakraka, Zakti & Rasa
5.1.2.3 Desain Ikon Fitur Teknis Desain ikon fitur teknis berfungsi untuk mengatur perihal teknis dalam game semisal mengakses options, kemudian mengatur suara dan musik, mengakses credits dan mengakses halaman depan.
Gambar 5.4 Desain Ikon Fitur Teknis
121
5.1.3 Desain HUD 5.1.3.1 Desain Health Bar Desain health bar berfokus pada dasar bentuk yang dinamis namun juga menggabungkan unsur tajam dan keras untuk menggambarkan genre action. Pada bagian tengah health bar terdapat ikon untuk pause.
Gambar 5.5 Desain Health Bar
5.1.3.2 Layout Virtual Controller Layout virtual controller berfokus kepada penggunaan alternatif kedua untuk mempermudah pemain memposisikan jarinya dan selain itu juga untuk memaksimalkan penggunaan bentukan ikon combo, skill dan item. Layout pada dasarnya mengadaptasi bentukan joystick.
Gambar 5.6 Layout Virtual Controller
122
5.1.4 Desain Ilustrasi 5.1.4.1 Desain Ilustrasi Title Screen Ilustrasi pada Title Screen menampilkan Gatotkaca berhadapan dengan Kala Pracona untuk menggambarkan sinopsis utama dari cerita dan sekaligus mewakili judul Garudayana Saga : Ashura Hunter. Penggunaan warna di tengah untuk menimbulkan sebuah empasis pada layar ketika digabungkan dengan logotype-nya.
Gambar 5.7 Ilustrasi Title Screen
5.1.4.2 Desain Ilustrasi Chapter Select Desain ilustrasi pada halaman chapter select mengadaptasi relief yang ada pada candi untuk memperlihatkan ciri khas tema visual Garudayana Saga yang menggunakan inspirasi dari kerajaan bercorak Hindu dan Budha dengan balutan fantasi.
123
Gambar 5.8 Ilustrasi Chapter Select
Ilustrasi relief ini diaplikasikan pada ilustrasi dinding batu agar mudah untuk diganti dengan relief yang lain.
Gambar 5.9 Ilustrasi Chapter Select dengan Penyatuan Background
124
5.1.4.3 Panel Komik Finisher Mode Panel komik digunakan pada halaman finisher mode saat gameplay berlangsung. Pada halaman ini akan ditampilkan 4 panel yang menggambarkan berbagai macam gerakan tokoh utama dalam mengalahkan musuh dengan gerakan pamungkas.
Gambar 5.10 Panel 1 Finisher Mode
Gambar 5.11 Panel 2 Finisher Mode
125
Gambar 5.12 Panel 3 Finisher Mode
Gambar 5.13 Panel 4 Finisher Mode
Panel - panel komik ini akan dimunculkan secara berurutan mulai dari panel 1 hingga 3 kemudian diakhiri dengan panel 4 yang memenuhi halaman.
126
5.1.5 Desain Tombol Desain tombol, memiliki ragam fungsi yang berbeda - beda sesuai fungsinya dan juga pada halaman apa ia diletakkan. Berikut adalah tombol tombol yang digunakan beserta fungsinya : a. Tombol Title screen Digunakan untuk memberikan positive first impression pada halaman depan menu dan juga memulai permainan.
Gambar 5.14 Tombol Title Screen
b. Tombol Main Menu Digunakan untuk membuka submenu yang berhubungan dengan kemampuan pemain dan juga tugas yang dapat dilakukan oleh pemain. Berfokus pada bentuk horizontal dan juga penggunaan ornamen kala untuk menunjukkan ciri khas dunia Garudayana Saga.
Gambar 5.15 Tombol Main Menu
b. Tombol Stage Select Tombol Stage Select digunakan bagi pemain untuk memilih stage yang ingin ia mainkan pada halaman chapter select. Tombol berfokus pada bentuk vertikal untuk memaksimalkan penyertaan jumlah tombol dalam layar. Pada tombol terdapat angka yang merepresentasikan nomor stage dan bintang yang
127
merepresentasikan nilai yang pemain dapatkan setelah menyelesaikan suatu stage.
Gambar 5.16 Tombol Stage Select
5.2 Layout dan Interaksi 5.2.1 Title Screen Title Screen atau halaman judul ini digunakan untuk memberikan perkenalan kepada pemain tentang game apa yang sedang ia mainkan. Pada halaman
ini
ditampilkan
judul
dengan
logotype
dan
ilustrasi
yang
menggambarkan garis besar cerita dan permainan dalam game. Ilustrasi dan logotype ini juga berfungsi memberikan positive first impression pada pemain. Dari halaman ini pemain dapat mengakses siapa yang terlibat dalam pengembangan game ini dan pemain juga dapat mengatur suara pada permainan.
Gambar 5.17 Implementasi opening screen
128
5.2.1.1 Options Options merupakan submenu yang ada pada halaman title screen yang berfungsi untuk mengatur beberapa opsi permainan seperti mengatur besar kecil-nya volume suara dan menghapus data permainan. Pemain dapat mengatur besar kecilnya volume suara dengan menggunakan slider yang ada agar pemain dapat lebih mudah memperkirakan besar kecilnya volume suara yang ia inginkan. Pemain juga dapat secara langsung mematikan atau menghidupkan suara dengan menyentuh ikon musik dan suara secara langsung. Seluruh fitur yang ada pada options ditampung dalam jendela kecil untuk memberi petunjuk pemain bahwa ia masih berada di halaman title screen. Dengan adanya jendela kecil ini pemain akan dengan mudah mengingat hirarki menu.
Gambar 5.18 Implementasi options
5.2.1.2 Credits Halaman Credits berisikan siapa saja yang terlibat dalam pengembangan game ini dan dari mana properti intelektual ini berasal. Credits juga menggunakan window kecil untuk mempermudah pemberitahuan lokasi hirarki menu pada pemain.
129
Gambar 5.19 Implementasi credits
5.2.2 Main Menu Main menu merupakan menu utama di mana pemain mempersiapkan segala sesuatu yang berhubungan apa yang nantinya akan dibawa saat permainan nanti. Pada menu ini pemain dapat mempersiapkan combo, skill, item dan melihat quest sebelum melangkah ke tahap pemilihan chapter permainan. Menu ini menggunakan penyajian fitur secara naratif dan konsisten. Pemain dapat melihat Tetuko atau Gatotkaca melakukan berbagai macam kegiatan di sebuah tempat. Setiap pemain memilih sub menu tertentu maka Tetuko akan berpindah menuju ke sebuah tempat yang spesifik dan ia akan melakukan aktivitas tertentu sesuai dengan pilihan pada submenu. Dengan adanya penyajian informasi seperti ini pemain dapat merasakan pengalaman bermain yang naratif, dapat lebih mengenali lingkungan dunia dalam game dan dapat berinteraksi dengan tokoh dalam game. Menu dibagi menjadi 5 area besar, yaitu : -
Spirit, Energy, Close & Sound Area : area atas kanan di mana pemain dapat melihat jumlah energi dan spirit yang ia miliki
-
Slot Area : Area sebelah kiri di bawah informasi spirit dan energy, dimana pemain dapat melihat dan mengatur jumlah pilihan atau item apa
130
saja yang saat ini pemain kenakan. Submenu combo, skill dan item memiliki tangkai yang berisikan pilihan gerakan dalam permainan yang pemain kenakan saat ini. Pada ujung kiri tangkai terdapat simbol yang diadaptasi dari bahasa Sansekerta dan aksara Devanagari. Simbol ini berfungsi sebagai headline dari submenu sekaligus memberikan ekspresi beladiri secara logotype.
-
Preview Area : Area yang menampilkan Tetuko beserta lingkungan sekitar, di sini pemain dapat melihat
aktivitas Tetuko memperagakan
pilihan yang dipilih pemain seperti pilihan combo, skill, item dan quest.
-
Combo, Skill, Item Quest List Area : Area di sebelah kanan yang memiliki sejumlah daftar yang dapat dieksplor oleh pemain dengan menggunakan interaksi swipe ke atas dan ke bawah. Daftar ini berisi tentang kemampuan apa saja yang dapat dipelajari, dibuka, dan dikenakan oleh pemain. Setiap submenu akan menampilkan pilihan kemampuan yang berbeda-beda sesuai dengan submenu masin-masing. Material visual yang digunakan untuk penyajian daftar adalah kertas tua, hal ini dimaksudkan agar pemain dapat lebih mudah mengeksplor daftar pilihan kemampuan karena material kertas berwarna terang akan menciptakan emphasize pada UI dan lingkunngan yang dipenuhi dengan tekstur batu. Salah satu pilihan pada daftar akan memanjang untuk menampilkan informasi yang lebih detail dan interaksi apa yang bisa pemain lakukan terhadap pilihan tersebut.
-
Navigation Area : Area paling bawah yang berfungsi membantu navigasi hirarki UI pada pemain. Pada area ini pemain dapat memilih submenu untuk mengeksplor fitur kemampuan apa saja yang dimiliki Tetuko. Tombol divisualisasikan dengan bentukan batu berwarna merah yang ditambah ornamen Kala untuk merepresentasikan konsep fantasi etnis. Tombol - tombol diletakkan pada dinding untuk menciptakan ilusi bahwa dinding ini merupakan bagian dari lingkungan background. Pada ujung area
terdapat
tombol
bermotif
sulur
api
yang
berfungsi
untuk
mengantarkan pemain ke menu selanjutnya, yaitu Chapter Select. Secara
131
visual tombol ini dibuat berbeda untuk mempersingkat waktu berpikir pemain dalam berpindah antara satu menu ke menu yang lain. 5.2.2.1 Combo Menu Submenu
combo
berfungsi
membantu
pemain
dalam
memilih,
mengeksplor, mempelajari dan mengenakan combo yang pemain pilih. Pada Area slot mengindikasikan jenis combo yang saat ini pemain kenakan. Apabila pemain memilih salah satu slot maka slot tersebut akan berwarna merah yang mengindikasikan combo yang akan diganti oleh pemain. Pada sisi list/daftar pemain dapat memilih combo yang akan ia gunakan dan dengan cara memilih salah satu daftar pemain dapat melihat detail informasi pada combo. Pada detail informasi, pemain dapat memeriksa krakteristik combo dan bagaimana cara mendapatkannya. Karakteristik combo dilihat dengan melihat jumlah bintang yang tertera pada atribut karakteristik, semisal pada atribut combo Quick Jab menampilkan DMG berbintang 1, artinya nilai kerusakan yang ditimbulkan oleh combo Quick Jab sangat rendah. Semakin banyak bintang menandakan kualitas yang semakin baik. Atribut yang ditampilkan pada detail informasi adalah DMG ( Damage/Nilai Kerusakan), SPD ( Speed/Kecepatan Serangan ) dan CRT ( Critical/Nilai Kerusakan Kritis ) Pada detail informasi juga terdapat cara untuk membuka combo agar bisa dipelajari, contohnya terdapat kalimat "finish 5 quest to unlock" yang berarti agar pemain dapat membuka combo ini untuk dipelajari pemain harus menyelesaikan 5 quest terlebih dahulu. Tombol berwarna merah pada daftar yang menampilkan detail informasi berfungsi sebagai alat interaksi pemain. Tombol ini memiliki 3 kondisi fungsi interaksi yaitu : -
Spirit Exchange : Kondisi yang menampilkan jumlah spirit yang harus ditukarkan apabila pemain ingin mempelajari combo tertentu. Kondisi ini akan muncul paling awal apabila pemain belum mempelajari combo.
-
Equip : Kondisi dimana sistem akan menawarkan
pemain untuk
memasang kombo pada slot yang telah dipilih pemain melalui daftar yang telah dibuka oleh pemain. Apabila fungsi ini digunakan maka combo yang dipilih pemain di daftar akan dikenakan pemain pada slot yang terpilih .
132
Apabila fungsi ini digunakan pada slot combo yang telah terisi combo yang berbeda dengan apa yang dipilih pemain maka combo otomatis akan digantuikan.
-
Equipped : Kondisi dimana sistem memberi tahu pemain bahwa combo yang dipilih pada daftar telah digunakan pada salah satu slot combo pemain.
Pada sisi kiri layar, pemain dapat melihat Tetuko beraksi menampilkan pratinjau dari combo yang dipilih oleh pemain dalam daftar.
Gambar 5.20 Implementasi combo menu
5.2.2.2 Skill Menu Submenu skill memiliki layout dan fungsi yang sama dengan submenu combo, perbedaan yang paling mendasar pada menu ini adalah informasi yang ditampilkan dalam daftar yang dipilih pemain pada sisi kanan layar. Apabila pada sisi submenu combo yang ditampilkan adalah informasi mengenai DMG, SPD dan CRT, maka pada submenu skill yang ditampilkan adalah effect dan cooldown.
133
Gambar 5.21 Implementasi skill menu
5.2.2.3 Item Menu Submenu item juga memiliki layout dan fungsi tombol yang sama dengan submenu combo, perbedaan yang paling mendasar pada menu ini adalah informasi yang ditampilkan dalam daftar yang dipilih pemain pada sisi kanan layar. Apabila pada sisi submenu combo yang ditampilkan adalah informasi mengenai DMG, SPD dan CRT, maka pada submenu skill yang ditampilkan adalah effect dan own.
Gambar 5.22 Implementasi boost menu
134
5.2.2.4 Quest Menu Secara layout menu ini memiliki layout yang sama dengan layout submenu combo hanya saja terdapat perbedaan pada isi daftar. Quest adalah submenu yang membantu oemain untuk melihat tantangan apa saja yang dapat dilakukan oleh pemain, bagaimana cara menyelesaikan tantangan tersebut dan sudah sejauh apa tantangan tersebut terselesaikan. Pada daftar quest di sebelah kanan layar ditampilkan informasi tentang nama quest, bagaimana cara menyelesaikannya dan bagaimana progress pemain dalam menyelesaikan quest tersebut. Progress quest disajikan dengan tampilan fill bar, semakin bar tersebut terisi maka semakin quest tersebut mendekati selesai.
Gambar 5.23 Implementasi chapter part menu
5.2.3 Chapter Select Menu Chapter Select merupakan menu dimana pemain memilih chapter dan stage yang akan ia mainkan. Untuk memperkuat kesan konsep Narrative Fantasy Ethnic menu ini disajikan dengan meniru relief batu yang ada pada candi. Cara penyajian ini digunakan karena terdapat antar kesamaan fungsi antara menu Chapter Select dengan relief candi yaitu menyampaikan cerita. Pada sisi kanan dan kiri layar terdapat bentukan anak panah untuk membantu pemain menavigasi chapter mana yang akan ia pilih.
135
Bagian bawah layar merupakan wilayah navigasi submenu. Pada layar bagian bawah tersebut terdapat tombol dengan bentuk persegi panjang dengan ornamen Kala yang diberi nomor dan ikon bintang. Tombol tersebut merupakan tombol stage, tombol dimana pemain akan memilih lokasi bermain. Setiap Chapter akan memiliki beberapa stage. Nomor 1 menandakan stage 1 dan nomor 2 menandakan stage 2 dan seterusnya. Ikon bintang mewakili perfaorma bermain pemain pada stage tersebut apabila pemain mendapat hanya 1 bintang maka pemain menyelesaikan stage tersebut tetapi tidak dalam keadaan sempurna,
semakin
banyak
bintang
yang
diraih
maka
hal
tersebut
mengindikasikan performa bermain yang lebih baik bagi pemain. Selain itu di bagian kiri bawah layar terdapat tombol navigasi yang berbentuk sama dengan tombol navigasi yang ada pada Main Menu. Tomol ini befungsi mengantar pemain kembali ke main menu. Tombol dibuat sama persis bentuknya agar pemain mudah memahami fungsi dan kesamaan tombol ini dengan tombol sebelumnya pada Main Menu.
Gambar 5.24 Implementasi chapter select menu
5.2.4 Gameplay / In-Game HUD In-Game HUD memiliki layout yang mengadaptasi solusi desain pada alternatif 2. Penggunaan alternatif 2 ini membagi area layar menjadi 3 area besar
136
yaitu area kanan khusus untuk menyerang, area kiri untuk pertahanan, dan area atas untuk melihat informasi dan mengakses menu pause. 5.2.4.1 Battle Area kiri dan kanan layar mengadaptasi konsep virtual controller yaitu konsep yang meniru bentuk controller yang sudah ada kemudian diaplikasikan pada layar. Setiap ikon mewakili area sentuh. Gambar pada ikon akan berubah dan menyesuaikan dengan kemampuan yang telah dipilih oleh pemain pada Main Menu, kecuali untuk tombol bertahan ( tombol warna biru terang pada pojok bawah kiri layar ). {Pengulangan penggunaan gambar ikon tersebut agar pemain lebih mudah mengingat tentang kemampuan apa yang ia kenakan. Area kiri layar diisi oleh tombol bertahan kemudian dikelilingi oleh tombol item, layout seperti bertujuan memfokuskan pemain kepada aksi bertahan sebagai kunci dasar dari bermain. Area kanan layar diisi oleh tombol combo ( tombol berwarna oranye yang terdiri dari 3 tumpuk tombol ) kemudian tombol skill. Tombol skill dibuat lebih kecil dandari combo karena fungsi skill tidak bisa digunakan secara sembarangan dan terus menerus karena adanya atribut cooldown, layout seperti ini akan membantu pemain untuk bermain dengan lebih bijak. Tombol combo disajikan dengan 3 tombol bertumpuk. Setiap tombol combo ditekan maka ikon akan berganti ke ikon combo yang ada di belakangnya untuk memberi tahu pemain bahwa combo tersebutlah yang akan dilancarkan setelah ini. Area atas layar terdapat health bar yang menunjukkan kondisi health pemain dan musuh, bar sebelah kanan untuk musuh dan bar sebelah kiri untuk pemain. Semakin bar menuju ke arah tengah maka kondisi pemain semakin kritis dan apabila bar habis maka pemain atau musuh dinyatakan kalah. Apabila musuh telah kalah, HUD akan menghilang sementara untuk mengindikasikan selesainya satu sesi permainan. Pada bagian tengah layar terdapat tombol untuk mengakses menu pause.
137
Gambar 5.25 Implementasi in-game HUD
5.2.4.2 Pause Menu Menu pause merupakan menu yang berfungsi untuk memberhentikan permainan sementara dan mengakses pengaturan seperti menu Options. Dari menu ini pemain dapat kembali bermain atau keluar dari permainan.
Gambar 5.26 Implementasi pause menu
138
5.2.4.3 Next Battle Next Battle adalah kondisi permainan dimana musuh telah kalah dan pemain diharuskan melakukan swipe untuk menuju ke area berikutnya. Petunjuk untuk melakukan swipe diberitahukan dengancara memberi gambar anak panah dan gambar tangan sebagai representasi dari swipe.
Gambar 5.27 Implementasi next battle
5.2.4.4 Finisher Mode Finisher
Mode
adalah
mode
dimana
pemain
harus
melakukan
serangkaian aksi tap pada wilayah tertentu. Dimulainya mode ini ditampilkan dengan warna background yang menjadi gelap tetapi warna karakter tetap seperti biasanya untuk mengindikasikan bahwa saat ini permainan sedang memasuki mode khusus dan permainan masih tetap berlanjut. Pemain akan dihadapkan dengan sebuah logotype yang memiliki visual yang mencolok di bagian tengah layar agar pemain langsung dapat memusatkan perhatiannya ke arah tersebut. Kemudian terdapat tombol bertuliskan tap untuk menuntun pemain menggerakkan tangannya ke tengah layar agar pemain mengubah posisi tangannya dan siaga dalam menyelesaikan finisher mode.
139
Logotype "Finisher" mengadaptasi bentuk aksara Devanagari dengan mengambil bentukan dasar simetris dan memunculkan sisi tajam di atas kiri dan kanan dan di bawah kiri dan kanan untuk menarik perhatian pemain dan membuat kesan impact.
Gambar 5.28 Logotype "Finisher"
Gambar 5.29 Implementasi finisher mode awal
140
Gambar 5.30 Implementasi finisher mode pemasukan input
Gambar 5.31 Implementasi panel komik pada finisher mode
141
5.2.4.5 Result Screen Result Screen merupakan halaman dimana pemain dapat melihat performa bermain mereka saat permainan selesai melalui panyajian data. Data tentang performa bermain dibagi menjadi 4 wilayah dasar yaitu : 1. Berapa lama waktu yang ditempuh pemain untuk menyelesaikan permainan 2. Data mengenai aksi yang dilakukan pada pemain dan berdampak pada pemain semisal berapa maksimum combo yang dilakukan oleh pemain dan berapaberapa jumlah damage ( kerusakan ) yang diterima oleh pemain. 3. Seberapa akurat mode finisher dilakukan oleh pemain 4.
Skor keseluruhan pemain yang ditandai dengan penghargaan bintang
Data ini disajikan pada sebelah kanan layar menggantikan area musuh. Selain itu pemain masih bisa melihat tokoh utama untukmenciptakan kesan immersive.
Gambar 5.32 Implementasi result screen
BAB VI KESIMPULAN DAN SARAN 6.1 Kesimpulan Berdasarkan perancangan user interface pada game mobile Garudayana Saga : Ashura Hunter ditarik beberapa kesimpulan : 1. Perancangan hirarki pada UI untuk game mobile Garudayana Saga mengadaptasi hirarki game yang sudah terlebih dahulu rilis pada platform mobile yang memiliki jumlah unduh tinggi dan mendapat nilai yang baik, 2. Perancangan user interface sangat bergantung dengan studi perilaku pengguna user interface. Dalam bermain game pengguna memiliki probabilitas tinggi untuk melewatkan fitur dalam game sehingga nilai experience pada game dapat berkurang sehinggaMempercepat interaksi pemain sekaligus memberikan paparan fitur adalah sebuah upaya baik yang untuk memberikan pengalaman bermain yang maksimal. 3. Pemain yang mendapat feedback UI dengan jelas dapat bereaksi dan mengambil keputusan dengan baik dibanding feedback yang tidak terlalu tampak. 4. Pertimbangan
perubahan
hirarki
menu
dapat
terjadi
dalam
pengembangan game. Hirarki menu pada game mobile Garudayana Saga : Ashura Hunter dirubah karena pertimbangan tentang adanya fitur koleksi. Pengaturan kemampuan pemain lebih diprioritaskan daripada stage mana yang pemain ingin mainkan. 5. Pemaparan semua jenis koleksi pada main menu adalah cara untuk mencegah supaya pemain tidak melewatkan fitur - fitur yang ada di permainan.
6. Dalam membuat sebuah media baru yang didasarkan IP yang sudah dikenal, dibutuhkan sebuah benang merah yang dapat diaplikasikan ke berbagai
macam
elemen
user
interface.
Konsep
naratif
yang
diaplikasikan pada chapter select, main menu dan finisher mode merupakan benang merah penyajian pengalaman antara komik dan gamenya.
142
143
6.2 Saran Dalam perancangan ini terdapat berbagai macam kekurangan yang dapat disempurnakan untuk kedepannya yaitu :
Apabila
sistem
permainan
terimplementasi
lebih
dalam,
komprehensif dan tidak hanya sekedar sistem interaksinya saja, maka kelebihan dan kekurangan pada UI dapat lebih terdeteksi secera menyeluruh.
Penyusunan plot cerita dan game design yang lebih komprehensif dan mendetail dapat lebih mudah pengerjaan game.
Pemberian feedback yang lebih terperinci pada saat permainan dimulai dapat menambah nilai usability pada UI.
Pemberian
suara
sebagai
elemen
feedback
dapat
lebih
mempermudah pemain dalam menggunakan UI.
Saat perancangan, sebaiknya menggunakan game engine ataupun compiler yang lebih bisa beradaptasi dengan berbagai macam platform agar bisa diimplementasi ke berbagai macam platform tanpa perlu ada hambatan.
Post - test dapat dilakukan dengan lebih mendetail dan sebaiknya lebih cepat dilaksanakan, lebih baik.
144
DAFTAR PUSTAKA
Adams, Ernest. 2010. Fundamentals of Game Design, Second Edition. Berkeley : New Riders Feil, John Harold, Scattergood, Marc. 2005, Beginning Game Level Design, Cengage Learning PTR, Fox, Brent. 2005. Game Interface Design. Boston : Thomas Course Technology Galitz, Wilbert O. 2007. The Essential Guide to User Interface Design An Introduction to GUI Design Principles and Techniques, 3rd Edition. Indianapolis : Wiley Publishing Haryanto, Sindung. 2013. Dunia Simbol orang Jawa. Yogyakarta : Kepel Press Krug, Steve. 2000. Don't Make Me Think. Indianapolis : The Circle.com Library Novak, Jeannie. 2012. Game Development Essentials : An Introduction, Third Edition. New York : Delmar, Cengage Learning Rif'an, Ali. 2010. Buku Pintar Wayang. Yogyakarta : Garailmu Saini, Reena. 2013. Graphical User Interface Design Essentials & Process, International Journal of Advanced Research in Computer Science and Software Engineering Schell, Jesse. 2008. The Art of Game Design. Burlington : Elsevier Inc. Tidwell, Jeniffer. 2011. Designing Interface, 2nd Edition. Sebastopol : O'Reilly Media Tinarbuko, Sumbo. 2009. Semiotika Komunikasi Visual. Yogyakarta : Jalasutra Van Roojen, Pepin. 1998. Indonesian Ornamental Design. Amsterdam : The Pepin Press https://bit.ly/gamedevDB
145
http://bulletproofoutlaws.com/category/elusive-ninja-the-shadowy-thief/ http://forum.gamedevid.org/index.php http://komik-indonesia.blogspot.com/2011/12/garudayana-kembali-mendapatpenghargaan.html http://wildstar.mmorpg-life.com/news/wildstar-user-interface-improvementsexplained/ http://www.slideshare.net/andisboediman/indonesia-digital-landscape-study2012-by-ideosource?from_search=11 http://www.slideshare.net/AppAnnie/casual-connect-2012-app-store-economy http://www.appannie.com/top/iphone/indonesia/overall/ http://www.lainspotting.com/2010/09/bad-ui-makes-my-kid-cry.html
148
LAMPIRAN Rekap Wawancara : Is Yuniarto Wawancara Sesi 1 - Popcon - 5 Juli 2013 00 : 54 Menurut Ko Is Bagaimana kondisi perkomikan Indonesia saat ini ? Kalau dibandingkan dengan beberapa tahun sebelumnya sekarang lebih bagus. Karena komik - komik lokal lebih banyak saat ini dan itu merupakan sebuah peningkatan. Lalu banyak juga komik - komik digital yang memanfaatkan media sosial. Sekarang mau nerbitin dan nampilin karya jadi jauh lebih mudah. Selain itu secara kualitas juga meningkat 01 : 55 Kira - kira genre komik apa yang saat ini sedang booming ? Kalau sekarang terus terang saya masih belum bisa menyimpulkan. Ketika dibilang menonjol jadi misal jaman dahulu banyak komik yang dipelopori oleh R. A. Kosasih kemudian banyak genre yang lainnya. Kalau sekarang lebih banyak sporadis. Misalkan sekarang banyak yang bikin komik humor, komik action juga banyak. Tapi kalau dilihat secara keseluruhan maka komik humor lebih banyak. Jadi kalau boleh disimpulkan secara cepat mungkin komik - komik humor di Indonesia dipicu oleh kartun - kartun kemudian diterbitkan ke komik. 02 : 49 Bagaimana awareness masyarakat dengan komik Indonesia ? Seperti yang saya lebih bilang tadi, era digital ini mengubah arus distribusi komik. Karena mudah diakses, mudah untuk interaksi, mudah didapat. Jadi kalau dilihat dari antusiasme pembaca , responnya semakin positif. Pembaca juga bisa langsung memberi masukan. Beberapa media komik juga digunakan sebagai media pembelajaran di sekolah yaitu di buku - buku teks. Selain itu komik - komik juga mulai membangun imej imej positif 04 : 45 Bagaimana transformasi media komik dari fisik ke digital saat ini ? Saat ini media digital mempermudah para komikus. Biaya cetak cukup mahal apalagi kalau halaman berwarna, dibutuhkan modal yang besar. Kalau media
149
digital bisa diakses langsung asalkan kita online dan dengan wifipun kita bisa mengupload karya. Jalur-nya pun jelas. Dari sisi pembaca, pembaca bisa langsung berinteraksi dengan komik, memberi masukan. Kalau bagaimana cara mendapatkan keuntungan, pengarang bisa memanfaatkan merchandising. Apabila karakter dalam komik kuat dan disukai oleh pembaca maka ada kemungkinan dapat dibuat merchandisenya. Kalau dari komik Garudayana sendiri sudah ada merchadise seperti kaos, poster, papercraft, figur/statue, boneka, gantungan kunci. Merchandise - merchandise ini sebenarnya mengadaptasi industri - industri di Jepang dan Amerika. Di Jepang, biaya anime cukup tinggi mencapai milyaran dan bisa jadi hasil penjualanyya ke stasiun TV tidak dapat menutupi biaya produksi. Ternyata anime itu sebenarnya adalah iklan karakter, anggaplah pola pikirnya seperti itu. Contohnya seperti Naruto, animenya bisa dianggap sebagai iklan selama setengah jam kemudian orang - orang beli figurnya dan orang mau membeli merchandisenya. Hal ini dikarenakan ada kedekatan karakter karena orang sudah suka karakternya. Ini bukan masalah kewajiban bagi audiens tetapi ini memang strategi bisnis. Pendahulu bisnis seperti ini adalah Transformer. Transformer sebelum ada film-nya ada mainannya terlebih dahulu. Untuk mendukung mainannya filmnya berperan sebagai iklan. Pada initinya hal seperti ini yang dijual adalah IP-nya. 08 : 26 Apakah Ko Is pernah mencoba mengembangkan Garudayana ke media digital ? Saya sudah pernah mencoba media animasi meskipun hasilnya belum memmuaskan ke media game juga. Karena memang untuk mencapai hasil yang baik dibutuhkan tim dan aspek lainnya 08 : 48 Kira - kira tertarik tidak kalau Garudayana dikembangkan ke game ? Oh banget, banget. Kalau secara genre saya percaya genre apapun bisa di create asalkan sesuai konsepnya. Karakternya sudah ada, ceritanya ada, mau dibikin action bisa, casual bisa, dibikin strategi bisa, dibikin RPG bisa. 09 : 49 Bagaimana Ko Is berkomunikasi dengan fanbase ?
150
Lewat Facebook, dari email, dan saya kasih nomor handphone di komik saya agar mereka yang baru saja membaca bisa memberi masukannya
151
Rekap Wawancara : Is Yuniarto Diskusi sesi 2 - Ngagel - 20 Agustus 2013 Q: Kalau kondisi komunitas fanbase nya garudayana gimana? Apakah sudah ada? A: Fanbase sejauh ini memang, dari facebook. terus masalah visibilitas ini, garudayana yang pertama, terbit tahun 2009, itu sudah dicetak lebih dari 10.000 exemplar, yang kedua, ketiga, dan keempat 7000 exemplar.Dan yang dicetak lagi Garudayana Saga volume 1 itu cetakannya 5000, dan harapannya bisa dicetak ulang.Jadi itu kalau untuk visibilitas dari jumlah exemplar yang terjual. Q: Tapi ada pengelolaan khusus untuk fan base nggak? A: Aku tidak mengelola secara secara manajerial untuk fans, karena lebih konsen untuk mengerjakan konsep dan cerita dari penerbit sendiri juga tidak mengelola dengan baik, apalagi penerbit yang pertama. Bahkan kami masih berjuang, berkutat untuk distribusi. Misalnya ketika Garudayana Volume 1 ketika di-launch awal, agustus 2009, sekitar oktober, Garudayana sudah punah, udah habis. Sampai setengah tahun kemudian baru diputuskan untuk dicetak ulang. Jadi sempat kehilangan momen yang berharga. Hype nya sangat tinggi sekali. Dengan penerbit yang baru, mereka bisa lebih konsentrasi, karena penerbit yang sebelumnya itu lini produknya lebih ke komik import, manga Naruto. Komik lokal, cuma kebetulan ada. Kalau penerbit yang baru, mereka bisa konsentrasi ke komik lokal, karena mereka tidak punya lini produksi manga import. Jadi konsentrasinya bisa ke sini. Bisa diawasi Q: Kalau kondisi penerbitan di sini gimana ya? Kalau di Amerika kan tertutup, mereka punya cerita sendiri dan kita tinggal disuruh menggarap. Kalau di Indonesia sendiri gimana, apakah mereka cukup open untuk ideide baru atau..? A:Oke, ini penerbitan di mana-mana sih ya, di Amerika, di mana saja; Saya penerbit, kamu artist, Penerbit butuh buku buat diterbitkan. Kondisi yang pertama adalah, artist menawarkan ke penerbit, saya punya gambar, saya punya cerita, seperti ini. Di- acc, kalau cocok dengan visi misi penerbit, lanjut. Kondisi kedua
152
adalah penerbit punya penulis, kalau kamu penulis, kamu tawarkan ke kami, penerbit; saya punya cerita, saya butuh artist, oke nanti saya carikan, kalau penulisnya tidak punya rekomendasi. Juga yang di Amerika tadi, misalkan di Amerika, mengelola IP, Superman, atau Marvel mengelola IP Spiderman. Penerbit sudah punya IP nya, tinggal cari penulis, cari artist. Itu kondisi ketiga. Jadi penerbit sudah punya IP, tinggal mencari penulis dan penerbit, sudah. Dimana-mana seperti itu, di Indonesia lebih cenderung ke kondisi pertama, di Amerika cenderung ke kondisi ketiga, tapi tetap, sama seperti itu, ada tiga kondisi. Di Jepang, itu cenderung ke kondisi pertama.
Q: Kadang kan ada yang webcomic, kalo webcomic sendiri potensinya sampai mana. Kan kalau saya lihat sekarang ada ngomik.com, komikku, yang terakhir ada tapastik. Portal komik internasional yang lagi hype juga. Jadi potensinya gimana untuk webcomic? untuk mengkomersilkannya. A: Kalau untuk mengkomersilkan nya gimana saya kurang tahu, karena setahu saya webcomic cenderung free. Kalau komersialitasnya saya kurang tahu, yang saya tahu kalau webcomic itu kadang setelah terkumpul banyak, akan dijual terbatas, nah itu monetizing nya dari sana, tapi, …..pada intinya dari komikku itu lebih tepat sebagai portal galeri. Istilahnya gini, deviantart, tapi isinya komik. Pada intinya komikku itu komikusnya amatir, maksudnya pemula. Di situ ada sistem yang mengkurasi materi premium, tapi itu belum jalan. Di komikku ada yang komikus ekskusif, jadi mereka hire, untuk membuat karya di komikku. Q: Kalau Re:ON itu sendiri gimana? A: Re:ON itu murni konsepnya seperti Shonen Jump. Pernah tahu Shonen Jump? Jadi penerbitan yang khusus membuat produk yaitu, kompilasi komik, kalo dibilang magazine comic orang nggak ngerti. Jadi saya lebih sering bilang, kompilasi berkala. Untuk Re:ON, mereka mengkurasi, memilih, membuka foundation untuk artist membuat sesuatu. Mereka jalan di tiga kondisi itu. Q: Yang saya tahu Re:ON itu ada yang cetak dan digital, nah lalu, yang saya bingung itu darimana monetizing untuk kedua-duanya.
153
A: Untuk Re:ON itu sudah jelas sih, yang cetak, itu sudah jelas, ada iklan, dijual. Media cetak apapun juga dari iklan dan penjualan. Yang digital, juga sama, dari ads / iklan. Q: Yang mungkin kami perlu tanyakan itu, pembacanya Garudayana itu dari umur berapa sampai berapa, terus daerahnya dimana, apa hanya di Jawa Timur saja atau sampai seluruh Indonesia. Data angka nya seperti itu. A: Jadi memang tidak ada penelitian menyeluruh mengenai hal itu, tapi saya bisa berikan data mengenai (………..), rentang usia pembaca, saya juga bisa memberikan masukan-masukan dari pembaca. Q: Dan mungkin distribusinya gimana? A: Kalau distribusinya nasional sih. Q: Yang penting itu, karena ini game, dan belum ditentukan gameplay nya seperti apa, mungkin kita memerlukan akses untuk menjangkau sampai ke fan base, misalnya untuk menyebarkan kuisioner. Kita juga perlu mengetahui behavior dari pembaca nya juga. A: Oke, behavior yang bisa saya tarik jelas itu adalah mereka yang haus akan budaya lokal dengan gaya yang baru, kalau rentang usianya jauh sekali, kalau target rentang usia sebenarnya itu SMP. Tapi ternyata anak SD sampai orang tua juga baca. Q: Terus kalau dalam pembuatan Garudayana sendiri ada batasan gak? mungkin ada masukan dari pembaca, kan ini mengangkat sejarah, tapi diubah-ubah sedemikian rupa, ada nggak misalnya masukan dari pembaca yang tidak setuju. A: Sejauh ini tidak, karena begini, ketika kita lihat cerita wayang, sebenarnya ada pakem, tapi pakem itu tidak baku. Saya berani membuat Garudayana karena saya sudah melakukan riset, saya riset sampai ke versi-versi yang lain. Ketika melihat versi aslinya, harus diakui bahwa versi kita ini sudah versi adaptasi. Apa hak kamu, menolak adaptasi. diadaptasi lagi. Karena versi mu yang dianggap
154
pakem itu, sudah merupakan versi adaptasi. Apa bedanya. Dan bahkan lebih dari itu, dalam versi indonesia sendiri, ada banyak, istilahnya carangan, tiap dalang punya versinya sendiri. Bahkan versi solo dan jogja yang berdekatan pun, itu berbeda. Balik lagi soal pembaca, itu pembaca lebih ke sharing pendapat mereka, apa yang mereka tahu mengenai versi wayang yang mereka tahu. karena itu di Garudayana saya berikan character check-nya,background checknya. Jadi ketika membuat Garudayana, tidak sekedar berfantasi ngawur, tapi lebih ke menjembatani, bahwa ini, ceritanya begini, aslinya begini. Lebih ke menjembatani cerita pewayangan dengan gaya saya.
155
Rekap Wawancara : Adhicipta R. Wirawan - Kendangsari - 1 Oktober 2013 01:40 Bagaimana media - media yang mas Adhi untuk IP The Advantures of Wanara ? MA : Transmedia adalah semacam puzzle, jadi salah satu media seperti game itu memiliki detail yang berbeda dengan film. Kalau yang di game kan namanya kan Astra Mantra kan. Astra Mantra lebih fokus ke petualangannya Naradja waktu mencari elemen Hastabrata. Kalau di versi novelnya cerita itu ada di tengah tengah. Jadi detail setiap media memiliki konten yang berbeda -beda kalau di komik. Kalau di animasi ada beberapa penyesuaian . Masing - masing media punya segementasi sendiri, dengan begitu akan tercipta cross promotion dan juga cross selling. Orang yang baca novelnya ingin main game-nya, orang yang main game-nya ingin lihat filmnya atau baca komiknya. Jadi masing - masing crossselling. Kita juga tidak berhenti hanya sampai di film, nantinya juga akan ada spin-off dan yang lebih berfokus kepada tokoh - tokoh lainnya seperti kisahnya Katunnara. Jadi kalau kita mendesain sebuah story kita masukkan berbagai macam hint. 05 : 31 Apabila terdapat spin off, bagaimana positioning dari The Advantures of Wanara ? Kita melihat spin off sendiri sebenarnya sebagai produk franchise, dan juga merupakan peluang dari praktisi bidang kreatif. Entah spin-off itu sendiri dalam bentuk game, komik maupun novel yang tetap berbasis pada cerita asalnya. Setiap spin off menguatkan pangsa pasar dari IP. 07 : 20 Bagaimana pembuatan konsep transmedia dari IP The Advantures of Wanara ? Sebelum kita menulis bukunya kita sudah memikirkan kira - kira bagaimana untuk 5 dan 10 tahun kedepannya untuk mendukung konsep transmedia storytelling.
156
08 : 22 Bagaimana konsep game yang dicari oleh Mas Adhi sebagai pemilik IP The Advantures of Wanara ? ( Menyesuaikan dengan story yang ada ) Lebih berfokus kepada story pada novel kedua yang karakter Naradja sudah lebih dewasa. Jadi di buku ke-dua ceritanya tentang pertempuran massal atau perang. Yang saya harapkan sih kalau ada yang tertarik untuk membuatkan game-nya maka saya akan lebih condong ke game tower defense. DI buku ke-dua itu lebih tebal, dua kali dari novel yang pertama, nulisnya sudah mulai dari tahun kemarin, sudah jadi dan tinggal ilustrasinya. Kontennya lebih detail, setiap senjata, setiap armor memiliki nama. Dari sisi penulisan cerita isinya akan lebih berat dari Garuda Riders dan saya melihat pembacanya juga akan semakin tertantang. Detail transformasi Garuda yang telah berevolusi. Game tower defense bisa mengenalkan prajuritnya , senjatanya, kerisnya, tombaknya. 10 : 33 Game seperti apa yang kira - kira digemari di Indonesia beberapa tahun belakangan ini untuk pengembangan The Advantures of Wanara ? Riset yang saya lakukan pada umumnya adalah game di wilayah yang secara global. Pada dasarnya IP The Advantures of Wanara memilki penalaran trnasformasi media yang berbeda -beda di setiap seri novelnya. Kalau novel pertamanya lebih ke arah side scrolling. Kalau novel yang kedua lebih ke arah mengendalikan banyak pasukan seperti tower defense. Konsep game seperti itu kalau dipadu dengan story yang sudah ada, maka akan lebih kuat. Game-nya juga dibuat untuk membuat audiens bisa lebih merasakan pertempuran yang dilakukan Naradja. 12 : 40 Bagaimana proses pembuatan konsep visual ornamen yang ada di The Advantures of Wanara ? Salah satu negara yang kita tuju adalah Jepang. Orang Indonesia sendiri cukup mengenal budaya Jepang. Dan dengan menggunakan tema Bali menjadi entry point awal. Cerita selanjutnya yang kita buat banyak mengangkat kebudayaan kebudayaan Indonesia yang ingin kita perkenalkan dan hewan - hewan yang digunakan merupakan salah satu bagian dari Indonesia. 15 : 02 Bagaimana kriteria game yang layak untuk disajikan pada audiens ?
157
Kalau menurut saya, game yang baik adalah game yang memilki karakter yang hidup. Game yang memilki basis pada cerita. Orang yang memainkan game kita itu karena story-nya dan karakternya. Ada berbagai macam perspektif dalam mendesain game dahulu baru membuat ceritanya kalau saya memilki konsep punya cerita terlebih dahulu kemudian baru menemukan media dan gameplay apa yang tepat. Jadi kalau orang atau gamer itu sudah jatuh cinta pada ceritanya, mereka tidak terlalu mikir bagaimana gameplaynya seperti apa, game seperti apapun dimainkan. Seperti contohnya versi game Spongebob. Game yang berdasarkan Spongebob tersebut banyak yang memainkan, mulai dari yang casual dan yang lainnya dimainkan oleh audiens, yang penting ada Spongebobnya.
Pembuatan
game
dengan
konsep
ini
merupakan
konsep
dari
keterlangsungan produk dalam jangka panjang. Kalau game itu umurnya mungkin sekitar 3 - 4 bulan tetapi kalau story maka umurnya everlasting 24 : 45 Bagaimana konsep game Astra Mantra ? Kalau visi saya sewaktu mendesain game itu sendiri nantinya bisa dimainkan pakai kinect atau semacamnya, sehingga input yang digunakan adalah benar benar gerakan tangan. Sebenarnya kita hanya ingin men-delivery pengalaman yang berbasis pada story nya yaitu bagaimana saat kita mengeluarkan Astra Mantra itu seperti apa. Prioritasnya adalah bagaimana Kundala Vedi itu bisa dirasakan oleh gamer lebih tepatnya adalah mentransfer experience-nya. Waktu mendesain itu tinggal mengikuti aja bagaimana konsepnya. 26 : 36 Dalam memilih stage di game Astra Mantra pemain diharuskan menggunakan peta, mengapa demikian, mengapa tidak sekedar seperti Angry Birds yang langsung pilih stage yang diberi nomor ? Secara mendasar konsep gamenya berfokus pada pendekatan story-nya Bukan ke pendakatan gameplay-nya atau tantangannya. Gameplay mengikuti dari story yang ada. 27 : 18 Kira - kira bagaimana peran environmnet dalam game ? Intinya sih environment memang punya kekuatan untuk menciptakan suasana berdasarkan story yang tersurat. Jadi environment sendiri bukan sebagai pelengkap
karena
pada
dasarnya
pembaca
dari
novel
pasti
akan
158
mengimajinasikan menurut dia dari apa yang ia baca. Untuk memnuhi ekspektasi pembaca tersebut dibutukan kemampuan interpretasi yang baik. Jangan sampai orang yang memainkan game-mu ekspektasinya tidak terpenuhi. Hal tersebut memang berat dan tidak gampang, tetapi di situ adalah tantangannya. 31 : 36 Bagaimana pengaruh dari sebuah environment ? Pengaruhnya kuat sekali, karena bagian dari environment akan menjadi bagian dari story untuk game - game yang terfokus pada story, berbeda saat kita bikin game yang tidak memilki story atau story tersebut hanya sebagai pendukung. Environment punya peranan untuk mevisualisasikan settingnya dimana. Saat saya menceritakan ceritanya lewat novelnya saya harus bsa membayangkan detailnya Bagaimana tempat bawah laut dan bagaimana tempat lainnya. Yang susah adalah kalau belum ada storynya. Saat koordinasi tim bisa membaca novelnya untuk menciptakan visualnya. Biasanya saya mencari referensi dan gambar yang kurang lebih merepresntasikan bagaimana settingnya. 34 : 30 Bagaimana pengaruh gaya desain interface seperti penggunaan ornamen pada interface ? Gaya desain interface tersebut juga penting agar tetap terasa dunianya dan mendukung suasananya. Ada subliminal message, kalau tidak ada jadi aneh dan hal tersebut abstrak dan tidak bisa diperlihatkan. ( seperti pemain bass dalam musik) iya benar. Tetapi kalau ada satu - dua elemen dihilangkan akan ada keanehan dan interface itu mendukung (game). UI itu bisa dirasakan, coba saja misalnya sebuah game salah satu UI-nya dihilangkan atau dirubah.
159
Rekap Wawancara : Arief Bahari - Semolowaru - 31 Desember 2013 01:12 Bagaimana tren desain interface saat ini ? 2013 ini mulai sering yang kelihatan ini adalah flat desain, banyak sekali UI yang menggunakan gaya desain flat desain di HP, website dan dimanapun. Dan flat desain paling terlihat saat Apple mengeluarkan iOS 7, semua aplikasi, servis yang beroperasi di iPhone dan iPad mengadopsi gaya flat desain. Sebenarnya sebelum iOS 7, Windows 8 juga mengadaptasi gaya desain ini. Hanya saja trigger yang benar - benar nampak saat iOS 7 mengimplementasikan desain yang flat. Dan kemungkinan 2014 dan beberapa tahun kedepan banyak yang menggunakan hal tersebut. Ciri-ciri flat design dapat dilihat dari hilangnya tekstur, bentukan - bentukan dari icon lebih simpel dan minimal, tidak memiliki banyak clutter dan ornamen ornamen. Warna - warna yang digunakan saat ini mengarah pada warna pastel, adanya penggunaan gradasi yang sangat tipis. Penggunaan bayangan tetap ada,
hanya
saja
eksekusinya
berbentuk
long
shadow
untuk
tetap
mempertahankan kesan bervolume. Flat design sebenarnya merupakan refleksi dari kejenuhan dan kemajuan teknologi. Kalau dilihat saat dulu, UI pada software komputer seperti Winamp , kebanyakan mengadaptasi objek asli dari dunia nyata, contohnya fungsi untuk mengatur suara dimiripkan dengan pengatur suara pada radio. Tujuan peniruan ini agar pengguna yang baru saja menggunakan teknologi segera familiar dan bisa segera beradaptasi saat menggunakan software. 10 tahun kemudian sejak gaya desain yang masih mengadopsi realisme, para pengguna sudah mengenal teknologi dan sudah memahami fungsi -fungsi umum tombol pada interface software. Contohnya tombil "send" sudah dapat diwakilkan dengan ikon surat. Semakin lama, semakin simpel, semakin minimal. Gaya desain flat merupakan sebuah refleksi atas penolakan terhadap gaya desain lama yang mengadopsi realisme. Saat ini orang - orang lebih menginginkan interface yang bersih dan benar - benar sesuai dengan fungsinya.
160
05:50
Saat
ini
ada
istilah
skeuomorph
dan
realisme,
bagaimana
kontribusinya dalam pengembangan UI ? Skeuomorph desain merupakan unsur pengenalan kepada pengguna yang awalnya awam dengan teknologi supaya pengguna dapat menggunakan teknologi dengan mudah. Salah satu proses skeuomorph yang bisa kita lihat adalah pada aplikasi kembangan Apple. Saat kita membaca pdf di iPad, untuk mengganti halaman, Apple menerapkan model interaksi yang benar - benar sama dengan saat kita membaca buku. Pada kalender juga terdapat tekstur kain agar pengguna dapat menyamakannya dengan kalender di dunia nyata Skeuomorph sangat berkontribusi dalam menarik user -user baru untuk beradaptasi dengan teknologi baru, teknologi yang mereka belum kenal sama sekali. Hal ini juga dapat menarik user - user yang berusia 40 tahun ke atas yang masih awam dengan teknologi untuk mencoba teknologi. 08:10 Bagaimana pandangan anda tentang UI dalam game saat ini ? Sebelum ada tablet dan smartphone, game selalu berpusat pada platform konsol.
Platform
konsol
seperti
Playstation
dan
Xbox
menggunakan
controller/joystick. Saat ini UI juga mengimplementasi parallax dimana, UI akan ikut bergerak apabila digerakkan secara langsung . Saat smartphone dan tablet muncul, interaksi berganti menjadi touch dan swipe. Alat kendali apa yang digunakan sangat mempengaruhi desain interface dan cara berinteraksi. Contohnya game Republic di tablet cukup menggunakan touch saja dalam mengendalikannya 11:00 Bagaimana pandangan mas Arief tentang ungkapan bahwa user interface yang baik semakin menambah user experience ? Apabila user interface baik dan efektif maka tentu saja orang akan semakin menyukainya. Apabila seseorang ingin menyimpan sebuah dokumen, daripada menekan tombol keyboard, akan lebih mudah apabila di pojok layar terdapat ikon untuk menyimpan. Intinya adalah mempermudah interaksi untuk pengguna. Salah satu contoh game yang mengadaptasi kemudahan interaksi, adalah FIFA 14. Pemain dapat melihat statistik permainan yang sebelumnya ia lakukan.
161
Desain hirarkinya yang efektif benar-benar sesuai dengan kebutuhan user saat ini. Pada
umumnya,
untuk
memperbaiki
UI
kita
dapat
terlebih
dahulu
mengidentifikasi pola seseorang dalam menggunakan UI. Apabila pola tersebut dapat terbaca maka kita dapat mengaplikasikan fitur untuk mempermudah akses terhadap pilihan yang selalu digunakan oleh pengguna 14:00 Dalam pengalaman mas Arief mendesain sebuah UI untuk berbagai macam proyek, adakah user experience khusus yang ingin disampaikan ? Selama ini saya masih belum puas dengan apa yang saya kerjakan selama ini. Sebagai contoh, saya pernah mendesain konsep website yang menurut saya sangat baik, tetapi konsep -konsep tersebut secara perlahan terfilter oleh pihak klien. Terkadang klien dan desainer memiliki pendapat berbeda, desainer memikirkan konsep yang matang untuk pengguna, tetapi klien mefilter fitur - fitur tersebut, sehingga konsep kreatif jadi berkurang. Setelah terfilter oleh klien, konsep desain juga dapat terfilter oleh teknologi developer. Pada dasarnya saat saya mendesain sebuah website, saya mempelajari user agar pengalaman menggunakan website mereka bertambah. Saya mempelajari aktivitas - aktivitas user dan membuat sebu 21:51 Kapan sebuah UI dapat dikatakan UI yang baik ? Ketika user dapat menemukan yang ia cari dengan mudah, dengan sedikit mungkin langkah. Dan apabila dalam menggunakan sebuah interface pengguna masih berpikir dalam mencari fungsi yang hendak ia temukan maka UI tersebut masih belum sesuai untuk pengguna. Perubahan selalu terjadi untuk menyesuaikan dengan kebutuhan pengguna yang selalu berkembang. Dan hal itu wajar 00:10 Apa yang dibutuhkan untuk membuat user interface yang baik ? Tujuan bisnisnya, pastinya pertamanya adalah usernya dan tujuan bisnis dari produk, entah itu game atau apa. Produk atau servis atau yang lainnya tersebut
162
ingin menyampaikan apa ? semisal game. Game ini punya tujuan apa dan akan melakukan apa, setelah itu semua tujuan dan fungsinya di mapping kan dan di cross dengan user, user bisa melakukan apa saja dalam game ini. di mapping kemudian dibuat prioritasnya mana yang paling penting. Semisal main mission dan side mission, apakah Kalau website kita buat terlebih dahulu hirarkinya lebih tepatnya arsitektur informasinya dari mana dulu kemudian ke mana terus dari sini bisa ke mana saja dan harus di mappingkan. Kalau game otomatis lebih rumit soal bagaimana interaksinya, kalau dalam game UI bisa berubah kondisi sesuai dengan storyline dalam gamenya tentang apa saja yang keluar ( fitur dikeluarkan satu per satu ) 02 : 00 Kalau dari kebiasaan user sendiri apa saja yang harus dipertimbangkan ? Cara memegang hardware dan informasi apa yang ingin user buka adalah salah satu hal yang bisa dipertimbangkan. Kalau semisal game online atau game yang nantinya terhubung dengan internet biasanya selalu mengirim statistik tentang perilaku user saat mengakses fitur. Semisal ada data yang menunjukkan kalau pemain - pemain game Call of Duty sering memainkan map2 tertentu, paling sering memakai senjata tertentu, paling sering menembak dari lokasi tertentu. Hal - hal kecil yang bisa diketahui dari statistik. Contoh lainnya seperti game FIFA 14, akses untuk melakukan giring bola dipersingkat dan dipermudah, pemain tidak perlu menekan banyak tombol, maka pemain dapat dengan sendirinya menggiring bola. Pemelajaran hal kebiasaan melalui observasi kebiasaan pemain sangat dianjurkan untuk membuat perubahan pada interface 04 : 26 Bagaimana proses mas Arief mendesain Interface mulai dari briefing degan klien sampai eksekusi desain ? Awal ketemu dengan klien, diskusi tentang keinginan mereka, apa yang ingin mereka sampaikan, apa yang ingin ditampilkan. Kemudian di pertemuan selanjutnya saya mengajukan penawarannya dan biaya desainnya sambil menunjukkan preliminary desain, seperti apa desain awalnya. Kemudian dibuat tampilan awalnya. Setelah terjadi deal, langsung memasuki tahap pengerjaan, selama satu - dua minggu sampai website jadi dan sudah bisa live. Salah satu
163
kualitas yang saat ini sedang saya kejar adalah penawaran untuk perbaikan interface secara berkala. Di Indonesia banyak situs yang masih tetap di biarkan apa adanya setelah selesai tanpa ada perubahan. Apabila kita mencoba mempelajari kebiasaan user dengan mempelajari statistik yang ada kita dapat memperbaiki interface. Semisal apabila banyak Mahasiswa yang mengakses situs resmi ITS untuk melihat nilai maka akan kita permudah aksesnya di website. Kalau proses dari sisi pengembangan konsep visual, awalnya kita pelajari terlebih dahulu konten yang ada di website seperti apa saja yang ditampilkan, tentang apa, siapa. Semisal kita membuat website tentang McD, tantangan awalnya adalah bagaimana membuat website ini memang terasa seperti website McD bukan Burger King atau yang lainnya. Kita dapat berpedoman pada identitas visual yang sudah ada. Kalau belum memilki identitas visual, maka pekerjaan tersebut bisa jadi repot atau malah jadi membebaskan. Semisal restoran baru dan belum memiliki identitas visual yang lengkap kita dapat membuat website yang sesuai dengan citra yang ingin dibuat perusahaan. Kalau untuk UI game, otomatis kita akan mengacu pada konsep dasar dari game, game tersebut tentang apa. Kalau dulu, game-game kebanyakan menggunakan objek - objek asli dari gamenya semisal kalau kita main game seperti Diablo maka tombol - tombolnnya akan memilki tekstur kayu, batu. Atau pada game starcraft, kalau kita memainkan ras Terran pasti interfacenya mengandung unsur - unsur robot, kalau kita menggunakan ras Zorg maka interfacenya akan menjadi organik. Dan di game sendiri hal yang mengarah ke realisme tersebut masih relevan, metode seperti ini bertujuan sebagai pembeda. 09 : 00 Seperti kutipan kata - kata " semakin sedikit desain maka semakin baik " maksudnya adalah bukan semua semakin menjadi ultraminimalis, kalau sudah tidak ada lagi yang dihilangkan berarti hal tersebut sudah cukup. Semisal FIFA terdahulu, yang memilki home screen berkesan sporty dengan adanya kurva kurva atau persegi enam. Pada jamannya terdahulu hal itu bagus, tetapi saat ini orang lebih butuh informasi. Jadi ketika orang memainkan game yang diprioritaskan adalah pemain bisa melakukan apa saja di game ini, mengetahui beberapa menu dan hal tersebut lebih dinamis dan lebih bermanfaat daripada
164
harus diberi ornamen yang berkesan sporty. Kesimpulannya adalah mengurangi hal - hal yang tida perlu dan lebih berfokus kepada tujuan utama user Kalau pada game starcraft mereka melakukan perubahan pada cara berinteraksi yang semakin simpel. Yang dimana perintah serang yang awalnya harus menggunakan keyboard dipermudah cukup dengan mouse. Dan UI-nya dikurangi beberapa untuk menyampaikan simplisitas perubahan kontrol tersebut. Tetapi unsur - unsur ornamental tersebut tidak dihilangkan secara seluruhnya agar identitas visual tidak hilang. 11 : 28 Bisa dikatakan konsep visual yang ada pada game dapat mengacu ke dunia yang ada dalam game karena dunia yang ada dalam game merupakan identitas visual yang ada. 11 : 50 Interface banyak membicarakan ikon dan tanda, bagaimana hal ini mendukung user interface ? Pada dasarnya penggunaan ikon dan tanda tergantung kebutuhan. Ikon digunakan ketika pengguna sudah familiar dengan fungsi tersebut. Misalnya tanda "x" hal ini berarti "close", secara umum orang sudah memahaminya. Tombol bergambar "pintu" sudah pasti untuk fungsi "keluar". Tombol "on (lingkaran dan garis) " itu juga dapat menggunakan hanya ikon, tak perlu dijelaskan orang sudah akan memahaminya, hal itu sudah menjadi konsesnsus umum. Apabila fungsi dari sebuah tombol masih baru maka dibutuhkan teks . Ada juga fungsi yang hanya menggunakan teks. Semisal pada game ada pilihan start new game, option dan yang lainnya. Orang pada umumnya lebih cepat membaca start new game daripada menggunakan ikon. Config mungkin bisa diganti dengan ikon "gerigi", tetapi apabila pada menu semuanya menggunakan teks maka penggunaan ikon sebaiknya dihindari. Saat kita membuat keputusan bagaimana eksekusi yang akan digunakan, apakah menggunakan ikon atau teks maka sebaiknya kita mencobanya lebih dahulu untuk membandingkan mana yang lebih mudah Fungsi utama dari ikon adalah mempercepat pemahaman pengguna terhadap sebuah fungsi baik dalam bentuk betton ataupun yang lainnya dan secara
165
estetika lebih baik daripada teks, Kalau misalkan pada game ikon dapat menjadi sebuah unsur distinctive, semisal dalam sebuah peta yang penuh dengan tulisan, dan disana terdapat ikon peti maka di lokasi tersebut akan ada harta karun dan orang akan dapat segera memahaminya. Manusia pada umumnya lebih mudah memahami dan lebih cepat menangkap pesan pada ikon. Ada kalanya gabungan pada ikon dan teks dapat membantu pemain untuk memperkenalkan sebuah fungsi baru sambil mempermudah interaksi untuk pemain yang sudah terbiasa 18 : 43 Dalam mengembangkan ikon , proses apa yang dapat dilakukan ? Pada dasarnya ikon - ikon yang dibuat dulu merupakan proses dari skeuomorph. Visual dari sebuah ikon harus dikembangkan dari fungsi ikon itu sendiri. Semisal kita ingin mebuat ikon "exit" maka kita dapat menggunakan konsensus yang sudah umum seperti ikon pintu, kalau kita mebuat di luar itu kemungkinan pengguna
akan
mengalami
kebingungan,
hanya
saja
kalau
kita
bisa
mengembangkan bentuk lain yang lebih representatif hal itu malah lebih bagus. Dari ikon yang sudah umum kita dapat membuat variasi lain untuk menyesuaikan dengan tema dari identitas visual konten. Entah penambahan ornamen , kurva atau penggayaan yang lainnya 21 : 54 Salah satu proyek mas Arief yaitu "Ziswaf" situs zakat, memiliki identitas visual yang bersih , bagaimana keputusan desainnya ? Proyek itu merupakan salah satu proyek situs yang sangat cepat tenggat waktu pengerjaannya. Dan juga saat itu Ziswaf tidak memiliki identitas visual. Prioritas saya saat mengerjakan situs tersebut adalah menyelesaikan situsnya secara fungsi, identitas visual dapat dikerjakan belakangan. Akhirnya saya memutuskan untuk melakukan "form follow function" dengan memetakan terlebih dahulu tentang apa tujuan pengguna menggunakan situs tersebut, yaitu melihat aliran zakat. Sebenarnya bisa lebih gila lagi dengan mengadopsi konsep gamification tetapi karena keterbatasan SDM, akhirnya saya memprioritaskan website ini jadi secara fungsional dan efektif untuk digunakan. Untuk konsep visual sendiri saya tidak mengacu pada aturan tertentu, meskipun sudah ada konsep Islam tetapi saya sendiri berpikiran tidak ada sebenarnya
166
warna yang mewakili Islam, yang ada warna atau busana yang mewakili sebuah negara. Konsep desain yang clean saya gunakan untuk meminimalisir clutter, karena di situs tersebut banyak menampilkan angka dan statistik. Kalau bentuk tombol sendiri saya menggunakan bentuk yang sederhana untuk mempersingkat waktu pengerjaan dan tidak menyulitkan saat proses coding berjalan. Saat itu tujuan dari websitenya sendiri memang hanyalah untuk mengecek aliran zakat di Surabaya 26 : 29 Bagaimana teknik layout dapat berpengaruh pada desain UI ? Teknik layout juga mengalami perubahan. Dulu, para desainer website selalu memanfaatkan slicing dari photoshop untuk membuat struktur, lama - kelamaan desainer menggunakan pemrograman yang memanfaatkan grid yang responsif agar saat di-resize untuk di-port ke platform lain proses lebih mudah dan cepat. Website - website lama selalu memanfaatkan golden ratio untuk menciptakan layout yang baik, namun golden ratio ini menciptakan layout yang berpola dan sudah sering sekali digunakan. Pada dasarnya golden ratio berfungsi untuk meningkatkan estetika pada website tetapi selera estetika-pun dari waktu ke waktu akan mengalami perubahan. Penelitian dalam buku "Don't Make Me Think " menunjukkan bahwa dalam menggunakan sebuah website, pengguna tidak mengikuti golden ratio atau pola - pola tertentu, ternyata pengguna memindai secara langsung keseluruhan halaman dan mereka fokus pada mencari objek yang ingin mereka temukan. Maka dari itu UI dari game pun mengikuti fenomena ini. Setiap page dari game biasanya hanya menampilkan satu informasi saja, agar user fokus di halaman page tersebut. Pemindaian menjadi behavior dasar dari user saat menggunakan UI. Desain layout saat ini lebih bergantung efektivitas pada berbagai jenis ukuran layar ( resolusi ). 31 : 30 Selain itu, saat ini, ada beberapa situs yang berani mencoba keluar dari kebiasaan. Awalnya dalam fotografi ada sebuah konsep layout yang disebut rule of third, dimana objek utama diletakkan pada bagian sepertiga layar. Saat ini dalam dunia fotografi konsep layout pada fotografi berubah dari rule of third ke simetrikal. Konsep layout simetrikal sering digunakan tidak hanya pada fotografi tetapi juga pada desain grafis, desain website. Simetrikal adalah konsep dimana
167
objek diposisikan secara seimbang antara kanan dan kiri. Website pun saat ini juga mengadaptasi hal tersebut contohnya seperti medium.com. Medium merupakan blog service yang memiliki gaya desain minimalis dan murni hanya menampilkan informasi dan sangat nyaman untuk kegiatan membaca blog, dan ketika satu artikel selesai dibaca, maka akan muncul artikel lain (seamless operation). Konsep seamless operation sendiri bisa juga dipengaruhi oleh gaya navigasi saat ini yang lebih mudah mengganti halaman dengan scroll dan swipe 40 : 21 Bagaimana UI mendukung pengalaman bermain yang immersif ? Sampai saat ini, game semakin lama semakin realistis. Animasi motion capture semakin baik, grafs makin bagus, environment semakin detail, banyak partikel alam yang bisa dilihat semisal hujan dan yang lainnya. Ada juga contoh dimana dalam game - game strategi yang menampilkan efek ledakan, layar menjadi ikut bergetar. Cerita, voice acting, dan scoring juga semakin mempengaruhi kesan immersif. UI pun termasuk di dalamnya. Semua usaha ini sebenarnya berupaya unytuk memindahkan kesadaran pemain ke dalam dunia game.
168
Rekap Wawancara : Tim Developer Vamp's Revenge ( Assaji Tjahjadi & Eka Pramudita Muharram ) - Kendangsari - 07 Januari 2014 00:25 Apa sebenarnya konsep dari game Vamp's Revenge, pengalaman apa yang ingin disajikan ? E : Konsep pengalaman/experience dari game Vamp's Revenge adalah game casual, yang tidak ribet dimainkan, yang mana lebih bersifat arcade. Pada awalnya, ingin menceritakan seorang karakter yang memilki tujuan untuk pergi ke atas. Untuk gameplay awalnya kita buat berdasarkan game yang secara umum sudah banyak dimainkan orang, yaitu Doodle Jump. Bagi kami Doodle Jump
adalah game yang sangat sederhana sekali dan kesan arcade yang
kompetitifnya sangat kurang, sehingga pada Vamp's Revenge kita tambahkan gameplay launching, player dilempar ke atas dan ke samping. Experience inti dari game Vamp's adalah permainan tentang loncat. Seiring berkembangnya konsep untuk menambah faktor fun dan untuk membuat game ini berbeda dengan game yang lainnya yang memiliki fitur yang sama, kita tambahkan mekanik memukul. Experience yang awalnya hanya loncat sekarang ditambah memukul, menjadi jumping while punching. Akhirnya setelah kita menemukan experience memukul, kita tambahkan juga mini game lainnya ( game di dalam game) bergenre beat them-up , dengan mekanik karakter utama diam dan musuh mendatangi pemain. Ketika kita beta testing dengan prototype, ternyata orang-orang lebih menyukai gameplay memukul itu. Mekanik gameplay juga mengalami perubahan untuk memperkuat experience memukul. Agar pemain dapat terus loncat, pemain diharuskan memukul. A : Pada update terbaru, banyak player yang memberi masukan untuk mempermudah metode pengendalian karakter, akhirnya kita merubah mekanik kendalinya, yaitu karakter akan otomatis memukul apabila bertemu dengan platform. Tetapi secara keseluruhan tidak mengubah konsep gamplay, hanya mempermudah metode pengendalian saja.
169
05:37 Bagaimana proses development-nya, mulai dari konsep hingga testing ? A : Awalnya kita mebuat konsep tentang permainan yang mengutamakan terbang dulu. Tidak ada kemiripan dengan game Doodle Jump. Ide awalnya setiap karakter berhasil mengambil sebuah objek maka ia akan semakin terbang. Lama - kelamaan kami merasa gameplay seperti ini akan membosankan, terasa totally clone dan tidak ada challenge yang berarti, akhirnya kita tambahkan gameplay yang saat ini sudah bisa dilihat. E : Kalau yang tadi kan konsep secara mekanik, mungkin aku bisa cerita secara konsep tema visual. Pada waktu itu konsep tematik yang kita buat lebih ke arah Halloween. Jadi ceritanya, karakter sebelum vamp yang saat ini, itu adalah jack o lantern. Jack o Lantern memiliki tujuan untuk menghancurkan bulan atau lebih tepatnya ingin membentuk bulan, untuk memberikan balasan pada teman makhluk halus lainnya yang meninggalkan dia pada saat halloween. Dan ini sebenarnya konsep awal tematika yang mau coba kita angkat. Lha, akan tetapi ternyata pada waktu proses development, memakai waktu yang cukup lama dan akhirnya kita melewatkan waktu rilis yaitu pada saat halloween. Mau tidak mau akhirnya kita merubah asset dari game, akhirnya kita berpikir bagaimana untuk menggunakan asset yang memilki tema creepy seperti itu tetap tidak mengesankan halloween. Inspirasinya diambil dari sebuah film layar lebar yang menceritakan kisah vampire, yaitu Twilight. Akhirnya kita coba aja masukan vampire dan werewolf, saya pikir vampire dan werewolf sudah sangat dikenal, general dan
pop culture sekali. Nah, otomatis karena kita merubah karakter
utama
juga
kita
melakukan
perubahan
pada
cerita tetapi
tetap
bisa
terkomunikasikan dengan baik dengan mekanik gameplay yang sudah dijelaskan tadi. 09:24 Saya sedang meneliti soal UI dalam game, kira - kira dalam game Vamp's Revenge ini bagaimana proses pengembangan UI mulai dari konsep, komunikasi antar artist dan programmer ? A : Pertama kali bikin UI rasanya kita langsung dulu, layout nya nanti dulu yang penting indikator - indikator penting ada terlebih dahulu seperti healt bar, nilai ketinggiannya. Tetapi desain awalnya acak adut, mau ditaruh mana terserah
170
yang penting ada dulu. Setelah selang waktu, kita merasa harus menaruh ini dimana, terus kita harus bikin ini dimana. Kemudian saat jadi pun kita tetap merasa temanya masih kurang sesuai karena mengikuti game yang lama yang dulunya halloween kemudian dirubah lagi. Setelah diruba kita melihat lagi ada beberapa item yang letak nya antara kiri dan di kanan lebih enak ditukar. Kita tukar terus termasuk health bar-nya yang dari bentuk awalnya seperti hati yang bentuknya bertumpuk - tumpuk kemudian jadi hati yang bentuknya memanjang. 10 : 40 E : Intinya sih saat itu sebetulnya, menggarapnya bisa dibilang form follow function. Jadi kita cari tahu terlebih dahulu fungsinya itu apa dan kemudian fungsinya itu diimplementasikan oleh si Aji programmer. Setelah fungsinya semua jelas untuk apa saja, saya sebagai artis yang menata layout dan overall look-nya seperti apa. Pada waktu itu, kita sempat gonta ganti peletakan UI, kita mencoba mencari peletakan yang enak, apa yang sesuai dengan kebutuhan. Prosesnya bisa dibilang back and forth, back and forth 11 : 50 E : Kalau sesuai kebutuhan itu, pertimbangannya adalah yang paling jelas, yang namanya UI kan harus ada interaktivitas antar muka dengan user. Yang mana user harus mengerti dengan informasi mana yang mau coba kita, game sampaikan. Nah, sejauh mana efeknya kamu bisa menyampaikan infromasi itu, semakin sebuah UI dibilang bagus dan sesuai kebutuhan apabila sudah bisa memberikan informasi pada user sesuai takarannya tidak berlebihan dan tidak terlalu kurang. Dan juga secara layout dan secara penempatan, itu bisa dibilang antara boticeable dan tidak noticeable. Kalau diumpamakan, user sadar bahwa akan adanya sesuatu di situ tetapi user tidak merasa terganggu dengan keberadaannya 13 : 16 Kira - kira dalam Vamp's sendiri ini, fitur apa yang harus diketahui oleh user, adakah urgensi tertentu ? bagaimana fitur tersebut dapat terkomunikasi dengan baik kepada user ? E : Caranya macem - macem sih, ada yang dari blinking, ada yang kita tint merah, ada yang glowing. Apapun sih intinya yang bisa menarik perhatian player dan player ketika melihat hal itu, dia sadar kondisinya. Kondisi yang mengapa mengakibatkan hal itu apa yang terjadi apabila itu tetap blinking, jadi kurang lebih seperti itu.
171
14 : 30 A : Pada initinya pemain harus kita berikan tutorial. Pemain tidak akan bisa banyak bereksplorasi kalau kita tidak memberi panduan sama sekali. Jadi kita mencoba menyajikan game ini dengan cara menyajikan bagaimana cara bermain mulai dari launching dulu kemudian lompat, kemudian bagaimana battlenya. Kemudian, kita paksa pemain saat pertama kalinya untuk kalah terlebih dahulu. Dan pada saat kalah itu kita tuntun mereka bagaimana caranya agar pemain bisa meng-upgrade. Setelah bisa upgrade, kita biarkan pemain untuk bisa mengeksplorasi sendiri. E : Tapi yang jelas sih kita kasih tahu di awal. Kita kasih tutorial mengenai mekanik gameplay, juga tutorial UI, mengenalkan ini fungsinya apa, seperti itu sih. Kita paksa user untuk melewati itu. Sete;ah tutorial berakhir dan user mulai bermain aslinya, user bisa mencoba - coba sendiri ini apa dan ini apa. Nah terus selain tutorial, yang kedua, kita kasih penanda khusus. Yang menjelaskan seperti blinking dan lain - lain yang tadi sudah dijelaskan. Dan juga pemberian tanda pentung "!". Intinya UI itu, seperti memanggil user, mengajak user untuk mencoba mengklik sebuah tombol tanpa harus benar - benar nyuruh banget. Kita menyuruh user untuk mengklik tetapi tidak ngomong secara langsung dan tidak mengikat. 17 : 00 Kalau dalam sisi marketing dan bisnis bagaimana peran UI ? A : Khusus ini, karena platform gamenya flash dan keuntungannya ada di iklan sendiri. Kita sebagai developer, diwajibkan oleh calon sponsor untuk meletakkan logo sponsor di mana - mana, bahkan beberapa sponsor ada yang meminta logonya diletakkan dalam game itu sendiri dan itu merupakan kebutuhan industri. Tetapi kadang - kadang logo tersebut bisa mengganggu gameplay dan kita memasang logo tersebut di menu lainnya / semua menu, di menu pause-nya dalam menu utama, dalam cover-nya, dalam semuanya ada. Logo tersebut nantinya akan menjadi outgoing link ke tempat sponsor dan mereka akan menghitung traffic situsnya. Dan outgoing link itu harus punya parameter dimana kita sebagai game yang di sponsori olehnya adalah parameternya. Dan sponsor dapat mengetahui bagaimana performa gamenya dan dimana saja gamenya diletakkan kemudian sponsor dapat mengecek berapa jumlah play dari game
172
buatan kita. Dari situ akhirnya kita bisa tahu kalau sponsor tidak merugi karena jumlah traffic ke sponsor yang tinggi. 19 : 34 E : Sebetulnya ada beberapa pakem - pakem industri yang seperti kalau flash itu bagaimana dan di mobile seperti apa. Kalau di flash sudah ada aturan nya yang kita sama - sama tahu sehingga dari awal development kita sudah harus menyediakan tempat di mana iklan itu bakal muncul. Ada yang kadang minta di setiap menu, kalau tidak jugapun tidak apa - apa tergantung deal antara sponsor dan developer. Salah satu tugas UI adalah menyediakan tempat untuk sponsor itu, tidak ada tendensi khusus bahwa UI itu harus mengarahkan pemain ke Iklan. Okelah kita bisa dapat pemasukan yang lebih dari cara tersebut tetapi tidak sampai seperti itu. Mungkin saja ada developer yang memilki tujuan tersebut tetapi, tujuan kami sebagai developer adalah bagaimana orang bisa enjoy dengan game-nya bukan bagaimana caranya orang bisa masuk ke iklan, itu hanya opsional saja. Kalau di mobile, ada beberapa restriction. Semisal di iOS, mereka tidak memeperbolehkan ada iklan di dalam gameplay, kalau ada maka kita di-ban. Sebetulnya hal itu bisa diakali tetapi hal tersebut tidak ada hubungannya dengan UI, maksudnya dia memiliki API sendiri, ada UI sendiri, jadi berbeda dengan flash yang mana kita harus menyiapkan tempat. Kalau di mobile tidak, iklan bisa diletakkan di sela - sela pergantian screen. Begitu juga dengan in-app purchase, kalau di android dan iOS punya UI sendiri - sendiri. Beberapa developer memiliki tendensi yang berbeda - beda, sebagai contohnya dalam game - game puzzle, bagaimana caranya UI itu bisa mengarahkan player ke in-app purchase. Sebetulnya sih sah -sah aja, tetapi kita mulai dari fungsinya dulu aja. Kalau IAP itu dibutuhkan player dan bisa membantu player agar bisa menang, kita bisa menuntun. Pemain butuh duit, silakan klik di sini. Ada sebuah hint yang dapat mengarahkan pemain untuk mengakses ke situ. Tetapi tidak ada tendensi agar pemain harus ke situ. Player tetap bisa memilih antara iya atau tidak. 23 : 30 Bagaimana cara bermain player saat ini ? apakah main dulu mempelajari semua menunya atau asal coba terus kalah lalu ulangi ? atau ada behavior lainnya ?
173
E : Ada macam - macam model sih. Ada game yang disuruh tahu semua dulu, kalau kita tipenya yang sambil jalan. Maksudnya, oke, kita memaksa player tetapi dengan cara yang halus. Saya kasih contoh seperti game Final Fantasy Dissidia. Di situ banyak tutorial tentang fungsi , ini tombol ini masuk kesini dan sebagainya dalam bentuk tulisan. Kita berpikir, kalau kita menggunakan cara itu, user bisa malas dan bakal merasa terbebani karena ia harus mengetahui dan belajar. Padahal game tujuannya adalah untuk senang - senang dan harus fun. Kalau kita melupakan tujuan awalnya dari kita bikin game itu sendiri dan malah membebani player, itu adalah hal yang kita hindari. Dalam Vamp's kita terapkan satu persatu dengan cara yang halus, kita tidak mengeluarkan informasi secara sekaligus, kita keluarkan satu persatu secara bertahap, terus kita coba ajak player untuk mengaplikasikannya. Kita menganggap bahwa player itu bukan orang yang bodoh, maksudnya mereka juga manusia yang bisa berpikir dan jangan sampai curiosity pemain jadi hilang dan mereka juga bisa mendapatkan sense of exploring. Kita tidak perlu mengorbankan sense tersebut, biarkan mereka mencoba. A : Kalau melihat learning curve pemain saat ini, sepertinya sudah tidak jaman lagi pemain harus melihat tutorial game yang sangat panjang di depan, atau mendapat penjelasan yang berbaris - baris. E : Saat ini, orang sudah terbiasa melihat teknologi jaman sekarang, mungkin pada waktu itu kan awal - awalk keluarnya iPhone dan device lainnya yang mana orang masih kagok dengan teknologi tersebut. Untuk kedepannya rasanya sudah tidak perlu sampai seperti itu. Soalnya ikon - ikon dalam UI sekalipun sudah sangat universal sekali, istilahnya, orang yang belum pernah menggunakan teknologi sekalipun sudah bisa memahami fungsinya 27 : 10 Saya sudah mengetes game Vamp's dari versi 0.92 sampai versi 0.96, dan dari yang saya ketahui Game ini juga mengalami testing dan terjadi berbagi macam perubahan UI, apa pertimbangannya saat itu ? E : Awalnya kita melakukan testing pada diri kita sendiri/mengetesnya sendiri. Dari situ ada proses back & forth mulai pengaturan tata letak dan berbagai
174
macam ketidak cocokan posisi, soal ukuran juga, ini semua dimulai dari diri kita sendiri. Beberapa perubahan versi terjadi karena testing sendiri. Pada versi terakhir ini terjadi perubahan yang sangat signifikan mulai dari health bar dan yang lainnya. Hal itu sebenarnya dikarenakan adanya perubahan tema dari jack o lantern ke Vamp dan pada saat itu kita juga sempat melakukan play testing ke orang - orang. Pada play testing ada teman - teman yang merasa kurang informatif, kurang nyaman sampai merasa terlalu diframing. Dari masukan - masukan itu terus kita coba sesuaikan dengan kebutuhan fungsinya, kira - kira kalau UI dirubah tanpa mengorbankan fungsi bisa atau tidak. Selama masukan tidak merubah fungsi dan tampilan masih bagus - bagus saja. 29 : 55 Kalau dari HUD, apa pertimbangan perubahannya ? E : Pertimbangannya waktu itu... kalau yang lama memiliki frame seperti batu sebenarnya mengikuti tema yang sebelumnya yaitu tema halloween. Rupanya saat teman - teman main, rupanya health bar itu terlalu blocky, terlalu menghalangi layar, kalau misal kita lihat lokasinya dan bentuknya yang masih terlihat seperti pilar sebetulnya fungsinya masih enak tetapi saya pindahkan karena masalah sense saja. Kalau health bar saya buat 3 karena ingin menerapkan kalau frame ini masih bisa dipakai lagi (reuse asset). Pada waktu play testing, ternyata tempat untuk health terasa kecil sekali dan kita membuat solusi jumlah hati-nya ada 3 slot saja dan seiring waktu hatinya akan membesar, membesar dan membesar. Dan rupanya waktu kita play testing ke orang - orang, mereka bingung kenapa hatinya tidak membesar - membesar, karena memang health bar awal - awal bentuknya tipis karena belum diupgrade yang mana kalau diupgrade baru bisa kelihatan besar dan orang - orang mempertanyakan hal itu. Daripada kita menimbulkan pertanyaan, akhirnya kita ganti ke bentuk yang lebih simpel. E : Yang informasi uang dan skor pun kita pindah lokasinya. Pertama kita buang bebberapa elemen visual biar tidak terlalu rame, yang kedua kita pindah lokasinya karena ada space kosong di sisi layar supaya ada keseimbangan 32 : 50 E : Kalau yang ada tutorial yang ada dialog ini kita ingin memasukkan experience keterkaitan emosional secara cerita. Dan kami rasa pesan lebih
175
tersampaikan apabila karakter dalam gamenya yang menyampaikan selain itu UI terasa lebih organik dan lebih berbicara. Jadi bukan cuma sekedar panduan harus ngapain tetapi lebih tepatnya dipandu harus ngapain dan untuk mencapai hal itu kita perlu personifikasi dan personifikasi bisa kita achieve dengan menggunakan karakter. Kalau yang lama terasa rigid dan kurang menarik. 34 : 06 A : Kalau penambahan ikon dalam gameplay, pertimbangannya yang versi lama dengan tampilannya yang memanjang memakan space lebih banyak dan menutupin layar. Akhirnya kita tidak ingin ada space yang mengganggu. Dan kita ubah bentuknya yang penting orang masih tetap bisa tracking progress permainannya kira - kira sudah selesai berapa persen. Lagipula untuk melihat keseluruhan informasi pemain cukup menekan tombol p atau pause dan cukup kita wakilkan dengan ikon saja. Di update selanjutnya kita akan menambahkan fitur quest apa saja yang ada dan diberitahu saat mode launching. Hanya berupa tulisan aja. 35 : 24 Untuk yang masalah result screen, Upgrade dan More Games lokasinya ditukar dan warnanya juga diubah, apa pertimbangannya ? E : Yang pertama biar noticeable, yang kedua kenapa saya tukar posisinya antar upgrade dan more games tujuan utamanya agar friendly. Orang cenderung untuk melanjutkan antar page itu bergerak ke kanan atau klik next yang posisinya biasa ada di kanan dan bukan di kiri. Sehingga kita taruh tombol upgrade di kanan 36 : 12 Kalau untuk layar upgrade sendiri terdapat perubahan yang signifikan, apa pertimbangannya ? E : Kalau yang lama windownya lebih kecil karena awalnya adalah agar filesizenya tidak bengkak dan seiring dengan waktu saya merasa bentuk window ini terasa membosankan. Secara layout tidak enak dilihat, padahal fitur upgrade ini akan sering orang gunakan. Setiap pemain kalah dia akan terus mengupgrade. Yang mana ada kemungkinan secara psikologi ini mengakibatkan kebosanan. Sehingga kita mencoba membesarkan dan merapikan tetapi tetap informatif. Kita besarkan juga karena masih banyaknya white space yang bisa kita eksplor. Akhirnya kita coba memanfaatkan space itu dan kita tambahkan personifikasi yang menuntun dan memandu dan akhirnya karakter itu saya implementasi lagi.
176
Karakter di situ sekaligus bisa bercerita pada player tentang latar cerita game, tujuannya ke bulan. Personifikasi juga ditujukan agar ada keterikatan dengan player. 39 : 00 A : Kalau yang lama di halaman ipgrade, kita harus meletakkan mouse di atas ikon agar terlihat keterangan dan kita maerasa hal ini tidak diperlukan. Daripada keterangan tentang upgrade harus dilihat satu persatu yang membuat game menjadi lama untuk dimainkan, jadi kita atur sedemikian rupa, yang mana menurut kita yang paling penting dalam game kita taruh di atas dan kemudian kita taruh juga deskripsinya. Yang kemungkinan fungsinya bakal membantu orang banyak terlebih dahulu kita taruh atas dan biasanya yang paling membantu harganya paling mahal. Deskripsinya juga ditaruh secara langsung. Ada juga feedback yang mengatakan tidak jelas tentang maksud dari primary dan secondary dan submenu jadi lebih baik kita ubah tampilannya seperti yang sekarang. Dan hampir di setiap menu si Vamp juga ngomong. 40 : 47 Kalau berhubungan dengan asset grafis, salah satu yang harus diperhatikan kan masalah optimasi. Agar performa game tetap optimum tetapi tetap informatif adakah yang dapat dilakukan ? E : Pertama, kerjakan UI secara vektor karena dengan vektor kita bisa leluasa apabila nantinya pndah device yang lebih tajam atau yang lain dan grafis asset tidak pecah. Untuk keperluan UI biar tidak bengkak sebetulnya adalah sudah direncanakan dari awal agar kita bisa mengetahui asset mana yang akan direuse. Ketika sebuah asset direuse lagi kita tidak perlu memasukkan asset baru lagi, asset yang lama itu kata pakai berulang - ulang. Dan itu tetap fit - in dalam game - nya. Makanya di awal kalau bisa ngelayoutnya sudah yang versi benar, dicoba perbandingannya dengan asset yang lainnya. Kalau masalah optimasi, dari vektor kita ubah ke bitmapkarena tidak banyak memakan memori. Lalu jangan menggunakan banyak warna, karena semakin banyak warna semakin memperbesar filesize. Ada lagi soal UI yang floating. adalah UI yang tidak harus berada di tempatnya, istilahnya UI yang bisa ditaruh bebas di mana - mana. Ui tersebut tidak terpaku.
177
Dengan penerapan floating kita bisa menerapkannya di berbagai macam devic dengan resolusi yang berbeda - beda, hanya tinggal mengatur layout saja 44 : 52 Adakah trend dalam UI atau learning curve ? E : Kalau trend learning curve sih umumnya pemain harus tetap dijelaskan satu persatu, berbeda dengan game jaman NES seperti Mario. Kalau secara visual ada game yang berani tanpa menggunakan UI apapun dan UI-nya di dalam gameplay, terasa seperti nonton film karena. Trend yang lain adalah floating asset, kalau jaman dahulu asset masih seperti ngendondan terasa rigid. Karena sekarang satu game sekali di-code bisa ke berbagai macam platform, sehingga UI artist harus menyiapkan UI yang floating yang tidak statik dan terkungkung di satu resolusi saja, dia bisa diterapkan ke resolusi manapun. 47 : 59 A : Kalaua UI jaman sekarang kan bisa untuk multi-platform. Di mana ukuran layar itu berbeda - beda. Dan sebisa mungkin yang kita hindari adalah stretching. Contohnya, asset game nya kecil pada layar 4 : 3 dan kita stretch ke layar ukuran 10 : 3. Dan kalau kita tidak melakukan stretch maka akan ada space hitam pada screen, kita harus berpikir bagaimana space hitam tersebut tidak kelihatan.
146
BIODATA PENULIS Dilahirkan di Surabaya, 19 November 1991, Dimas
Novan
Delfiano
telah
menempuh
pendidikan di TK Sekar Melati Surabaya, SDN Kedangsari 1 Surabaya, SMPN 1 Surabaya dan SMAN 9 Surabaya. Saat ini sedang berusaha untuk menyelesaikan studi S1-nya di Jurusan Desain Produk Industri, program studi Desain Komunikasi Visual ITS Surabaya. Sejak kecil sudah gemar menggambar dan tergila - gila pada dunia ilustrasi. Minatnya di bidang menggambar diwujudkan dalam "Perancangan User Interface Game Mobile Garudayana Saga : Ashura Hunter" sebagai judul tugas akhir untuk menyelesaikan studi S1. Saat ini sedang menekuni ilustrasi untuk mengekspresikan kegemarannya di bidang seni.
