BAB III

PERANCANGAN DAN IMPLEMENTASI

Pada penulisan kali ini penulis bermaksud untuk membuat suatu aplikasi
sebagai metode pembelajaran tentang alat musik tradisional daerah Jawa Tengah.
Aplikasi yang akan dibuat yaitu berbasis android dengan manambahkan teknologi
Augmented Reality. Aplikasi ini diperuntukan untuk masyarakat umum supaya lebih
mengetahui alat-alat musik tradisional. Pada aplikasi ini akan diperlihatkan animasi
tiga dimensi alat musik tradisional Jawa Tengah (Gong,Kendang,Demung,Bonang)
beserta suara dan informasi tentang masing-masing alat musiknya. Kemudian setelah
dibuat modeling berupada objek dunia maya maka selanjutnya akan diproyeksikan
diatas marker berupa gambar sehingga objek tersebut tampak nyata. Untuk membuat
lebih interaktif penulis juga akan membarikan tambahan suara tentang penjelasan alat
musik tersebut.
Untuk membuat aplikasi tersebut, penulis memerlukan beberapa tahapan, yaitu :
1. Rancangan Antarmuka (Design Interface)
2. Rancangan Struktur Navigasi Campuran
3. Pembuatan Marker Image Tracker
4. Pembuatan Object di Blender
5. Pembuatan Project Aplikasi di Unity 3D

26
 27

3.1 Rancangan Antarmuka (Design Interface)

Dalam suatu program, sangat penting dalam memperhatikan suatu system user
interface yang dapat dimengerti oleh semua orang yang menggunakannya.
Perancangan Antarmuka (Design Interface) aplikasi ini terdiri dari rancangan Splash
Screen, rancangan halaman menu utama, rancangan menu pilihan alat musik,
halaman panduan, dan halaman tentang aplikasi.

3.1.1 Rancangan Tampilan Splash Screen

Berikut ini adalah rancangn tampilan Splash Screen :

SPLASH SCREEN

Gambar 3.1. Rancangan Tampilan Splash Screen

Splash Screen adalah rancangan tampilan awal aplikasi Augmented Reality ini
yang akan muncul pertama kali ketika aplikasi ini dujalankan dengan menggunakan
device atau handphone berbasis Android dengan spesifikasi tertentu.
 28

3.1.2. Rancangan Tampilan Halaman Menu Utama

Pilihan Alat Musik

Panduan

About

Keluar

Gambar 3.2 Rancangan Tampilan Halaman Menu Utama

Pada rancangan tampilan halaman ini, terdapat sebuah background, halaman

ini merupakan rancangan halaman menu utama dimana pada layar terdapat textview
untuk memberikan nama pada empat buah button yang dapat terlihat pada rancangan
diatas. Tiap button tersebut akan menghubungkan ke halaman sesuai dengan nama
dari tiap button tersebut, pada tombol pilihan alat musik akan menuju ke sub menu
yang berisi macam-macam alat musik seperti dibawah ini :
 29

Kendang

Gong

Demung

Saron

Menu Utama

Gambar 3.3 Rancangan Tampilan Sub Menu

Pada rancangan tampilan halaman ini, terdapat sebuah backgroud dan terdapat
lima buah tombol.Kendang,Gong,Demung,Saron menghubungkan pada scene marker
atau halaman object 3D dan tombol Menu Utama menghubungkan ke awal tampilan
menu utama.
 30

3.1.3. Rancangan Halaman Objek 3D

Marker

Menu Utama Suara Info Objek

Gambar 3.4 Rancangan Tampilan Halaman Objek 3D

Pada rancangan tampilan halaman objek 3D ini adalah suatu wadah dimana
objek 3D akan ditampilkan yaitu dengan cara pengguna atau user menyorotkan
kamera smartphone ke arah marker maka akan muncul objek animasi.Terdapat
tombol suara untuk memutar suara dari alat musik yang telah kita pilih tersebut, dan
terdapat juga tombol info objek yang akan memutar suara informasi dari objek
tersebut, kemudian terdapat sebuah button yaitu menu utama dimana memiliki fungsi
untuk kembali pada menu utama.
 31

3.1.4. Rancangan Tampilan Halaman Panduan

Informasi tentang panduan cara

menggunakan aplikasi

Menu Utama

Gambar 3.5 Rancangan Tampilan Halaman Panduan

Pada rancangan tampilan halaman Panduan ini menampilkan background

berupa panduan cara untuk menggunakan aplikasi ini. Terdapat sebuah button menu
utama yang berfungsi kembali ke menu utama.
 32

3.1.5. Rancangan Tampilan Halaman About

Informasi tentang informasi aplikasi dan

pembuat aplikasi

Menu Utama

Gambar 3.6 Rancangan Tampilan Halaman About

Pada rancangan tampilan halaman Panduan ini menampilkan informasi

