BAB IV IMPLEMENTASI DAN UJI COBA

Transkripsi

1 BAB IV IMPLEMENTASI DAN UJI COBA 4.1 IMPLEMENTASI Pada bab ini membahas tentang implementasi dari konsep yang dibuat, serta melakukan demo hasil aplikasi yang dibuat, apakah sudah sesuai dengan yang diharapkan. Sebelum di demo kan, terlebih dahulu dipaparkan spesifikasi sistem perangkat lunak yang dibutuhkan untuk mendukung program aplikasi pengenalan hewan untuk anak-anak berbasis augmented reality pada android Perangkat keras mobile device Untuk dapat menjalankan aplikasi pengenalan hewan untuk anak-anak berbasis augmented reality pada android ini, spesifikasi mobile device yang disarankan berdasarkan syarat minimum untuk menjalankan Vuforia QCAR SDK dan Unity 3D engine adalah sebagai berikut : 1. ARMv7 processor (atau lebih). 2. Kamera belakang 5 Mega pixel (atau lebih) MB RAM 4. 1GB internal memory widescreen LCD touch screen Perangkat lunak mobile device Spesifikasi perangkat lunak yang disarankan untuk dapat dapat menjalankan aplikasi pengenalan hewan untuk anak-anak berbasis augmented reality pada android ini adalah : 1. Operasi sistem Android minimal 2.2 Froyo 39

2 Segmen pengguna Aplikasi ini dibangun untuk membantu anak-anak untuk belajar mengenal hewan, khususnya untuk anak-anak diusia 4-5 tahun. 4.2 TAHAP PEMBUATAN OBJEK HEWAN Pada tahap ini penulis membuat lima objek hewan yaitu singa, jerapah, badak, kanguru, dan gajah. Namun karena pembuatan hewan sama, penulis akan membuat salah satu objek 3D berupa hewan gajah. Pertama membuat objek Kubus, dengan cara masuk ke Edit Mode ( Tab ), dari tampak samping kanan ( Numpad 3 ), lalu modifikasi vertexnya menjadi seperti pada gambar 4.1, setelah itu dilakukan loop cut ( Ctrl + R ) untuk menambah segment kubus, dan extrude ( E ) untuk menambah bidang. Gambar 4.1 Modifikasi vertex kubus Setelah itu menambahkan 3 buah edge loop pada bagian tengah dengan melakukan loop cut ( Ctrl + R ) seperti pada gambar 4.2

3 41 gambar 4.3. Gambar 4.2 Menambahkan edge loop Selanjutnya membuang vertex pada bagian kanan seperti penjelasan pada Gambar 4.3 Buang vertex pada bagian kanan Setelah itu memberikan modifier mirror pada objek seperti penjelasan pada gambar 4.4

4 42 Gambar 4.4 Modifire mirror Gambar 4.5 Hasil mirror Dan hasilnya akan tampak seperti pada gambar 4.5. Selanjutnya memodifikasi bentuk terkahir, dengan menggunakan Edge Slide ( Ctrl + E ) untuk menggeser edge loop bagian atas dan bawah, geser ( G ) vertex bagian tengah sehingga lebih maju, lalu mengaktifkan Proportional Editing ( O ) untuk membuat soft selection.

5 43 Gambar 4.6 Modifikasi lanjutan ke-1 Gambar 4.7 Modifikasi lanjutan ke-2 Setelah itu menghapus dua buah face bagian bawah untuk membuat kaki seperti disajikan pada gambar 4.8

6 44 Gambar 4.8 Menghapus dua face Selanjutnya mengextrude vertex pada bagian yang telah di hapus tadi. lalu memberikan 2 buah edge loop pada masing2 kaki seperti disajikan pada gambar 4.9 Gambar 4.9 Edge loop untuk kaki

7 45 Gambar 4.10 Modifikasi kaki Lalu melakukan modifikasi pada kaki menjadi seperti pada gambar 4.10 dan mengekstrude bagian ekor menjadi seperti pada gambar Gambar 4.11 Membuat ekor

