BAB IV IMPLEMENTASI DAN ANALISA

Transkripsi

1 22 BAB IV IMPLEMENTASI DAN ANALISA 4.1 Pembuatan Aplikasi Pembuatan Marker Untuk membuat aplikasi augmented reality diperlukan sebuah marker untuk memunculkan suatu objek. Di dalam augmented reality terdapat beberapa marker. Marker yang digunakan untuk aplikasi ini berjenis markerless. Markerless merupakan sebuah marker yang tidak menggunakan gambar hitam dan putih untuk memunculkan objek. Karena aplikasi ini menggunakan objek bangunan langsung sebagai marker-nya, jadi kita hanya perlu mengambil foto bangunan yang ingin dipakai kemudian foto tersebut diupload ke alamat web seperti gambar di bawah ini: Gambar 4.1 Halaman web Vuforia Marker Setelah login Langkah pertama adalah membuat database baru seperti Gambar 4.2 di bawah ini : Gambar 4.2 Membuat database baru pada vuforia

2 23 Setelah membuat database baru seperti Gambar 4.3 kemudian menambahkan gambar yang digunakan untuk media marker. Gambar 4.3 Database yang baru dibuat Untuk menambahkan gambar sebagai marker, klik Add Target di pojok kanan, maka akan muncul form (Gambar 4.5) untuk meng-upload gambar sebagai marker. Kemudian pilih gambar yang akan di upload dan klik button add. Gambar 4.4 Database yang baru dibuat Gambar 4.5 Form upload marker

3 24 Setelah menambahkan gambar yang digunakan untuk media marker seperti Gambar 4.6. Kemudian data gambar di download dengan cara klik button download selected targets pada pojok kiri website fuvoria: Gambar 4.6 Gambar yang digunakan sebagai marker Tunggu hingga muncul form download selected targets seperti gambar 4.7, kemudian pilih format Unity Editor karena kita akan menggunakan software unity 3D, kemudian download dengan caraklik button create: Gambar 4.7 Download marker

4 25 Setelah foto di upload sebagai marker dan di download dengan memilih format.unitypackage. kemudian di import ke unity 3d dengan cara double klik file yang sudah di download tadi. Berikut adalah proses import data marker ke unity 3d : Gambar 4.8 Import Marker Pembuatan Desain Pembuatan desain dalam aplikasi ini dilakukan secara manual dengan memanfaatkan tools yang ada pada Adobe Photoshop CS6. Ukuran desain dibuat sesuai dengan ukuran aplikasi yang ingin di buat. Kemudian di simpan kedalam format.png. berikut adalah rincian desain yang di buat : 1. Pembuatan desain logo Gambar 4.9 Pembuatan desain logo

5 26 Desain logo di buat logotype dan minimalis menggunakan jenis font Swis721 BlkCn BT menggunakan text tool kemudian di beri efek drop shadow. Kemudian transparansi shadow di buat 65%. 2. Pembuatan desain splash screen Gambar 4.10 Pembuatan desain splash screen Background desain splash screen menggunakan foto keraton surakarta dan di tambahi logo aplikasi yang telah dibuat tadi pada tengah foto Keraton Surakarta. 3. Pembuatan desain background menu utama Gambar 4.11 Pembuatan desain background menu utama Desain background menu utama menggunakan foto keraton surakarta dan di tambahi logo aplikasi pada sudut kiri atas pada foto Keraton Surakarta.

6 27 4. Pembuatan desain tutorial Gambar 4.12 Pembuatan desain tutorial Desain tutorial menu utama menggunakan rounded rectangle tool yang dibuat menyerupai smartphone android. Dan di tambahkan foto Keraton Surakrta. Font yang digunakan Comic Sans MS. 5. Pembuatan Button Desain button menggunakan desain yang di download di situs sendiri menggunakan tool yang ada di photoshop CS6, menggunakan tool rounded rectangle tool, gradient tool, Horizontal type tool serta mengedit Opacity. Adapun desain button yang dibuat adalah button mulai tour, maps, tutorial, augmented reality tour, dan informasi keraton surakarta. Desain button adalah sebagai berikut : Gambar 4.13 Pembuatan Button Mulai Tour

7 28 6. Pembuatan desain tag informasi Desain tag rounded rectangle tool beri warna biru, kemudian di tambahi text judul Horizontal type tool background diturunkan menjadi 60%. Dan di tambahkan foto pada bagian kiri. Adapun desain tag informasi yang di buat adalah tag informasi keraton surakarta, sasana sumewa, siti hinggil lor, kori sri manganti, bangsal smarakatha, bangsal marcukundha, panggung sangga buwana, bangsal maligi, sasana sewaka, siti hinggil kidul. Desain tag informasi adalah sebagai berikut : Gambar 4.14 Pembuatan desain tag informasi keraton Surakarta 7. Pembuatan desain menu informasi augmented reality rounded rectangle tool rounded rectangle tool text judul mengg Horizontal type tool rounded rectangle tool rounded rectangle tool menu informasi yang di buat adalah menu informasi keraton surakarta, sasana sumewa, siti hinggil lor, kori sri manganti, bangsal smarakatha, bangsal marcukundha, panggung sangga buwana, bangsal maligi, sasana sewaka, siti hinggil kidul. Desain menu informasi seperti Gambar 4.15 :

8 29 Gambar 4.15 Pembuatan desain menu informasi Keraton Surakarta 8. Pembuatan desain informasi augmented reality. rounded rectangle tool text judul dan informasi Horizontal type tool Calibri (Body), background diturunkan menjadi 60%. Dan di tambahkan foto Keraton Surakrta pada pojok kiri atas. Kemudian di save kedalam format.png. Adapun desain tag informasi yang di buat adalah tag informasi keraton surakarta, sasana sumewa, siti hinggil lor, kori sri manganti, bangsal smarakatha, bangsal marcukundha, panggung sangga buwana, bangsal maligi, sasana sewaka, siti hinggil kidul. Desain informasi adalah sebagai berikut : Gambar 4.16 Pembuatan desain informasi keraton Surakarta

9 Pembuatan Objek 3 Dimensi Pembuatan Objek 3D menggunakan Software Autodesk 3D Max Dalam proses pembuatan obyek, komponen yang digunakan adalah komponenkomponen yang berada pada tools Autodesk 3D Max. a. Pembuatan Objek 3D Keraton Surakarta Langkah pertama dalam pembuatan objek 3d Keraton Surakarta adalah objek tersebut dan kita ubah menjadi editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga menyerupai tiang Keraton Surakarta, untuk jalur pembuangan air menggunakan tool editable poly kemudian pilih edge, vertex serta polygon kemudian digabungkan dengan tiang yang telah dibuat tadi hingga sesuai dengan bentuk tiang depan bangunan Keraton Surakarta. Gambar 4.17 Pembuatan Objek 3D Tiang Keraton Surakarta Setelah selesai membuat tiang kemudian kita copy tiang tersebut sebanyak 4 tiang, karena tiang depan keraton Surakarta berjumlah 4. tahan tombol shift pada keyboard dan geser posisi tiang, kemudian lepas tombol shift maka tiang akan wall dinding keraton Surakarta sesuai dengan bentuk dinding Keraton Surakarta, pivot bangunan. Kemudian kita klik kanan objek tersebut dan kita ubah menjadi

