BAB IV IMPLEMENTASI DAN EVALUASI

Transkripsi

1 BAB IV IMPLEMENTASI DAN EVALUASI 4.1 Produksi Produksi aplikasi ini meliputi pembuatan antarmuka (interface), pembuatan desain grafis, dan marker katalog 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 Gambar 4. 1 Pembuatan Halaman Home pada Photoshop 20

2 21 Gambar 4. 2 Pembuatan Halaman Home pada Unity Gambar 4. 3 Pembuatan Halaman Help pada Unity Pembuatan Desain Grafis (Graphic Design) Pembuatan desain grafis merupakan pembuatan desain modeling 3D dan memberikan animasi terhadap objek menggunakan Autodesk 3ds Max Gambar

3 22 Gambar 4. 4 Desain Bangun Ruang Balok Gambar 4. 5 Desain Bangun Ruang Kubus

4 23 Gambar 4. 6 Desain Bangun Ruang Limas Segitiga Gambar 4. 7 Desain Bangun Ruang Limas Segiempat 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 :

5 24 Gambar 4. 8 Marker Untuk Menampikan Objek 3D Kubus Gambar 4. 9 Marker Untuk Manampilkan Objek 3D Balok

6 25 Gambar Marker Untuk Menampilkan Objek 3D Limas Segitiga Gambar Marker Untuk Menampilkan Objek 3D Prisma Segilima

7 26 Gambar Marker Untuk Menampilkan Objek 3D Limas Segiempat Gambar Marker Untuk Menampilkan Objek 3D Prisma Segienam

8 27 Gambar Marker Untuk Menampilkan Objek 3D Tabung Gambar Marker Untuk Menampilkan Objek 3D Kerucut

9 28 Gambar 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 Database Marker Yang Ingin Digunakan Dalam Unity

10 Pembuatan Katalog Katalog dibuat menggunakan CorelDraw. Marker dikemas dalam katalog untuk memudahkan user menjalankan aplikasi. Seperti berikut pembuatan Katalog : Gambar Katalog Halaman Home Gambar Katalog Halaman Kubus dan Balok

11 30 Gambar Katalog Halaman Menu Kubus dan Balok Gambar Katalog Tabung dan Kerucut

12 31 Gambar Katalog Halaman Marker Tabung dan Kerucut Gambar Katalog Halaman Prisma dan Limas

13 32 Gambar Katalog Halaman Marker Bangun Ruang Prisma

14 33 Gambar Katalog Halaman Marker Bangun Ruang Limas 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 dan packages database yang menjadi target images. Dengan cara Klik Assets pilih custom packages.

15 34 Gambar 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 Tahap pertama membuat Augmented Reality adalah menggunakan kamera Augmented Reality

16 35 e. Kemudian drag and drop target images yang telah disediakan di packages tersebut. Gambar 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 Gambar 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.

17 36 Gambar 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 Duplicate animasi dan checklist pada loop yang ada dalam component

18 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 Remove component animasi yang sebelumnya Gambar 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.

19 38 Gambar 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 Membuat button dengan background yang telah dibuat dengan Photoshop

20 39 m. Script untuk melakukan tracking marker untuk setiap objeknya. Gambar Script untuk tracking marker sesuai dengan objek Gambar Script untuk menampilkan button rumus

21 40 Gambar Script untuk sound atau dubbing yang dapat di mute 4.2 Implementasi Implementasi Navigasi Implementasi aplikasi ini meliputi implementasi Antarmuka, Implementasi Antarmuka Implementasi aplikasi Augmented Reality Pembelajaran Rumus Bangun Ruang adalah sebagai berikut : a. Implementasi halaman home untuk masuk ke dalam halaman menu. Gambar Implementasi Halaman Home

22 41 b. Kemudian implementasi dalam Augmented Reality Gambar Implementasi dalam Augmented Realty pada Balok 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 Kubus V V V V V Balok V V V V V - - -

23 42 3 Tabung V V V V V Kerucut V V V V V 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.