8 46 Gambar 4.12 : Modifikasi bentuk ekor ke-1 Lalu memodifikasi bentuk ekornya menjadi seperti pada gambar Setelah itu menghapus face pada bagian ini, lalu menggeser ekornya ke tengah objek, dan mengaktifkan Clipping pada modifer Mirror yang telah diberikan tadi. Gambar 4.13 Modifikasi bentuk ekor ke-2

9 47 Gambar 4.14 Modifikasi bentuk ekor ke-3 Selanjutnya dengan meng-extrude bagian kepala, juga pada bagian belalai, bagian telinga, lalu memodifikasi bentuknya langkah pada gambar Gambar 4.15 Modifikasi bentuk belalai ke-1

10 48 Gambar 4.16 Modifikasi bentuk belalai ke-2 Gambar 4.17 Modifikasi bentuk telinga gajah ke-1 Gambar 4.18 Modifikasi telinga gajah ke-2

11 49 Gambar 4.19 Modifikasi telinga gajah ke-3 Lalu memberikan Modifier Subdivision Surface pada objek, dan memberikan shading smooth pada object tools yang ada di samping kanan viewport. Gambar 4.20 Smooth shading Selanjutnya memodifikasi objek sesuai dengan sense, seperti proportional antara bagian-bagian yang terlihat terlalu flat bisa dibuat lebih melengkung seperti pada gambar 4.21

12 50 Gambar 4.21 Modifikasi lengkungan Setelah itu membagi Window dan mengganti menjadi panel UV Image Editor, dengan cara masuk ke Edit Mode, Unwrap Objek dengan Project from View ( U - Project From View ) dari Edit Mode. Open image gajahnya dari tekstur yang telah disiapkan seperti pada gambar 4.22 dan gambar Gambar 4.22 Mengganti texture dengan UV Image Editor

13 51 Gambar 4.23 Proses Texturing Lalu menyekalakan di X dengan angka -1 untuk mem Flip Vertex, lalu atur posisi vertex sedemikian rupa sehingga menjadi seperti tampilan pada gambar Setelah itu memberikan material dasar dengan parameter seperti penjelasan pada gambar 4.25 dan gambar 4.26 Gambar 4.24 Menemelkan ke UV Image editor

14 52 Gambar 4.25 Memberikan material dasar Gambar 4.26 Pengaturan material dasar

15 53 Lalu memberikan tekstur yang telah disiapkan sebelumnya, ada 3 tipe tekstur, yang pertama untuk shading, yang kedua untuk color, yang ketiga untuk bump. Setelah itu memastikan semua mappingnya adalah coordinate UV. Penjelasan lihat pada gambar 4.27, gambar 4.28, dan gambar Gambar 4.27 Memberikan tekstur Gambar 4.28 Pengaturan pemberian tekstur

16 54 Gambar 4.29 Penganturan pemberian tekstur selanjutnya Setelah itu memberikan Sun Lamp, mengatur posisi kamera dan tekan Render ( F12 ), hasilnya akan seperti ditampilkan pada gambar 4.30 Gambar 4.30 Hasil render gajah

17 55 Setelah model hewan telah jadi, lalu save model hewan dengan cara menekan (Ctrl + S) atau pilih toolbar File -> Save, lalu pilih destinasi file yang akan disimpan. Setelah itu file akan tersimpan dengan format.blend. 4.3 TAHAP PEMBUATAN MARKER Pada tahap pembuatan marker penulis membuat 5 buah marker, yaitu berupa berupa marker singa, marker gajah, marker badak, marker kanguru, marker jerapah. Namun karena tahap pembuatan marker sama, maka penulis akan membuat marker singa. Pertama membuka aplikasi paint, dengan menggunakan menu start -> all programs -> accessories -> paint. Setelah aplikasi terbuka, klik resize lalu pilih ukuran dalam bentuk pixel, uncheck Maintain aspect ratio, dan mengisi pada angka 247 pada kolom horizontal dan vertical lalu menekan OK. Gambar 4.31 Pengaturan size kanvas Lalu membuat garis lurus dengan menggunakan line shapes, lalu membuat pola garis-garis lurus secara random dan memberikan warna pada setiap daerah kosong seperti gambar 4.32, lalu save.

