BAB IV IMPLEMENTASI DAN ANALISA

(1)

BAB IV

IMPLEMENTASI DAN ANALISA

4.1 Produksi

Proses produksi Aplikasi Media Pembelajaran Sistem Tata Surya menggunakan Augmeted Reality ini tersusun atas beberapa tahap dimulai dengan pembuatan antar muka

4.1.1 Pembuatan Antarmuka (Interface Design)

Pembuatan Aplikasi Media Pembelajaran Sistem Tata Surya

menggunakan Augmented Reality ini terdiri atas beberapa interface sekaligus.

4.1.1.1 Pembuatan Desain Background Menu Utama

Desain background menu utama menggunakan background dengan gambar matahari dan beberapa planet yang mengelilinginya. Tampilan ini dipilih untuk mewakili keseluruhan dari isi aplikasi.

(2)

4.1.1.2 Pembuatan Desain Tutorial

Pembutan desain tutorial menggunakan background yang sama dengan desain background utama. Perbedaan terdapat pada penambahan objek rectangle dengan round corner 20 agar sudut dari objek rectangle tersebut tidak terlalu tajam. Font yang dipilih adalah arial karena tampilannya yang simple tetapi mudah dibaca.

Gambar 4.2 Desain Tutorial 4.1.1.3 Pembuatan Desain Developer

Pembutan desain developer menggunakan background yang sama dengan desain background utama. Perbedaan terdapat pada penambahan objek rectangle dengan round corner 20 agar sudut dari objek rectangle tersebut tidak terlalu tajam. Font yang dipilih adalah arial karena tampilannya yang simple tetapi mudah dibaca.

(3)

Gambar 4.3 Desain Developer 4.1.2 Pembuatan Elemen Desain Grafis (Graphic Design) 4.1.2.1 Pembuatan Logo

Pada pembuatan logo digunakan 3 buah elemen yakni teks bertuliskan sistem tata surya sebagai main text, teks bertuliskan augmented rality dan sebuah

mapping dari planet merkurius. Pada teks bertuliskan sistem tata surya digunakan font galactic vanguardian ncv dan pada teks augmented reality menggunakan font

arial. Untuk main text diubah kedalam bitmap dan ditumpuk dengan gambar

mapping dari planet merkurius kemudian dengan memafaatkan fitur intersect

(4)

Gambar 4.4 Pembuatan Logo 4.1.2.2 Pembutan Desain Tombol

Pada pembuatan tombol digunakan beberapa bentuk objek untuk menghasilkan tombol yang terkesan memiliki cincin logam di bagian tepinya. Terdapat empat buah objek untuk menghasilkan sebuah tombol, dua di antaranya digunakan untuk membentuk cincin logam, satu yang lainnya sebagai bagian tengah dari tombol dan yang terakhir untuk memberikan kesan mengkilap pada tombol.

Gambar 4.5 Desain Tombol 4.1.2.3 Pembuatan Katalog

(5)

sistem tata surya dengan background berupa gambar planet, bintang-bintang dan atau benda langit lainnya sebagai background

Gambar 4.6 Pembuatan Katalog 4.1.2.4 Pembuatan Objek 3D

Pembuatan objek 3Dimensi menggunakan software blender versi 2.7.2. Dalam peroses pembuatan objek, komponen yang digunakan adalah komponen-komponen yang terdapat pada tools blender.

Gambar 4.7 Matahari

Pada pembuatan objek Matahari dipilih objek sphere untuk membuat bentuk bola 3D. Pada menu add, pilih objek mesh kemudian pilih sphere. Atur

(6)

permukaan objek agar menjadi lebih halus dengan mengatur nilai pada smooth. Untuk memasukan tekstur matahari, drag bagian kiri aplikasi blender hingga halaman menjadi double. Plih view menjadi image editor kemudian pilih menu

image. Pada menu image pilih add image sehingga kita akan dialihkan ke

halaman untuk memilih image atau gambar yang akan digunakan sebagai tekstur dari objek 3D. pilih gambar tekstur matahari yang sudah tersimpan.

Gambar 4.8 Merkurius

Pada pembuatan objek Merkurius dipilih objek sphere untuk membuat bentuk bola 3D. Pada menu add, pilih objek mesh kemudian pilih sphere. Atur permukaan objek agar menjadi lebih halus dengan mengatur nilai pada smooth. Untuk memasukan tekstur matahari, drag bagian kiri aplikasi blender hingga halaman menjadi double. Plih view menjadi image editor kemudian pilih menu