tentang aplikasi dan pembuat aplikasi. Terdapat sebuah button menu utama yang
berfungsi kembali ke menu utama.
 33

3.1.6 Struktur Navigasi

Struktur Navigasi digunakan sebagai penuntun alur sebuah aplikasi. Struktur
navigasi berfungsi untuk menggambarkan dengan jelas hubungan dan rantai kerja
seluruh element yang akan digunakan dalam aplikasi. Struktur navigasi bertujuan
untuk memepermudah user dalam memahami alur perjalanan aplikasi yang telah
dibuat.
Bentuk struktur navigasi yang digunakan oleh penulis adalah struktur navigasi
hirarki sebagai bentuk dasar, karena alur ini menampilkan data atau gambar pada
layer dengan suatu kriterian tertentu. Tampilan pada menu utama disebut master page
(halaman utama satu), halaman tersebut mempunyai halaman percabangan yang
disebut dengan slave page (halaman pendukung) dan jika dipilih akan menjadi
halaman kedua, dan seterusnya.

Pilihan Alat
Musik
 34

Gambar 3.7 Struktur Navigasi

Pada gambar 3.6. struktur navigasi yang telah dibuat menjelaskan bahwa apabila
aplikasi dijalankan maka akan muncul splash screen selama beberapa saat kemudian
akan ditampilkan halaman menu utama, yaitu terdiri dari beberapa menu pilihan yaitu
tentang pilihan alat musik, halaman panduan, halaman about, dan keluar

3.2 Pembuatan Marker Image Tracker

Pembuatan image tracker dilakukan dengan membuat marker di Microsoft
Paint kemudian disimpan dalam bentuk image. Marker yang telah dibuat tersebut
yang akan dijadikan sebagai image trackernya. Image hasil editan akan diupload ke
website Vuforia Developer.

3.2.1 Pembuatan Image Tracker

Langkah- langkah pembuatan Image Tracker :

1. Memasukkan Marker Kedalam Project. Pada Vuforia SDK Anda perlu

mengupload marker Anda ketika Anda ingin memasasukkannya dalam project
Anda. Ketika Anda mengupload, server Qualcomm akan memproses marker
Anda dam memberi rate berapa kualitas marker Anda. Untuk mengupload
marker buka situs http://developer.vuforia.com dan pastikan Anda telah
login. Jika Anda belum memiliki account Anda dapat melakukan registrasi
terlebih dahulu.
 35

Gambar 3.8 Homepage Vuforia Developer

2. Selanjutnya Anda dapat mengklik Target Manager untuk management Image
Target atau marker Anda.

Gambar 3.9 Account Vuforia

3. Selanjutnya akan muncul seperti pada gambar di bawah. Klik ”Create

Database‟

Gambar 3.10 Target Manager

 36

4. Kemudian beri nama database baru Anda dan klik ”Create‟

Gambar 3.11 Create Database

6. Setelah selesai Anda baru saja membuat sebuah database gambar baru. Setiap
database dapat memiliki lebih dari satu marker, dan Anda dapat menggantinya
pada program Anda. Klik database baru Anda untuk melihat isi database
gambar Anda.

Gambar 3.12 Database Marker

 37

7. Klik “Add Target” untuk menambah marker.

Gambar 3.13 Add target

8. Kemudian Anda akan diberi sebuah form untuk mengupload marker Anda.
Isikan form sesuai kebutuhan Anda dan upload Marker Anda. Tunggulah
dengan sabar, proses upload mungkin akan memakan waktu lama tergantung
koneksi Anda.
9. Upload semua marker yang akan digunakan. Pastikan semua marker
terupload.
10. Setelah proses upload akan ditampilkan marker apa saja yang Anda punyai,
silahkan centang mana saja yang akan anda gunakan, kemudian klik
“Download Selected targets”.
 38

11. Ketika download anda akan diberikan pilihan untuk target apa marker anda.
Pilihlah “Unity Editor” karena Anda menggunakan unity untuk membuat
project AR. Kemudian download file marker Anda dalam
bentuk .unitypackage yang siap diimport ke unity.

12. Double klik untuk mengimport ke dalam Unity.

13. Centang semua file yang akan diimport dan klik “import”.

Gambar 3.14 Importing ke Unity

14. Jika proses telah selesai maka proses import Anda telah berhasil.
 39

3.3 Pembuatan Objek di Blender

Terdapat empat objek pada Aplikasi Gamelan. Objek tersebut dimaksudkan
agar alat musik gamelan yang dimaksud terlihat lebih menarik dengan dibuat sebuah
terobosan baru dimana katalog yang ada ditambahkan empat buah marker yang
apabila disorot oleh kamera device Android, akan timbul desain modeling ke empat
alat musik Gamelan. Semua object ini dibuat dengan menggunakan software Blender
versi 2.72 yang nantinya akan diexport ke dalam format .fbx, kemudian diimport
kedalam Unity 3D versi 4.3.