10 31 editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga menyerupai ornament ukiran pada bangunan Keraton klik kanan objek tersebut dan kita ubah menjadi editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga menyerupai atap bangunan Keraton Surakarta, kemudian kita membuat pelengkap ruangan Keraton Surakarta berupa meja dan kursi menggunakan tool menyerupai bentuk meja dan kursi pada ruangan depan Keraton Surakarta. Untuk torus knot ik kanan objek tersebut dan kita ubah menjadi editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga menyerupai ornament pada dinding Keraton Surakarta. Untuk texturing akan di lakukan di unity 3D. Langkah terakhir dalam pembuatan objek ini yaitu meng-export objeknya kedalam format.obj. Gambar 4.18 Pembuatan Objek 3D Keraton Surakarta b. Pembuatan Objek 3D Bangsal Marcukunda Langkah pertama dalam pembuatan objek 3d Bangsal Marcukunda adalah membuat tiang bangun objek tersebut dan kita ubah menjadi editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga menyerupai tiang Bangsal Marcukunda. Kemudian membuat dinding bangunan menggunakan

11 32 wall Bangsal Marcukunda. Setelah itu membuat ornament pada atas tiang Bangsal dan kita ubah menjadi editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga menyerupai ornament pada atas tiang bangunan Bangsal Marcukunda. Kemudian agar terlihat halus MeshSmooth Gambar 4.19 Pembuatan Objek 3D ornament Bangsal Marcukunda kanan objek tersebut dan kita ubah menjadi editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga menyerupai atap bangunan Bangsal Marcukunda, kemudian kita membuat pelengkap halaman Bangsal Marcukunda berupa pot bunga menggunakan tool cylinder editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga menyerupai pot bunga yang ada di halaman Bangsal foliage texturing akan di lakukan di unity 3D. Langkah terakhir dalam pembuatan objek ini yaitu mengexport objeknya kedalam format.obj.

12 33 Gambar 4.20 Pembuatan Objek 3D Bangsal Marcukunda c. Pembuatan Objek 3D Bangsal Smarakatha Langkah pertama dalam pembuatan objek 3d Bangsal Smarakatha adalah klik kanan objek tersebut dan kita ubah menjadi editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga menyerupai tiang utama Bangsal Smarakatha. Kemudian untuk tiang dalam box objek tersebut dan kita ubah menjadi editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga menyerupai tiang dalam Bangsal Smarakatha. Gambar 4.21 Pembuatan Objek 3D tiang Bangsal Smarakatha

13 34 wall dinding Bangsal Smarakatha menyerupai bentuk dinding Bangsal Smarakatha. objek tersebut dan kita ubah menjadi editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga menyerupai atap bangunan Bangsal Smarakatha, kemudian kita membuat pelengkap halaman cylinder kita klik kanan objek tersebut dan kita ubah menjadi editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga menyerupai pot bunga yang ada di halaman Bangsal Marcukunda. Untuk bunga foliage texturing akan di lakukan di unity 3D. Langkah terakhir dalam pembuatan objek ini yaitu meng-export objeknya kedalam format.obj. Gambar 4.22 Pembuatan Objek 3D Bangsal Marcukunda d. Pembuatan Objek 3D Kori Sri Manganti Langkah pertama dalam pembuatan objek 3d Kori Sri Manganti adalah membuat tiang utama bangunan men klik kanan objek tersebut dan kita ubah menjadi editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga menyerupai tiang utama Kori Sri Manganti. Kemudian untuk tiang sebelah kanan box

14 35 utama kita klik kanan objek tersebut dan kita ubah menjadi editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga menyerupai tiang sebelah kanan dan kiri Kori Sri Manganti. Gambar 4.23 Pembuatan Objek 3D tiang Kori Sri Manganti wall dinding Kori Sri Manganti menyerupai bentuk dinding Kori Sri Manganti. Kemudian untuk at objek tersebut dan kita ubah menjadi editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga menyerupai atap bangunan Kori Sri Manganti, kemudian kita membuat pelengkap halaman Kori cylinder kanan objek tersebut dan kita ubah menjadi editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga menyerupai pot bunga yang ada di halaman Bangsal Marcukunda. Untuk bunga foliage dan kita ubah menjadi editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga menyerupai tombak yang ada pada Kori Sri Manganti. Agar terlihat halus kita gu MeshSmooth Untuk texturing akan di lakukan di unity 3D. Langkah terakhir dalam pembuatan objek ini yaitu meng-export objeknya kedalam format.obj.

15 36 Gambar 4.24 Pembuatan Objek 3D Kori Sri Manganti e. Pembuatan Objek 3D Panggung Sangga Buwana Langkah pertama dalam pembuatan objek 3d Panggung Sangga Buwana box tersebut dan kita ubah menjadi editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga menyerupai lantai Panggung Sangga Buwana. Kemudian membuat dinding bangunan menggunakan wall menyerupai bentuk dinding Panggung Sangga Buwana. Gambar 4.25 Pembuatan Objek 3D dinding Panggung Sangga Buwana kanan objek tersebut dan kita ubah menjadi editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga

16 37 menyerupai atap bangunan Panggung Sangga Buwana. Kemudian membuat pintu pivot casement uaikan anak tangga untuk masuk ke Panggung Sangga Buwana menggunakan tool Straight Stair s pada lantai 3, 4, dan 5 menggunakan railing kita klik kanan objek tersebut dan kita ubah menjadi editable poly. Setelah itu kita pilih edge, vertex serta polygon dan ubah ukuran maupun bentuknya hingga menyerupai tiang Panggung Sangga Buwana. Untuk texturing akan di lakukan di unity 3D. Langkah terakhir dalam pembuatan objek ini yaitu meng-export objeknya kedalam format.obj. Gambar 4.26 Pembuatan Objek 3D Panggung Sangga Buwana Pembuatan Aplikasi Langkah awal dalam pembuatan project adalah pilih file lalu pilih new project, kemudian secara otomatis masuk ke windows scene. Langkah selanjutnya adalah memberikan objek dan segala kebutuhan yang diperlukan untuk pembuatan scene tersebut. Untuk memasukkan objek pada Unity, pada kolom Asset klik kanan kemudian pilih new asset dan pilih objek yang akan digunakan,