image. Pada menu image pilih add image sehingga kita akan dialihkan ke

halaman untuk memilih image atau gambar yang akan digunakan sebagai tekstur dari objek 3D, pilih gambar tekstur matahari yang sudah tersimpan.

(7)

atau 10 detik. Aktifkan menu pada objek planet dengan klik pada tombol + (Plus) yang terdapat di pojok atas sebelah kanan di dalam view port. Masuk ke dalam sub menu transform lalu pilih sumbu Z di dalam rotasi objek tersebut. Masukkan angka 0 untuk derajat awal rotasi objek tersebut lalu klik kanan dan pilih insert

single keyframe pada keyframe ke 0. Dengan cara yang sama, masukkan angka

358 untuk derajat akhir rotasi objek lalu klik kaana dan pilih insert single

keyframe pada keyframe ke 250. Masuk ke dalam sub menu transform lalu pilih

sumbu Z di dalam rotasi objek tersebut. Buat view menjadi dua, untuk view yang terakhir kita buat, kita ganti menjadi dopesheet. Pilih key kemudian interpolation dan pilih linear.

Gambar 4.9 Venus

Pada pembuatan objek Venus dipilih objek sphere untuk membuat bentuk bola 3D. Pada menu add, pilih objek mesh kemudian pilih sphere. Atur permukaan objek agar menjadi lebih halus dengan mengatur nilai pada smooth. Untuk memasukan tekstur, drag bagian kiri aplikasi blender hingga halaman menjadi double. Plih view menjadi image editor kemudian pilih menu image. Pada menu image pilih add image sehingga kita akan dialihkan ke halaman untuk

(8)

memilih image atau gambar yang akan digunakan sebagai tekstur dari objek 3D, pilih gambar tekstur matahari yang sudah tersimpan.

Untuk membuat rotasi Venus, pertama kita atur frame sebanyak 250 atau 10 detik. Aktifkan menu pada objek planet dengan klik pada tombol + (Plus) yang terdapat di pojok atas sebelah kanan di dalam view port. Masuk ke dalam sub menu transform lalu pilih sumbu Z di dalam rotasi objek tersebut. Masukkan angka 0 untuk derajat awal rotasi objek tersebut lalu klik kanan dan pilih insert

Gambar 4.10 Bumi

Pada pembuatan objek Bumi dipilih objek sphere untuk membuat bentuk bola 3D. Pada menu add, pilih objek mesh kemudian pilih sphere. Atur permukaan objek agar menjadi lebih halus dengan mengatur nilai pada smooth.

(9)

Untuk memasukan tekstur, drag bagian kiri aplikasi blender hingga halaman menjadi double. Plih view menjadi image editor kemudian pilih menu image. Pada menu image pilih add image sehingga kita akan dialihkan ke halaman untuk memilih image atau gambar yang akan digunakan sebagai tekstur dari objek 3D, pilih gambar tekstur matahari yang sudah tersimpan.

Untuk membuat rotasi Bumi, pertama kita atur frame sebanyak 250 atau 10 detik. Aktifkan menu pada objek planet dengan klik pada tombol + (Plus) yang terdapat di pojok atas sebelah kanan di dalam view port. Masuk ke dalam sub menu transform lalu pilih sumbu Z di dalam rotasi objek tersebut. Masukkan angka 0 untuk derajat awal rotasi objek tersebut lalu klik kanan dan pilih insert

sumbu Z di dalam rotasi objek tersebut. Buat view menjadi dua, untuk view yang terakhir kita buat, kita ganti menjadi dopesheet. Pilih key kemudian interpolation dan pilih linear.

(10)

Pada pembuatan objek Mars dipilih objek sphere untuk membuat bentuk bola 3D. Pada menu add, pilih objek mesh kemudian pilih sphere. Atur permukaan objek agar menjadi lebih halus dengan mengatur nilai pada smooth. Untuk memasukan tekstur, drag bagian kiri aplikasi blender hingga halaman menjadi double. Plih view menjadi image editor kemudian pilih menu image. Pada menu image pilih add image sehingga kita akan dialihkan ke halaman untuk memilih image atau gambar yang akan digunakan sebagai tekstur dari objek 3D, pilih gambar tekstur matahari yang sudah tersimpan.