18 56 Gambar 4.32 Hasil bentuk random line shapes Setelah jadi seperti pada gambar 4.32, lalu membuka aplikasi adobe photoshop dan drag gambar yang sudah dibuat seperti contoh di atas ke photoshop, untuk membedakan dan memberi informasi pada gambar, lalu memasukkan foto hewan yang diinginkan, dalam hal ini penulis memasukkan gambar singa ke dalam photoshop, lalu meletakkan di tengah-tengah gambar, lalu memberikan informasi nama hewan di bawah foto singa tersebut, hasilnya akan seperti gambar Gambar 4.33 Hasil final marker singa Lalu masuk ke browser lalu login ke setelah itu masuk ke tab target manager, lalu akan muncul tampilan seperti pada gambar 4.34.

19 57 Gambar 4.34 Tampilan target manager Dan menekan create database untuk membuat database baru, setelah itu akan muncul Form seperti pada gambar Gambar 4.35 Form create database Setelah itu memberi nama di kolom database name lalu tekan create. Setelah itu masuk ke dalam database yang baru dibuat sebelumnya, lalu klik add target untuk membuat target baru/marker baru, maka akan muncul tampilan seperti pada gambar 4.36.

20 58 Gambar 4.36 Form add new target Pada kolom width masukkan ukuran marker yang ingin dibuat, dalam hal ini penulis memasukkan angka 246, yaitu ukuran standard dari vuforia itu sendir, pada Target image file klik choose file untuk memasukkan gambar marker yang sudah dibuat sebelumnya lalu tekan add. Setelah marker tersebut di upload, klik pada gambar marker yang sudah dibuat tadi untuk mengetahui hasil marker apakah layak atau tidak layak menjadi marker, minimum rating harus bintang tiga keatas, contoh seperti pada gambar 4.37.

21 59 Gambar 4.37 Hasil cek marker 1 Gambar 4.38 Hasil cek marker 2 Jika hasil pengecekan marker sudah sesuai, lalu kembali ke windows database marker yang sudah dibuat tadi, ceklis marker yang dinginkan untuk dijadikan marker pada pembuatan aplikasi, setelah itu klik download selected target, setelah itu maka akan muncul window seperti gambar pada gambar 4.39.

22 60 Gambar 4.39 Window marker download Klik pada bagian Unity editor, lalu mengisikan nama package yang diinginkan, setelah itu tekan tombol create, setelah itu unity package yang berisi marker akan terdownload. 4.4 TAHAP PEMBUATAN AUGMENTED REALITY PADA ANDROID LoadLlibrary Vuforia pada Unity Untuk mengembangkan aplikasi Augmented reality pada Unity harus melakukan load library Vuforia. Library Vuforia untuk android dapat didownload dari situs resmi vuforia yaitu Setelah itu menjalankan installer, pilih lokasi untuk instalasi paket Membuat project pada Unity3D Membuat aplikasi Augmented reality hewan

23 61 Pertama membuka aplikasi Unity melalui menu Start -> All programs - >Unity -> Unity.exe. Setelah itu buat project baru dengan cara memilih file -> new project setelah itu akan muncul tampilan window seperti pada gambar Gambar 4.40 Tampilan new project pada Unity3D Pada kolom project location klik browse untuk memilih di mana tujuan aplikasi akan tersimpan, setelah itu ceklis pada vuforia-imagetargets-android untiypackage. Setelah itu pada hierarchi view hapus main camera dengan cara menekan tombol delete pada keyboard. Lalu pada project view buka folder Qualcom Augmented reality -> prefabs drag AR Camera package ke dalam hierarchi view, klik pada AR Camera, lalu pada inspector view rubah pada kolom rotation X menjadi 90 seperti pada gambar Lalu pada project view buat folder baru dengan nama scene yaitu dengan cara klik kanan pilih create -> folder seperti pada gambar 4.42 dan drag

24 62 file package yang berisi marker yang sudah di download ke dalam folder scene pada project view, seperti pada gambar Gambar 4.41 Tampilan pengaturan AR Camera package Gambar 4.42 Membuat folder pada project

