BAB IV IMPLEMENTASI DAN UJI COBA

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.

4.1.1 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). 3. 512 MB RAM 4. 1GB internal memory 5. 7.01” widescreen LCD touch screen 4.1.2 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 http://digilib.mercubuana.ac.id/

40

4.1.3 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

http://digilib.mercubuana.ac.id/

41

Gambar 4.2 Menambahkan edge loop Selanjutnya membuang vertex pada bagian kanan seperti penjelasan pada gambar 4.3.

Gambar 4.3 Buang vertex pada bagian kanan Setelah itu memberikan modifier mirror pada objek seperti penjelasan pada gambar 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.


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


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


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 4.11.

Gambar 4.11 Membuat ekor


46

Gambar 4.12 : Modifikasi bentuk ekor ke-1 Lalu memodifikasi bentuk ekornya menjadi seperti pada gambar 4.12. 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


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 4.14.

Gambar 4.15 Modifikasi bentuk belalai ke-1


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


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


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 4.23.

Gambar 4.22 Mengganti texture dengan UV Image Editor


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 4.24. 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


52

Gambar 4.25 Memberikan material dasar

Gambar 4.26 Pengaturan material dasar


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 4.29.

Gambar 4.27 Memberikan tekstur

Gambar 4.28 Pengaturan pemberian tekstur


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


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.


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 4.33.

Gambar 4.33 Hasil final marker singa Lalu masuk ke browser lalu login ke https://developer.vuforia.com, setelah itu masuk ke tab target manager, lalu akan muncul tampilan seperti pada gambar 4.34.


57

Gambar 4.34 Tampilan target manager Dan menekan create database untuk membuat database baru, setelah itu akan muncul Form seperti pada gambar 4.35.

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.


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.


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.


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

4.4.1 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

https://developer.vuforia.com/resources/sdk/unity.

vuforia Setelah

installer, pilih lokasi untuk instalasi paket. 4.4.2 Membuat project pada Unity3D 4.4.2.1 Membuat aplikasi Augmented reality hewan


itu

yaitu menjalankan

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 4.40.

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 1-510.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 4.41. 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


62

file package yang berisi marker yang sudah di download ke dalam folder “scene” pada project view, seperti pada gambar 4.43.

Gambar 4.41 Tampilan pengaturan AR Camera package

Gambar 4.42 Membuat folder pada project


63

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

Gambar 4.44 Import file marker


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 4.45.

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.


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.


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 4.48.

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.


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.


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 4.51.

Gambar 4.51 Memasukkan file suara ke dalam project view.


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 4.52.

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.


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 4.54. Pada bagian platform pilih android selanjutnya pilih player settings maka akan muncul inspector view seperti pada gambar 4.55.


71

Gambar 4.54 Jendela build settings

Gambar 4.55 Inspector view pada build settings


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. 4.5.1 Pengujian Black Box Pengujian dengan metode black box dilakukan dengan cara menjalankan aplikasi pada perangkat keras android Samsung Galaxy Tab 10.1. 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

1

Skenario

Pengujian

Prosedur

Hasil yang

Hasil

Pengujian

diinginkan

Pengujian

Menekan

menampilkan splash aplikasi screen.

icon Menampilkan pada splash screen

menu utama


Berhasil

73

Tabel 4.1 Tabel Skenario Pengujian Interaksi & Fungsionalitas Aplikasi dan Pengguna (Lanjutan) No

2

3

Skenario

Prosedur

Hasil yang

Hasil

Pengujian

diinginkan

Pengujian

Pengujian

Setelah

Menampilkan

menampilkan

menampilkan

halaman utama

halaman utama

splash screen

Pengujian

tombol Menekan

tombol Menuju

pada “Mulai”

“mulai”

Berhasil

halaman Berhasil

“tutorial”

halaman utama 4

Pengujian

tombol Menekan

tombol Keluar dari aplikasi

Berhasil

pada “Keluar”

“keluar”

halaman utama 5

6

7

Pengujian

Setelah

menampilkan

tombol

halaman Tutorial

pada menu utama

Pengujian

tombol Menekan

menekan Menampilkan

Berhasil

“Mulai” halaman tutorial

tombol Menampilkan scene Berhasil

“OK”

“OK”

Augmented reality

Pengujian

Mengarahkan

Menampilkan

pendeteksian

kamera pada

hewan Augmented

marker

marker

reality berdasarkan

Berhasil

marker 8

9

Pengujian

tombol Menekan

tombol Menyimpan gambar Berhasil

kamera pada scene bergambar kamera

ke dalam memory

augmented reality

device

Pengujian tombol

Menekan

“Keluar”

“Keluar”

tombol Keluar dari aplikasi


Berhasil

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 30 – 50 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

0 – 87

2

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.


BAB IV IMPLEMENTASI DAN UJI COBA

Recommend Documents