Untuk membuat rotasi Mars, pertama kita atur frame sebanyak 250 atau 10 detik. Aktifkan menu pada objek planet dengan klik pada tombol + (Plus) yang terdapat di pojok atas sebelah kanan di dalam view port. Masuk ke dalam sub menu transform lalu pilih sumbu Z di dalam rotasi objek tersebut. Masukkan angka 0 untuk derajat awal rotasi objek tersebut lalu klik kanan dan pilih insert

358 untuk derajat akhir rotasi objek lalu klik kanan dan pilih insert single

(11)

Gambar 4.12 Jupiter

Pada pembuatan objek Jupiter dipilih objek sphere untuk membuat bentuk bola 3D. Pada menu add, pilih objek mesh kemudian pilih sphere. Atur permukaan objek agar menjadi lebih halus dengan mengatur nilai pada smooth. Untuk memasukan tekstur, drag bagian kiri aplikasi blender hingga halaman menjadi double. Plih view menjadi image editor kemudian pilih menu image. Pada menu image pilih add image sehingga kita akan dialihkan ke halaman untuk memilih image atau gambar yang akan digunakan sebagai tekstur dari objek 3D, pilih gambar tekstur matahari yang sudah tersimpan.

Untuk membuat rotasi Jupiter, pertama kita atur frame sebanyak 250 atau 10 detik. Aktifkan menu pada objek planet dengan klik pada tombol + (Plus) yang terdapat di pojok atas sebelah kanan di dalam view port. Masuk ke dalam sub menu transform lalu pilih sumbu Z di dalam rotasi objek tersebut. Masukkan angka 0 untuk derajat awal rotasi objek tersebut lalu klik kanan dan pilih insert

(12)

Gambar 4.13 Saturnus

Pada pembuatan objek mars dipilih objek sphere untuk membuat bentuk bola 3D. Pada menu add, pilih objek mesh kemudian pilih sphere. Atur permukaan objek agar menjadi lebih halus dengan mengatur nilai pada smooth. Untuk memasukan tekstur, drag bagian kiri aplikasi blender hingga halaman menjadi double. Plih view menjadi image editor kemudian pilih menu image. Pada menu image pilih add image sehingga kita akan dialihkan ke halaman untuk memilih image atau gambar yang akan digunakan sebagai tekstur dari objek 3D, pilih gambar tekstur matahari yang sudah tersimpan.

Untuk membuat cincin Saturnus, buat objek baru dengan memilih add kemudian mesh dan pilih plane.

Untuk membuat rotasi Saturnus, pertama kita atur frame sebanyak 250 atau 10 detik. Aktifkan menu pada objek planet dengan klik pada tombol + (Plus)

(13)

yang terdapat di pojok atas sebelah kanan di dalam view port. Masuk ke dalam sub menu transform lalu pilih sumbu Z di dalam rotasi objek tersebut. Masukkan angka 0 untuk derajat awal rotasi objek tersebut lalu klik kanan dan pilih insert

Gambar 4.14 Uranus

Pada pembuatan objek Uranus dipilih objek sphere untuk membuat bentuk bola 3D. Pada menu add, pilih objek mesh kemudian pilih sphere. Atur permukaan objek agar menjadi lebih halus dengan mengatur nilai pada smooth. Untuk memasukan tekstur, drag bagian kiri aplikasi blender hingga halaman menjadi double. Plih view menjadi image editor kemudian pilih menu image. Pada menu image pilih add image sehingga kita akan dialihkan ke halaman untuk memilih image atau gambar yang akan digunakan sebagai tekstur dari objek 3D,

(14)

pilih gambar tekstur matahari yang sudah tersimpan.

Untuk membuat rotasi Uranus, pertama kita atur frame sebanyak 250 atau 10 detik. Aktifkan menu pada objek planet dengan klik pada tombol + (Plus) yang terdapat di pojok atas sebelah kanan di dalam view port. Masuk ke dalam sub menu transform lalu pilih sumbu Z di dalam rotasi objek tersebut. Masukkan angka 0 untuk derajat awal rotasi objek tersebut lalu klik kanan dan pilih insert

Gambar 4.15 Neptunus