17 38 asset yang telah dimasukkan kedalam Unity maka secara otomatis akan menjadi game object, untuk mengatur settingan dapat dilakukan pada kolom inspector. Dalam object inspector tersebut digunakan untuk memberikan settingan seperti texture type, sprite mode, filter mode, max size, compressed dan sebagainya. Untuk objek lainnya, untuk mengimport ke dalam Unity melakukan dengan cara yang sama. Setelah pengaturan game object selesai maka langkah selanjutnya adalah memasukkan game object tersebut ke dalam scene game ke dalam kolom hierarchy maka game object tersebut akan muncul ke dalam scene. Aset aset yang akan digunakan secara menerus maupun yang akan dipanggil pada scene lain, sebaiknya disimpan didalam asset list. Untuk membuat script didalam unity, langkahnya dengan klik kanan pada asset pilih create pilih C# kemudian beri nama pada script tersebut, double click script tersebut maka secara otomatis Mono-Develop Unity akan dijalankan. Mono-Develop Unity merupakan bundle dari Unity yang digunakan sebagai pengolah script. Maka secara otomatis akan masuk pada script tersebut, dimana telah terdapat class dengan nama yang sesuai dengan nama script yang diberikan. Kemudian penulis mengembangkan script tersebut sesuai kebutuhan dan tujuan pembuatan dari script tersebut. Berikut merupakan tabel yang berisi daftar file yang digunakan dalam pembuatan aplikasi augmented reality ini, yang tersimpan dalam folder asset pada Unity 3D. Tabel 4.1 Daftar Komponen Yang digunakan dalam Pembuatan Aplikasi No Folder Asset Nama File Keterangan 1. Resources/ 1_keraton File 3D Keraton Surakarta yang 3D surakarta_3d.obj digunakan untuk objek 3D Keraton Surakarta. 2_kori_sri_manga File 3D Kori Sri Manganti yang di nti_3d gunakan untuk objek 3D Kori Sri Manganti. 3_bangsal_smara File 3D Bangsal Smarakatha yang di katha_3d gunakan untuk objek 3D Bangsal

18 39 2. Resources/ About 3. Resources/ Audio 4. Resources/ Audio_tour 4_bangsal_marcu kunda_3d 5_panggungsanggabuwana_3D credits1.png a1.png a2.png Back-Sound.mp3 1_keraton_suraka rta.mp3 2_sasana_sumew a.mp3 3_siti_hinggil_lor.mp3 4_kori_sri_manga nti.mp3 5_bangsal_smara katha 6_bangsal_marcu kundha.mp3 7_panggung_sang ga_buwana.mp3 8_bangsal_maligi. Smarakatha. File 3D Bangsal Marcukunda yang di gunakan untuk objek 3D Bangsal Marcukunda. File 3D Panggung Sangga Buwana yang di gunakan untuk objek 3D Panggung Sangga Buwana. File gambar credits yang di gunakan untuk credits aplikasi play backsound pause backsound File audio yang di gunakan untuk audio backsound aplikasi File audio yang di gunakan untuk audio informasi keraton surakarta File audio yang di gunakan untuk audio informasi sasana sumewa File audio yang di gunakan untuk audio informasi sasana sumewa File audio yang di gunakan untuk audio informasi kori sri manganti File audio yang di gunakan untuk audio informasi bangsal smarakatha File audio yang di gunakan untuk audio informasi bangsal marcukunda File audio yang di gunakan untuk audio informasi panggung sangga buwana File audio yang di gunakan untuk audio

19 40 5. Resources/ info_keraton _surakarta/da ta_image 6. Resources/ info_keraton _surakarta/da ta_info 7. Resources/ info_keraton _surakarta/m enu 8. Resources/ Maps 9. Resources/ Menu mp3 9_sasana_sewaka. mp3 10_siti_hinggil_ki dul 1_keraton_suraka rta.png 1_keraton_suraka rta_info.png Coba_AR_tour.pn g menu_informasi_ keraton.png Pointer.png About.png Close.png Exit.png exit_oke.png exit_no.png home_2.png informasi bangsal maligi File audio yang di gunakan untuk audio informasi sasana sewaka File audio yang di gunakan untuk audio informasi siti hinggil kidul background informasi keraton surakarta informasi keraton surakarta menu coba augmented reality tour menu memilih informasi texturing pointer maps menu credits menu close background menu exit menu konfirmasi exit menu konfirmasi tidak jadi exit

20 Resources/ Mulai_tour/ #Menu 11. Resources/ Mulai_tour/ info_data Maps.png menu_utama.png Mulai_tour.png mulai_tour 1.png mulai_tour_ar.pn g Mulai_tour_klik.p ng mulai_tour_manu al.png Tutorial.png Audio.png Info.png Pause.png Stop.png 1.keraton_surakar ta.png 2. sasana_sumewa.p kembali ke menu utama menu maps background menu utama menu mulai tour menu pilih tour menu augmented reality tour menu mulai tour menu informasi keraton solo menu Tutorial menu audio menu info pause audio info stop audio info informasi bangunan keraton Surakarta secara augmented reality informasi bangunan sasana sumewa

21 Resources/ Mulai_tour/ info_menu 13. Resources/ Mulai_tour/ ng 3. siti hinggil lor.png 4. kori sri manganti.png 5. bangsal marcukunda.png 6. bangsal smarakatha.png 7. panggung sangga buwana.png 8. bangsal maligi.png 9. sasana sewaka.png 10. siti hinggil kidul.png 1_Keraton_Surak arta.png 1.keraton_surakar ta.png secara augmented reality informasi bangunan siti hinggil lor secara augmented reality informasi bangunan kori sri manganti secara augmented reality informasi bangunan bangsal marcukundha secara augmented reality informasi bangunan bangsal smarakatha secara augmented reality informasi bangunan panggung sangga buwana secara augmented reality informasi bangunan bangsal maligi secara augmented reality informasi bangunan sasana sewaka augmented reality informasi bangunan siti hinggil kidul augmented reality background menu informasi augmented reality tag informasi augmented reality

22 43 info_tag 14. Resources/ SplashScreen Splash.png splashscreen aplikasi 15. Resources/ Tutorial tutorial 1.png tutorial pertama pada aplikasi tutorial_next.png tutorial kedua pada aplikasi Next.png next tutorial Back.png back tutorial 16. Scenes 1- Splash_Screen.un Scene yang digunakan untuk mengatur tampilan splashscreen ity 2-menu.unity Scene yang digunakan untuk mengatur tampilan menu utama 3- Mulai_tour.unity Scene yang digunakan untuk mengatur tampilan augmented reality 2D dengan marker bangunan nytata 4-Maps.unity Scene yang digunakan untuk mengatur tampilan maps 5- Info_Keraton.unit Scene yang digunakan untuk mengatur tampilan informasi keraton surakarta y 6-AR_3D.unity Scene yang digunakan untuk mengatur tampilan augmented reality 3D dengan marker foto 17. Script/ Audio audio_back_soun d.cs Script yang digunakan untuk mengatur backsound pada aplikasi 18. Script/ Putar_objek_3D.c Script yang digunakan untuk mengatur