25 63 Gambar 4.43 Memasukkan file marker package Selanjutnya mengklik pada file package yang berisi marker tadi, lalu klik import seperti pada gambar Gambar 4.44 Import file marker

26 64 Setelah itu kembali ke hierarchi view dan klik pada AR Camera, pada inspector view aktifkan marker dengan cara memilih marker yang diaktifkan pada Active Data Set, setelah itu ceklist pada Load data set - nama_marker_yang_dipilih seperti pada gambar Gambar 4.45 Mengaktifkan marker data set pada AR Camera Kembali ke project view drag image target package ke hierarchi view yang terletak di dalam folder Qualcomm Augmented reality -> prefabs, Setelah itu pada hierarchi view klik pada image target, pada inspector view klik Data Set dan pilih marker yang ingin diaktifkan, klik juga pada image target lalu pilih image target yang ingin diaktifkan seperti pada gambar 4.46.

27 65 Gambar 4.46 Mengaktifkan data set dan image target pada image target package Pada gambar 4.46 dijelaskan bahwa untuk melakukan load marker yang telah diregristasi adalah dengan memilih data set sesuai dengan project yang telah dituliskan pada form registrasi marker dan memilih image target yang diinginkan. Lalu mengimpor file blender yang berisi model hewan yang diinginkan ke dalam folder models yang berada di dalam project view yaitu dengan cara drag file blender masuk ke dalam folder Models seperti pada gambar 4.47.

28 66 Gambar 4.47 Import file blender ke dalam project Selanjutnya mengimpor file texture yang digunakan untuk texturing model hewan blender ke dalam folder Texture pada project view seperti pada gambar Gambar 4.48 Import file texture blender ke dalam project Setelah itu memasukkan file texture tersebut ke dalam material model hewan yaitu dengan memasukkan satu persatu file texture ke dalam materialmaterial yang berada di folder Models -> Materials pada project view seperti pada gambar 4.49.

29 67 Gambar 4.49 Memasukan material model hewan Selanjutnya memasukan file blender yang berisi model 3D hewan ke dalam hierarchi view dan menjadikan child dari image target package dengan cara drag file blender tersebut ke dalam image target package pada hierarchi view seperti pada gambar 4.50.

30 68 Gambar 4.50 Memasukan file blender ke dalam hierarchi view Lali memberikan efek cahaya pada model dengan cara klik game object - > create other -> Directional light dan atur cahaya sesuai yang diinginkan melalui inspector view. Lalu membuat folder baru bernama sound pada project view, masukkan file suara yang berisi suara hewan yang diinginkan ke dalam folder sound seperti pada gambar Gambar 4.51 Memasukkan file suara ke dalam project view.

31 69 Setelah itu drag file suara yang sudah dimasukkan tadi ke dalam image target package pada hierarchi view, lalu pada inspector view, ceklis pada loop dan rubah pan level menjadi nol seperti pada gambar Gambar 4.52 Memasukan file suara ke dalam image target package Selanjutnya membuka file C Sharp script yang bernama DefaultTrackableEventHandler yang berada di dalam folder Script pada project view, lalu pada inspector view tekan open, maka akan keluar jendela seperti pada gambar 4.53.

32 70 Gambar 4.53 Membuka file DefaultTrackableEventHandler.cs Setelah terbuka, memasukkan coding audio.play(); pada class private void OnTrackingFound() dan memasukkan coding audio.pause(); pada class private void OnTrackingLost() seperti pada gambar 4.53 lalu save. Selanjutnya buka file -> build settings maka akan muncul tampilan window seperti pada gambar Pada bagian platform pilih android selanjutnya pilih player settings maka akan muncul inspector view seperti pada gambar 4.55.

33 71 Gambar 4.54 Jendela build settings Gambar 4.55 Inspector view pada build settings