Pada pembuatan objek Neptunus dipilih objek sphere untuk membuat bentuk bola 3D. Pada menu add, pilih objek mesh kemudian pilih sphere. Atur permukaan objek agar menjadi lebih halus dengan mengatur nilai pada smooth.

(15)

Untuk memasukan tekstur, drag bagian kiri aplikasi blender hingga halaman menjadi double. Plih view menjadi image editor kemudian pilih menu image. Pada menu image pilih add image sehingga kita akan dialihkan ke halaman untuk memilih image atau gambar yang akan digunakan sebagai tekstur dari objek 3D, pilih gambar tekstur matahari yang sudah tersimpan.

Untuk membuat rotasi Neptunus, pertama kita atur frame sebanyak 250 atau 10 detik. Aktifkan menu pada objek planet dengan klik pada tombol + (Plus) yang terdapat di pojok atas sebelah kanan di dalam view port. Masuk ke dalam sub menu transform lalu pilih sumbu Z di dalam rotasi objek tersebut. Masukkan angka 0 untuk derajat awal rotasi objek tersebut lalu klik kanan dan pilih insert

(16)

Gambar 4.16 Animasi Tata Surya

Untuk membuat revolusi, pastikan cursor untuk di tengah. Jika belum, tekan Shift + S, lalu pilih cursor to center. Buat empty object dengan tekan Shift + A , pilih Empty, pilih Plain Axes. Ganti nama empty object dengan revolusi planet yang dibuat. Aktifkan objek planet, ganti dropdown Dope Sheet menjadi Action

Editor, ganti nama animasi rotasi planet nya menjadi revolusi planet. Aktifkan empty object dengan nama revolusi bumi dan klik +New pada action editor. 1.

Aktifkan empty object dengan nama Revolusi Bumi lalu copy animasi Revolusi planet. Pilih frame sebanyak 2000. Arahkan cursor ke frame lalu tekan "E" untuk

End di frame tersebut. Jangan lupa menambahkan Extrapolation supaya planet

dapat memurat terus menerus. Aktifkan Planet lalu masuk ke view Graph Editor. Pilih Channel, pilih Extrapolation mode, pilih Linear. Lakukan juga pada Empty

object dengan nama Revolusi bumi. Aktifkan objek Planet. Geser menjauhi sumbu

0 derajat sebagai sumbu revolusi. Jangan lupa ganti nama planet. Pilih parent ke

Empty Object dengan nama Revolusi Bumi. Lihat dari atas searah sumbu z

dengan menekan tombol 7, lalu play. Aktifkan Revolusi Bumi, lalu pilih Ctrl+C dan Ctrl+V untuk copy dan paste. Ubah nama Revolusinya sesuai dengan nama planet yang selanjutnya akan kita buat, buat planet baru. Masuk ke dope sheet, ganti nama untuk animasi planet yang baru. Kita hapus frame (alt+i) untuk revolusinya lalu kita tentukan yang baru. Untuk revolusi yang cepat maka semakin banyak frame yang dibutuhkan untuk revolusi sebesar 360 derajat dan sebaliknya. Setelah itu lakukan langkah yang sama pada tahapan sebelumnya hingga menghasilkan seluruh planet dari komponen sistem tata surya.

(17)

Gambar 4.17 Gerhana

Untuk membuat Bulan berevolusi mengelilingi Bumi, pastikan cursor untuk di tengah. Jika belum, tekan Shift + S, lalu pilih cursor to center. Buat

empty object dengan tekan Shift + A , pilih Empty, pilih Plain Axes. Ganti nama empty object dengan revolusi bulan yang dibuat. Aktifkan objek bulan, ganti dropdown Dope Sheet menjadi Action Editor, ganti nama animasi rotasi bulan

menjadi revolusi bulan. Aktifkan empty object dengan nama revolusi bulan dan klik +New pada action editor. Aktifkan empty object dengan nama Revolusi Bulan lalu copy animasi Revolusi bulan. Pilih frame sebanyak 2000. Arahkan

cursor ke frame lalu tekan "E" untuk End di frame tersebut. Jangan lupa

menambahkan Extrapolation supaya bulan dapat memutar terus menerus. Aktifkan Bulan lalu masuk ke view Graph Editor. Pilih Channel, pilih

Extrapolation mode, pilih Linear. Lakukan juga pada Empty object dengan nama