23 44 Coba_tour s swipe pada objek 3D info_keraton_sura karta1.cs Script yang digunakan untuk mengatur informasi keraton surakarta 19. Script/ Maps menu_maps.cs Script yang digunakan untuk mengatur maps 20. Script/ Menu menu_utama.cs Script yang digunakan untuk mengatur menu utama pada aplikasi 22. Script/ Mulai_tour/ Data_info a_keraton_suraka rta.cs Script yang digunakan untuk mengatur informasi keraton Surakarta secara augmented reality 23 Script/ SplashScreen Splash.cs Script yang digunakan untuk mengatur splashscreen a. Pembuatan scene splash screen Langkah awal pembuatan splash screen pada unity adalah dengan mengklik new scene. Kemudian pada window projet, klik kanan dan pilih create new C# script. Kemudian drag gambar background splash yang sudah dibuat tadi ke dalam window projet. Klik gambar dan masuk pada window inspector, lalu atur texture type menjadi GUI dan format menjadi true color. Langkah selanjutnya drag gambar background splash kedalam main camera. Kemudian klik file dan pilih save scene, lalu beri nama scene tersebut sesuai dengan yang diinginka. Gambar pembuatan scene splash screen dapat dilihat pada gambar Gambar 4.27 pembuatan scene splash screen.

24 45 Dan berikut ini merupakan potongan script splash.cs untuk membuat scene splash screen. if ((Application.platform == RuntimePlatform.Android) && (int.parse(application.unityversion.substring(0, 1)) >= 4)) SecondsVisible += 2.0f; Invoke("LoadAboutScene", SecondsVisible); } //pengalian waktu splashscreen void OnGUI(){ GUI.DrawTexture(newRect(0,0,Screen.width,Screen.height),SplashScreen); //tampilan splashscreen } b. Pembuatan scene menu utama Untuk pembuatan scene menu utama hampir sama dengan pembuatan scene splash screen. Hanya saja pada scene menu ini ditambahkan dengan button yang memiliki fungsi yang berbeda- beda. Buat script dengan klik kanan pada window project. Kemudian import icon tombol dengan cara men drag icon tersebut kedalam unity. Atur texture type menjadi GUI dan format true color pada window isnpector agar gambar yang ditampilkan seperti gambar aslinya tanpa di converter. Kemudian drag gambar menu utama dan tombol- tombol yang telah di import tadi ke dalam main camera. Lalu atur letak tombol pada window inspector. Gambar pembuatan menu utama dapat dilihat pada gambar Gambar 4.28 pembuatan scene menu utama.

25 46 Dan berikut ini merupakan potongan script Menu_utama.cs yang digunakan untuk membuat scene menu utama. //==================== script exit saat button back di klik if(input.getkeydown(keycode.escape)){ sound_klik.play(); BExit =!BExit; } //==================== tutup script exit saat button back di klik //==================== script sound saat button di klik sound_klik = (AudioSource)gameObject.AddComponent ("AudioSource"); AudioClip klik; klik = (AudioClip)Resources.Load("Audio/Clock"); sound_klik.clip = klik; sound_klik.mindistance=100; //==================== tutup script sound saat button di klik //==================== button pindah scene pilih tour if (GUI.Button(new Rect(Screen.width * Mulai_tour_X,Screen.height * Mulai_tour_Y,Screen.width *.36f,Screen.height *.26f),"",Mulai_tour)){ sound_klik.play(); Application.LoadLevel("2-menu-pilih-tour"); } //==================== tutup button pindah scene pilih tour c. Pembuatan scene informasi keraton Surakarta Untuk pembuatan scene informasi keraton surakarta hampir sama dengan pembuatan scene menu utama. Hanya saja pada scene menu ini ditambahkan dengan penempatan tombol yang memiliki fungsi untuk menampilkan informasi keraton surakata. Buat script dengan klik kanan pada window project. Kemudian import icon tombol dengan cara men drag icon tersebut kedalam unity. Atur texture type menjadi GUI dan format true color pada window isnpector agar gambar yang ditampilkan seperti gambar aslinya tanpa di converter. Kemudian drag gambar menu utama dan tombol- tombol yang telah di import tadi ke dalam main camera. Lalu atur letak tombol pada window inspector. Gambar pembuatan menu utama dapat dilihat pada gambar 4.23.

26 47 Gambar 4.29 pembuatan scene informasi keraton surakarta. Dan berikut ini merupakan potongan script info_keraton_surakarta1.cs untuk membuat scene informasi keraton surakarta. //========== script back menu utama saat button back di klik if(input.getkeydown(keycode.escape)){ sound_klik.play(); Application.LoadLevel("2-menu");} //========== tutup script back menu utama saat button back di klik //==================== script sound saat button di klik sound_klik = (AudioSource)gameObject.AddComponent ("AudioSource"); AudioClip klik; klik = (AudioClip)Resources.Load("Audio/Clock"); sound_klik.clip = klik; sound_klik.mindistance=100; //==================== tutup script sound saat button di klik //==================== tampil informasi if(tampil_keraton_surakarta){ GUI.DrawTexture(new Rect(0,0,Screen.width,Screen.height),Image_keraton_surakarta); scroll_keraton_surakarta = GUI.BeginScrollView (new Rect (Screen.width * scroll_keraton_surakarta_x, Screen.height * scroll_keraton_surakarta_y, Screen.width /2.4f,Screen.height/1.28f), scroll_keraton_surakarta, new Rect (0, 0, 0, Screen.height * 2.8f)); GUI.color = Color.black; GUI.Label(new Rect(Screen.width * Info_keraton_surakarta_1_X, Screen.height * Info_keraton_surakarta_1_Y, Screen.width/3, Screen.height*2), "Keraton Surakarta Hadiningrat adalah istana resmi dari Kasunanan Surakarta. Keraton ini didirikan oleh Sunan Pakubuwono II pada tahun 1744 sebagai pengganti Istana Kartasura yang porak-poranda akibat Geger Pecinan " +"Istana terakhir Kerajaan Mataram ini didirikan di desa Sala (Solo), sebuah pelabuhan kecil di tepi barat Bengawan Solo Setelah Perjanjian Giyanti tahun 1755, keraton ini kemudian dijadikan istana resmi bagi Kasunanan Surakarta."); GUI.EndScrollView(); } //==================== tutup tampil informasi

27 48 d. Pembuatan scene augmented reality Untuk Pembuatan scene augmented reality diawali dengan langkah yang sama seperti pembuatan menu scene sebelumnya. Namun pada scene ini tidak menggunakan main camera namun menggunkan AR Camera. Untuk menggunakan AR camera, import SDK dari vuforia yang telah di download. Kemudian masukkan AR camera kedalam hierarchy, lalu hapus main camera. Kemuadia buat C# script pada project, untuk memunculkan objek pada saat kamera smartphone melakukan scanning marker. Setelah melakukan codding, maka akan muncul image target pada window hierarchy.atur objek informasi dan marker yang berupa unity paket dari vuforia kedalam image target. Pembuatan scene augmented reality dapat dilihat pada gambar Gambar 4.30 Pembuatan scene augmented reality Dan berikut ini merupakan potongan script a_keraton_surakarta.cs yangdigunakan untuk scene augmented reality. //======= Script mengaktifkan data set marker pada AR camera if (mdatasetstoactivate.contains(datasetname)) { imagetracker.activatedataset(dataset); } //======= Tutup script mengaktifkan data set marker pada AR camera //======= Script setting data gambar marker ImageTargetType IEditorImageTargetBehaviour.ImageTargetType { get { return mimagetargettype; } }

