perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
20 BAB IVIMPLEMENTASI 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
commit to user
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
22
Gambar 4. 4 Desain Bangun Ruang Balok
Gambar 4. 5 Desain Bangun Ruang Kubus
commit to user
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 :
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
24
Gambar 4. 8 Marker Untuk Menampikan Objek 3D Kubus
Gambar 4. 9 Marker Untuk Manampilkan Objek 3D Balok
commit to user
Gambar 4. 10 Marker Untuk Menampilkan Objek 3D Limas Segitiga
Gambar 4. 11 Marker Untuk Menampilkan Objek 3D Prisma Segilima
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
26
Gambar 4. 12 Marker Untuk Menampilkan Objek 3D Limas Segiempat
Gambar 4. 13 Marker Untuk Menampilkan Objek 3D Prisma Segienam
commit to user
Gambar 4. 14 Marker Untuk Menampilkan Objek 3D Tabung
Gambar 4. 15 Marker Untuk Menampilkan Objek 3D Kerucut
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
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
commit to user
4.1.4 Pembuatan KatalogKatalog 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
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
30
Gambar 4. 20 Katalog Halaman Menu Kubus dan Balok
Gambar 4. 21 Katalog Tabung dan Kerucut
commit to user
Gambar 4. 22 Katalog Halaman Marker Tabung dan Kerucut
Gambar 4. 23 Katalog Halaman Prisma dan Limas
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
32
Gambar 4. 24 Katalog Halaman Marker Bangun Ruang Prisma
commit to user
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 vuforia- unity-mobile-android-ios-4-2-3 dan packages database yang menjadi target images. Dengan cara Klik Assets pilih custom packages.
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
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
commit to user
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
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
commit to user
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
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
commit to user
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
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
40
Gambar 4. 39 Script untuk sound atau dubbing yang dapat di mute
4.2 Implementasi
Implementasi aplikasi ini meliputi implementasi Antarmuka, Implementasi Navigasi
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
commit to user
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 - - -
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
42
3 Tabung V V V V V - - -
4 Kerucut V V V V V - - -
5 Prisma segi 3
V V V V V - - -
6 Prisma segi 5
V V V V V - - -
7 Prisma segi 6
V V V V V - - -
8 Limas
segi 3
V V V V V - - -
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.