Revolusi Bulan. Pilih parent ke Empty Object dengan nama Revolusi Bulan. Lihat dari atas searah sumbu z dengan menekan tombol 7, lalu play.

(18)

Gambar 4.18 Komet

Pada pembuatan animasi komet diberikan tambahan ekor komet. Ekor komet dibuat dengan menggunakan objek plane yang diatur bentuk dan ukurannya kemudian diletakan pada posisi yang sama dengan sebuah sphere. untuk menambah tekstur, digunakan perintah add image. Untuk mengatur animasinya, posisi objek sphere dan empty di pindah-pindah dan diatur panjang

emptynya berdasarkan letak keyframe.

(19)

Pada pembuatan komet, digunakan objek sphere yang diatur sedemikian rupa untuk mengubah bentuknya menjadi bentuk seperti batu. Untuk memberikan terkstur, tambahkan gambar tekstur dengan menggunakan add image. Sebagai animasi agar batu berputar, atur keyframe dan sudut objek pada posisi 0 derajat dan 358 derajat.

Gambar 4.20 Meteoroid

Pada pembuatan meteoroid, digunakan objek sphere yang diatur sedemikian rupa untuk mengubah bentuknya menjadi bentuk seperti batu. Untuk memberikan terkstur, tambahkan gambar tekstur dengan menggunakan add image. Sebagai animasi agar batu berputar, atur keyframe dan sudut objek pada posisi 0 derajat dan 358 derajat.

4.1.3 Pembuatan Audio dan Video

Pembuatan audio pada aplikasi ini menggunakan dua macam audio yakni audio sebagai backsound dari sebuah music instrument yang bisa diunduh dan audio dubbing untuk penjelasan materi di dalam aplikasi.

(20)

Samsung Galaxy Young yang digunakan untuk merekam suara. Setelah setelah audio tersimpan, format dari setiap audo adalah M4P. Karena yang dibutuhkan adalah audio dengan format MP3 maka digunakan converter sebagai alat untuk mengubah format file audio. Converter yang digunakan bernama any converter yang dapat diunduh secara gratis di internet.

Untuk melakukan convert, buka aplikasi any converter. Drag file audio dengan ekstensi M4P ke dalam aplikasi. Selanjutnya pilih ekstensi tujuan dan klik convert.

Gambar 4.21 Proses Convert Audio

Setelah file tersimpan dalam format MP3, masukan ke dalam scene pada unity. Masukan audio dengan cara pilih image target sebagai tempat yang ingin diberi audio. Pilih menu playmaker lalu pilih play maker audio dan atur audio yang akan digunakan sesuai dengan keinginan.

Dalam pembuatan audio pada aplikasi, FSM (Finite State Machine) yang digunakan untuk tombol Audio menggunakan 3 State yaitu, Listener dengan event

(21)

4.1.4 Pembuatan Marker

Marker yang digunakan adalah markerless dan dibuat dengan menggunakan corel draw sesuai dengan desain katalog sehingga marker dan katalog memiliki tampilan yang sama atau katalog yang telah dibuat dapat dijadikan sebagai marker.

Untuk mengetahui kualitas gambar katalog sebagai marker, diperlukan penilaian terhadap gambar tersebut. Untuk mengetahui hal tersebut dapat dilakukan melalui situs developer.vuforia.com sebagai situs yang menyediakan fasilitas untuk memberikan penilaian pada marker sebagai markerless untuk aplikasi augmented reality.

Buat akun terlebih dahulu pada situs developer.vuforia.com dengan mengikuti langkah-langkah yang tersedia pada situs tersebut. Setelah berhasil membuat akun, login menggunakan username dan password yang telah digunakan untuk mendaftar sebelumnya. Pilih menu develop pada tab menu yang tersedia.

Gambar 4.22 Halaman setelah login pada situs developer.vuforia.com

(22)

membuat database baru. Isikan nama database pada kolom yang tersedia dan pilih create.

Gambar 4.23 Membuat Database pada Vuforia

Setelah database berhasil, pilih nama database yang telah dibuat sebelumnya. Pilih add target untuk memasukan gambar satu persatu. Pilih gambar yang akan dimasukan dan pilih add.

(23)

Gambar 4.24 Mengunggah Gambar sebagai Marker