28 49 //++++ setting rasio bool IEditorImageTargetBehaviour.SetAspectRatio(float aspectratio) {if (mtrackable == null) { maspectratio = aspectratio; return true; } return false; } //++++ tutup setting rasio //++++ setting type image target bool IEditorImageTargetBehaviour.SetImageTargetType(ImageTargetType imagetargettype) { if (mtrackable == null) {mimagetargettype = imagetargettype; return true; } return false;} //++++ tutup setting type image target //======= Tutup Script setting data gambar marker //======= menampilkan objek augmented reality //++++ menentukan marker terdeteksi atau tidak if (newstatus == TrackableBehaviour.Status.DETECTED newstatus == TrackableBehaviour.Status.TRACKED) { OnTrackingFound();} else { OnTrackingLost(); } //++++ tutup menentukan marker terdeteksi atau tidak //++++ saat objek marker di temukan private void OnTrackingFound() { //++++ merender objek informasi Renderer[] renderercomponents = GetComponentsInChildren<Renderer>(true); //++++ tutup merender objek informasi foreach (Renderer component in renderercomponents) { component.enabled = true;} //++++ tutup saat objek marker di temukan //++++ saat objek marker tidak di temukan private void OnTrackingFound() { //++++ merender objek informasi Renderer[] renderercomponents = GetComponentsInChildren<Renderer>(true); //++++ tutup merender objek informasi foreach (Renderer component in renderercomponents) { component.enabled = false;} //++++ tutup saat objek marker tidak di temukan //======= tutup menampilkan objek augmented reality

29 50 e. Pembuatan scene maps Untuk Pembuatan scene maps diawali dengan langkah yang sama seperti pembuatan menu scene sebelumnya. Kemudian import paket MapNav yang di download dari unity asset store ke unity 3d. Pembuatan scene maps dapat dilihat pada gambar Gambar 4.31 Import Paket mapnav ke unity 3d Gambar 4.32 Pembuatan scene maps

30 51 Dan berikut ini merupakan potongan script menu_maps.cs untuk membuat scene maps. //=== Memasukkan API key dari maps provider (MapQuest) var key : String="Fmjtd luur2d0r20%2c8x%3do5-9arw0u"; //=== Tutup Memasukkan API key dari maps provider (MapQuest) f. Mengubah aplikasi ke format. Apk Setelah selesai melakukan pembuatan seperti yang telah dijelaskan diatas, maka langkah selanjutnya adalah mengubah aplikasi ke dalam format.apk agar dapat di jalankan pada sistem operasi android. Langkah pertama, klik file lalu pilih build setting. Kemudian masukkan scene-scene yang telah di buat sebelumnya ke dalam window build setting sesuai dengan urutan. Klik build, jika proses build telah selesai maka akan muncul folder dimana tempat kita menyimpan projek tersebut. Proses mengubah aplikasi menjadi format ke.apk dapat dilihat pada gambar Gambar 4.33 proses mengubah format aplikasi menjadi.apk.

31 Hasil Pengujian Aplikasi Setelah berhasil di build dan formatnya telah menjadi.apk maka langkah selanjutnya adalah menguji aplikasi yang telah dibuat, dengan menginstal aplikasi ke smartphone bersistem android. Dan berikut adalah proses instalasi aplikasi pada smartphone android: Gambar 4.34 konfirmasi instalasi a. Halaman Splash Screen Gambar 4.35 proses instalasi Gambar 4.36 Hasil instalasi Gambar 4.37 Halaman Splash Screen Pada saat menjalankan aplikasi pertama kali, maka aplikasi ini akan menampilkan Splash screen yang berisi logo aplikasi.

32 53 b. Halaman Menu Utama Gambar 4.38 Halaman Menu Utama Setelah Splash screen selesai di tampilkan akan masuk ke menu utama, pada menu utama ini terdapat beberapa menu di antaranya menu mulai tour untuk memulai tour, menu maps untuk melihat peta, menu tutorial untuk melihat tutorial cara penggunaan aplikasi, menu info untuk melihat info aplikasi dan menu close untuk selesai menggunakan aplikasi. c. Halaman Pilih Tour Gambar 4.39 Halaman Pilih Tour Apabila kita memilih menu mulai tour maka kita akan di berikan dua pilihan, mendapatkan informasi bangunan Keraton Surakarta secara Augmented Reality atau tanpa augmented reality.

33 54 d. Augmented reality marker bangunan Keraton Surakarta Pada scene augmented reality tour terdapat tombol audio dimana tombol tersebut berfungsi untuk mematikan atau menghidupkan backsound, agar saat kita memakai fitur informasi audio tidak terganggu. Kemudian apabila kamera smartphone android di arahkan ke arah bangunan keraton surakarta, maka akan muncul tag informasi keraton surakarta seperti berikut : Gambar 4.40 Augmented reality marker bangunan Keraton Surakarta Apabila kita klik tag keraton Surakarta tersebut maka akan muncul dua pilihan menu informasi, dimana menu yang pertama adalah menu yang akan menampilkan informasi secara text, sedangkan yang kedua menampilkan informasi secara audio. Berikut adalah tampilan informasi : Gambar 4.41 Augmented reality marker bangunan Keraton Surakarta

34 55 e. Augmented reality marker bangunan Sasana Sumewa Pada scene augmented reality tour terdapat tombol audio dimana tombol tersebut berfungsi untuk mematikan atau menghidupkan backsound, agar saat kita memakai fitur informasi audio tidak terganggu. Kemudian apabila kamera smartphone android di arahkan ke arah bangunan Sasana Sumewa, maka akan muncul tag informasi Sasana Sumewa seperti berikut : Gambar 4.42 Augmented reality marker bangunan Sasana Sumewa Apabila kita klik tag Sasana Sumewa tersebut maka akan muncul dua pilihan menu informasi, dimana menu yang pertama adalah menu yang akan menampilkan informasi secara text, sedangkan yang kedua menampilkan informasi secara audio. Berikut adalah tampilan informasi : Gambar 4.43 Augmented reality marker bangunan Sasana Sumewa

35 56 f. Augmented reality marker bangunan Siti Hinggil Lor Pada scene augmented reality tour terdapat tombol audio dimana tombol tersebut berfungsi untuk mematikan atau menghidupkan backsound, agar saat kita memakai fitur informasi audio tidak terganggu. Kemudian apabila kamera smartphone android di arahkan ke arah bangunan Siti Hinggil Lor, maka akan muncul tag informasi Siti Hinggil Lor seperti berikut : Gambar 4.44 Augmented reality marker bangunan Siti Hinggil Lor Apabila kita klik tag Siti Hinggil Lor tersebut maka akan muncul dua pilihan menu informasi, dimana menu yang pertama adalah menu yang akan menampilkan informasi secara text, sedangkan yang kedua menampilkan informasi secara audio. Berikut adalah tampilan informasi : Gambar 4.45 Augmented reality marker bangunan Siti Hinggil Lor