3.3.1. Pembuatan Objek

Berikut adalah tahapan pembuatan objek pada blender :

1. Buka Blender 2.69. Kemudian akan tampak tampilan awal program seperti
gambar dibawah ini.

Gambar 3.15 Tampilan Awal Program Blender

 40

2. Objek pertama yg di buat adalah Demung, pertama dibuat dengan menggunakann

objek cube dan di bentuk sedemikian rupa sehingga menyerupai bentuk asli
demung lalu di berikan objek plane sebagai alasnya, lalu di berikan texture warna
coklat pada bagian objek demungnya sehingga tampak seperti objek aslinya.

Gambar 3.16 Objek Demung

3. Objek kedua yg dibuat adalah Bonang, pertama buat bagian badan bonangnya
dengan menggunakan objek cube lalu di extrude dengan menggunakan tombol E,
dan di bentuk sedemikian rupa sehingga menyerupai badan bonang , lalu buat
bagian bonangnya dengan menggunakan object circle dan di bentuk menyerupai
bentuk gong kecil lalu di satukan dengan badan bonangnya dengan menekan
tombol join. Lalu diberikan warna texturenya pada bagian badan bonang diberikan
warna coklat dan pada bonangnya diberikan warna kuning keemasan.

Gambar 3.17 Objek Bonang

 41

4. Objek yang ketiga adalah Gong, pertama yang di buat adalah penyangga
gongnya dengan menggunakan objek cube yang di scale sedemikan rupa
menggunakan tombol “S” sehingga membentuk persegi panjang lalu di
duplicate menjadi dua buah dan pada atas nya di berikan objek persegi
panjang lagi. Lalu untuk membuat objek gongnya menggunakan objek mesh
circle dan di extrude dengan menggunakan tombol “E” sehingga membentuk
objek gong. Lalu diberikan warna texturenya, pada bagian penyangga
diberikan warna coklat, dan pada gongnya diberikan warna kuning ke emasan.

Gambar 3.18 Objek Gong

5. Objek yang ke empat adalah kendang, pertama yang di buat adalah
penyanggah kendangnya, di buat dengan objek mesh cube dan di extrude
dengan menggunakan tombol “E”dan dibentuk sedemikian rupa sehingga
membentuk penyanggah, lalu selanjutnya yang di buat adalah objek
kendangnya dengan menggunakan object mesh circle dan di extrude dengan
tombol “E” sampai membentuk bentuk kendang, lalu kedua objeknya di
satukan dengan menggunakan join. Setelah itu di berikan texture warna
coklat.
 42

Gambar 3.19 Objek Kendang

3.4 Pembuatan Project di Unity 3D

1. Buka Unity dan buat project baru. Pastikan untuk tidak lupa men-setting
target platform project di Android dengan meng-klik File – Build Setting.
2. Hal pertama yang perlu dilakukan adalah import Vuforia SDK ke project
Android. Klik Assets –> Import package –> Custom package.

Gambar 3.20 Tampilan Unity 3D-Import Package

 43

3. Kemudian cari dimana tempat menginstall Vuforia SDK. Kemudian klik

“Open”.

Gambar 3.21 Memilih Vuforia SDK

4. Kemudian akan muncul konfirmasi apa saja yang akan diimport ke dalam
project. Biarkan default (terselect semua) dan klik import.

Gambar 3.22 Import Vuforia Package ke dalam Unity 3D

 44

5. Lihat di bagian window project di unity Anda. Anda akan melihat Vuforia
SDK yang telah terimport.

Gambar 3.23 Windows Project

6. Langkah selanjutnya buka library Vuforia yang telah Anda import tadi dalam
window Project. Masuk pada bagian Qualcomm Augmented Reality –>
Prefabs. Terdapat banyak prefabs yang dapat Anda gunakan untuk membuat
project Augmented Reality. Selanjutnya lakukan drag and drop prefab Image
Target dari window “project” ke dalam window “Hierarchy”.

Gambar 3.24 Drag Image Target ke dalam Hierarchy

 45

7. Lakukan konfigurasi pada Image Target

Gambar 3.25 Inspector Setting untuk Image Target

8. Selanjutnya drag and drop juga prefab ARCamera.

Gambar 3.26 Drag AR Camera ke dalam Hierarchy

 46

9. Lakukan konfigurasi pada ARCamera.

Gambar 3.27 Inspector Setting untuk AR Camera

10. Selanjutnya delete object Main Camera yang ada pada “Hierarchy” sehingga
yang ada hanyalah ARCamera dan Image Target. Kemudian tambahkan
object yang sudah dibuat sebelumnya di Blender. Caranya, folder object
Model yang sudah dibuat di drag kedalam folder Assets pada Unity 3D.