Setelah beberapa saat akan ditampilkan nama gambar yang sebelumnya dimasukan dan di sisi kanan akan ditampilkan gambar bintang sebagai hasil penilaian dari gambar yang telah kita unggah sebelumnya. Semakin banyak jumlah bintang maka kualitas marker dari gambar tersebut semakin baik.

Gambar 4.25 Kualitas Marker ditandai dengan Jumlah Bintang

Setelah mengetahui kualitas marker, keseluruhan marker tersebut dapat diunduh dengan memilih menu download database.

(24)

4.1.5 Authoring dan Pemrograman (Authoring and Programming)

Di dalam aplikasi media Pembelajaran Sistem Tata Surya Menggunakan

Augmented Reality ini tidak melakukan programming. Sebagai pengganti,

dilakukan instalasi beberapa plugin untuk memudahkan pembuatan aplikasi agar tidak perlu melakukan programming.

Untuk membuat Aplikasi Media Pembelajaran Sistem Tata Surya menggunakan Augmeted Reality ini menggunakan software unity 3D dan memerlukan vuforia sdk yang digunakan untuk mengubah sebuah gambar menjadi marker diikuti dengan pembuatan logika yang menghubungkan setiap halaman menggunakan FSM (Finite State Machine). Sebelum menggunakan FSM dari playmaker, dibutuhkan component Ngui Events To Playmaker Fsm Events dan Play Maker FSM (script). Berikut merupakan langkah dan cara pembuatan aplikasi augmented reality per scene.

4.1.5.2 Pembuatan Scene Halaman Utama, Tutorial dan Developer

Langkah awal pembuatan objek Menu Utama, Tutorial dan Developer adalah dengan memilih menu file kemudian pilih new scene. Untuk membuat antarmuka, memilih menu NGUI kemudian pilih create dan pilih 2D. Setelah itu pada kolom hierarchy tambahkan sprite dan mengganti background sebelumnya harus membuat atlas maker. Untuk mengganti background cukup dengan memilih background pada kolom hierachy dan pilih sprite pada kolom Inspector dan double klik pada file yang akan digunakan.

Untuk membuat button atau tombol dengan cara memilih NGUI kemudian open dan pilih Widget Legacy kemudian add button. Untuk mengganti gambar button pilih pada button yang ada pada kolom hierarcy dan pilih

backgorund pada button. Pada kolom Inspector pilih sprite kemudian memilih

gambar untuk button. Lalu atur letak tombol yang telah di import. Pembuatan menu utama ditujukkan pada Gambar 4.40.

(25)

Gambar 4.27 Pembuatan Scene Halaman Utama

(26)

Gambar 4.29 Pembuatan Scene Halaman Developer

Pembuatan Antarmuka dengan Unity dalam hal peralihan halaman, dapat dilakukan dengan bantuan Playmaker Editor dengan template yang sudah disediakan. FSM diberikan pada setiap tombol yang terdapat pada Antarmuka, seperti terliat pada Gambar 4.43.

Gambar 4.30 Pembuatan logika perpindahan halaman

Pembuatan Antarmuka dengan Unity dalam hal peralihan objek, dapat dilakukan dengan bantuan Playmaker Editor dengan template yang sudah disediakan. FSM diberikan pada setiap tombol yang terdapat pada Antarmuka objek, seperti terlihat pada Gambar 4.4

(27)

Gambar 4.31 Pembuatan Logika perpindahan objek 4.1.5.2 Pembuatan Scene Mulai

Untuk pembuatan scene Mulai, hanya dengan menyimpan file Menu sebagai scene baru. Pada scene menu pilih file dan pilih save scene as, simpan file dengan nama scene Mulai. Scene Mulai ini digunakan untuk menampilkan objek 3 dimensi yang telah dibuat. Scene Mulai juga berisi menu kembali untuk kembali pada menu utama. Pembuatan Scene Mulai ditunjukkan pada Gambar.

(28)

Gambar 4.32 Pembuatan Scene Mulai 4.1.6 Label dan Kemasan (Labels and Packaging)

Langkah awal membuat Label dan kemasan adalah pembuatan

katalog. Pembuatan katalog menggunakan tool CorelDraw, dengan

menggabungkan gambar-gambar 2 dimensi lalu di tata rapi agar terlihat lebih menarik. Pada katalog ini ditampilkan informasi dan marker yang digunakan untuk memunculkan objek augmented reality.

(29)