36 57 g. Augmented reality marker bangunan Kori Sri Manganti Pada scene augmented reality tour terdapat tombol audio dimana tombol tersebut berfungsi untuk mematikan atau menghidupkan backsound, agar saat kita memakai fitur informasi audio tidak terganggu. Kemudian apabila kamera smartphone android di arahkan ke arah bangunan Kori Sri Manganti, maka akan muncul tag informasi Kori Sri Manganti seperti berikut : Gambar 4.46 Augmented reality marker bangunan Kori Sri Manganti Apabila kita klik tag Kori Sri Manganti tersebut maka akan muncul dua pilihan menu informasi, dimana menu yang pertama adalah menu yang akan menampilkan informasi secara text, sedangkan yang kedua menampilkan informasi secara audio. Berikut adalah tampilan informasi : Gambar 4.47 Augmented reality marker bangunan Kori Sri Manganti

37 58 h. Augmented reality marker bangunan Bangsal Marcukunda Pada scene augmented reality tour terdapat tombol audio dimana tombol tersebut berfungsi untuk mematikan atau menghidupkan backsound, agar saat kita memakai fitur informasi audio tidak terganggu. Kemudian apabila kamera smartphone android di arahkan ke arah bangunan Bangsal Marcukunda, maka akan muncul tag informasi Bangsal Marcukunda seperti berikut : Gambar 4.48 Augmented reality marker bangunan Bangsal Marcukunda Apabila kita klik tag Bangsal Marcukunda tersebut maka akan muncul dua pilihan menu informasi, dimana menu yang pertama adalah menu yang akan menampilkan informasi secara text, sedangkan yang kedua menampilkan informasi secara audio. Berikut adalah tampilan informasi : Gambar 4.49 Augmented reality marker bangunan Bangsal Marcukunda

38 59 i. Augmented reality marker bangunan Bangsal Smarakatha Pada scene augmented reality tour terdapat tombol audio dimana tombol tersebut berfungsi untuk mematikan atau menghidupkan backsound, agar saat kita memakai fitur informasi audio tidak terganggu. Kemudian apabila kamera smartphone android di arahkan ke arah bangunan Bangsal Smarakatha, maka akan muncul tag informasi Bangsal Smarakatha seperti berikut : Gambar 4.50 Augmented reality marker bangunan Bangsal Smarakatha Apabila kita klik tag Bangsal Smarakatha tersebut maka akan muncul dua pilihan menu informasi, dimana menu yang pertama adalah menu yang akan menampilkan informasi secara text, sedangkan yang kedua menampilkan informasi secara audio. Berikut adalah tampilan informasi : Gambar 4.51 Augmented reality marker bangunan Bangsal Smarakatha

39 60 j. Augmented reality marker bangunan Panggung Sangga Buwana Pada scene augmented reality tour terdapat tombol audio dimana tombol tersebut berfungsi untuk mematikan atau menghidupkan backsound, agar saat kita memakai fitur informasi audio tidak terganggu. Kemudian apabila kamera smartphone android di arahkan ke arah bangunan Panggung Sangga Buwana, maka akan muncul tag informasi Panggung Sangga Buwana seperti berikut : Gambar 4.52 Marker bangunan Panggung Sangga Buwana Apabila kita klik tag Panggung Sangga Buwana tersebut maka akan muncul dua pilihan menu informasi, dimana menu yang pertama adalah menu yang akan menampilkan informasi secara text, sedangkan yang kedua menampilkan informasi secara audio. Berikut adalah tampilan informasi : Gambar 4.53 Marker bangunan Panggung Sangga Buwana

40 61 k. Augmented reality marker bangunan Bangsal Maligi Pada scene augmented reality tour terdapat tombol audio dimana tombol tersebut berfungsi untuk mematikan atau menghidupkan backsound, agar saat kita memakai fitur informasi audio tidak terganggu. Kemudian apabila kamera smartphone android di arahkan ke arah bangunan Bangsal Maligi, maka akan muncul tag informasi Bangsal Maligi seperti berikut : Gambar 4.54 Augmented reality marker bangunan Bangsal Maligi Apabila kita klik tag Bangsal Maligi tersebut maka akan muncul dua pilihan menu informasi, dimana menu yang pertama adalah menu yang akan menampilkan informasi secara text, sedangkan yang kedua menampilkan informasi secara audio. Berikut adalah tampilan informasi : Gambar 4.55 Augmented reality marker bangunan Bangsal Maligi

41 62 l. Augmented reality marker bangunan Sasana Sewaka Pada scene augmented reality tour terdapat tombol audio dimana tombol tersebut berfungsi untuk mematikan atau menghidupkan backsound, agar saat kita memakai fitur informasi audio tidak terganggu. Kemudian apabila kamera smartphone android di arahkan ke arah bangunan Sasana Sewaka, maka akan muncul tag informasi Sasana Sewaka seperti berikut : Gambar 4.56 Augmented reality marker bangunan Sasana Sewaka Apabila kita klik tag Sasana Sewaka tersebut maka akan muncul dua pilihan menu informasi, dimana menu yang pertama adalah menu yang akan menampilkan informasi secara text, sedangkan yang kedua menampilkan informasi secara audio. Berikut adalah tampilan informasi : Gambar 4.57 Augmented reality marker bangunan Sasana Sewaka

42 63 m. Augmented reality marker bangunan Siti Hinggil Kidul Pada scene augmented reality tour terdapat tombol audio dimana tombol tersebut berfungsi untuk mematikan atau menghidupkan backsound, agar saat kita memakai fitur informasi audio tidak terganggu. Kemudian apabila kamera smartphone android di arahkan ke arah bangunan Siti Hinggil Kidul, maka akan muncul tag informasi Siti Hinggil Kidul seperti berikut : Gambar 4.58 Augmented reality marker bangunan Siti Hinggil Kidul Apabila kita klik tag Siti Hinggil Kidul tersebut maka akan muncul dua pilihan menu informasi, dimana menu yang pertama adalah menu yang akan menampilkan informasi secara text, sedangkan yang kedua menampilkan informasi secara audio. Berikut adalah tampilan informasi : Gambar 4.59 Augmented reality marker bangunan Siti Hinggil Kidul

43 64 n. Halaman Informasi bangunan Keraton Surakarta tanpa augmented reality Gambar 4.60 Halaman Info Keraton Surakarta tanpa augmented reality Pada halaman ini menampilkan informasi Keraton Surakarta tanpa augmented reality, dimana terdapat 10 informasi bangunan yang ada di keraton Surakarta. Berikut rincian informasi bangunan keraton Surakarta yang disajikan tanpa teknologi augmented reality Gambar 4.61 Informasi bangunan Keraton Surakarta

44 65 Gambar 4.62 Informasi bangunan Sasana Sumewa Gambar 4.63 Informasi bangunan Siti Hinggil Lor Gambar 4.64 Informasi bangunan Kori Sri Manganti

45 66 Gambar 4.65 Informasi bangunan Bangsal Smarakatha Gambar 4.66 Informasi bangunan Bangsal Marcukunda Gambar 4.67 Informasi bangunan Siti Hinggil Kidul

46 67 Gambar 4.68 Informasi bangunan Bangsal Maligi. Gambar 4.69 Informasi bangunan Sasana Sewaka. Gambar 4.70 Informasi bangunan Sasana Sewaka