34 72 Pada kolom company name dan product name bisa diisi sesuai keinginan, dan default icon untuk memberikan gambar pada icon aplikasi. Ubah minimum API level menjadi Android 2.2 Froyo (API level 8) dan ubah device filter menjadi ARMv7 only setelah itu tekan build & run untuk menjalankan aplikasi pada device android. 4.5 PENGUJIAN APLIKASI Sebelum program didistribusikan dan digunakan oleh pengguna, maka dilakukan proses pengujian terlebih dahulu, agar aplikasi yang telah dibangun dapat berjalan dengan baik sebagaimana yang telah dirancang oleh penulis. Proses pengujian ini juga dapat diminimalisir kesalahan-kesalahan yang akan terjadi yang dapat menimbulkan ketidaknyamanan pengguna dalam menggunakan aplikasi pengenalan hewan untuk anak-anak ini. Pengujian aplikasi pengenalan hewan ini menggunakan metode black box Pengujian Black Box Pengujian dengan metode black box dilakukan dengan cara menjalankan aplikasi pada perangkat keras android Samsung Galaxy Tab Pengujian yang dilakukan dengan menekan fungsi-fungsi tombol dan melihat apakah fungsi tersebut dapat berjalan dengan benar. Berikut adalah skenario dan hasil pengujian pada aplikasi pengenalan hewan untuk anak-anak. Tabel 4.1 Tabel Skenario Pengujian Interaksi & Fungsionalitas Aplikasi dan Pengguna No Skenario Prosedur Pengujian Hasil yang diinginkan Hasil Pengujian 1 Pengujian Menekan icon Menampilkan Berhasil menampilkan splash aplikasi pada splash screen screen. menu utama

35 73 Tabel 4.1 Tabel Skenario Pengujian Interaksi & Fungsionalitas Aplikasi dan Pengguna (Lanjutan) No Skenario Prosedur Pengujian Hasil yang diinginkan Hasil Pengujian 2 Pengujian Setelah Menampilkan Berhasil menampilkan menampilkan halaman utama halaman utama splash screen 3 Pengujian tombol Menekan tombol Menuju halaman Berhasil mulai pada Mulai tutorial halaman utama 4 Pengujian tombol Menekan tombol Keluar dari aplikasi Berhasil keluar pada Keluar halaman utama 5 Pengujian Setelah menekan Menampilkan Berhasil menampilkan tombol Mulai halaman tutorial halaman Tutorial pada menu utama 6 Pengujian tombol Menekan tombol Menampilkan scene Berhasil OK OK Augmented reality 7 Pengujian Mengarahkan Menampilkan Berhasil pendeteksian kamera pada hewan Augmented marker marker reality berdasarkan marker 8 Pengujian tombol Menekan tombol Menyimpan gambar Berhasil kamera pada scene bergambar kamera ke dalam memory augmented reality device 9 Pengujian tombol Menekan tombol Keluar dari aplikasi Berhasil Keluar Keluar

36 74 Tabel 4.2 Uji coba marker berdasarkan jarak No Jarak Marker (cm) Keterangan 1 50 Terdeteksi 2 40 Terdeteksi 3 30 Terdeteksi 4 20 Tidak terdeteksi 5 10 Tidak terdeteksi Uji coba berdasarkan jarak dilakukan 10 kali percobaan. Pengujian dilakukan dengan cara mengarahkan marker pada kamera device setelah itu diukur dengan menggunakan penggaris. Uji coba berdasarkan jarak dimulai pada jarak 10 cm sampai dengan 50 cm. Dari hasil pengujian dapat disimpulkan jarak cm marker masih terdeteksi dengan baik dan dapat menampilkan objek hewan 3D. Tabel 4.3 Uji coba marker berdasarkan sudut kemiringan No Hal yang diuji Sudut Kemiringan (º) 1 Marker Terdeteksi Marker Tidak Terdeteksi > 87 Uji coba berdasarkan sudut kemiringan dilakukan 3 kali percobaan. Pengujian dilakukan dengan cara mengarahkan marker pada kamera device setelah itu diukur sudut kemiringannya dengan menggunakan busur. Uji coba berdasarkan sudut kemiringan dimulai pada sudut 0º sampai dengan 90º. Dari hasil pengujian dapat disimpulkan jarak 0º - 87º marker masih terdteksi dengan baik dan dapat menampilkan objek hewan 3D.