Gambar 4.33 Pembuatan Cover Katalog 4.2 Implementasi

4.2.1 Implementasi Interaktif (Interactive Design)

Pada tampilan ini berisi tentang penggunaan dari aplikasi. Implementasi Interaktif ditunjukkan pada Gambar 4.48

(30)

Gambar 4.34 Implementasi Interactive Design

4.2.2 Implementasi Antarmuka (Interface Design)

1. Antarmuka Halaman Utama

Pada halaman utama ditampilkan menu-menu yang tersedia pada Aplikasi Media Pembelajaran Sistem Tata Surya menggunakan Augmented Reality. Terdapat menu mulai, tutorial, developer dan keluar.

Gambar 4.35 Interface Menu Mulai

(31)

Gambar 4.36 Interface Menu Tutorial

3. Halaman Utama Developer

Gambar 4.37 Interface Halaman Menu Developer

4.2.3 Implementasi Elemen Grafis

Pembuatan desain grafis menggunakan tool CorelDraw X4. Desain yang dibuat adalah sebuah judul Aplikasi Media Pembelajaran Sistem Tata Surya menggunakan Augmented Reality. Tulisan dibuat dengan dengan warna bertekstur dan diberi efek countour.

(32)

keseluruhan dengan efek gelap di sekitarnya serta gambar bintang-bintang bertaburan. Gradasi warna diberikan agar memberikan efek tidak monoton

Pada tampilan button, pembuatan button menggunakan CorelDraw X4.

Button digunakan untuk menjalankan suatu perintah yang diinginkan pada

program atau aplikasi. Button sebaiknya dibuat dengan tujuan untuk mempermudah user dalam menjalankan program, mudah digunakan dan jelas.

Gambar 4.38 Implementasi Logo, Tombol dan Background 4.2.4 Implementasi Suara dan Musik

Aplikasi Media Pembelajaran Sistem Tata Surya menggunakan Augmeted

Reality dilengkapi dengan musik agar lebih komunikatif, interaktif dan menarik.

Dengan adanya musik, user tidak akan merasa bosan menggunakan aplikasi tersebut. Musik pendukung dari aplikasi terdiri dari 2 bagian yaitu backsound dan musik untuk setiap info objek. Untuk backsound-nya akan memutar selama aplikasi berjalan dan backsound info akan diputar pada saat ditekan tombol play. Implementasi backsound di tunjukkan pada Gambar 4.39.

(33)

Gambar 4.39 Implementasi Suara dan Musik 4.2.5 Implementasi Navigasi (Navigation Design)

Antarmuka menu utama merupakan master page yang tampil setelah proses loading pada splash screen selesai. Menu utama berisi tiga navigasi ke halaman lain yaitu Mulai, Tutorial, Developer dan keluar. Gambar 4.40. adalah implementasi page menu utama

(34)

Gambar 4.41 Implementasi Objek Animasi Tata Surya

(35)

Gambar 4.43 Implementasi Objek Merkurius

(36)

Gambar 4.45 Implementasi Objek Bumi

(37)

Gambar 4.47 Implementasi Objek Jupiter

(38)

Gambar 4.49 Implementasi Objek Uranus

(39)

Gambar 4.51 Implementasi Objek Gerhana

(40)

Gambar 4.53 Implementasi Objek Meteoroid

Gambar 4.54 Implementasi Objek Asteroid

4.3 Pengujian

Pengujian aplikasi media pembelajaran sistem tata surya menggunakan

(41)

navigasi, cahaya, jarak dan sudut.

4.3.1 Pengujian Naviagasi

Tabel 4.1 Pengujian Navigasi

No Halaman Perlakuan Hasil yang

diharapkan

Hasil Akhir Hasil

Tercapai 1 Pengujian Button mulai Button mulai ditekan Tampil halaman mulai Tampil halaman mulai Ya 2 Pengujian Button Tutorial Button tutorial ditekan Tampil halaman tutorial Tampil halaman tutorial Ya 3 Pengujian Button Developer Button developer ditekan Tampil halaman developer Tampil halaman developer Ya 4 Pengujian Button Keluar Button keluar ditekan Keluar dari aplikasi Keluar dari aplikasi Ya 5 Pengujian button kembali pada objek 3d Button kembali ditekan Kembali ke halaman menu Kembali ke halaman menu Ya 6 Pengujian button info pada objek 3d Button info ditekan Kembali ke halaman mulai Kembali ke halaman mulai Ya 7 Pengujian button play pada objek 3d Button play ditekan Audio dimainkan Audio dimainkan Ya 8 Pengujian button stop Button stop ditekan Audio dihentikan Audio dihentikan Ya