47 68 o. Augmented reality markerles Keraton Surakarta Pada scene coba augmented reality tour terdapat tombol audio dimana tombol tersebut berfungsi untuk mematikan atau menghidupkan backsound, agar saat kita memakai fitur informasi audio tidak terganggu. Kemudian apabila kamera smartphone android di arahkan ke arah bangunan Keraton Surakarta, maka akan muncul bangunan 3 Dimensi Keraton Surakarta dan tag informasi Keraton Surakarta seperti berikut : Gambar 4.71 Augmented reality markerles Keraton Surakarta Apabila kita klik tag Keraton Surakarta tersebut maka akan muncul dua pilihan menu informasi, dimana menu yang pertama adalah menu yang akan menampilkan informasi secara text, sedangkan yang kedua menampilkan informasi secara audio. Berikut adalah tampilan informasi : Gambar 4.72 Augmented reality markerles Keraton Surakarta

48 69 p. Augmented reality markerles Bangsal Marcukunda Pada scene coba augmented reality tour terdapat tombol audio dimana tombol tersebut berfungsi untuk mematikan atau menghidupkan backsound, agar saat kita memakai fitur informasi audio tidak terganggu. Kemudian apabila kamera smartphone android di arahkan ke arah bangunan Kori Sri Manganti, maka akan muncul bangunan 3 Dimensi Bangsal Marcukunda dan tag informasi Bangsal Marcukunda seperti berikut : Gambar 4.73 Augmented reality markerles Bangsal Marcukunda Apabila kita klik tag Bangsal Marcukunda tersebut maka akan muncul dua pilihan menu informasi, dimana menu yang pertama adalah menu yang akan menampilkan informasi secara text, sedangkan yang kedua menampilkan informasi secara audio. Berikut adalah tampilan informasi : Gambar 4.74 Augmented reality markerles Bangsal Marcukunda

49 70 q. Augmented reality markerles Bangsal Smarakatha Pada scene coba augmented reality tour terdapat tombol audio dimana tombol tersebut berfungsi untuk mematikan atau menghidupkan backsound, agar saat kita memakai fitur informasi audio tidak terganggu. Kemudian apabila kamera smartphone android di arahkan ke arah bangunan Bangsal Smarakatha, maka akan muncul bangunan 3 Dimensi Bangsal Smarakatha dan tag informasi Bangsal Smarakatha seperti berikut: Gambar 4.75 Augmented reality markerles Bangsal Smarakatha Apabila kita klik tag Bangsal Smarakatha tersebut maka akan muncul dua pilihan menu informasi, dimana menu yang pertama adalah menu yang akan menampilkan informasi secara text, sedangkan yang kedua menampilkan informasi secara audio. Berikut adalah tampilan informasi : Gambar 4.76 Augmented reality markerles Bangsal Smarakatha

50 71 r. Augmented reality markerles Kori Sri Manganti Pada scene coba augmented reality tour terdapat tombol audio dimana tombol tersebut berfungsi untuk mematikan atau menghidupkan backsound, agar saat kita memakai fitur informasi audio tidak terganggu. Kemudian apabila kamera smartphone android di arahkan ke arah bangunan Kori Sri Manganti, maka akan muncul bangunan 3 Dimensi Kori Sri Manganti dan tag informasi Kori Sri Manganti seperti berikut : Gambar 4.77 Augmented reality markerles Kori Sri Manganti Apabila kita klik tag Kori Sri Manganti tersebut maka akan muncul dua pilihan menu informasi, dimana menu yang pertama adalah menu yang akan menampilkan informasi secara text, sedangkan yang kedua menampilkan informasi secara audio. Berikut adalah tampilan informasi : Gambar 4.78 Augmented reality markerles Kori Sri Manganti

51 72 s. Augmented reality markerles Panggung Sangga Buwana Pada scene coba augmented reality tour terdapat tombol audio dimana tombol tersebut berfungsi untuk mematikan atau menghidupkan backsound, agar saat kita memakai fitur informasi audio tidak terganggu. Kemudian apabila kamera smartphone android di arahkan ke arah bangunan Panggung Sangga Buwana, maka akan muncul bangunan 3 Dimensi Panggung Sangga Buwana dan tag informasi Panggung Sangga Buwana seperti berikut : Gambar 4.79 Markerles Panggung Sangga Buwana Apabila kita klik tag Panggung Sangga Buwana tersebut maka akan muncul dua pilihan menu informasi, dimana menu yang pertama adalah menu yang akan menampilkan informasi secara text, sedangkan yang kedua menampilkan informasi secara audio. Berikut adalah tampilan informasi : Gambar 4.80 Markerles Panggung Sangga Buwana

52 Pengujian Aplikasi Untuk melakukan pengujuan aplikasi yang tela dibuat dilakukan dengan 3 cara pengujian, yaitu Play pada Unity3d, mem-build project ke format.apk agar dapat di install pada smartphone android dengan berbagai device pengujian terhadap respon pengguna. Berikut ini merupakan data hasil pengujian pada beberapa perangkat bersistem operasi android Pengujian Fungsional Aplikasi Pengujian fungsional aplikasi dalah pengujian yang menitik beratkan pada fungsi yang telah dibuat di dalam aplikasi. Tahap pengujian ini dimaksudkan untuk menguji semua fungsi yang telah dibuat dalam aplikasi apakah berjalan dengan lancar atau masih terdapat bug dan error. Pengujian ini dilakukan dengan membuat tabel checklist yang berisi daftar fungsi yang terdapat pada aplikasi yang di tes satu per satu kemudian diberikan keterangan mengenai hasil pengujian. Data hasil pengujian aplikasi dapat dilihat pada tabel 4.1. Tabel 4.2 Pengujian Fungsional Aplikasi No. Deskripsi Masukan Output yang Diharapkan Hasil yang Didapat Sesuai? 1 Pengujian - Splash Screen muncul, Splash Screen Ya Splash Screen saat awal aplikasi muncul, saat awal dijalankan aplikasi dijalankan 2 Pengujian Main Menu - Main menu muncul, setelah splash screen Main menu muncul, setelah splash screen Ya 3 Pengujian Tombol Credit ditampilkan Credit ditampilkan Ya Credit Screen di klik 4 Pengujian Tutorial Tombol di Tutorial di tampilkan Tutorial di tampilkan Ya Screen klik 5 Pengujian Tombol Menampilkan halama Menampilkan Ya

