BAB IV IMPLEMENTASI DAN EVALUASI 4.1 Produksi Produksi aplikasi ini meliputi pembuatan antarmuka (interface), pembuatan desain grafis, dan marker katalog. 4.1.1 Pembuatan Antarmuka (Interface) Pembuatan Antarmuka atau interface aplikasi ini menggunakan Photoshop CS5 dan Unity. Photoshop digunakan untuk membuat desain rancangan untuk tiap halaman sedangkan Unity digunakan untuk membuat desain interaktif seperti button sebagai navigasi menuju halaman yang lainnya. Interface digambarkan pada gambar 4.1 4.5. Gambar 4. 1 Pembuatan Halaman Home pada Photoshop 20
21 Gambar 4. 2 Pembuatan Halaman Home pada Unity Gambar 4. 3 Pembuatan Halaman Help pada Unity 4.1.2 Pembuatan Desain Grafis (Graphic Design) Pembuatan desain grafis merupakan pembuatan desain modeling 3D dan memberikan animasi terhadap objek menggunakan Autodesk 3ds Max 2013. Gambar 4.4-4.7.
22 Gambar 4. 4 Desain Bangun Ruang Balok Gambar 4. 5 Desain Bangun Ruang Kubus
23 Gambar 4. 6 Desain Bangun Ruang Limas Segitiga Gambar 4. 7 Desain Bangun Ruang Limas Segiempat 4.1.3 Pembuatan Marker Dalam pembuatan Aplikasi Augmented Reality diperlukan marker untuk menampilkan objek yang ingin divisualisasikan. Marker yang digunakan adalah markerless. Untuk desain marker penulis membuat dengan menggunakan corel draw dengan desain jaring-jaring bangun ruang. Adapun marker yang diperlukaan adalah sebagai berikut :
24 Gambar 4. 8 Marker Untuk Menampikan Objek 3D Kubus Gambar 4. 9 Marker Untuk Manampilkan Objek 3D Balok
25 Gambar 4. 10 Marker Untuk Menampilkan Objek 3D Limas Segitiga Gambar 4. 11 Marker Untuk Menampilkan Objek 3D Prisma Segilima
26 Gambar 4. 12 Marker Untuk Menampilkan Objek 3D Limas Segiempat Gambar 4. 13 Marker Untuk Menampilkan Objek 3D Prisma Segienam
27 Gambar 4. 14 Marker Untuk Menampilkan Objek 3D Tabung Gambar 4. 15 Marker Untuk Menampilkan Objek 3D Kerucut
28 Gambar 4. 16 Marker Untuk Menampilkan Objek 3D Prisma Segitiga Langkah yang dilakukan selanjutnya setelah membuat desain marker, yaitu membuat database marker di vuforia untuk mengetahui kepekaan dari gambar terhadap kamera AR. Apabila marker yang telah dibuat dimasukkan pada database maka akan muncul rating dari gambar tersebut. Gambar 4. 17 Database Marker Yang Ingin Digunakan Dalam Unity
29 4.1.4 Pembuatan Katalog Katalog dibuat menggunakan CorelDraw. Marker dikemas dalam katalog untuk memudahkan user menjalankan aplikasi. Seperti berikut pembuatan Katalog : Gambar 4. 18 Katalog Halaman Home Gambar 4. 19 Katalog Halaman Kubus dan Balok
30 Gambar 4. 20 Katalog Halaman Menu Kubus dan Balok Gambar 4. 21 Katalog Tabung dan Kerucut
31 Gambar 4. 22 Katalog Halaman Marker Tabung dan Kerucut Gambar 4. 23 Katalog Halaman Prisma dan Limas
32 Gambar 4. 24 Katalog Halaman Marker Bangun Ruang Prisma
33 Gambar 4. 25 Katalog Halaman Marker Bangun Ruang Limas 4.1.5 Authoring dan Pemrograman Aplikasi Augmented Reality menggunakan Autodesk 3ds Max dan Unity 5.0. Langkah-langkahnya seperti berikut : a. Modelling untuk Aplikasi ini dibuat menggunakan Autodesk 3ds Max dengan animasi yang telah dibuat sebelumnya. Kemudian di export ke dalam Unity. b. Modelling akan di export dalam format FBX karena telah membawa animasi. c. Selanjutnya dalam Unity, penulis telah menyiapkan beberapa packages yang harus digunakan, diantaranya adalah vuforiaunity-mobile-android-ios-4-2-3 dan packages database yang menjadi target images. Dengan cara Klik Assets pilih custom packages.
34 Gambar 4. 26 Untuk import packages yang ingin digunakan d. Langkah selanjutnya adalah membuat Augmented Reality. Tahap pertama sudah dijelaskan diatas yaitu, import packages yang akan digunakan untuk membuat Augmented Reality. Selanjutnya adalah menghapus main camera yang terdapat di Unity karena kita menggunakan kamera Augmented Reality yang telah disediakan di dalam packages. Bila menggunakan kamera Augmented Reality harus menginputkan lisensi key. Gambar 4. 27 Tahap pertama membuat Augmented Reality adalah menggunakan kamera Augmented Reality
35 e. Kemudian drag and drop target images yang telah disediakan di packages tersebut. Gambar 4. 28 Drag and Drop target image yang diperlukan f. Membuat folder objek untuk import objek yang telah dibuat di dalam Autodesk 3ds Max, dengan cara drag and drop objek yang telah dibuat. Gambar 4. 29 Gambar 4. 30 Membuat Folder dan melakukan drag and drop objek yang ingin digunakan g. Drag and drop objek ke dalam hierarchy dan menjadi sub tab dari target image yang telah dimasukkan sebelumnya.
36 Gambar 4. 31 Drag and drop objek ke dalam hierachy h. Selanjutnya adalah mengatur ulang animasi yang telah dibuat sebelumnya di dalam Autodesk 3ds Max. Langkah untuk mengubahnya, yaitu duplicate animasi di dalam objek tersebut dan beri nama yang sesuai dengan objek yang ada. Kemudian Klik pada duplicate yang sudah dibuat, dan pada bagian component kita dapat checklist loop. Gambar 4. 32 Duplicate animasi dan checklist pada loop yang ada dalam component
37 i. Klik Objek pada Tab Hierarchy dana akan muncul tab component yang terdapat di bagian sebelah kiri. Remove animator yang ada kemudian drag and drop untuk ganti dengan animasi yang telah diubah di dalam Unity. Gambar 4. 33 Remove component animasi yang sebelumnya Gambar 4. 34 Drag and drop animasi yang telah diubah didalam Unity j. Selanjutnya adalah membuat interface dengan menggunakan Unity. Langkah pertama, yaitu desain yang telah dibuat di dalam photoshop. Sebelumnya ubah texture type gambar yang akan menjadi background interface.
38 Gambar 4. 35 Ubah Texture Type pada gambar yang akan menjadi interface k. Selanjutnya memasukkan gambar yang akan menjadi background interface. l. Langkah selanjutnya membuat button dengan backgroud button yang telah dibuat di dalam photoshop. Kemudian mengaktifkan button dengan script. Langkahnya adalah sebagai berikut : Gambar 4. 36 Membuat button dengan background yang telah dibuat dengan Photoshop
39 m. Script untuk melakukan tracking marker untuk setiap objeknya. Gambar 4. 37 Script untuk tracking marker sesuai dengan objek Gambar 4. 38 Script untuk menampilkan button rumus
40 Gambar 4. 39 Script untuk sound atau dubbing yang dapat di mute 4.2 Implementasi Implementasi Navigasi Implementasi aplikasi ini meliputi implementasi Antarmuka, 4.2.1 Implementasi Antarmuka Implementasi aplikasi Augmented Reality Pembelajaran Rumus Bangun Ruang adalah sebagai berikut : a. Implementasi halaman home untuk masuk ke dalam halaman menu. Gambar 4. 40 Implementasi Halaman Home
41 b. Kemudian implementasi dalam Augmented Reality Gambar 4. 41 Implementasi dalam Augmented Realty pada Balok 4.2.2 Implementasi Navigasi Navigasi dalam aplikasi ini meliputi navigasi button untuk perpindahan ke halaman lain, pada halaman menu terdapat navigasi button kategori balok dan kubus, tabung dan kerucut, prisma dan limas. Jika salah satu button kategori dipilih akan menampilkan halaman bangun yang ingin dipilih kemudian akan masuk ke halaman 3D. Pada halaman 3D akan ada navigasi button rumus dan back. Button rumus digunakan untuk memunculkan rumus sedangkan button back digunakan untuk kembali ke halaman sebelumnya. 4.3 Pengujian Pengujian aplikasi ini dilakukan dalam beberapa tahapan, yaitu alpha test dan beta test : a. Pengujian Alpha Test Tabel 4. 1 Pengujian alpha test dilakukan dengan percobaan No Objek Jarak Marker ke Objek 10 15 20 25 30 35 40 45 1 Kubus V V V V V - - - 2 Balok V V V V V - - -
42 3 Tabung V V V V V - - - 4 Kerucut V V V V V - - - 5 Prisma V V V V V - - - segi 3 6 Prisma V V V V V - - - segi 5 7 Prisma V V V V V - - - segi 6 8 Limas V V V V V - - - segi 3 9 Limas segi 4 V V V V V - - - b. Pengujian Beta Test Pengujian beta test didapatkan dari respon pengguna atau user terhadap aplikasi. Pengujian dilakukan dengan penyebaran kuisioner kepada beberapa responden. Hasil dari pengujian beta test terdapat pada lampiran.