(42)

pada objek 3d 9 Pengujian button kembali pada info objek 3d Button kembali ditekan Kembali ke halaman mulai Kembali ke halaman mulai Ya 4.3.2 Pengujian Objek 3D

1. Pengujian Objek 3D Berdasarkan Jarak

Tabel 4.2 Pengujian Berdasarkan Jarak

No Objek 3d Jarak terdekat (cm) Jarak terjauh (cm) Matahari 5 90 Merkurius 5 80 Venus 5 80 Bumi 5 80 Mars 5 80 Jupiter 5 80 Saturnus 5 90 Uranus 5 80 Neptunus 5 70 Tata surya 5 100 Gerhana 5 80

(43)

Komet 5 70

Asteroid 5 80

Meteoroid 5 80

2. Pengujian Objek 3D Berdasarkan Sudut atau Kemiringan Marker Tabel 4.3 Pengujian Berdasarkan Sudut

No Objek 3d Sudut 0º Sudut 30º Sudut 45º Sudut 60º Sudut

90º

1 Matahari Tidak

tampak

Tampak Tampak Tampak Tampak

2 Merkurius Tidak

tampak

3 Venus Tidak

tampak

4 Bumi Tidak

tampak

5 Mars Tidak

tampak

6 Jupiter Tidak

tampak

7 Saturnus Tidak

tampak

(44)

8 Uranus Tidak tampak

9 Neptunus Tidak

tampak

10 Tata surya Tidak

tampak

11 Gerhana Tidak

tampak

12 Komet Tidak

tampak

13 Asteroid Tidak

tampak

14 Meteoroid Tidak

tampak

3. Pengujian Objek 3D Berdasarkan Intesitas Cahaya

Tabel 4.4 Pengujian Berdasarkan Intesitas Cahaya

No Objek 3d Terang

Remang-remang

Gelap

1 Matahari Tampak Tidak tampak Tidak Tampak

2 Merkurius Tampak Tidak tampak Tidak Tampak

(45)

4 Bumi Tampak Tidak tampak Tidak Tampak

5 Mars Tampak Tidak tampak Tidak Tampak

6 Jupiter Tampak Tidak tampak Tidak Tampak

7 Saturnus Tampak Tidak tampak Tidak Tampak

8 Uranus Tampak Tidak tampak Tidak Tampak

9 Neptunus Tampak Tidak tampak Tidak Tampak

10 Tata surya Tampak Tidak tampak Tidak Tampak

11 Gerhana Tampak Tidak tampak Tidak Tampak

12 Komet Tampak Tidak tampak Tidak Tampak

13 Asteroid Tampak Tidak tampak Tidak Tampak

(46)

4.4 Kuisioner

Sebuah kuisioner yang terdiri dari beberapa pertanyaan telah dibagikan kepada beberapa orang responden untuk mengetahui kelebihan dan kekurangan dari Aplikasi Media Pembelajaran Sistem Tata Surya menggunakan Augmented Reality Berbasis Android ini. Selain itu, hasil kuisioner nantinya akan digunakan sebagai saran untuk perbaikan aplikasi agar dapat dikembangkan lebih lanjut.

Berdasarkan hasil pengujian apliaksi yang diperoleh dari hasil kuisioner yang telah dibagikan kepada responden adalah sebagai berikut:

1. Teknologi Augmented Reality sebagai media informasi yang interaktif?

Sangat setuju 80% Setuju 20% Tidak setuju 0% Sangat tidak setuju 0%

2. Teknologi Augmented Reality merupakan sebuah inovasi untuk dunia

pendidikan?

3. Objek 3 dimensi pada aplikasi ini sudah menarik?

(47)

Setuju 45% Tidak setuju 0% Sangat tidak setuju 0%

4. Aplikasi Augmented Reality ini mudah untuk digunakan?

5. Penggunaan media informasi Augmented Reality menarik untuk digunakan?

6. Implementasi audio sudah menarik?

7. Tampilan tutorial pada aplikasi ini mudah dipahami?