APLIKASI AR listrik PADA ANDROID
17
BAB III
PERANCANGAN DAN IMPLEMENTASI
Pada bab ini penulis akan menjelaskan proses perancangan Augmented
Reality. Dalam proses perancangannya kita memerlukan beberapa tahapannya
diantaranya : rancangan aplikasi kamar hotel berbasis Android, flowchart
program, membuat marker, dan membuat program.
Objek yang akan ditampilkan pada aplikasi ini adalah objek 3D bangunan
hotel dan 4 kamar yang terdiri dari Double Room, Standard Room, Superior
Room, dan Deluxe Room.
3.1
Perancangan Aplikasi
Dalam penulisan ilmiah ini, penulis mencoba untuk merancang aplikasi
Augmented Reality atau AR yaitu sebuah aplikasi yang bisa menampilkan objek
3D bangunan hotel dan 4 kamar dengan menggunakan mobile phone Android.
Dimana aplikasi ini diharapkan agar penggunanya dapat membayangkan
bagaimana bentuk kamar dan fasilitas dari kamar tersebut.
Aplikasi ini dapat menampilkan beberapa objek 3D. Bangunan hotel dan
kamar tersebut dapat ditampilkan secara acak sesuai dengan keinginan
penggunanya dengan menggunakan sebuah marker yang nanti akan disediakan
oleh penulis dalam bentuk buku sebagai media pendukung.
Hal yang pertama kali dilakukan adalah membuat objek 3D yang
dibutuhkan dengan menggunakan Blender 2.64 serta menyiapkan tool pendukung
untuk Augmented Reality, dan pembuatan buku sebagai alat peraga aplikasi
Augmented Reality nantinya. Kemudian penulis melakukan pengumpulan data,
baik berupa gambar, penjelasan, artikel, maupun jurnal dari internet yang
berkaitan dengan aplikasi AR. Aplikasi ini dibuat dengan menggunakan bahasa
pemrograman C# (dibaca : C Sharp) untuk Augmented Reality atau AR.
18
3.2
Struktur Navigasi
Struktur Navigasi dapat dikatakan sebagai penggambar dari hubungan atau
rantai kerja dari seluruh element yang akan digunakan dalam aplikasi. Dalam
pembuatan aplikasi ini struktur navigasi yang di gunakan adalah Struktur Navigasi
Composite :
Mulai
Mencari
Markers
Pilih Kamar
No
Start
Menampilkan
Help
Identifikasi
Marker
Yes
Menampilkan
About
Posisi dan arah
objek
Rendering Objek
Tampilan Objek
3D
Exit
Yes
End
Gambar 3.1 Struktur Navigasi AR
No
19
3.3
Rancangan Tampilan
Perancangan tampilan aplikasi ini sangat dibutuhkan, karena dengan
membuat rancangan tampilan ini, pembuat aplikasi tidak akan mengalami
kesulitan untuk membuat desain interface dari suatu aplikasi yang dibuatnya.
Pada tahapan ini terdiri dari dua rancangan tampilan yaitu, perancangan marker,
dan perancangan tampilan aplikasi Augmented Reality bangunan hotel dan kamar.
3.3.1
Rancangan Marker
Dalam pembuatan marker informasi kamar hotel ini penulis membuat
sebuah buku untuk mendukung dalam pengujian aplikasi Augmented pemesanan
kamar hotel. Aplikasi ini diharapkan dapat menarik perhatian penggunanya dalam
proses pemesanan kamar hotel. Marker (penanda khusus) disatukan dalam sebuah
buku, sehingga pengguna dapat langsung melihat tampilan objek 3D Augmented
Reality aplikasi pemesanan kamar hotel, dan tiap marker akan menampilkan
masing-masing objek yang terdapat pada buku tersebut.
LABEL
atau
GAMBAR
Gambar 3.2 Rancangan Tampilan Marker
3.3.2
Rancangan Tampilan Augmented Reality
Setelah pengguna melihat halaman awal splash screen, selanjutnya akan
masuk kedalam menu utama, dimana disini tampilan Augmented Reality akan
muncul. Pengguna sudah bisa untuk menggunakan aplikasi ini dengan
menyorotkan kamera pada handphone ke marker yang sudah disediakan. Berikut
ini adalah rancangan tampilannya :
20
AUGMENTED
REALITY
Gambar 3.3 Rancangan Tampilan Augmented Reality
Penjelasan rancangan tampilan augmented reality tersebut adalah sebagai berikut :
1.
Augmented Reality
Yaitu objek 3D bangunan hotel dan kamar yang akan muncul apabila
kamera pada handphone disorotkan pada marker.
3.3.3
Rancangan Tampilan Menu 1
Rancangan tampilan menu aplikasi ini merupakan rancangan tampilan
yang terdapat pada menu utama, Ada beberapa macam menu yang dapat
digunakan oleh pengguna pada tampilan tersebut. Berikut ini adalah rancangan
tampilannya :
START
HELP
ABOUT
EXIT
Gambar 3.4 Rancangan Tampilan Menu 1 Augmented Reality
21
Penjelasan rancangan tampilan menu aplikasi Augmented Reality adalah sebagai
berikut :
1. Start
Yaitu tampilan objek 3D Augmented Reality bangunan hotel dan kamar.
2. Help
Yaitu menu bantuan cara menggunakan aplikasi AR ini.
3. About
Yaitu keterangan tentang pengembang atau pembuat.
4. Exit
Yaitu menu untuk keluar dari aplikasi AR ini.
3.3.4
Rancangan Tampilan Menu 2
Rancangan tampilan menu aplikasi ini merupakan rancangan tampilan
yang terdapat pada menu Start, Ada beberapa macam
menu yang dapat
digunakan oleh pengguna pada tampilan tersebut. Berikut ini adalah rancangan
tampilannya :
KAMAR 1
KAMAR 2
KAMAR 3
KAMAR 4
HOTEL
Gambar 3.5 Rancangan Tampilan Menu 2 Start Augmented Reality
Penjelasan rancangan tampilan menu Start aplikasi Augmented Reality adalah
sebagai berikut :
1. Kamar 1
Yaitu tampilan objek 3D Augmented Reality kamar 1.
2. Kamar 2
Yaitu tampilan objek 3D Augmented Reality kamar 2.
22
3. Kamar 3
Yaitu tampilan objek 3D Augmented Reality kamar 3.
4. Kamar 4
Yaitu tampilan objek 3D Augmented Reality kamar 4.
5. Hotel
Yaitu tampilan objek 3D Augmented Reality bangunan hotel.
3.3.5
Rancangan Tampilan Help
Tampilan ini merupakan halaman yang akan muncul apabila pengguna
memilih menu help. Pada halaman ini, pengguna dapat mengetahui dan melihat
tata cara menggunakan aplikasi Augmented Reality ini. Berikut ini adalah
rancangan tampilannya :
LABEL
Gambar 3.6 Rancangan Tampilan Menu Help
3.3.6
Rancangan Tampilan About
Tampilan ini merupakan halaman yang akan muncul apabila pengguna
memilih menu about. Pada halaman ini, pengguna dapat mengetahui dan melihat
pengembang atau pembuat aplikasi Augmented Reality ini. Berikut ini adalah
rancangan tampilannya :
LABEL
23
Gambar 3.7 Rancangan Tampilan Menu About
3.4
Pembuatan Objek Augmented Reality
Pada pembuatan objek 3D Augmented Reality informasi kamar hotel ini
kita membutuhkan 5 objek yang digunakan. Objek yang dibutuhkan adalah
bangunan hotel, Double Room, Standard Room, Superior Room, dan Deluxe
Room. Objek 3D ini dibuat dengan menggunakan software pendukung Blender
2.64.
3.4.1
Pembuatan Objek 3D
Untuk membuat objek 3D bangunan hotel dan kamar di Blender, ada
beberapa langkah yang harus dilakukan, yaitu :
1. Pertama-tama membuka program aplikasi Blender 2.64. Dengan cara
mengklik double icon Blender seperti ini
atau dengan cara mengklik start
>> All programs >> Blender. Kemudian akan tampak tampilan awal program
seperti gambar dibawah ini.
Gambar 3.8 Tampilan Awal Program Blender 2.64
24
2. Object yang akan dibuat adalah bangunan hotel dan kamar. Untuk
membuatnya klik object cube yang ada pada tampilan program. Kemudian
edit object tersebut sesuai dengan bentuk yang diinginkan. Setelah itu beri
warna dengan texture atau material.
Gambar 3.9 Edit pada Object
3. Setelah itu tambahkan kamera dan lampu agar objek dapat terlihat dan di
render. Hasil salah satu pengeditan objek.
Gambar 3.10 Hasil
4. Kini simpan object tersebut dengan export menjadi format .fbx. Caranya, klik
File – Export – Pilidah .fbx. Format inilah yang nantinya akan diimport
kedalam Unity 3D.
5. Buatlah ketiga object kamar yang lain yang lain dan 1 bangunan hotel dengan
langkah-langkah yang sama seperti sebelumnya. Untuk membuat object yang
lain, klik Add – Mesh – lalu pilih object yang ingin dibuat.
3.5
Pembuatan Marker
Marker adalah suatu penanda yang membuat objek 3D tampil pada
tampilan kertas di layar handphone. Untuk membuat marker dapat menggunakan
aplikasi Paint yang telah tersedia pada Microsoft atau dengan menggunakan
25
Adobe Photoshop. Apabila kita ingin membuat dengan aplikasi tersebut maka kita
dapat menggunakan gambar yang ada.
Setelah pembuatan marker ini selesai, agar marker dapat dikenali oleh
aplikasi Augmented Realitynya, langkah selanjutnya adalah mengupload marker
yang telah dibuat. Agar marker ini dapat dikenali, paling tidak harus memiliki satu
bintang.
Berikut ini adalah langkah-langkahnya :
1. 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.
Gambar 3.11 Homepage Vuforia Developer
2. Selanjutnya Anda dapat mengklik Target Manager untuk management Image
Target atau marker Anda.
Gambar 3.12 My Account
3. Selanjutnya akan muncul seperti pada gambar di bawah. Klik ‘Create
database’.
26
Gambar 3.13 Target Manager
4. Kemudian beri nama database baru Anda dan klik ‘Create’.
Gambar 3.14 Create Database
5. 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.15 Database AR
27
6. Klik ‘Add Target’ untuk menambah marker.
Gambar 3.16 Add target
7. Kemudian Anda akan diberi sebuah form untuk mengupload marker Anda.
Isikan form sesuai kebutuhan Anda dan upload di Marker Anda. Tunggulah
dengan sabar, proses upload mungkin akan memakan waktu lama tergantung
koneksi Anda.
Gambar 3.17 Add New target
8. Setelah proses upload akan ditampilkan marker apa saja yang Anda punyai,
silahkan centang mana saja yang akan anda gunakan, kemudian klik
‘Download Selected targets’.
28
Gambar 3.18 Download Selected Targets 1
9. Ketika download Anda akan diberikan pilihan untuk target apa marker Anda.
Pilihlah ‘Unity Editor’ karena Anda menggunakan unity untuk membuat
project AR. Kemudian downloadlah file marker Anda dalam bentuk
.unitypackage yang siap diimport ke unity.
Gambar 3.19Download Selected Targets 2
10. Berikut adalah hasil download Anda. Double klik untuk mengimport ke dalam
Unity.
Gambar 3.20 Hasil Download
29
11. Centang semua file yang akan diimport dan klik ‘import’.
Gambar 3.21 Importing to Unity
12. Jika proses telah selesai maka proses import Anda telah berhasil.
13. Lakukan hal yang sama untuk meng-upload keempat marker lainnya. Berikut
ini adalah kelima marker yang digunakan dalam Aplikasi Bangun Ruang :
Gambar 3.22 Marker Hotel
3.6
Pembuatan Program
Pada bagian ini, penulis akan membahas bagaimana cara membuat aplikasi
Augmented Reality dengan menggunakan tool Unity 3D.
3.6.1
Membuat Project Android Baru
30
Sebelum membuat aplikasi Augmented Reality ini, terlebih dahulu kita
harus melakukan instalasi software-software pendukungnya seperti Android SDK,
plugin Android dan Unity 3D. Berikut ini adalah cara pembuatan projek pada
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.
Gambar 3.23 Unity 4.1.2
2. Hal pertama yang perlu dilakukan adalah import Vuforia SDK ke project
Android. Klik Assets –> Import package –> Custom package.
Gambar 3.24 Tampilan Unity3D – Import Package
3. Kemudian cari dimana tempat menginstall Vuforia SDK. Kemudian klik
‘Open’
31
Gambar 3.25 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.26 Import Vuforia Package kedalam Unity
5. Lihat di bagian window project di unity Anda. Anda akan melihat Vuforia
SDK yang telah terimport.
32
Gambar 3.27 Windows Project
6. Pada Assets buatlah folder model dan resources, yang mana folder model
tempat mengimport objek 3D dan folder resources untuk gambar untuk
background atau button. 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.28 Drag Image Target kedalam Hierarchy
33
7. Lakukan konfigurasi pada Multi Target
Gambar 3.29 Inspector Setting untuk Multi Target
8. Selanjutnya drag and drop juga prefab ARCamera.
Gambar 3.30 Drag AR Camera kedalam Hierarchy
9. Lakukan konfigurasi pada ARCamera
34
Gambar 3.31 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.
11. Kemudian buat scene baru di file>new scene. Lalu masukkan AR camera,
Image target, dan directional light pada game object>create other> directional
light dengan sistem drag and drop. Setelah masukkan atau drag objek
kedalam Image target
Gambar 3.32 Objek 3D
35
12. Lakukan beberapa konfigurasi pada object tersebut. Klik file .fbx pada
Windows Project, pada Inspector Setting, pilih Tab Model terlebih dahulu.
Gambar 3.33 Inspector Setting untuk Animasi.fbx – Tab Model
13. Setelah melakukan konfigurasi pada tab Model, kini lakukan konfigurasi pada
tab Rig.
Gambar 3.34 Inspector Setting untuk Animasi.fbx – Tab Rig
14. Setelah semua konfigurasi telah dilakukan. Kini, Drag file .fbx nya kedalam
Scene. Lalu atur Scale dan Rotatenya agar terlihat pas.
36
Gambar 3.35 Inspector Setting
15. Selanjutnya save scene tersebut tetapi simpan kedalam folder scene didalam
workspace yang telah dibuat sebelumnya. Kemudian buat lagi beberapa scene
sejumlah objek yang ingin ditampilkan, setelah semua dibuat selanjutnya buat
satu scene untuk pembuatan menu utama atau tampilan awal dari program
nantinya. Untuk membuatnya pilih menuscreen biasa lalu klik dua kali di
script pada panel sebelah kanan.
3.7
Penulisan Source Code (Script)
Penulisan source code pada pembuatan aplikasi dengan Augmented
Reality ini, penulis menggunakan script C# (dibaca : C sharp). Dimana script C#
itu digunakan untuk pembuatan menu dan button
yang digunakan nantinya,
seperti : Start, pilihan kamar, Help, About dan Exit.
Gambar 3.36 Pembuatan menu
37
Gambar 3.37 Pembuatan button
3.8
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.38 Build Settings
38
2. Selanjutnya drag drop scene yang telah disimpan kedalam form Build Setting
tadi, hal ini untuk menyatakan bahwa scene yang telah dibuat tersebut akan
dicompile dan dikemas dalam file .apk yang siap diinstall.
Gambar 3.39 Drag Scene kedalam 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.40 Player Settings 1
39
Gambar 3.41 Player Settings 2
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 and run’. 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.42 Hotel
40
.
Gambar 3.43 Double Room
Gambar 3.44 Standard Room
Gambar 3.45Superior Room
Gambar 3.46 Deluxe Room
41
Demikian hasil dari penulisan ilmiah mengenai Pembuatan Aplikasi
Augmented Reality Informasi Kamar Hotel Menggunakan Unity Berbasis
Android.
3.9
Penginstallan Aplikasi
Apabila pengguna ingin menggunakan aplikasi ini, mereka dapat
melakukan instalasi ke dalam handphone dengan cara sebagai berikut :
1. Menginstal file .apk yang telah disediakan oleh pembuat aplikasi.
2. Tunggu sampai proses instalasi selesai.
3. Apabila aplikasi berhasil di instal hal tersebut menunjukkan bahwa,
handphone yang digunakan mendukung aplikasi AR, akan tetapi bila aplikasi
gagal di instal, hal tersebut menunjukkan bahwa handphone yang digunakan
tidak mendukung aplikasi Augmented Reality yang telah di buat oleh pembuat
aplikasi.
3.10
Rancangan Tampilan Buku Augmented Reality
Rancangan tampilan buku AR ini adalah rancangan tampilan buku yang
didalamnya terdapat marker dan penjelasan mengenai Alat Musik Tradisional DKI
Jakarta, yang nantinya buku tersebut akan diberi judul “Marker Augmented
Reality Alat Musik Tradisional DKI Jakarta Berbasis Android”. Berikut ini adalah
rancangan tampilannya :
JUDUL
FASILITAS
MARKER
Gambar 3.47 Rancangan Tampilan Buku Augmented Reality
42
Penjelasan rancangan tampilan buku Augmented Reality adalah sebagai berikut :
1. Judul
Yaitu, nama jenis kamar yang nantinya akan ditampilkan.
2. Marker / Gambar
Yaitu, tempat dimana nantinya Augmented Reality objek 3D jenis kamar dan
bangunan hotel akan muncul.
3. Fasilitas
Yaitu, penjelasan mengenai fasilitas kamar yang ditampilkan.
3.11
Spesifikasi Hardware Dan Software Yang Digunakan
Spesifikasi hardware dan software ini merupakan spesifikasi yang
digunakan oleh pembuat aplikasi dengan menggunakan leptop. Berikut ini adalah
spesifikasi pembuatan program aplikasi Augmented Reality :
1. Hardware
1. Intel ®
i3 CPU 3217U, 1.6 Ghz (
2. 4 GB RAM
3. 500 GB Hardisk
2. Software
1. Microsoft Windows 8
2. JDK (Java Development Kit)
3. Android SDK
4. Plugin ADT
5. Blender 2.64
6. Unity versi 4.1.2
3.12
Spesifikasi Handphone
Untuk dapat menjalankan aplikasi AR ini membutuhkan spesifikasi khusus
minimal yang terdapat pada handphone Android, spesifikasi tersebut diantaranya:
OS Android Versi
: 2.2 (froyo)
CPU
: 800 Mhz
Hardware
: ARMv7
RAM
: 512 MB
Network
: 3G HSPDA/HSUPA
Kamera
: Minimal 3 Mega Pixel,
Auto Focus (optional),
Flash (optional)
43
Ada beberapa jenis handphone yang dapat digunakan pada aplikasi
Augmented Reality. Dapat dilihat dalam suatu daftar handphone tersebut pada
lampiran devices yang bersumber dari http:\\www.unity3d.
3.12.1 Jenis Handphone Yang Digunakan
Berikut ini adalah daftar handphone yang telah digunakan oleh pembuat,
dalam uji coba aplikasi Augmented Reality ini.
1. LG Nexus 4
2. SAMSUNG TAB.2
BAB III
PERANCANGAN DAN IMPLEMENTASI
Pada bab ini penulis akan menjelaskan proses perancangan Augmented
Reality. Dalam proses perancangannya kita memerlukan beberapa tahapannya
diantaranya : rancangan aplikasi kamar hotel berbasis Android, flowchart
program, membuat marker, dan membuat program.
Objek yang akan ditampilkan pada aplikasi ini adalah objek 3D bangunan
hotel dan 4 kamar yang terdiri dari Double Room, Standard Room, Superior
Room, dan Deluxe Room.
3.1
Perancangan Aplikasi
Dalam penulisan ilmiah ini, penulis mencoba untuk merancang aplikasi
Augmented Reality atau AR yaitu sebuah aplikasi yang bisa menampilkan objek
3D bangunan hotel dan 4 kamar dengan menggunakan mobile phone Android.
Dimana aplikasi ini diharapkan agar penggunanya dapat membayangkan
bagaimana bentuk kamar dan fasilitas dari kamar tersebut.
Aplikasi ini dapat menampilkan beberapa objek 3D. Bangunan hotel dan
kamar tersebut dapat ditampilkan secara acak sesuai dengan keinginan
penggunanya dengan menggunakan sebuah marker yang nanti akan disediakan
oleh penulis dalam bentuk buku sebagai media pendukung.
Hal yang pertama kali dilakukan adalah membuat objek 3D yang
dibutuhkan dengan menggunakan Blender 2.64 serta menyiapkan tool pendukung
untuk Augmented Reality, dan pembuatan buku sebagai alat peraga aplikasi
Augmented Reality nantinya. Kemudian penulis melakukan pengumpulan data,
baik berupa gambar, penjelasan, artikel, maupun jurnal dari internet yang
berkaitan dengan aplikasi AR. Aplikasi ini dibuat dengan menggunakan bahasa
pemrograman C# (dibaca : C Sharp) untuk Augmented Reality atau AR.
18
3.2
Struktur Navigasi
Struktur Navigasi dapat dikatakan sebagai penggambar dari hubungan atau
rantai kerja dari seluruh element yang akan digunakan dalam aplikasi. Dalam
pembuatan aplikasi ini struktur navigasi yang di gunakan adalah Struktur Navigasi
Composite :
Mulai
Mencari
Markers
Pilih Kamar
No
Start
Menampilkan
Help
Identifikasi
Marker
Yes
Menampilkan
About
Posisi dan arah
objek
Rendering Objek
Tampilan Objek
3D
Exit
Yes
End
Gambar 3.1 Struktur Navigasi AR
No
19
3.3
Rancangan Tampilan
Perancangan tampilan aplikasi ini sangat dibutuhkan, karena dengan
membuat rancangan tampilan ini, pembuat aplikasi tidak akan mengalami
kesulitan untuk membuat desain interface dari suatu aplikasi yang dibuatnya.
Pada tahapan ini terdiri dari dua rancangan tampilan yaitu, perancangan marker,
dan perancangan tampilan aplikasi Augmented Reality bangunan hotel dan kamar.
3.3.1
Rancangan Marker
Dalam pembuatan marker informasi kamar hotel ini penulis membuat
sebuah buku untuk mendukung dalam pengujian aplikasi Augmented pemesanan
kamar hotel. Aplikasi ini diharapkan dapat menarik perhatian penggunanya dalam
proses pemesanan kamar hotel. Marker (penanda khusus) disatukan dalam sebuah
buku, sehingga pengguna dapat langsung melihat tampilan objek 3D Augmented
Reality aplikasi pemesanan kamar hotel, dan tiap marker akan menampilkan
masing-masing objek yang terdapat pada buku tersebut.
LABEL
atau
GAMBAR
Gambar 3.2 Rancangan Tampilan Marker
3.3.2
Rancangan Tampilan Augmented Reality
Setelah pengguna melihat halaman awal splash screen, selanjutnya akan
masuk kedalam menu utama, dimana disini tampilan Augmented Reality akan
muncul. Pengguna sudah bisa untuk menggunakan aplikasi ini dengan
menyorotkan kamera pada handphone ke marker yang sudah disediakan. Berikut
ini adalah rancangan tampilannya :
20
AUGMENTED
REALITY
Gambar 3.3 Rancangan Tampilan Augmented Reality
Penjelasan rancangan tampilan augmented reality tersebut adalah sebagai berikut :
1.
Augmented Reality
Yaitu objek 3D bangunan hotel dan kamar yang akan muncul apabila
kamera pada handphone disorotkan pada marker.
3.3.3
Rancangan Tampilan Menu 1
Rancangan tampilan menu aplikasi ini merupakan rancangan tampilan
yang terdapat pada menu utama, Ada beberapa macam menu yang dapat
digunakan oleh pengguna pada tampilan tersebut. Berikut ini adalah rancangan
tampilannya :
START
HELP
ABOUT
EXIT
Gambar 3.4 Rancangan Tampilan Menu 1 Augmented Reality
21
Penjelasan rancangan tampilan menu aplikasi Augmented Reality adalah sebagai
berikut :
1. Start
Yaitu tampilan objek 3D Augmented Reality bangunan hotel dan kamar.
2. Help
Yaitu menu bantuan cara menggunakan aplikasi AR ini.
3. About
Yaitu keterangan tentang pengembang atau pembuat.
4. Exit
Yaitu menu untuk keluar dari aplikasi AR ini.
3.3.4
Rancangan Tampilan Menu 2
Rancangan tampilan menu aplikasi ini merupakan rancangan tampilan
yang terdapat pada menu Start, Ada beberapa macam
menu yang dapat
digunakan oleh pengguna pada tampilan tersebut. Berikut ini adalah rancangan
tampilannya :
KAMAR 1
KAMAR 2
KAMAR 3
KAMAR 4
HOTEL
Gambar 3.5 Rancangan Tampilan Menu 2 Start Augmented Reality
Penjelasan rancangan tampilan menu Start aplikasi Augmented Reality adalah
sebagai berikut :
1. Kamar 1
Yaitu tampilan objek 3D Augmented Reality kamar 1.
2. Kamar 2
Yaitu tampilan objek 3D Augmented Reality kamar 2.
22
3. Kamar 3
Yaitu tampilan objek 3D Augmented Reality kamar 3.
4. Kamar 4
Yaitu tampilan objek 3D Augmented Reality kamar 4.
5. Hotel
Yaitu tampilan objek 3D Augmented Reality bangunan hotel.
3.3.5
Rancangan Tampilan Help
Tampilan ini merupakan halaman yang akan muncul apabila pengguna
memilih menu help. Pada halaman ini, pengguna dapat mengetahui dan melihat
tata cara menggunakan aplikasi Augmented Reality ini. Berikut ini adalah
rancangan tampilannya :
LABEL
Gambar 3.6 Rancangan Tampilan Menu Help
3.3.6
Rancangan Tampilan About
Tampilan ini merupakan halaman yang akan muncul apabila pengguna
memilih menu about. Pada halaman ini, pengguna dapat mengetahui dan melihat
pengembang atau pembuat aplikasi Augmented Reality ini. Berikut ini adalah
rancangan tampilannya :
LABEL
23
Gambar 3.7 Rancangan Tampilan Menu About
3.4
Pembuatan Objek Augmented Reality
Pada pembuatan objek 3D Augmented Reality informasi kamar hotel ini
kita membutuhkan 5 objek yang digunakan. Objek yang dibutuhkan adalah
bangunan hotel, Double Room, Standard Room, Superior Room, dan Deluxe
Room. Objek 3D ini dibuat dengan menggunakan software pendukung Blender
2.64.
3.4.1
Pembuatan Objek 3D
Untuk membuat objek 3D bangunan hotel dan kamar di Blender, ada
beberapa langkah yang harus dilakukan, yaitu :
1. Pertama-tama membuka program aplikasi Blender 2.64. Dengan cara
mengklik double icon Blender seperti ini
atau dengan cara mengklik start
>> All programs >> Blender. Kemudian akan tampak tampilan awal program
seperti gambar dibawah ini.
Gambar 3.8 Tampilan Awal Program Blender 2.64
24
2. Object yang akan dibuat adalah bangunan hotel dan kamar. Untuk
membuatnya klik object cube yang ada pada tampilan program. Kemudian
edit object tersebut sesuai dengan bentuk yang diinginkan. Setelah itu beri
warna dengan texture atau material.
Gambar 3.9 Edit pada Object
3. Setelah itu tambahkan kamera dan lampu agar objek dapat terlihat dan di
render. Hasil salah satu pengeditan objek.
Gambar 3.10 Hasil
4. Kini simpan object tersebut dengan export menjadi format .fbx. Caranya, klik
File – Export – Pilidah .fbx. Format inilah yang nantinya akan diimport
kedalam Unity 3D.
5. Buatlah ketiga object kamar yang lain yang lain dan 1 bangunan hotel dengan
langkah-langkah yang sama seperti sebelumnya. Untuk membuat object yang
lain, klik Add – Mesh – lalu pilih object yang ingin dibuat.
3.5
Pembuatan Marker
Marker adalah suatu penanda yang membuat objek 3D tampil pada
tampilan kertas di layar handphone. Untuk membuat marker dapat menggunakan
aplikasi Paint yang telah tersedia pada Microsoft atau dengan menggunakan
25
Adobe Photoshop. Apabila kita ingin membuat dengan aplikasi tersebut maka kita
dapat menggunakan gambar yang ada.
Setelah pembuatan marker ini selesai, agar marker dapat dikenali oleh
aplikasi Augmented Realitynya, langkah selanjutnya adalah mengupload marker
yang telah dibuat. Agar marker ini dapat dikenali, paling tidak harus memiliki satu
bintang.
Berikut ini adalah langkah-langkahnya :
1. 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.
Gambar 3.11 Homepage Vuforia Developer
2. Selanjutnya Anda dapat mengklik Target Manager untuk management Image
Target atau marker Anda.
Gambar 3.12 My Account
3. Selanjutnya akan muncul seperti pada gambar di bawah. Klik ‘Create
database’.
26
Gambar 3.13 Target Manager
4. Kemudian beri nama database baru Anda dan klik ‘Create’.
Gambar 3.14 Create Database
5. 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.15 Database AR
27
6. Klik ‘Add Target’ untuk menambah marker.
Gambar 3.16 Add target
7. Kemudian Anda akan diberi sebuah form untuk mengupload marker Anda.
Isikan form sesuai kebutuhan Anda dan upload di Marker Anda. Tunggulah
dengan sabar, proses upload mungkin akan memakan waktu lama tergantung
koneksi Anda.
Gambar 3.17 Add New target
8. Setelah proses upload akan ditampilkan marker apa saja yang Anda punyai,
silahkan centang mana saja yang akan anda gunakan, kemudian klik
‘Download Selected targets’.
28
Gambar 3.18 Download Selected Targets 1
9. Ketika download Anda akan diberikan pilihan untuk target apa marker Anda.
Pilihlah ‘Unity Editor’ karena Anda menggunakan unity untuk membuat
project AR. Kemudian downloadlah file marker Anda dalam bentuk
.unitypackage yang siap diimport ke unity.
Gambar 3.19Download Selected Targets 2
10. Berikut adalah hasil download Anda. Double klik untuk mengimport ke dalam
Unity.
Gambar 3.20 Hasil Download
29
11. Centang semua file yang akan diimport dan klik ‘import’.
Gambar 3.21 Importing to Unity
12. Jika proses telah selesai maka proses import Anda telah berhasil.
13. Lakukan hal yang sama untuk meng-upload keempat marker lainnya. Berikut
ini adalah kelima marker yang digunakan dalam Aplikasi Bangun Ruang :
Gambar 3.22 Marker Hotel
3.6
Pembuatan Program
Pada bagian ini, penulis akan membahas bagaimana cara membuat aplikasi
Augmented Reality dengan menggunakan tool Unity 3D.
3.6.1
Membuat Project Android Baru
30
Sebelum membuat aplikasi Augmented Reality ini, terlebih dahulu kita
harus melakukan instalasi software-software pendukungnya seperti Android SDK,
plugin Android dan Unity 3D. Berikut ini adalah cara pembuatan projek pada
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.
Gambar 3.23 Unity 4.1.2
2. Hal pertama yang perlu dilakukan adalah import Vuforia SDK ke project
Android. Klik Assets –> Import package –> Custom package.
Gambar 3.24 Tampilan Unity3D – Import Package
3. Kemudian cari dimana tempat menginstall Vuforia SDK. Kemudian klik
‘Open’
31
Gambar 3.25 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.26 Import Vuforia Package kedalam Unity
5. Lihat di bagian window project di unity Anda. Anda akan melihat Vuforia
SDK yang telah terimport.
32
Gambar 3.27 Windows Project
6. Pada Assets buatlah folder model dan resources, yang mana folder model
tempat mengimport objek 3D dan folder resources untuk gambar untuk
background atau button. 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.28 Drag Image Target kedalam Hierarchy
33
7. Lakukan konfigurasi pada Multi Target
Gambar 3.29 Inspector Setting untuk Multi Target
8. Selanjutnya drag and drop juga prefab ARCamera.
Gambar 3.30 Drag AR Camera kedalam Hierarchy
9. Lakukan konfigurasi pada ARCamera
34
Gambar 3.31 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.
11. Kemudian buat scene baru di file>new scene. Lalu masukkan AR camera,
Image target, dan directional light pada game object>create other> directional
light dengan sistem drag and drop. Setelah masukkan atau drag objek
kedalam Image target
Gambar 3.32 Objek 3D
35
12. Lakukan beberapa konfigurasi pada object tersebut. Klik file .fbx pada
Windows Project, pada Inspector Setting, pilih Tab Model terlebih dahulu.
Gambar 3.33 Inspector Setting untuk Animasi.fbx – Tab Model
13. Setelah melakukan konfigurasi pada tab Model, kini lakukan konfigurasi pada
tab Rig.
Gambar 3.34 Inspector Setting untuk Animasi.fbx – Tab Rig
14. Setelah semua konfigurasi telah dilakukan. Kini, Drag file .fbx nya kedalam
Scene. Lalu atur Scale dan Rotatenya agar terlihat pas.
36
Gambar 3.35 Inspector Setting
15. Selanjutnya save scene tersebut tetapi simpan kedalam folder scene didalam
workspace yang telah dibuat sebelumnya. Kemudian buat lagi beberapa scene
sejumlah objek yang ingin ditampilkan, setelah semua dibuat selanjutnya buat
satu scene untuk pembuatan menu utama atau tampilan awal dari program
nantinya. Untuk membuatnya pilih menuscreen biasa lalu klik dua kali di
script pada panel sebelah kanan.
3.7
Penulisan Source Code (Script)
Penulisan source code pada pembuatan aplikasi dengan Augmented
Reality ini, penulis menggunakan script C# (dibaca : C sharp). Dimana script C#
itu digunakan untuk pembuatan menu dan button
yang digunakan nantinya,
seperti : Start, pilihan kamar, Help, About dan Exit.
Gambar 3.36 Pembuatan menu
37
Gambar 3.37 Pembuatan button
3.8
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.38 Build Settings
38
2. Selanjutnya drag drop scene yang telah disimpan kedalam form Build Setting
tadi, hal ini untuk menyatakan bahwa scene yang telah dibuat tersebut akan
dicompile dan dikemas dalam file .apk yang siap diinstall.
Gambar 3.39 Drag Scene kedalam 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.40 Player Settings 1
39
Gambar 3.41 Player Settings 2
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 and run’. 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.42 Hotel
40
.
Gambar 3.43 Double Room
Gambar 3.44 Standard Room
Gambar 3.45Superior Room
Gambar 3.46 Deluxe Room
41
Demikian hasil dari penulisan ilmiah mengenai Pembuatan Aplikasi
Augmented Reality Informasi Kamar Hotel Menggunakan Unity Berbasis
Android.
3.9
Penginstallan Aplikasi
Apabila pengguna ingin menggunakan aplikasi ini, mereka dapat
melakukan instalasi ke dalam handphone dengan cara sebagai berikut :
1. Menginstal file .apk yang telah disediakan oleh pembuat aplikasi.
2. Tunggu sampai proses instalasi selesai.
3. Apabila aplikasi berhasil di instal hal tersebut menunjukkan bahwa,
handphone yang digunakan mendukung aplikasi AR, akan tetapi bila aplikasi
gagal di instal, hal tersebut menunjukkan bahwa handphone yang digunakan
tidak mendukung aplikasi Augmented Reality yang telah di buat oleh pembuat
aplikasi.
3.10
Rancangan Tampilan Buku Augmented Reality
Rancangan tampilan buku AR ini adalah rancangan tampilan buku yang
didalamnya terdapat marker dan penjelasan mengenai Alat Musik Tradisional DKI
Jakarta, yang nantinya buku tersebut akan diberi judul “Marker Augmented
Reality Alat Musik Tradisional DKI Jakarta Berbasis Android”. Berikut ini adalah
rancangan tampilannya :
JUDUL
FASILITAS
MARKER
Gambar 3.47 Rancangan Tampilan Buku Augmented Reality
42
Penjelasan rancangan tampilan buku Augmented Reality adalah sebagai berikut :
1. Judul
Yaitu, nama jenis kamar yang nantinya akan ditampilkan.
2. Marker / Gambar
Yaitu, tempat dimana nantinya Augmented Reality objek 3D jenis kamar dan
bangunan hotel akan muncul.
3. Fasilitas
Yaitu, penjelasan mengenai fasilitas kamar yang ditampilkan.
3.11
Spesifikasi Hardware Dan Software Yang Digunakan
Spesifikasi hardware dan software ini merupakan spesifikasi yang
digunakan oleh pembuat aplikasi dengan menggunakan leptop. Berikut ini adalah
spesifikasi pembuatan program aplikasi Augmented Reality :
1. Hardware
1. Intel ®
i3 CPU 3217U, 1.6 Ghz (
2. 4 GB RAM
3. 500 GB Hardisk
2. Software
1. Microsoft Windows 8
2. JDK (Java Development Kit)
3. Android SDK
4. Plugin ADT
5. Blender 2.64
6. Unity versi 4.1.2
3.12
Spesifikasi Handphone
Untuk dapat menjalankan aplikasi AR ini membutuhkan spesifikasi khusus
minimal yang terdapat pada handphone Android, spesifikasi tersebut diantaranya:
OS Android Versi
: 2.2 (froyo)
CPU
: 800 Mhz
Hardware
: ARMv7
RAM
: 512 MB
Network
: 3G HSPDA/HSUPA
Kamera
: Minimal 3 Mega Pixel,
Auto Focus (optional),
Flash (optional)
43
Ada beberapa jenis handphone yang dapat digunakan pada aplikasi
Augmented Reality. Dapat dilihat dalam suatu daftar handphone tersebut pada
lampiran devices yang bersumber dari http:\\www.unity3d.
3.12.1 Jenis Handphone Yang Digunakan
Berikut ini adalah daftar handphone yang telah digunakan oleh pembuat,
dalam uji coba aplikasi Augmented Reality ini.
1. LG Nexus 4
2. SAMSUNG TAB.2