53 74 Main Augmented Augmented di augmented reality halama augmented reality reality tour klik 6 Pengujian Matching Pattern Marker yang akan di lacak oleh camera smartphone Marker yang diambil oleh camera smartphone terlacak oleh sistem Marker yang diambil oleh camera smartphone terlacak oleh sistem Ya 7 Pengujian display tag informasi Marker yang akan di lacak oleh camera Menampilkan tag informasi pada marker Menampilkan tag informasi pada marker Ya smartphone 8 Pengujian display menu informasi Tag informasi di klik Menampilkan display menu informasi Menampilkan display menu informasi Ya 9 Pengujian display Tombol Menampilkan display informasi Menampilkan display informasi Ya informasi 10 Pengujian audio Tombol Memutar audio informasi Memutar audio informasi Ya informasi klik 11 Pengujian display model Marker yang akan di lacak oleh camera Menampilkan objek 3 dimensi di atas marker Menampilkan objek 3 dimensi di atas marker Ya smartphone 12 Pengujian Control model -swipe layar ke arah kanan -swipe layar Model 3 dimensi berputar ke arah kanan apabila di swipe ke kanan, dan berputar ke kiri apa bila di swipe kea Model 3 dimensi berputar ke arah kanan apabila di swipe ke kanan, dan berputar ke kiri Ya

54 75 ke arah kiri rah kiri apa bila di swipe kea rah kiri 13 Pengujian display keluar Tombol close Menampilkan pilihan close Menampilkan pilihan close Ya klik 14 Pengujian keluar aplikasi pada pilihan keluar di klik Keluar dari aplikasi Keluar dari aplikasi Ya 15 Pengujian display informasi Tombol keraton Menampilkan informasi keraton surakarta Menampilkan informasi keraton surakarta Ya tanpa menggunakan klik augmented reality 16 Pengujian coba augmented reality Tombol augmented reality Marker yang diambil oleh camera smartphone terlacak oleh sistem Marker yang diambil oleh camera smartphone terlacak oleh sistem Ya klik 17 Pengujian Maps Tombol maps klik Menampilkan maps Menampilkan maps Ya 18 Pengujian kembali ke Tombol Escape Kembali ke menu utama Kembali ke menu utama Ya menu utama pada smartphone di klik

55 76 Dari data tabel pengujian diatas, maka dapat dikatakan seluruh script yang digunakan telah berjalan sesuai keinginan. Sehingga seluruh fungsional aplikasi berjalan baik, dan tidak ditemukannya bug pada aplikasi ini Pengujian Pada Device Untuk pengujian pada device dimaksudkan agar mengetahui performa dan kebutuhan saat aplikasi tersebut diinstal pada beberapa device yang berbeda sehingga akan didapatkan informasi mengenai performa dan game tersebut secara akurat. Pengujian ini dilakukan pada tiga macam gadget dengan spesifikasi yang berbeda yaitu smatphone Samsung GT S6310 Galaxy Young New, Smartphone Sony Xperia M, dan Tablet Samsung Galaxy TAB III 8 inchi SM-T31. Tabel 4.3 Pengujian Pada Device No Jenis Spesifikasi Jenis Test Keterangan Device Device 1 Samsung Android OS, Scene Seluruh scene dapat berjalan lancar GT S6310 v4.1.2 (Jelly Young New Bean) Qualcomm MSM7227A Snapdragon, 1GHz Cortex- A5, Adreno 200 Fungsi swipe objek Fungsi swipe dapat berjalan baik 320 x 480 pixels, 3.27 inches Button Seluruh tombol fungsi berfungsi dengan baik 768 MB RAM Objek informasi Semua objek informasi text dan audio dapat di tampilkan dengan baik Objek 3 Semua objek 3 dimensi dapat di

56 77 dimensi sajikan dengan baik Grafis Grafis di tampilkan dengan baik Maps Fungsi maps dapat di pakai dengan baik 2 Sony Android OS, Scene Seluruh scene dapat berjalan lancar Xperia M v4.2.2 (Jelly C1905 Bean) Qualcomm Snapdragon S4 Plus MSM8227, Dual-core 1 GHz Krait, Adreno 305 Fungsi swipe objek Fungsi swipe dapat berjalan baik 480 x 854 pixels, 4.0 inches Button Seluruh tombol fungsi berfungsi dengan baik 1 GB RAM Objek informasi Objek 3 dimensi Grafis Semua objek informasi text dan audio dapat di tampilkan dengan baik Semua objek 3 dimensi dapat di sajikan dengan baik Grafis di tampilkan dengan baik Maps Fungsi maps dapat di pakai dengan baik 3 Tablet Android OS, Scene Seluruh scene dapat berjalan lancar Samsung v4.2.2 (Jelly Galaxy Bean)

57 78 TAB III 8 Exynos 4212, Fungsi Fungsi swipe dapat berjalan baik inchi SM- Dual-core 1.5 swipe T311 GHz, Mali-400 objek 800 x 1280 pixels, 8.0 inches Button Seluruh tombol fungsi berfungsi dengan baik 1.5GB RAM Objek informasi Objek 3 dimensi Grafis Maps Semua objek informasi text dan audio dapat di tampilkan dengan baik Semua objek 3 dimensi dapat di sajikan dengan baik Grafis di tampilkan dengan baik Fungsi maps dapat di pakai dengan baik 4 Galaxy Gio Android OS, v2.2 (Froyo) Aplikasi tidak dapat di install 800MHz processor 320 x 480 pixels, 3.2 inches 276MB RAM Dari data hasil pengujian pada beberapa device didapatkan hasil untuk spesifikasi minimum aplikasi dapat dijalankan pada RAM diatas 512MB, CPU single core 1Ghz, resolusi 320 x 480 px bahkan untuk resolusi 800 x 1280 px gambar maupun tampilan tetap memenuhi layar.

58 Pengujian Pada User Pengujian berdasar ketertarikan user dilakukan dengan menggunakan google form. Dimana terlebih dahulu penulis membuat sebuah google form mengenai kuesioner aplikasi augmented reality keraton surakarta. Kuisioner terdiri dari dua aspek yaitu aspek ide, dan aspek komunikatif visual dan kinerja aplikasi saat digunakan. Kemudian penulis memberikan sebuah link untuk kuisioner tersebut, yang nantinya bisa diakses oleh responder. Penulis mendapatkan responder sejumlah 50 responder. Berikut tampilan hasil kuisioner berupa grafik dari tiap aspek yang telah dirangkum oleh penulis. a) Gambar grafik hasil kuisioner pada aspek ide Gambar 4.81 Grafik Hasil Kuisioner Aspek Ide Dari gambar grafik hasil kuisioner pada aspek ide tersebut, dapat dihasilkan data dari 50 responder sebanyak 24% sangat setuju, 74% setuju, 0% tidak setuju, dan 2% sangat tidak setuju. Maka dapat disimpulkan 98% responder setuju dengan ide augmented reality untuk dunia pariwisata khusunya pariwisata di keraton surakarta.

59 80 b) Gambar grafik hasil kuisioner pada aspek ide Gambar 4.82 Aspek komunikatif visual dan kinerja aplikasi Dari gambar grafik hasil kuisioner pada aspek komunikatif visual dan kinerja aplikasi tersebut, dapat dihasilkan data dari 50 responder sebanyak 25% sangat setuju, 71% setuju, 4% tidak setuju, dan 0% sangat tidak setuju. Maka dapat disimpulkan 96% responder setuju bahwa aplikasi ini mudah digunakan dan serta menyajikan informasi bangunan Keraton Surakarta secara interaktif, lengkap, dan minim error. Maps pada aplikasi ini juga bekerja dengan baik.