Gambar 3.28 Import folder Model ke dalam Unity 3D

 47

11. Setelah semua konfigurasi telah dilakukan. Kini, drag file .fbx nya kedalam
scene dengan cara mendrag file .fbx nya kedalam Image Target yang telah di
drag ke ARCamera.

Gambar 3.29 Memasukan object.fbx kedalam scene Unity

12. Buatlah agar object menjadi child dari “Image Target” yang bernama Bonang,
hal ini akan membuat object tidak ditampilkan jika terjadi lost marker, yaitu
ketika “Image Target” tidak ditemukan .

Gambar 3.30 Hierarchy

 48

13. Selanjutnya lakukanlah seperti pengaturan yang sama seperti diatas untuk
object-object yang lainnya.

3.5 Compile Project dan Running

Simpan Scene yang telah dibuat. Klik file –> Save scene. Kemudian buat folder
“Scenes” dan simpan di dalamnya.
1. Pastikan berada di platform Android. Jika sudah membuat project ini dalam
platform Android maka skip langkah ini, jika belum dapat mengubahnya ke
platform Android. Klik File –> Build Settings Kemudian switch ke platform
Android.

Gambar 3.31 Build Settings

 49

2. Selanjutnya tekan tombol Add Current ,hal ini untuk menyatakan bahwa scene
yang telah dibuat tersebut akan dicompile dan dikemas dalam file .apk yang
siap diinstall.

Gambar 3.32 Drag Scene ke dalam Build Settings

3. Sebelum menjalankan jangan lupa untuk melakukan pengaturan pada “Player
Settings”. Masih pada window “Build Settings” klik “Player Settings”. Lihat
pada bagian window “Inspector". Lakukan pengaturan berupa nama package,
icon aplikasi, platform dan berbagai pengaturan lain.

Gambar 3.33 Player Setting

 50

4. Jika semua konfigurasi telah selesai dilakukan, kini saatnya merunning

Pastikan device Android sudah terkoneksi dan dapat menggunakan adb
dengan baik. Pada window „Build Settings‟ klik „Build‟. Tunggu proses
compiling dan pushing aplikasi ke device Android. Lihat device Android yang
terkoneksi, maka aplikasi yang dibuat akan diinstall dan dijalankan secara
otomatis. Kini, arahkan kamera device ke marker.

Gambar 3.34 File.apk yang telah dibuat

3.6 Spesifikasi Hardware dan Software

Spesifikasi Perangkat keras yang digunakan :
 Laptop (Acer Aspire TimelineX Series, Intel Core i3-2330M CPU @
2.20GHz)
 Kamera Device Android Lenovo P770

Perangakat lunak yang digunakan:

a) Blender :
• 32-bit dual core 2Ghz
• 2GB RAM
• 24 bits 1280x768
• OpenGL 256 MB RAM
b) Unity 3D:
• Windows XP,Windows 7 dan Windows 8
• Graphic Card DirectX 9
 51

3.7 Implementasi Pada Pemakai

Berikut adalah skema prinsip kerja Augmented Reality :

Membuka Cari marker dalam citra Cari posisi 3D dan

Aplikasi orientasi marker

Render objek Atur posisi dan

virtual ke orientasi objek virtual Identifikasi marker
frame video

Tahap akhir untuk memastikan bahwa aplikasi yang dibuat dapat berjalan
dengan baik yaitu tahap uji coba aplikasi. Di bawah ini merupakan tampilan hasil uji
coba aplikasi Gamelan berbasis Augmented Reality yang telah dibuat.

Gambar 3.35 Tampilan Main Menu

 52

Gambar 3.36 Tampilan Aplikasi Model Kendang dan Infonya

Gambar 3.37 Tampilan Aplikasi Model Gong dan Infonya

Gambar 3.38 Tampilan Aplikasi Model Demung dan Infonya

 53

Gambar 3.38 Tampilan Aplikasi Model Bonang dan Infonya

Aplikasi Augmented Reality ini telah di uji coba di beberapa smartphone android.
Berikut Hasilnya :

Tabel 3.1 Uji Coba Aplikasi

NO. Merek Smartphone OS Dan Kamera Hasil Uji Coba

1. Lenovo Android JellyBean Proses masuk kedalam aplikasi

P770 4.1.2 relatif cepat
Kamera 5 MP Animasi berjalan dengan lancer
dan resolusi baik

2. Samsung Galaxy Chat Android JellyBean Proses masuk kedalam aplikasi

4.1.2 sedikit lama
Kamera 2 MP Animasi Berjalan dengan baik
namun rolusi sedikit kurang

Android Kitkat Proses masuk kedalam aplikasi

3. Lenovo S820 4.4.4 cepat
Kamera 13 MP Animasi berjalan dengan lancar
dan resolusi terlihat sangat baik