implementasi multi marker augmented reality pada aplikasi...

161
Implementasi Multi Marker Augmented Reality pada Aplikasi Pengenalan Hewan untuk Pendidikan Anak Usia Dini TUGAS AKHIR Disusun dalam rangka memenuhi salah satu persyaratan Untuk menyelesaikan program Strata-1 Prodi Informatika Jurusan Elektro Universitas Hasanuddin Makassar Disusun Oleh : MUHAMMAD FAISAL BURHANUDDIN D421 13 314 PROGRAM STUDI TEKNIK INFORMATIKA JURUSAN ELEKTRO FAKULTAS TEKNIK UNIVERSITAS HASANUDDIN MAKASSAR 2018

Upload: others

Post on 04-Dec-2020

12 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

Implementasi Multi Marker Augmented Reality pada Aplikasi Pengenalan Hewan untuk

Pendidikan Anak Usia Dini

TUGAS AKHIR

Disusun dalam rangka memenuhi salah satu persyaratan

Untuk menyelesaikan program Strata-1 Prodi Informatika Jurusan Elektro

Universitas Hasanuddin

Makassar

Disusun Oleh :

MUHAMMAD FAISAL BURHANUDDIN D421 13 314

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN ELEKTRO FAKULTAS TEKNIK

UNIVERSITAS HASANUDDIN

MAKASSAR

2018

Page 2: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

ii

HALAMAN PENGESAHAN

Implementasi Multi Marker Augmented Reality pada Aplikasi

Pengenalan Hewan untuk Pendidikan Anak Usia Dini

Disusun Oleh:

MUHAMMAD FAISAL BURHANUDDIN D421 13 314

Skripsi ini telah dipertahankan pada Ujian Akhir Sarjana tanggal 07 Maret 2018

Diterima dan disahkan sebagai salah satu syarat memperoleh gelar Sarjana Teknik

pada Program Studi S1 Teknik Informatika Departemen Teknik Informatika

Fakultas Teknik Universitas Hasanuddin.

Makassar, 07 Maret 2018

Pembimbing I,

Prof. Dr. Ir. Andani Achmad, M.T. Nip. 19601231 198703 1 022

Pembimbing II,

___Elly Warni, S.T., M.T.___ Nip. 19800216 200812 2 001

Diterima dan disahkan oleh: Ketua Program Studi S1 Teknik Informatika

Departemen Teknik Informatika

Dr. Amil Ahmad Ilham, S.T., M.IT Nip. 19731010 199802 1 001

Page 3: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

iii

ABSTRAK

Salah satu masalah penerapan pembelajaran Pendidikan Anak Usia Dini (PAUD) adalah pembelajaran yang seharusnya 80 persen membangun sikap, saat ini justru fokus pada pembelajaran baca-tulis-hitung (calistung) yang bernuansa akademik. Saat ini anak yang berusia kurang dari lima tahun juga lebih menyukai bermain dengan teknologi baru seperti handphone maupun tablet. Masalah yang timbul saat menggunakan gadget, anak rentan terserang masalah kesehatan mata yang disebabkan menatap layar ponsel terlalu lama. Salah satu saran penggunaan gadget untuk anak agar mata tetap sehat yaitu dengan melakukan selingan penglihatan, misalnya 20 menit menatap layar gadget, 20 detik beristirahat melihat objek diluar layar. Sehingga penulis merasa perlu dirancang aplikasi yang mendukung pembelajaran PAUD yang memiliki fokus selain calistung pada perangkat smartphone dan mengajak anak untuk sesekali melihat keluar layar. Salah satu solusi yaitu dengan memanfaatkan teknologi augmented reality dimana penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker. Dengan mengimplementasikan fitur multi marker, setiap marker dapat dikombinasikan untuk menampilkan objek yang baru. Adapun karakter yang akan digunakan yaitu karakter 2D hewan dalam wujud kartun yang lucu sehingga dapat menarik minat anak usia dini. Diharapkan aplikasi ini dapat digunakan sebagai salah satu media pembelajaran untuk anak usia dini.

Kata kunci : PAUD, multi marker, augmented reality, AR

Page 4: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

iv

KATA PENGANTAR

Segala puji dan syukur kami panjatkan ke hadirat Allah Tuhan Yang Maha

Esa atas limpahan rahmat, taufik, dan hidayah-Nya sehingga Tugas Akhir ini,

dengan judul “Implementasi Multi Marker Augmented Reality pada Aplikasi

Pengenalan Hewan untuk Pendidikan Anak Usia Dini” dapat diselesaikan dengan

baik. Tugas akhir ini dibuat sebagai salah satu syarat untuk memperoleh gelar

sarjana pada Program Strata Satu Teknik Informatika Jurusan Teknik Elektro

Fakultas Teknik Universitas Hasanuddin.

Kami menyadari bahwa dalam penyusunan tugas akhir ini telah banyak

mendapatkan sumbangan ilmu, pikiran serta bimbingan baik moral maupun materil

dari berbagai pihak. Dengan kesempatan ini kami menyampaikan ucapan terima

kasih yang sebesar-besarnya kepada:

1. Orang tua dan keluarga yang senantiasa memberikan doa, dukungan, dan

motivasi selama perancangan,pembuatan hingga penyelesaian tugas akhir

ini.

2. Bapak Prof. Dr. Ir. Andani Ahmad, M.T. selaku dosen pembimbing I dan

ibu Elly Warni, S.T., M.T. selaku dosen pembimbing II yang telah banyak

memberi bimbingan dan masukan terhadap perancangan aplikasi dan

penyusunan tugas akhir ini.

3. Bapak Amil Ahmad Ilham, ST., M.IT., Ph.D. selaku Ketua Prodi Teknik

Informatika Fakultas Teknik Universitas H asanuddin, atas segala

dukungannya.

4. Dosen dan staff Program Studi Teknik Informatika Fakultas Teknik

Universitas Hasanuddin.

5. Ibu Arma Wanah, S.Pd.I. yang merupakan guru di TK Aisyiyah Bustanul

Athfal Ranting Wiringpalennae, Wajo, atas ide dan masukannya dalam

perancangan aplikasi ini.

Page 5: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

v

6. Ibu Hasni, S.Pi. yang merupakan kepala sekolah di TK IT Smart School

Makassar, atas saran, arah pengembangan dan penyediaan fitur tambahan

yang menarik bagi anak-anak usia dini yang belajar di TK tersebut.

7. Teman-teman Mahasiswa Program Studi Teknik Informatika Angkatan

2013 Universitas Hasanuddin

8. Serta seluruh pihak yang tak sempat kami sebutkan satu persatu dengan

banyak meluangkan tenaga, waktu, dan pikiran selama penyusunan tugas

akhir ini.

Akhirnya dengan segala kerendahan hati, penyusun menyadari masih

terdapat kekurangan dalam penyusunan laporan skripsi ini baik isi maupun cara

penyajian. Oleh karena itu penyusun mengharapkan adanya saran dan kritik yang

bersifat membangun demi kesempurnaan laporan ini. Penyusun berharap semoga

laporan skripsi ini dapat memberikan manfaat bagi pembaca pada umumnya dan

manfaat bagi penulis khususnya.

Makassar, Februari 2018

Penyusun

Page 6: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

vi

DAFTAR ISI SAMPUL.................................................................................................................. i

HALAMAN PENGESAHAN ................................................................................. ii

ABSTRAK ............................................................................................................. iii

KATA PENGANTAR ........................................................................................... iv

DAFTAR GAMBAR ............................................................................................. ix

DAFTAR TABEL .................................................................................................. xi

BAB 1 - PENDAHULUAN .................................................................................... 1

I.1 Latar Belakang ............................................................................................... 1

I.2 Rumusan Masalah .......................................................................................... 3

I.3 Tujuan Penelitian ........................................................................................... 4

I.4 Manfaat Penelitian ......................................................................................... 4

I.5 Batasan Masalah............................................................................................. 5

I.6 Metode Penelitian........................................................................................... 5

I.7 Sistematika Penulisan..................................................................................... 6

BAB II - KAJIAN PUSTAKA ................................................................................ 8

II.1 Augmented Reality ....................................................................................... 8

II.2 Corel Draw .................................................................................................. 15

II.3 Adobe Photoshop ........................................................................................ 15

II.4 Unity 3D ..................................................................................................... 16

II.5 Sistem Operasi Android .............................................................................. 16

II.5.1 Pengertian ............................................................................................ 16

II.5.2 Fitur ..................................................................................................... 17

II.5.3 Aplikasi................................................................................................ 18

II.6 Penelitian Terkait ...................................................................................... 18

Page 7: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

vii

BAB III - METODOLOGI PENELITIAN ........................................................... 21

III.1 Kerangka Pikir ........................................................................................ 21

III.2 Metode Perancangan Sistem................................................................... 21

III.3 Rancangan Struktural ............................................................................. 23

III.4 Analisis Kebutuhan Sistem..................................................................... 29

III.4.1 Analisis dan Kebutuhan Aplikasi .................................................... 29

III.4.2 Analisis Kelayakan Sistem .............................................................. 30

III.5 Fitur Sistem ............................................................................................ 31

III.5.1 Menjalankan Aplikasi ..................................................................... 31

III.5.2 Mengakses Kamera AR................................................................... 32

III.6 Desain Aplikasi ...................................................................................... 33

III.6.1 Pembuatan Marker .......................................................................... 33

III.6.2 Upload Marker pada database Vuforia ........................................... 34

III.6.3 Pendataan Daftar Objek untuk Setiap Marker ................................ 35

III.6.4 Pembuatan Objek ............................................................................ 35

III.6.5 Perancangan Interface Aplikasi....................................................... 38

III.6.6 Pembuatan Kode / Script C# untuk kontrol multimarker................ 41

III.6.7 Perancangan halaman videokupu ..................................................... 50

III.7 Metode Pengujian.................................................................................. 52

BAB IV - HASIL DAN PEMBAHASAN ............................................................ 53

IV.1 Gambaran Umum Aplikasi...................................................................... 53

IV.2 Pengujian Sistem ..................................................................................... 53

IV.2.1 Pengujian Navigasi .......................................................................... 53

IV.2.2 Pengujian Kamera Perangkat ........................................................... 54

IV.2.3 Pengujian Marker ................................................................................. 58

Page 8: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

viii

IV.2.3.1 Pengujian Kombinasi Marker ....................................................... 62

IV.2.3.2 Pengujian Jarak Antar Marker ...................................................... 63

IV.2.3.3 Pengujian Posisi Antar Marker ..................................................... 66

IV.2.4 Pengujian spesifikasi perangkat Android......................................... 69

IV.3 Hasil Uji Kuesioner ................................................................................. 72

BAB V - PENUTUP ............................................................................................. 77

V.1 Kesimpulan ............................................................................................... 77

V.2 Saran ........................................................................................................... 77

DAFTAR PUSTAKA ........................................................................................... 79

LAMPIRAN .......................................................................................................... 82

Page 9: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

ix

DAFTAR GAMBAR

Gambar 2.1 simulator yang disebut sensorama dengan visual ............................... 8

Gambar 2.2 head-mounted display (HMD) ............................................................ 9

Gambar 2.3 Peragaan Videoplace ........................................................................... 9

Gambar 2.4 Contoh marker 2D yang digunakan untuk sistem tracking ............... 12

Gambar 2.5 Objek mobil 3D virtual yang muncul pada kamera .......................... 13

Gambar 2.6 Parameter pelacakan dan fitur pada marker ...................................... 14

Gambar 2.7 Arsitektur library QCAR SDK .......................................................... 15

Gambar 3.1 Kerangka Pikir................................................................................... 21

Gambar 3.2 Alur perancangan model waterfall .................................................... 22

Gambar 3-3 Flowchart pembuatan aplikasi PAUD Multimarker Pengenalan

Hewan ................................................................................................................... 24

Gambar 3.4 Struktur navigasi aplikasi .................................................................. 25

Gambar 3.5 Flowchart sistem ............................................................................... 26

Gambar 3.6 Flowchart proses deteksi marker pada Kamera AR .......................... 27

Gambar 3.7 Use-Case Diagram halaman utama ................................................... 31

Gambar 3.8 Pembuatan marker dengan aplikasi Corel Draw ............................... 34

Gambar 3.9 Gambar telah diupload pada database vuforia .................................. 34

Gambar 3.10 Pembuatan objek 2D dengan ekspresi berbeda untuk tiap marker.. 36

Gambar 3.11 Pembuatan objek 3D menggunakan aplikasi blender ..................... 36

Gambar 3.12 Pengeditan file material untuk pewarnaan objek 3D menggunakan

Adobe Photoshop .................................................................................................. 37

Gambar 3.13 Penambahan subtitle pada video ..................................................... 37

Gambar 3.14 Halaman Pembuka (Splash Screen) ................................................ 38

Gambar 3.15 Item 1 halaman Mainmenu .............................................................. 39

Gambar 3.16 Item 2 halaman mainmenu, Loading Screen ................................... 40

Gambar 3.17 kondisi deteksi 1 marker ................................................................. 44

Gambar 3.18 Tampilan Objek dan Marker pada aplikasi Unity 3D ..................... 48

Gambar 3.19 Halaman videokupu......................................................................... 50

Page 10: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

x

Gambar 4.1 Jarak terdekat kemiringan 10° ........................................................... 54

Gambar 4.2 Jarak terjauh kemiringan 10° ............................................................ 55

Gambar 4.3 Jarak terdekat kemiringan 45° ........................................................... 55

Gambar 4.4 Jarak terjauh kemiringan 45° ............................................................ 56

Gambar 4.5 kemiringan 80° .................................................................................. 56

Gambar 4.6 Marker berjauhan, jarak 19 cm ......................................................... 64

Gambar 4.7 Marker berjauhan, jarak < 19 cm ...................................................... 64

Gambar 4.8 Marker berdekatan, jarak 0 cm .......................................................... 64

Gambar 4.9 Marker Anjing disebelah kiri marker Kucing ................................... 66

Gambar 4.10 Marker Anjing disebelah kanan marker Kucing ............................. 67

Gambar 4.11 Urutan salah pada marker metamorfosis kupu-kupu....................... 67

Gambar 4.12 Urutan benar pada marker metamorfosis kupu-kupu, putar video .. 67

Gambar 4.13 Pengujian pada perangkat android halaman menu .......................... 71

Gambar 4.14 Pengujian pada perangkat android halaman AR Kamera................ 71

Page 11: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

xi

DAFTAR TABEL

Tabel 4.1 Pengujian navigasi aplikasi ................................................................... 53

Tabel 4.2 Hasil pengujian jarak dan kemiringan deteksi menggunakan marker

12x12 cm ............................................................................................................... 57

Tabel 4.3 Hasil pengujian jarak dan kemiringan deteksi menggunakan marker

7x7cm .................................................................................................................... 58

Tabel 4 4 Pengujian Kamera AR .......................................................................... 59

Tabel 4.5 Blackbox pengujian multimarker .......................................................... 62

Tabel 4.6 Pengujian jarak antar marker ................................................................ 65

Tabel 4.7 Pengujian posisi antar marker ............................................................... 68

Tabel 4.8 Hasil pengujian beberapa perangkat Android ....................................... 72

Tabel 4.9 Hasil kuesioner nomor 1 ....................................................................... 73

Tabel 4.10 Hasil kuesioner nomor 2 ..................................................................... 73

Tabel 4.11 Hasil kuesioner nomor 3 ..................................................................... 73

Tabel 4.12 Hasil kuesioner nomor 4 ..................................................................... 74

Tabel 4.13 Hasil kuesioner nomor 5 ..................................................................... 74

Tabel 4.14 Hasil kuesioner nomor 6 ..................................................................... 75

Tabel 4.15 Hasil kuesioner nomor 7 ..................................................................... 75

Tabel 4.16 Hasil kuesioner nomor 8 ..................................................................... 75

Page 12: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

1

BAB I

PENDAHULUAN

I.1 Latar Belakang

Pendidikan Anak Usia Dini, yang selanjutnya disingkat PAUD, mengalami

beragam masalah dalam penerapannya. Menurut Ketua Umum Himpunan Pendidik

PAUD Seluruh Indonesia (Himpaudi), Netti Herawati, setidaknya ada delapan

masalah yang dihadapi PAUD saat ini. Tiga diantaranya yaitu masih sepertiga anak

usia 3-6 tahun yang belum mendapat layanan PAUD, keterlibatan keluarga yang

belum sejalan bersama lembaga PAUD, dan pembelajaran PAUD yang seharusnya

80 persen membangun sikap, saat ini justru fokus pada pembelajaran baca-tulis-

hitung (calistung) yang bernuansa akademik[1].

Banyak orang tua yang telah mengizinkan anak-anak mereka bermain gadget

bahkan di usia mereka yang baru dua tahun. Bahkan saat ini anak-anak yang berusia

kurang dari lima tahun pun lebih menyukai bermain dengan teknologi baru seperti

playstation, game online, handphone, tablet ataupun ipad[2]. Berdasarkan situasi

tersebut, para pengembang aplikasi mencoba membuat aplikasi pembelajaran

PAUD dan mengedarkannya. Hal itu terbukti berdasarkan hasil pencarian kata

“PAUD” pada toko aplikasi Google Play, ditemukan beragam aplikasi dengan

jumlah yang banyak.

Pemanfaatan aplikasi tersebut pada pendidikan oleh orang tua terhadap anak

dapat memberi efek ganda. Selain memberi efek positif sebagai media belajar anak,

terdapat pula efek negatif dimana salah satunya disebabkan karena anak-anak lebih

rentan terserang masalah kesehatan mata yang disebabkan menatap layar ponsel

terlalu lama[3].

Hal ini diketahui dari penelitian di Korea Selatan, yang dipublikasikan melalui

jurnal kesehatan BC Opthalmology. Dalam penelitan tersebut ditemukan bahwa

anak yang menghabiskan lebih banyak waktunya untuk berinteraksi dengan

smartphone, lalu jarang melakukan aktivitas di luar ruangan, cenderung lebih

mudah terkena penyakit mata kering. Pasalnya, saat menatap layar smartphone,

Page 13: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

2

gadget, komputer atau sejenisnya, kedipan mata otomatis berkurang. Karena

kedipan tersebut berkurang, lapisan air mata jadi lebih mudah menguap dan rentan

membuat mata kering. Layar smartphone sendiri berukuran kecil, sehingga mesti

dilihat dalam jarak yang lebih dekat. Menurut peneliti, hal ini juga turut membuat

mata jadi lebih lelah[3].

Para peneliti di Korea Selatan menemukan simpulan tersebut setelah

melakukan penelitian pada 916 anak usia 7 hingga 12 tahun. Dari total tersebut,

sebanyak 66 anak atau 6,6 persen memenuhi kriteria penyakit mata kering. Sebagai

perbandingan, sebanyak 55 persen dari anak-anak itu diketahui tidak mengidap

gejala penyakit mata kering sama sekali. Sementara itu, dari total anak yang terlibat

dalam penelitian, 97 persen menyebutkan bahwa mereka memakai ponsel sekitar

3,2 jam sehari. Anak-anak yang diketahui tidak mengidap gejala penyakit mata

kering cenderung lebih jarang menatap layar ponsel, yakni hanya sekitar 37 menit

sehari[3].

Sebagaimana dilansir KompasTekno dari Wall Street Journal, Senin

(16/1/2017), penyakit mata kering ini berdampak negatif pada penglihatan

pengidapnya. Biasanya, penglihatan menjadi kurang baik, cenderung kabur, dan

mata terasa seperti gatal. Efek penyakit tersebut bisa berdampak lebih luas, yakni

pada menurunnya prestasi anak di sekolah. Karena itu, para peneliti menyarankan

untuk mengendalikan pemakaian gadget atau smartphone oleh anak agar

meminimalkan risikonya[3].

Sebagaimana dilansir Kompas.com dari Tabloid Nova, Sabtu (16/4/2016),

salah satu aturan penggunaan gadget untuk anak agar mata tetap sehat yaitu dengan

melakukan selingan penglihatan. Penggunaan gadget sebaiknya tidak dilakukan

dalam satu waktu. Maksudnya, setiap 30 menit menatap layar sebaiknya diselingi

dulu dengan aktivitas melihat jauh. Bisa juga diterapkan aturan 20-20, yaitu 20

menit menatap layar gadget, 20 detik beristirahat. Selain itu juga disarankan untuk

tidak membiasakan bermain gadget sambil tiduran[4].

Page 14: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

3

Salah satu cara yang bisa digunakan untuk membuat anak rutin mengalihkan

pandangannya dari layar gadget adalah dengan melibatkan objek fisik kedalam

aplikasi yang dimainkan, dengan menerapkan teknologi yang memungkinkan orang

untuk memvisualisasikan dunia maya sebagai bagian dari dunia nyata yang ada di

sekitar secara efektif sehingga membuat dunia nyata seakan-akan dapat terhubung

dengan dunia maya dan dapat terjadi suatu interaksi dikenal sebagai augmented

reality[5].

Berdasarkan situasi tersebut, penulis ingin merancang aplikasi yang

mendukung pembelajaran PAUD yang memiliki fokus selain calistung pada

perangkat smartphone, dimana penggunaannya dikombinasikan dengan media fisik

berupa kartu. Dengan memanfaatkan aplikasi tersebut, anak tetap dapat berinteraksi

dengan smartphone, mendapatkan layanan PAUD meskipun tanpa didampingi

orang tua dalam penggunaannya, serta rutin mengalihkan pandangannya dari layar

gadget karena keharusan mengombinasikan penggunaan kartu fisik dengan

smartphone. Untuk meningkatkan interaksi anak dengan objek fisik (marker) yang

digunakan, maka dapat digunakan lebih dari satu objek yang dibuat saling

berhubungan. Berdasarkan hal tersebut dan masalah yang dijabarkan, penulis

merasa perlu merancang aplikasi pembelajaran PAUD dengan

mengimplementasikan multi marker pada augmented reality, sehingga dipilihlah

judul “Implementasi Multi Marker Augmented Reality pada Aplikasi Pengenalan

Hewan untuk Pendidikan Anak Usia Dini”.

I.2 Rumusan Masalah

1. Bagaimana menyesuaikan muatan materi pembelajaran pengenalan hewan

untuk anak usia dini ?

2. Bagaimana mengemas aplikasi multi marker AR untuk anak usia dini yang

tidak membuat anak selalu menatap ke layar smartphone?

3. Bagaimana analisis hasil aplikasi AR berdasarkan fungsi navigasi, kombinasi

marker, dan perangkat yang digunakan?

Page 15: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

4

I.3 Tujuan Penelitian

1. Menghasilkan aplikasi pengenalan hewan dengan konten pembelajaran

disesuaikan dengan kurikulum PAUD terbaru (Tahun 2013).

2. Menghasilkan aplikasi yang penggunaannya dipadukan dengan objek fisik

diluar perangkat smartphone dengan menerapkan deteksi multimarker, yaitu

penggunaan beberapa marker disaat yang bersamaan.

3. Menghasilkan aplikasi pembelajaran hewan yang interaktif dan dapat

dijalankan pada beragam perangkat smartphone, dengan menggunakan media

kartu sebagai marker yang mewakili gambar hewan dan habitatnya. Informasi

karakter hewan yang ditampilkan akan berubah sesuai kombinasi kartu yang

digunakan.

I.4 Manfaat Penelitian

Diharapkan dengan melakukan penelitian ini dapat diperoleh manfaat sebagai

berikut :

a. Bagi Anak Usia Dini

Membuat pandangan anak tidak selalu mengarah ke layar gadget ketika

menjalankan aplikasi ini, sehingga mengurangi resiko mata kering. Serta

mengenalkan anak pada hewan.

b. Bagi Orang Tua

Memudahkan orang tua memberi pendidikan pengenalan hewan kepada

anaknya berdasarkan salah satu kompetensi dasar dari kurikulum pendidikan

anak usia dini (PAUD).

c. Bagi Guru / Tenaga Pendidik TK / Playgroup

Menambah ragam bentuk media pembelajaran pengenalan hewan yang dapat

digunakan di kelas.

Page 16: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

5

I.5 Batasan Masalah

Yang menjadi batasan masalah dalam tugas akhir ini adalah :

1. Karakter dan informasi hewan disesuaikan kompetensi dasar (KD)-3.8 dan

KD-4.8 PAUD Kurikulum 2013, meliputi : jenis (nama, ciri-ciri, bentuk),

berdasarkan lingkungan hidup (darat, udara, air), makanan (herbivora,

omnivora, karnivora), kelompok hidup (hewan ternak/ peliharaan/ buas)

2. Aplikasi yang dibuat berjalan pada sistem operasi Android

3. Karakter hewan, habitat dan interaksinya dalam bentuk 2D

4. Ragam karakter hewan, makanan, habitat, dan kelompok hidup disesuaikan

dengan data yang dikumpulkan dari buku pelajaran yang memuat materi

tentang PAUD

5. Aplikasi menggunakan Software Development Kit (SDK) Vuforia yang

digabungkan dengan Game Engine Unity melalui Vuforia Extension for Unity

I.6 Metode Penelitian

Adapun metodologi penelitian pada pengerjaan proyek tugas akhir ini adalah

sebagai berikut.

1. Studi literatur

Pada tahap ini dilakukan kajian terhadap berbagai literatur yang dapat

menunjang perancangan proyek tugas akhir ini.

2. Analisis

Tahap ini dilakukan dengan menganalisis data yang telah dikumpulkan yang

berkaitan dengan proses dan data yang dipergunakan dengan mendefinisikan

kebutuhan fungsional, kebutuhan non fungsional dan kebutuhan perangkat

keras dan perangkat lunak.

3. Diskusi dan konsultasi

Pada tahap ini dilakukan proses diskusi dan konsultasi dengan dosen

pembimbing serta berbagai pihak yang kompeten dalam bidang ini.

Page 17: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

6

4. Perancangan sistem

Pada tahap ini dilakukan perancangan sistem berdasarkan hasil analisis dan

konsultasi yang telah dilakukan. Hasil perancangan berupa dokumen Deskripsi

Perancangan Perangkat Lunak.

5. Implementasi sistem

Pada tahap ini hasil rancangan diimplementasikan kedalam program. Hasil

tahap ini adalah sistem yang siap dijalankan.

6. Pengujian sistem

Pada tahap ini dilakukan pengujian untuk menentukan kesesuaian

fungsionalitas perangkat lunak dengan yang dibutuhkan dalam dokumen.

7. Kesimpulan

Pada tahap ini dibuat kesimpulan terkait hasil yang dicapai pada penelitian.

I.7 Sistematika Penulisan

Pembahasan Skripsi ini dibagi ke dalam 5 (lima) bab untuk mempermudah

didalam pembahasan sistem. Tiap bab masih merupakan satu kesatuan, dengan

sistematika penulisan, sebagai berikut:

BAB I : PENDAHULUAN

Bab ini menguraikan secara singkat latar belakang penelitian, rumusan dan

batasan masalah, tujuan dan kegunaan penelitian, dan sistematika penulisan.

BAB II : KAJIAN PUSTAKA

Bab ini membahas kerangka berpikir, peneitian terkait, serta landasan teori yang

berhubungan dengan augmented reality, multimarker, dan PAUD.

BAB III : METODOLOGI PENELITIAN

Bab ini membahas tentang jenis penelitian, metode pengumpulan data, alat dan

bahan penelitian, analisis sistem serta pembangunan aplikasi Augmented Reality

PAUD – Pengenalan Hewan.

BAB IV : HASIL DAN PEMBAHASAN

Page 18: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

7

Bab ini membahas tentang tinjauan umum mengenai sistem, metode pengujian

dan hasil penelitian.

BAB V : PENUTUP

Bab ini merupakan bab penutup yang berisi kesimpulan dan saran-saran.

Page 19: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

8

BAB II

KAJIAN PUSTAKA

II.1 Augmented Reality

Augmented reality adalah teknologi yang memungkinkan orang untuk

memvisualisasikan dunia maya sebagai bagian dari dunia nyata yang ada di sekitar

secara efektif sehingga membuat dunia nyata seakan-akan dapat terhubung dengan

dunia maya dan dapat terjadi suatu interaksi [5].

Sejarah tentang augmented reality dimulai dari tahun 1957-1962, ketika

seorang penemu yang bernama Morton Heilig, seorang sinematografer,

menciptakan dan memapatenkan sebuah simulator yang disebut sensorama dengan

visual, getaran dan bau.

Gambar 2.1 simulator yang disebut sensorama dengan visual

Sumber : Deswardi Tia Putra, 2013

Pada tahun 1966, Ivan Sutherland menemukan head-mounted display yang dia

klaim adalah, jendela ke dunia virtual yang merupakan perangkat layar yang

dipakai di kepala atau sebagai bagian dari helm, yang memiliki tampilan kecil optik

di depan salah satu atau setiap mata. Sebuah HMD khas memiliki salah satu atau

dua layar kecil dengan lensa dan cermin semi transparan tertanam di helm,

kacamata digunakan sebagai visor atau penangkap data seperti pada gambar

berikut:

Page 20: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

9

Gambar 2.2 head-mounted display (HMD)

Sumber : Deswardi Tia Putra, 2013

Tahun 1975 seorang ilmuwan bernama Myron Krueger membentuk

laboratorium realitas buatan yang disebut Videoplace yang memungkinkan

pengguna, dapat berinteraksi dengan objek virtual untuk pertama kalinya.

Gambar 2.3 Peragaan Videoplace

Sumber : Deswardi Tia Putra, 2013

Tahun 1989, Jaron Lanier, memperkenalkan Virtual Reality dan menciptakan

bisnis komersial pertama kali di dunia maya, Tahun 1992 mengembangkan

Augmented Reality untuk melakukan perbaikan pada pesawat boeing, dan pada

tahun yang sama, LB Rosenberg mengembangkan salah satu fungsi sistem AR,

yang disebut Virtual Fixtures, yang digunakan di Angkatan Udara AS Armstrong

Labs, dan menunjukan manfaatnya pada manusia, dan pada tahun 1992 juga, Steven

Feiner, Blair Maclntyre dan dorée Seligman, memperkenalkan untuk pertama

kalinya Major Paper untuk perkembangan Prototype AR. Pada tahun 1999,

Hirokazu Kato, mengembangkan ArToolkit di HITLab dan didemonstrasikan di

SIGGRAPH.

Page 21: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

10

Pada tahun 2000, Bruce.H.Thomas, mengembangkan ARQuake, sebuah

Mobile Game AR yang ditunjukan di International Symposium on Wearable

Computers. Pada tahun 2008, Wikitude AR Travel Guide, memperkenalkan

Android G1 Telephone yang berteknologi AR, tahun 2009, Saqoosha

memperkenalkan FLARToolkit yang merupakan perkembangan dari ArToolkit.

FLARToolkit memungkinkan kita memasang teknologi AR di sebuah website,

karena output yang dihasilkan FLARToolkit berbentuk Flash. Ditahun yang sama,

Wikitude Drive meluncurkan sistem navigasi berteknologi AR di Platform Android.

Tahun 2010, Acrossair menggunakan teknologi AR pada I-Phone 3GS[6].

Seiring berjalannya waktu, Augmented Reality berkembang sangat pesat

sehingga memungkinkan pengembangan aplikasi di berbagai bidang, diantaranya

sebagai berikut :

a. Sistem Navigasi Telepon Genggam : Dengan memanfaatkan data GPS pada

telepon genggam maka aplikasi dapat mengetahui keberadaan

penggunanya pada setiap waktu.

b. Hiburan : Bentuk sederhana dari Augmented reality telah dipergunakan

dalam bidang hiburan dan berita untuk waktu yang cukup lama. televisi di

mana wartawan ditampilkan berdiri di depan peta cuaca yang berubah.

Dalam studio, wartawan tersebut sebenarnya berdiri di depan layar biru

atau hijau. Pencitraan yang asli digabungkan dengan peta buatan komputer

menggunakan teknik yang bernama chroma-keying. Princeton

ElectronicBillboard telah mengembangkan sistem Augmented reality yang

7 memungkinkan lembaga penyiaran untuk memasukkan iklan ke dalam

area tertentu gambar siaran. Contohnya, ketika menyiarkan sebuah

pertandingan sepak bola, sistem ini dapat menempatkan sebuah iklan

sehingga terlihat pada tembok luar stadium.

c. Kedokteran : Teknologi pencitraan sangat dibutuhkan di dunia

kedokteran,seperti misalnya, untuk simulasi operasi, simulasi pembuatan

vaksin virus, dan sebagainya. Untuk itu, bidang kedokteran menerapkan

augmented reality pada visualisasi penelitiannya.

Page 22: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

11

d. Engineering Design : Seorang engineering designer dapat memanfaatkan

augmented reality untuk menampilkan hasil desain kepada kliennya.

Dengan augmented reality, klien dapat memperoleh informasi tentang

spesifikasi yang lebih detail dan mudah dipahami dari desain mereka.

e. Robotics dan Telerobotics : Dalam bidang robotika, seorang operator dapat

mengendalikan robot memanfaatkan pencitraan visual, termasuk

pencitraan visual memanfaatkan augmented reality [7], [8].

Dalam Penerapan Sistem Augmented Reality harus memiliki komponen untuk

mendukung kinerja dari proses pengolahan citra digital. Komponen tersebut

adalah :

a. Scene Generator

Scene Generator adalah komponen yang bertugas untuk melakukan

rendering citra yang ditangkap oleh kamera. Objek virtual akan ditangkap

kemudian diolah sehingga kemudian objek tersebut dapat ditampilkan.

b. Tracking System

Tracking System merupakan komponen yang terpenting dalam Augmented

Reality. Dalam proses tracking dilakukan sebuah pendeteksian pola objek

virtual dengan objek nyata sehingga sinkron diantara keduanya dalam

artian proyeksi virtual dengan proyeksi nyata harus sama atau mendekati

sama sehingga mempengaruhi validitas hasil yang akan didapatkan.

c. Display

Dalam pembangunan sebuah sistem yang berbasis AR dimana sistem

tersebut menggambungkan antara dunia virtual dan dunia nyata, ada

beberapa parameter mendasar yang perlu diperhatikan yaitu optik dan

teknologi video. Keduanya mempunyai keterkaitan yang tergantung pada

faktor resolusi, fleksibilitas, titik pandang, tracking area. Ada batasan –

batasan dalam pengembangan teknologi Augmented Reality dalam hal

proses menampilkan objek. Diantaranya adalah harus ada batasan

pencahayaan, resolusi layar, dan perbedaan pencahayaan citra antara citra

virtual dan nyata.

Page 23: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

12

d. AR Device

Ada beberapa tipe media yang dapat digunakan untuk menampilkan objek

berbasis Augmented Reality yaitu dengan menggunakan optik, sistem retina

virtual, video penampil, monitor berbasis AR dan proyektor berbasis AR[9],

[10].

Marker

Fiducial images atau yang lebih dikenal dengan marker adalah sebuah penanda

yang di dalamnya terdiri dari kumpulan titik acuan untuk memudahkan komputasi

dari pengukuran parameter-parameter yang dibutuhkan dalam pengolahan citra.

Marker menjadi salah satu metoda yang umum digunakan sebagai media estimasi

posisi kamera dalam aplikasi AR dengan video based tracking. Marker dapat

berupa warna atau dapat berupa gambar. Sudah banyak penelitian tentang penanda

untuk keperluan AR. Penanda yang paling sederhana dan bekerja dengan sangat

baik adalah penanda matrix (lihat Gambar 2.4). Penanda matriks menggunakan 2D

barcode sederhana, yang dipakai untuk mengenali sebuah obyek dan untuk

mengetahui hubungan antara posisi kamera dengan penanda tersebut[11].

Gambar 2.4 Contoh marker 2D yang digunakan untuk sistem tracking

Sumber : Basworo Ardi Pramono, 2012

Pendeteksian marker dikenal dua metode yaitu satu marker (single marker)

dan banyak marker (multi marker). Single Marker hanya mendeteksi satu gambar

yang dijadikan sebagai media marker dan hanya satu objek saja yang keluar.

Multi Marker yaitu metode yang memungkinkan pendeteksian banyak objek yang

dapat keluar dalam satu waktu pendeteksian marker[12]. Multi marker merupakan

Page 24: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

13

perkembangan dari Single marker, dimana kamera men-Tracking marker lebih

dari satu[13].

Vuforia Qualcomm

Vuforia Qualcomm merupakan library yang digunakan sebagai pendukung

adanya Augmented reality pada Android. Vuforia menganalisa gambar dengan

menggunakan pendeteksi marker dan menghasilkan informasi 3D dari marker yang

sudah dideteksi via API. Programmer juga dapat menggunakannya untuk

membangun objek 3D virtual pada kamera.

Gambar 2.5 Objek mobil 3D virtual yang muncul pada kamera

Sumber : I. N. W. Kusuma, 2014

Platform tersebut terdiri dari 2 komponen diantaranya adalah Target Management

System Mengijinkan pengembang melakukan upload gambar yang sudah

diregistrasi oleh marker dan kemudian melakukan download target gambar yang

akan dimunculkan.

1. Target Management System

Qualcomm target management system mengizinkan pengembang untuk

melakukan upload gambar dan menghasilkan kumpulan data pada target tujuan.

2. QCAR SDK Vuforia

Mengizinkan pengembang untuk melakukan koneksi antara aplikasi yang

sudah dibuat dengan library static i.e libQCAR.a pada iOS atau libQCAR.so pada

Page 25: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

14

Android. Library libQCAR.so inilah yang menjadi sistem aplikasi sehingga

pelacakan target bisa dilakukan[8].

Deteksi Marker

Proses pelacakan adalah beberapa objek yang dapat dilacak dan diregistrasi

oleh QCAR SDK. Dalam proses pelacakan ada beberapa parameter untuk

menentukan objek yang akan dilacak. Adapun parameter tersebut adalah nama, ID,

status dan posisi yang disimpan dalam state object. Target gambar adalah satu dari

banyaknya proses pelacakan. Deteksi sudut atau Corner Detection merupakan

pendekatan yang digunakan untuk mengekstraksi beberapa jenis fitur dan

menyimpulkan isi dari suatu gambar[8]. Seperti pada gambar 2.5, tanda ‘+’ dari

gambar dibawah ini merupakan fitur – fitur unik yang dimiliki oleh gambar tersebut.

Gambar 2.6 Parameter pelacakan dan fitur pada marker

Sumber : I. N. W. Kusuma, 2014

Page 26: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

15

Gambar 2.7 Arsitektur library QCAR SDK

Sumber : I. N. W. Kusuma, 2014

Gambar 2.7 memberikan gambaran umum pembangunan aplikasi dengan

Qualcomm AR Platform. Platform ini terdiri dari SDK QCAR dan Target System

Management yang dikembangkan pada portal QdevNet. User meng-upload gambar

masukan untuk target yang ingin dilacak dan kemudian men-download sumber

daya target, yang dibundel dengan app. SDK QCAR menyediakan sebuah objek

yang terbagi libQCAR.so yang harus dikaitkan dengan app[8].

II.2 Corel Draw

Corel Draw adalah editor grafik vektor yang dibuat oleh Corel, sebuah

perusahaan yang bermarkas di Ottawa, Kanada. CorelDRAW pada awalnya

dikembangkan untuk dijalankan pada sistem operasi Windows 2000 dan yang lebih

baru. Corel draw memiliki kegunaan untuk mengolah gambar, oleh karena itu

banyak digunakan pada pekerjaan dalam bidang publikasi atau percetakan ataupun

pekerjaan di bidang lain yang membutuhkan proses visualisasi[14].

II.3 Adobe Photoshop

Adobe Photoshop adalah editor grafik bitmap. Software ini banyak digunakan

oleh para designer. Kelengkapan fasilitas dan kemampuannya yang luar biasa

dalam editing foto atau gambar, menjadikan software ini paling banyak dipakai oleh

fotografer dan desainer grafis (Madcoms, 2009)[14].

Page 27: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

16

II.4 Unity 3D

Unity 3D adalah perangkat lunak game engine yang berguna untuk

membangun permainan 2 Dimensi maupun 3 Dimensi (3D). Game engine

merupakan komponen yang ada dibalik layar setiap video game [8]. Fitur-fitur yang

dimiliki oleh Unity 3D antara lain sebagai berikut:

a. Integrated development environtment (IDE) atau lingkungan

pengembangan terpadu.

b. Penyebaran hasil aplikasi pada banyak platform.

c. Engine grafis menggunakan Direct3D (Windows), OpenGLES (iOS), dan

proprietary API (Wii).

d. Game scripting melalui Mono. Scripting yang dibangun mono,

implementasi open source dari NET Framework. Selain itu pemrograman

dapat menggunakan UnityScript (bahasa kustom dengan sintaks JavaScrips-

inspired), bahasa C# atau Boo (yang memiliki sintaks Python-inspired).

Mesh merupakan bentuk dasar dari objek 3D. pembuatan mesh tidak dilakukan

pada Unity. Sementara GameObjects adalah kontane untuk semua komponen

lainnya. Semua objek dalam permainan disebut game objects.

Unity mendukung pengembangan aplikasi Android. Sebelum dapat

menjalankan aplikasi yang dibuat dengan Unity Android diperlukan pengaturan

lingkungan pengembang Android pada perangkat. Untuk itu pengembang perlu

mendownload dan menginstal SDK Android dan menambahkan perangkat fisik ke

system. Unity Android memungkinkan pemanggilan fungsi kustom yang ditulis

dalam C/C++ secara langsung dan java secara tidak langsung dari script C#[8].

II.5 Sistem Operasi Android

II.5.1 Pengertian

Pengertian android ( /ˈæn.drɔɪd/; AN-droyd) adalah sistem operasi berbasis

Linux yang dirancang untuk perangkat seluler layar sentuh seperti telepon pintar

dan komputer tablet. Antarmuka pengguna Android didasarkan pada manipulasi

Page 28: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

17

langsung, menggunakan masukan sentuh yang serupa dengan tindakan di dunia

nyata, seperti menggesek, mengetuk, mencubit, dan membalikkan cubitan untuk

memanipulasi obyek di layar. Android adalah sistem operasi dengan sumber

terbuka, dan Google merilis kodenya di bawah Lisensi Apache. Kode dengan

sumber terbuka dan lisensi perizinan pada Android memungkinkan perangkat lunak

untuk dimodifikasi secara bebas dan didistribusikan oleh para pembuat perangkat,

operator nirkabel, dan pengembang aplikasi. Selain itu, Android memiliki sejumlah

besar komunitas pengembang aplikasi (apps) yang memperluas fungsionalitas

perangkat, umumnya ditulis dalam versi kustomisasi bahasa pemrograman Java.

II.5.2 Fitur

Ketika dihidupkan, perangkat Android akan memuat pada layar depan

(homescreen), yakni navigasi utama dan pusat informasi pada perangkat, serupa

dengan desktop pada komputer pribadi. Layar depan Android biasanya terdiri dari

ikon aplikasi dan widget; ikon aplikasi berfungsi untuk menjalankan aplikasi terkait,

sedangkan widget menampilkan konten secara langsung dan terbarui otomatis,

misalnya prakiraan cuaca, kotak masuk surel pengguna, atau menampilkan tiker

berita secara langsung dari layar depan. Layar depan bisa terdiri dari beberapa

halaman, pengguna dapat menggeser bolak balik antara satu halaman ke halaman

lainnya, yang memungkinkan pengguna Android untuk mengatur tampilan

perangkat sesuai dengan selera mereka. Beberapa aplikasi pihak ketiga yang

tersedia di Google Play dan di toko aplikasi lainnya secara ekstensif mampu

mengatur kembali tema layar depan Android, dan bahkan bisa meniru tampilan

sistem operasi lain, misalnya Windows Phone. Kebanyakan produsen telepon

seluler dan operator nirkabel menyesuaikan tampilan perangkat Android buatan

mereka untuk membedakannya dari pesaing mereka.

Di bagian atas layar terdapat status bar, yang menampilkan informasi tentang

perangkat dan konektivitasnya. Status bar ini bisa "ditarik" ke bawah untuk membuka

layar notifikasi yang menampilkan informasi penting atau pembaruan aplikasi,

misalnya surel diterima atau SMS masuk, dengan cara tidak mengganggu kegiatan

pengguna pada perangkat.

Page 29: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

18

II.5.3 Aplikasi

Android memungkinkan penggunanya untuk memasang aplikasi pihak ketiga,

baik yang diperoleh dari toko aplikasi seperti Google Play, Amazon Appstore,

ataupun dengan mengunduh dan memasang berkas APK dari situs pihak ketiga.

Aplikasi Android dikembangkan dalam bahasa pemrograman Java dengan

menggunakan kit pengembangan perangkat lunak Android (SDK). SDK ini terdiri

dari seperangkat perkakas pengembangan, termasuk debugger, perpustakaan

perangkat lunak, emulator handset yang berbasis QEMU, dokumentasi, kode

sampel, dan tutorial. Didukung secara resmi oleh lingkungan pengembangan

terpadu (IDE) Eclipse, yang menggunakan plugin Android Development Tools

(ADT). Perkakas pengembangan lain yang tersedia di antaranya adalah Native

Development Kit untuk aplikasi atau ekstensi dalam C atau C++, Google App

Inventor, lingkungan visual untuk pemrogram pemula, dan berbagai kerangka kerja

aplikasi web seluler lintas platform[15].

II.6 Penelitian Terkait

1. Judul :

MULTI MARKER AUGMENTED REALITY UNTUK APLIKASI

MAGIC BOOK. (Akhmad Afissunani, Akuwan saleh, dan M. Hasbi Assidiqi,

2012). Paper ITS.

Jenis marker, model objek yang ditampilkan, sistem operasi perangkat yang

digunakan, serta SDK yang digunakan:

• Gambar 2D dengan maksimal 9 marker terdeteksi

• Objek 3D

• Microsoft Windows (PC)

• ARToolkit

Hasil Penelitian :

• Semakin besar ukuran file model 3D dan adanya animasi pada model 3D,

maka semakin besar waktu yang dibutuhkan untuk load model dan pre-

rendering

Page 30: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

19

• Semakin besar ukuran suatu marker maka semakin besar jarak maksimal

marker tersebut dapat dikenali

2. Judul :

Mobile Edutainment with Interactive Augmented Reality using

Adaptive Marker Tracking. (Chi-Lam Lai, dan Cho-Li Wang, 2012). Paper

The University of Hong Kong.

Jenis marker, model objek yang ditampilkan, sistem operasi perangkat yang

digunakan, serta SDK yang digunakan:

• Sistem multi marker adaptif berbentuk kubus 6 sisi dengan maksimal 3

marker terdeteksi

• Objek 3D

• iOS (Smartphone & Tablet)

• ARToolkit

Hasil Penelitian :

• Potensi pembelajaran menggunakan perangkat mobile dengan AR yang

interaktif cukup menjanjikan

• Resolusi video dan perbedaan spesifikasi perangkat berpengaruh terhadap

performa aplikasi

3. Judul :

Aplikasi Penampil Informasi Hasil Pengenalan Foto Wajah pada Android

Berbasis Augmented Reality. (Ari Zhari Zharauri, dan Achmad Jayadi,

2016). Skripsi Unhas.

Jenis marker, model objek yang ditampilkan, sistem operasi perangkat yang

digunakan, serta SDK yang digunakan:

• Gambar 2D Kartu Mahasiswa

• Informasi Mahasiswa dan Objek 2D

• Android (Smartphone & Tablet)

• Vuforia

Hasil Penelitian :

Page 31: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

20

• Pembacaan marker cenderung berhasil ketika marker jelas dan jarak dekat

yaitu pada jarak sekitar 5 cm sampai 15 cm

Page 32: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

21

BAB III

METODOLOGI PENELITIAN

III.1 Kerangka Pikir

Kerangka pikir dibutuhkan untuk membantu mengarahkan peneliti agar

penelitiannya menjadi terarah dan terorganisir. Kerangka pikir pada penelitian ini

diperlihatkan pada gambar 3.1.

Gambar 3.1 Kerangka Pikir

III.2 Metode Perancangan Sistem

Metode yang digunakan dalam perancangan penelitian ini adalah metode

Waterfall. Nama model ini sebenarnya adalah “Linear Sequential Model”. Model

ini sering disebut dengan “classic life cycle” atau model waterfall. Model ini

pertama kali dipakai sekitar tahun 1970 sehingga dianggap kuno, tetapi dalam

Page 33: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

22

kenyataannya metode waterfall merupakan model yang paling banyak dipakai

didalam Software Engineering (SE). Model ini melakukan pendekatan secara

sistematis dan urut mulai dari level kebutuhan sistem lalu menuju ketahap analisis,

desain, coding, testing atau verification, dan maintenance. Secara umum tahapan

pada model waterfall dapat dilihat pada gambar 3.2

Gambar 3.2 Alur perancangan model waterfall

Tahapan-tahapan waterfall sebagai berikut :

a. Kebutuhan

Pada tahap ini dimulai dengan mengumpulkan data-data pendukung untuk

mengetahui user requirement yang dibutuhkan.

b. Desain

Tahap selanjutnya adalah perancangan desain. Rancangan desain dibuat

berdasarkan hasil dari analisis kebutuhan yang telah diperoleh.

c. Implementasi

Pada tahap ini dilakukan proses implementasi dari hasil rancangan desain dan

data – data yang telah dibuat. Seluruh rancangan desain tersebut

diimplementasikan menjadi sebuah software.

Page 34: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

23

d. Verifikasi

Tahap pengujian ini bertujuan untuk mengetahui apakah aplikasi yang dibuat

telah memenuhi kebutuhan user, mendeteksi jika terdapat gangguan fungsi pada

aplikasinya, dan melakukan perbaikan – perbaikan. Apabila aplikasi yang

dibuat tidak sesuai kebutuhan user, maka aplikasi ini diperbaiki kembali.

e. Perawatan

Tahap maintenance merupakan tahap akhir dimana perangkat lunak yang sudah

selesai dan dapat mengalami perubahan atau penambahan sesuai dengan hasil

dari pengujian program.

Keuntungan menggunakan Metode Waterfall adalah sebagai berikut:

1. Kualitas dari sistem yang dihasilkan akan baik. Ini dikarenakan oleh

pelaksanaannya secara bertahap. Sehingga tidak terfokus pada tahapan

tertentu.

2. Dokumen pengembangan sistem terorganisir, karena setiap fase harus

terselesaikan dengan lengkap sebelum melangkah ke fase berikutnya. Jadi

setiap fase atau tahapan akan mempunyai dokumen tertentu.

3. Metode ini masih lebih baik digunakan walaupun sudah tergolong kuno,

daripada menggunakan pendekatan asal-asalan. Selain itu, metode ini juga

masih masuk akal jika kebutuhan sudah diketahui dengan baik.

III.3 Rancangan Struktural

Pada perancangan aplikasi ini perlu dilakukan perancangan struktur untuk

memudahkan arah pengembangannya. Struktur tersebut meliputi struktur aplikasi

serta beberapa marker yang telah didesain khusus, dengan menggambarkan

karakter beberapa hewan dan alam sebagai perwakilan habitatnya.

Untuk mempermudah pembuatan aplikasi, penulis terlebih dahulu

merancang diagram alur (flowchart) sehingga pembuatan aplikasi dapat dilakukan

secara terurut. Tahap perancangan dimulai dengan alur pembuatan aplikasi

augmented reality sistem pada android dapat dilihat pada gambar 3.3 berikut.

Page 35: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

24

Gambar 3-3 Flowchart pembuatan aplikasi PAUD Multimarker Pengenalan Hewan

Mulai

Instalasi Unity 3D, import Vuforia-unity Package ke

Membuat rancangan marker dan karakter hewan, serta

suara penjelasannya

Build APK (Android Application Package)

Selesai

Desain karakter hewan dan penjelasan sesuai?

Upload marker ke database vuforia, download & import

database ke unity

Import objek ke unity. Perancangan & pembangunan

aplikasi di unity

Jalankan & uji aplikasi

Objek tampil sesuai deteksi marker?

Objek sesuai

Ya

Tidak

Ya

Tidak

Page 36: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

25

Setelah alur pembuatan aplikasi ditentukan, maka selanjutnya dilakukan

perancangan struktur navigasi aplikasi. Struktur ini diperlukan untuk

menggambarkan proses transisi setiap halaman / scene pada aplikasi.

Gambar 3.4 Struktur navigasi aplikasi

Pada struktur dapat dilihat jika aplikasi ini akan diawali oleh halaman splash

screen sebelum masuk pada halaman utama. Pada halaman utama terdapat 4

(empat) fitur yang dapat diakses, yaitu halaman informasi, halaman loading screen

yang menuntun pada halaman kamera AR, halaman panduan, dan keluar dari

aplikasi. Halaman utaman juga dapat diakses kembali melalui halaman informasi,

kamera AR, dan panduan. Sedangkan halaman pemutaran video dapat diakses dari

halaman kamera AR, begitu juga sebaliknya.

Setelah dilakukan perancangan struktur navigasi, maka dilakukan

perancangan untuk alur flowchart-nya. Alur flowchart ini menggambarkan alur

program dari halaman

Page 37: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

26

Gambar 3.5 Flowchart sistem

Page 38: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

27

Kemudian dilakukan perancangan flowchart untuk alur deteksi marker pada

halaman kamera AR, untuk menentukan fungsi yang dijalankan sistem pada

beberapa kondisi input berupa marker baik satu marker, 2 marker, dan seterusnya.

Pada flowchart diatas dapat dilihat jika terdapat perbedaan kondisi ketika

terjadi deteksi 1 marker, 2 marker, lebih dari 2 marker maupun marker

Gambar 3.6 Flowchart proses deteksi marker pada Kamera AR

Page 39: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

28

metamorfosis kupu – kupu. Pada kondisi deteksi 1 marker, akan ditampilkan objek

dan deskripsinya sesuai dengan id marker yang terdeteksi. Ketika terjadi deteksi 2

marker, dilakukan identifikasi hubungan dari kedua id marker yang terdeteksi,

pengukuran jarak antar kedua marker dilayar perangkat, dan perbandingan

koordinat posisi vektor x dari kedua marker tersebut. Pada kondisi deteksi marker

metamorfosis kupu – kupu, dilakukan perbandingan koordinat posisi vektor x

keempat markernya untuk mengetahui kesesuaian urutan setiap marker. Penjelasan

lebih lanjut dari proses pendeteksian marker akan dijelaskan pada bagian III.6.6

yang membahas tentang kontrol multimarker dan setiap kondisi deteksi marker

dapat dilihat pada bagian IV.2.3 tentang pengujian marker.

Adapun proses identifikasi marker yang terjadi pada vuforia yaitu :

1. Seleksi Threshold : Parameter kunci dalam proses thresholding adalah

pilihan dari nilai ambang (atau nilai-nilai, seperti yang disebutkan

sebelumnya). Beberapa yang berbeda metode untuk memilih ambang ada;

pengguna dapat secara manual memilih nilai ambang, atau algoritma

thresholding dapat menghitung nilai secara otomatis, yang dikenal sebagai

thresholding otomatis.

2. Nilai Pixel : Setiap pixel yang mewakili suatu gambar yang disimpan di

dalam komputer memiliki nilai pixel yang menjelaskan tentang kecerahan

pixel atau warna apa yang seharusnya.

3. Image Segmentation : Dalam pengolahan citra, segmentasi mengacu pada

proses membagi sebuah gambar digital menjadi beberapa segmen (beberapa

set dari pixel) (juga dikenal sebagai superpixels). Tujuan dari segmentasi

adalah untuk menyederhanakan/mengubah image menjadi sesuatu yang

lebih bermakna dan lebih mudah untuk dianalisa. Metode segmentasi

biasanya digunakan untuk menemukan benda-benda dan batasbatas (garis,

kurva,dll) dalam images.

4. Edge Detection : Edge detection (deteksi tepi) adalah metode yang paling

berkembang dan paling sering dipakai dalam bidang pengolahan citra.

Dalam metode ini batas wilayah dan batas tepi berkaitan erat, karena sering

Page 40: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

29

sekali terdapat penyesuaian hasil untuk memperkecil kesalahan pada batas

wilayah objek agar didapatkan hasil yang memiliki nilai kesalahan rendah.

Oleh karena itu teknik edge detection sering digunakan sebagai dasar teknik

segmentasi untuk proses segmentasi yang lain.

5. Corner Detection : Corner detection (deteksi sudut) atau istilah yang lebih

umum interest point detection (deteksi titik minat) adalah suatu pendekatan

yang digunakan dalam visi komputer sistem dan proses segmentasi untuk

mengambil beberapa sudut dari suatu objek dan menyimpulkan isi dari

suatu images. Deteksi sudut sering digunakan dalam mendeteksi gerakan,

pencocokan gambar, pelacakan, 3D modelling dan pengenalan obyek.

6. Template Matching : Template matching adalah sebuah teknik dalam

pengolahan citra digital untuk menemukan bagian-bagian kecil dari suatu

image yang dicocokkan dengan gambar (template) yang telah disimpan

kedalam sistem. Metode dasar pada template matching menggunakan

metode konvolusi topeng (template), yang telah disesuaikan dengan ciri-ciri

tertentu dari image tersebut, yang akan kita deteksi. Teknik ini dapat dengan

mudah dilakukan pada gray-scale images atau edge images.

III.4 Analisis Kebutuhan Sistem

III.4.1 Analisis dan Kebutuhan Aplikasi

Untuk merealisasikan aplikasi Multimarker Augmented Reality PAUD

Pengenalan Hewan dibutuhkan beberapa peralatan yang akan menunjang cara

kerja sistem.

a. Kebutuhan Perangkat Keras

1. Komputer / Laptop

Spesifikasi Intel® Core™ i5-4200U CPU @ 1.60GHz, Memory 12.0

GB, Hardisk 1 TB

2. Perangkat Mobile

Smartphone Lenovo K5 Vibe Plus a6020. Spesifikasi Qualcomm

MSM8929 Snapdragon 415 Octa-core (4x1.5 GHz Cortex-A53 &

Page 41: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

30

4x1.2 GHz Cortex-A53), RAM 3.0GB, Kamera utama 13 MP f/2.2.

Resolusi 1080 x 1920 piksel.

b. Perangkat lunak yang digunakan

1. Sistem operasi Microsoft Windows 8.1 64 bit

2. Corel Draw X4

3. Adobe Photoshop CS3

4. Unity 5.6.3f1

5. Qualcomm Vuforia SDK 6-0-114

III.4.2 Analisis Kelayakan Sistem

a. Kelayakan Teknologi

Teknologi sistem operasi yang digunakan adalah android 4.4 (Kitkat)

hingga 5.1 (Lollipop).

b. Kelayakan Hukum

Pembuatan aplikasi augmented reality Android pada Unity 3D dengan

melakukan perubahan terhadap Vuforia SDK ini tidak akan melanggar

hukum atau peraturan-peraturan yang berlaku baik yang telah ditetapkan.

c. Kelayakan Operasional

Pada kelayakan operasional dibagi menjadi 2 aspek, yaitu :

1. Aspek Teknis

Dengan dibangunnya Aplikasi Multimarker Augmented Reality PAUD

Pengenalan Hewan menggunakan perangkat mobile berbasis android,

pengguna dimudahkan dalam melakukan pengenalan terhadap hewan

serta diajak aktif untuk bergerak dengan mengombinasikan beberapa

marker.

2. Aspek Psikologis

Aplikasi ini mudah digunakan karena tidak membutuhkan pelatihan

yang rumit.

Page 42: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

31

III.5 Fitur Sistem

Berikut adalah kebutuhan perangkat lunak untuk perancangan sistem untuk

membantu petugas penguji dalam melakukan verifikasi dari setiap fungsi yang ada

pada aplikasi ini.

III.5.1 Menjalankan Aplikasi

a. Deskripsi dan Prioritas

Pengguna yang menjalankan aplikasi dapat mengakses seluruh fungsi yang

ditawarkan pada halaman utama. Prioritas = Sedang

Gambar 3.7 Use-Case Diagram halaman utama

b. Sequence Stimulus/Respon

Stimulus : Pengguna menekan tombol (Kamera AR).

Respon : Sistem menampilkan progres loading halaman sementara

halaman Kamera AR dimuat, kemudian membuka halaman

Kamera AR setelah loading selesai.

Stimulus : Pengguna menekan tombol (Informasi).

Respon : Sistem menampilkan halaman informasi aplikasi.

Stimulus : Pengguna menekan tombol (Panduan).

Respon : Sistem menampilkan halaman panduan penggunaan aplikasi.

Stimulus : Pengguna menekan tombol kembali / back yang ada pada hp

yang digunakan.

Page 43: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

32

Respon : Jika aplikasi menampilkan selain halaman utama, sistem

akan mengembalikan tampilan aplikasi ke halaman yang

sebelumnya dibuka.

Stimulus : Pengguna menekan tombol (Keluar).

Respon : Sistem menutup aplikasi.

III.5.2 Mengakses Kamera AR

a. Deskripsi dan Prioritas

Pengguna dapat menyorot marker hewan yang diinginkan menggunakan

kamera hp yang digunakan. Aplikasi akan menampilkan informasi sesuai

dengan marker yang disorot. Informasi tersebut meliputi karakter hewan,

nama hewan, dan deskripsi. Informasi diberikan dalam bentuk audio (suara)

dan visual (teks). Prioritas = Tinggi

b. Sequence Stimulus/Respon

Stimulus : Pengguna menyorot satu marker.

Respon : Sistem menampilkan karakter, nama, dan deskripsi dari

marker yang disorot, serta memutar file audio yang

menjelaskan informasi marker tersebut.

Stimulus : Pengguna menyorot lebih dari satu marker.

Respon : Sistem menampilkan karakter dan nama dari masing –

masing marker, dan melakukan pengecekan terhadap

hubungan dari setiap marker yang disorot. Jika marker –

marker yang disorot memiliki hubungan, maka sistem akan

menampilkan bentuk interaksinya. Sedangkan jika marker

tidak memiliki hubungan, maka akan ditampilkan karakter

dari masing – masing marker seperti pada tampilan deteksi

satu marker saja, tanpa menampilkan deskripsi & audionya.

Stimulus : Pengguna menyorot marker metamorfosis kupu - kupu.

Respon : Sistem menampilkan video metamorfosis kupu – kupu ketika

seluruh marker terdeteksi dengan urutan metamorfosis yang

benar, dimana marker diurutkan dari kiri ke kanan.

Page 44: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

33

c. Kebutuhan Fungsional

REQ-1: Sistem wajib menampilkan pesan “Sorot gambar hewan” ketika

tidak ada marker yang terdeteksi.

REQ-2: Khusus informasi yang ditampilkan dalam bentuk teks ketika satu

marker disorot, informasi tersebut harus dapat dibaca dengan

jelas pada layar hp yang digunakan, kemudian menghilang

beberapa saat kemudian agar tidak menghalangi tampilan kamera

perangkat.

REQ-3: Jika terjadi kondisi dimana marker gagal terdeteksi ketika sistem

sedang menjelaskan deskripsi marker melalui suara, sistem harus

mampu melanjutkan penjelasan tersebut ketika marker telah

terdeteksi kembali.

REQ-4: Sistem dapat menggambarkan bentuk interaksi hewan ketika

mereka berjauhan maupun berdekatan yang digambarkan

berdasarkan posisi marker.

REQ-5: Sistem wajib menampilkan pesan “Urutan Salah” khusus pada

marker yang menggambarkan metamorfosis kupu – kupu, ketika

urutan markernya tidak lengkap / sesuai.

III.6 Desain Aplikasi

III.6.1 Pembuatan Marker

Pembuatan marker dilakukan dengan memanfaatkan aplikasi Corel Draw.

Marker dibuat dalam bentuk gambar 2D dari karakter hewan dalam bentuk kartun

tanpa diberi warna. Fitur yang ada dari setiap karakter hewan dibuat berdasarkan

fitur dari hewan yang sebenarnya.

Page 45: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

34

Gambar 3.8 Pembuatan marker dengan aplikasi Corel Draw

III.6.2 Upload Marker pada database Vuforia

Gambar yang telah ditentukan sebagai marker belum bisa dikenali oleh

kamera dari device android. Agar dapat dikenali, terlebih dahulu gambar tersebut

harus didaftarkan/upload pada database Vuforia

Gambar 3.9 Gambar telah diupload pada database vuforia

Page 46: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

35

Setelah gambar diupload, maka package database tersebut di download kemudian

dilakukan proses import package di unity.

III.6.3 Pendataan Daftar Objek untuk Setiap Marker

Setelah jumlah marker ditentukan dan karakternya dibuat, dilakukan

pendataan untuk menentukan jumlah objek yang harus dibuat pada setiap marker

berdasarkan hubungan dengan marker lainnya. Dalam hal ini, terdapat 5 marker

hewan, 4 marker metamorfosis kupu – kupu, 4 marker hewan 3D, dan 2 marker

alam / habitat. Sehingga dapat dilakukan pendataan sebagai berikut :

Marker:

- Air - Telur - Anjing3d

- Anjing - Ulat - ayam3d

- Ayam - Kepompong - ikan3d

- Cacing - Kupu – kupu - kucing3d

- Ikan

- Kucing

- Tanah

III.6.4 Pembuatan Objek

Pembuatan objek dilakukan dengan menggunakan aplikasi pengolah

gambar baik Adobe Photoshop maupun Corel Draw untuk 2D, sedangkan blender

untuk 3D sesuai dengan kebutuhan. Berdasarkan tabel marker diatas, terdapat

beberapa objek yang dibuat untuk tiap marker.

Pembuatan objek 2D menggunakan Adobe Photoshop

Page 47: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

36

Gambar 3.10 Pembuatan objek 2D dengan ekspresi berbeda untuk tiap marker

Pembuatan objek 3D menggunakan Blender

Gambar 3.11 Pembuatan objek 3D menggunakan aplikasi blender

Setelah objek 3D jadi, maka dilakukan pewarnaan material menggunakan

aplikasi adobe photoshop. Digunakan 3 material untuk mengatur warna dan efek

gelap-terang.

Page 48: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

37

Gambar 3.12 Pengeditan file material untuk pewarnaan objek 3D menggunakan

Adobe Photoshop

Khusus untuk objek multimarker Kupu – kupu, akan digunakan video

dokumentasi metamorfosis kupu – kupu. Video tersebut diambil dari Channel

Youtube Duncan Scott (dscottprod), dengan penambahan subtitle Indonesia & teks

copyright yang diarahkan pada sumber awal pemilik videonya menggunakan

software Sony Vegas Pro 13.0.

Gambar 3.13 Penambahan subtitle pada video

Page 49: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

38

III.6.5 Perancangan Interface Aplikasi

Ketika membuka aplikasi, pengguna tidak langsung dihadapkan pada layar

AR Kamera, tetapi terlebih dahulu dihadapkan dengan layar pembuka (splash

screen) dengan durasi 2 detik serta halaman menu.

a. Halaman Pembuka (Splash Screen)

Gambar 3.14 Halaman Pembuka (Splash Screen)

Halaman splash screen digunakan sebagai halaman awal / pembuka ketika

aplikasi dijalankan. Halaman ini akan ditampilkan setelah splash screen default dari

aplikasi Unity.

Kode halaman splash screen / Layar pembuka

void Start () { StartCoroutine(Example()); } // Update is called once per frame IEnumerator Example() { yield return new WaitForSeconds(2); Application.LoadLevel ("mainmenu"); }

Page 50: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

39

Kode halaman tersebut berfungsi untuk mengatur durasi halaman splash screen

ditampilkan, dan halaman berikutnya yang akan dituju. Pada pengaturan tersebut

digunakan durasi 2 detik, lalu menuju halaman berikutnya yaitu halaman mainmenu.

b. Halaman Mainmenu

Pada halaman mainmenu terdapat dua item utama yang diletakkan pada kanvas.

Item pertama berisi gambar latar dan tombol – tombol perintah, sedangkan item

kedua berisi item untuk loading screen.

Gambar 3.15 Item 1 halaman Mainmenu

Page 51: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

40

Gambar 3.16 Item 2 halaman mainmenu, Loading Screen

Pada item 1 halaman mainmenu terdapat tombol (mulai),

(informasi), (panduan), dan (keluar). Tombol “mulai” akan mengarahkan ke

halaman training yang merupakan AR Camera, dan akan menampilkan item

Loading Screen ketika menunggu halaman AR Camera selesai dimuat. Tombol

“informasi” akan mengarahkan ke halaman tentang, tombol “panduan”

mengarahkan ke halaman panduan, sedangkan tombol “keluar” berfungsi untuk

keluar dari aplikasi.

Pada item 2 terdapat gambar, latar, dan sebuah slider yang berfungsi menunjukkan

progres loading halaman.

Kode Halaman Mainmenu – Tombol “mulai”

Menampilkan loading screen dan memuat halaman training (AR Camera)

public GameObject loadingScreenObj; public Slider slider; AsyncOperation async; public void LoadScreenExample() { StartCoroutine(LoadingScreen()); }

Page 52: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

41

IEnumerator LoadingScreen() { loadingScreenObj.SetActive(true); async = SceneManager.LoadSceneAsync("training"); async.allowSceneActivation = false; while (async.isDone == false) { slider.value = async.progress; if (async.progress == 0.9f) { slider.value = 1f; async.allowSceneActivation = true; } yield return null; } }

Kode untuk tombol lainnya

public void ExitApplication(){ Application.Quit (); } public void GoToHow(){ Application.LoadLevel("panduan"); } public void GoToAbout(){ Application.LoadLevel("tentang"); }

III.6.6 Pembuatan Kode / Script C# untuk kontrol multimarker

Kondisi deteksi setiap marker diawali dengan pengambilan id marker yang

terdeteksi dari database vuforia. Dibuatkan perintah untuk mengambil data

behavior dari marker yang terdeteksi. Behaviour yang diambil adalah id dari

marker tersebut. Id marker akan digunakan untuk mengetahui marker yang

terdeteksi, dan menentukan kondisi jumlah marker yang terdeteksi pada aplikasi.

StateManager sm = TrackerManager.Instance.GetStateManager(); IEnumerable<TrackableBehaviour> tbs = sm.GetActiveTrackableBehaviours(); foreach (TrackableBehaviour tb in tbs) { string name = tb.TrackableName; ImageTarget it = tb.Trackable as ImageTarget; }

Page 53: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

42

Tahap selanjutnya adalah pembuatan script C# untuk mengontrol multimarker pada

Unity sesuai dengan tabel marker. Untuk kode 1 marker diletakkan dalam fungsi

yang mengambil id dari marker. Berikut adalah contoh kode untuk marker anjing.

Contoh kode untuk 1 Marker

if(name == "anjing"){ anjing1.SetActive(true); if (!soundTarget.isPlaying){ playSound("sounds/anjing"); } TextDescription.GetComponent<Text>().text = "Anjing adalah hewan mamalia yang memiliki indra penciuman yang sangat tajam"; Makanan.GetComponent<Text>().text = "Anjing merupakan hewan karnivora, pemakan daging"; }

Pada kode tersebut, GameObject untuk marker anjing akan ditampilkan dan

audio untuk marker tersebut juga dimainkan. Selain itu juga akan digunakan

perintah PauseAllAudio(); pada fungsi void Update() sehingga audio otomatis

dijeda ketika marker tidak terdeteksi. Juga ditambahkan perintah untuk menentukan

isi teks deskripsi dari marker yang terdeteksi. Sedangkan untuk fungsi audio dibagi

menjadi 3 (tiga), yaitu memulai suara, menjeda suara, dan menghentikan suara.

Contoh kode untuk memuat dan memulai suara

//fungsi play suara void playSound(string ss) { clipTarget = (AudioClip)Resources.Load(ss); soundTarget.clip = clipTarget; soundTarget.playOnAwake = false; soundTarget.Play(); }

Kode untuk menjeda seluruh suara

//fungsi jeda suara void PauseAllAudio() { allAudioSources = FindObjectsOfType(typeof(AudioSource)) as AudioSource[]; foreach (AudioSource audioS in allAudioSources) { audioS.Pause();

Page 54: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

43

} }

Kode untuk menghentikan seluruh suara

//Fungsi stop suara void StopAllAudio() { allAudioSources = FindObjectsOfType(typeof(AudioSource)) as AudioSource[]; foreach (AudioSource audioS in allAudioSources) { audioS.Stop(); } }

Kemudian pada file DefaultTrackableEventHandler, ditambahkan perintah

untuk menampilkan teks deskripsi, latar teks deskripsi, dan memulai proses

coroutine untuk menghilangkan teks deskripsi secara otomatis setelah 12 detik

pada fungsi OnTrackingFound.

Makanan.gameObject.SetActive(true); TextDescription.gameObject.SetActive(true); PanelDescription.gameObject.SetActive(true); StartCoroutine(Hilang());

Adapun fungsi yang dieksekusi pada perintah StartCoroutine(Hilang()) adalah

sebagai berikut:

IEnumerator Hilang() { yield return new WaitForSeconds(12); PanelDescription.gameObject.SetActive(false); Makanan.gameObject.SetActive(false); TextDescription.gameObject.SetActive(false); }

Sehingga tampilan yang diperoleh nantinya seperti berikut ini:

Page 55: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

44

Setelah 12 detik

Gambar 3.17 kondisi deteksi 1 marker

Contoh kode untuk 2 Marker

Sama dengan kondisi 1 Marker, kondisi deteksi 2 marker diawali dengan

pengambilan id marker yang terdeteksi dari database vuforia.

Tahap awal yang dilakukan sistem ketika mendeteksi 2 marker adalah

memeriksa hubungan antar marker. Langkah yang dilakukan adalah dengan

mendeteksi objek dari kedua marker yang terdeteksi dengan menggunakan perintah

activeInHierarchy. Jika kedua objek itu berhubungan, maka dijalankan fungsi

untuk kedua marker tersebut. Jika tidak berhubungan, maka masing – masing

marker akan ditampilkan objeknya seperti pada kondisi 1 marker tanpa

menampilkan deskripsi markernya. Kondisi tersebut dipresentasikan kedalam

fungsi if-else.

Pada kondisi 2 marker yang terdeteksi, digunakan 2 jenis kondisi yaitu

deteksi tanpa mengukur jarak dan deteksi dengan mengukur jarak. Kondisi tanpa

Page 56: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

45

mengukur jarak digunakan untuk 2 karakter dimana terdapat benda mati, contohnya

adalah air dan ikan.

Contoh kode untuk 2 Marker tanpa deteksi jarak

Mendeteksi jika kedua objek aktif dengan fungsi if-else

if(air1.activeInHierarchy && ikan1.activeInHierarchy){ }

Lalu menghilangkan objek awal dari marker yang terdeteksi (objek awal ini

merupakan objek yang ditampilkan pada kondisi 1 marker) dan menggantinya

dengan objek untuk 2 marker

air1.SetActive(false); ikan1.SetActive(false); airikan.SetActive(true);

Lalu mengubah isi teks nama marker yang ditampilkan di kiri atas layar, dan

menghilangkan teks & panel deskripsi marker

TextTargetName.GetComponent<Text> ().text = "Ikan hidup di air"; Makanan.gameObject.SetActive(false); TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false);

Perintah lengkapnya adalah sebagai berikut

// Air + Ikan if(air1.activeInHierarchy && ikan1.activeInHierarchy){ air1.SetActive(false); ikan1.SetActive(false); airikan.SetActive(true); TextTargetName.GetComponent<Text> ().text = "Ikan hidup di air"; Makanan.gameObject.SetActive(false); TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); }

Sedangkan untuk 2 karakter hewan yang berhubungan / berinteraksi, digunakan

deteksi dengan mengukur jarak dan posisi vektor x dari masing – masing karakter.

Contohnya yaitu Kucing dan Anjing pada contoh kode untuk 2 marker dengan

deteksi jarak sebagai berikut.

Page 57: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

46

Contoh kode untuk 2 Marker dengan deteksi jarak

Mendeteksi jika kedua objek aktif dengan fungsi if-else

if(anjing1.activeInHierarchy && kucing1.activeInHierarchy){ }

Kemudian dilakukan pengukuran jarak kedua marker yang terdeteksi

float distance3 = Vector3.Distance (Kucing.transform.position, Anjing.transform.position);

Lalu membaginya kedalam 2 kondisi, dimana terdapat kondisi jarak antara 500

hingga 200, dan jarak dibawah 200. Untuk kondisi diatas 500 tidak dideskripsikan

sehingga akan dieksekusi sesuai kondisi deteksi 1 marker tanpa menampilkan

deskripsi & panel deskripsi markernya.

if (200 <= distance3 && distance3 < 500) { } if (200 > distance3) { }

Untuk kondisi jarak antara 500 – 200, dilakukan proses deteksi koordinat posisi

vector x dari marker yang terdeteksi

float arah = anjing1.transform.position.x; float arah2 = kucing1.transform.position.x;

Kemudian dikondisikan kedalam dua kondisi, dimana marker 1 disebelah kiri atau

kanan dari marker 2 dengan perbandingan posisi koordinat vektor x

if (arah <= arah2){ } else { }

Pada setiap kondisi diatas, dihilangkan objek awal dari marker yang terdeteksi

(objek awal ini merupakan objek yang ditampilkan pada kondisi 1 marker) dan

menggantinya dengan objek untuk 2 marker. Lalu mengubah isi teks nama marker

yang ditampilkan di kiri atas layar, dan menghilangkan teks & panel deskripsi

marker.

Page 58: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

47

Perintah lengkapnya adalah sebagai berikut

if(anjing1.activeInHierarchy && kucing1.activeInHierarchy){ float arah = anjing1.transform.position.x; float arah2 = kucing1.transform.position.x; if (200 <= distance3 && distance3 < 500) { if (arah <= arah2){ kucing5.SetActive(true); anjing3.SetActive(true); } else { kucing5l.SetActive(true); anjing3l.SetActive(true); } kucing1.SetActive(false); anjing1.SetActive(false); TextTargetName.GetComponent<Text> ().text = "Anjing mengejar Kucing"; Makanan.gameObject.SetActive(false); TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); StopAllAudio(); } if (200 > distance3) { kucing1.SetActive(false); anjingkucing.SetActive(true); anjing1.SetActive(false); TextTargetName.GetComponent<Text> ().text = "Anjing menyerang Kucing"; Makanan.gameObject.SetActive(false); TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); StopAllAudio(); }

Pada kondisi tersebut, GameObject yang ditampilkan ketika marker kucing berada

di sebelah kiri marker anjing berbeda dengan yang ditampilkan ketika marker

kucing berada di sebelah kanan marker anjing. Begitu juga dengan kondisi ketika

kedua marker berjauhan, berdekatan, maupun bersentuhan juga ditampilkan

GameObject yang berbeda.

Untuk kondisi 3 Marker keatas, seluruh kode tersebut di edit dan kombinasikan

sesuai data yang dibutuhkan.

Page 59: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

48

Gambar 3.18 Tampilan Objek dan Marker pada aplikasi Unity 3D

Contoh kode untuk marker metamorfosis kupu-kupu

Khusus untuk metamorfosis kupu-kupu, digunakan 4 marker dimana urutan

markernya harus benar dari kiri kekanan. Keempat marker itu adalah telur, ulat,

kepompong, dan kupu-kupu. Jika keempat marker terdeteksi maka akan dilakukan

perbandingan posisi marker untuk mengetahui kebenaran urutannya

if(telur.activeInHierarchy && ulat.activeInHierarchy && kepompong.activeInHierarchy && kupu.activeInHierarchy){ PutarVideo(); } else if (telur.activeInHierarchy && ulat.activeInHierarchy){ TidakPutarVideo(); } else if (telur.activeInHierarchy && kepompong.activeInHierarchy){ TidakPutarVideo(); } else if (telur.activeInHierarchy && kupu.activeInHierarchy){ TidakPutarVideo(); } else if (ulat.activeInHierarchy && kepompong.activeInHierarchy){ TidakPutarVideo(); } else if (ulat.activeInHierarchy && kupu.activeInHierarchy){ TidakPutarVideo(); } else if (kepompong.activeInHierarchy && kupu.activeInHierarchy){ TidakPutarVideo(); }

Page 60: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

49

Jika urutannya benar maka akan pindah ke halaman videokupu untuk

menampilkan video metamorfosis kupu-kupu. Jika urutannya salah maka hanya

menampilkan pesan “Urutan salah”. Penentuan urutan ini dilakukan dengan

menggunakan pengukuran koordinat posisi vector x.

Fungsi PutarVideo()

void PutarVideo() { float arah = telur.transform.position.x; float arah2 = ulat.transform.position.x; float arah3 = kepompong.transform.position.x; float arah4 = kupu.transform.position.x; if(arah < arah2 && arah2 < arah3 && arah3 < arah4){ Application.LoadLevel("videokupu"); } else { TextTargetName.GetComponent<Text>().text = "Urutan salah"; Makanan.gameObject.SetActive(false); TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); StopAllAudio(); } }

Fungsi TidakPutarVideo()

void TidakPutarVideo() { TextTargetName.GetComponent<Text>().text = "Urutan salah"; Makanan.gameObject.SetActive(false); TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); StopAllAudio(); }

Page 61: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

50

III.6.7 Perancangan halaman videokupu

Gambar 3.19 Halaman videokupu

Halaman ini digunakan untuk memutar video metamorfosis kupu-kupu. Digunakan

objek RawImage sebagai objek layar pemutaran video. Selain itu ditambahkan item

halaman loading untuk kembali ke AR Kamera.

void Start () { Application.runInBackground = true; StartCoroutine(playVideo()); }

Pada fungsi void start() dipanggil perintah memutar video. Adapun fungsi

memutar video sebagai berikut:

IEnumerator playVideo() { //Daftarkan videoPlayer sebagai gameObject videoPlayer = gameObject.AddComponent<VideoPlayer>(); //Daftarkan audioSource sebagai gameObject audioSource = gameObject.AddComponent<AudioSource>(); //Hentikan pemutaran otomatis untuk audio dan video videoPlayer.playOnAwake = false; audioSource.playOnAwake = false; audioSource.Pause(); //Load file video yang akan diputar videoPlayer.source = VideoSource.VideoClip;

Page 62: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

51

//Atur keluaran audio sebagai gameObject AudioSource videoPlayer.audioOutputMode = VideoAudioOutputMode.AudioSource; //Atur audio dari file video sebagai sumber audio pada gameObject AudioSource videoPlayer.EnableAudioTrack(0, true); videoPlayer.SetTargetAudioSource(0, audioSource); //Siapkan pemutaran video untuk menghindari "buffering" videoPlayer.clip = videoToPlay; videoPlayer.Prepare(); //Tunggu sampai file video selesai dimuat WaitForSeconds waitTime = new WaitForSeconds(1); while (!videoPlayer.isPrepared) { Debug.Log("Preparing Video"); yield return waitTime; break; } Debug.Log("Done Preparing Video"); //Tetapkan tekstur dari video kedalam gameObject RawImage yang tampil pada layar perangkat image.texture = videoPlayer.texture; //Play Video videoPlayer.Play(); //Play Suara audioSource.Play(); //Pesan debug, menampilkan waktu pemutaran video Debug.Log("Playing Video"); while (videoPlayer.isPlaying) { Debug.LogWarning("Video Time: " + Mathf.FloorToInt((float)videoPlayer.time)); yield return null; } Debug.Log("Done Playing Video"); }

Kemudian dibuatkan perintah untuk kembali ke AR Kamera ketika tombol

kembali ditekan

IEnumerator LoadingScreen() { loadingScreenObj.SetActive(true); async = SceneManager.LoadSceneAsync("training"); async.allowSceneActivation = false; while (async.isDone == false)

Page 63: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

52

{ slider.value = async.progress; if (async.progress == 0.9f) { slider.value = 1f; async.allowSceneActivation = true; } yield return null; } } // Update is called once per frame void Update () { if (Input.GetKeyDown (KeyCode.Escape)) StartCoroutine(LoadingScreen()); }

III.7 Metode Pengujian

Metode yang akan digunakan pada penelitian ini adalah dengan metode Black

Box testing. Pengujian Black Box adalah pengujian yang dilakukan hanya

mengamati hasil eksekusi melalui data uji dan memeriksa fungsional dari perangkat

lunak. Black Box Testing merupakan metode perancangan data uji yang didasarkan

pada spesifikasi aplikasi yang dibuat dengan cara menguji marker yang telah

terdeteksi dengan objek karakter hewan, suara, maupun video yang telah dibuat.

Pengujian marker dilakukan untuk mengetahui apakah objek sudah tampil sesuai

dengan posisi marker yang telah dideteksi, apakah objek yang tampil sudah sesuai

dengan tabel marker, serta menguji jarak dan kemiringan (sudut pandang) kamera

dari perangkat android terhadap marker, serta pengaruh ukuran marker terhadap

tampilan objek dengan ukuran resolusi kamera dan spesifikasi versi android yang

dapat digunakan.

Page 64: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

53

BAB IV

HASIL DAN PEMBAHASAN

IV.1 Gambaran Umum Aplikasi

Pada aplikasi ini penulis akan menggunakan marker yang telah didesain khusus

sehingga dibaca oleh kamera perangkat android dan menampilkan objek karakter

hewan, penjelasan maupun gambaran bentuk interaksi antar hewan sebagai media

pembelajaran untuk anak usia dini. Berdasarkan penelitian sebelumnya maka pada

tugas akhir ini akan dikembangkan AR pengenalan hewan berbasis android

sehingga akan memudahkan anak usia dini dalam mendapatkan layanan PAUD

meskipun tanpa didampingi orang tua dalam penggunaannya, serta melakukan

gerakan badan karena keharusan mengombinasikan penggunaan kartu fisik dengan

smartphone. Selain itu diharapkan aplikasi ini dapat menjadi salah satu alternatif

media pembelajaran pengenalan hewan pada TK dan Playgroup.

IV.2 Pengujian Sistem

IV.2.1 Pengujian Navigasi

Pengujian ini dilakukan dengan tujuan menguji fungsi navigasi aplikasi pada

halaman utama, yang didasarkan pada tabel 4.1 berikut.

Tabel 4.1 Pengujian navigasi aplikasi

No. Tindakan Hasil tes diharapkan

Hasil didapatkan

Kesimpulan

1. Tekan tombol (Kamera

AR)

- Tampil progres loading - Buka Kamera AR

- Tampil progres loading - Buka Kamera AR

Sukses

2. Tekan tombol (Informasi)

Buka halaman informasi

Buka halaman informasi

Sukses

3. Pengguna menekan tombol

(Panduan).

Buka halaman panduan

Buka halaman panduan

Sukses

4. Tekan tombol kembali / back

Kembali ke halaman utama

Kembali ke halaman utama

Sukses

Page 65: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

54

No. Tindakan Hasil tes diharapkan

Hasil didapatkan

Kesimpulan

pada halaman Kamera AR

5. Tekan tombol kembali / back pada halaman utama

Tidak ada respon

Tidak ada respon Sukses

6. Pengguna menekan tombol

(Keluar)

Keluar dari aplikasi / tutup aplikasi

Keluar dari aplikasi / tutup aplikasi

Sukses

Kesimpulan : Seluruh fungsi navigasi yang tersedia pada halaman utama dapat

diakses dan berfungsi dengan baik.

IV.2.2 Pengujian Kamera Perangkat

Pengujian ini dilakukan untuk mengukur jarak terdekat, terjauh, sudut pandang

(kemiringan) kamera pada saat menangkap marker, dan keberhasilan keluarannya.

Kriteria pengujian:

- Marker ukuran 12x12 cm & 7x7 cm

- HP Lenovo K5 Vibe Plus A6020

Gambar 4.1 Jarak terdekat kemiringan 10°

Page 66: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

55

Gambar 4.2 Jarak terjauh kemiringan 10°

Gambar 4.3 Jarak terdekat kemiringan 45°

Page 67: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

56

Gambar 4.4 Jarak terjauh kemiringan 45°

Gambar 4.5 kemiringan 80°

Berdasarkan tabel 4.2 dan 4.3 dibawah, dapat diketahui rentang jarak

deteksi / jarak minimum dan maksimum pendeteksian marker (dalam satuan

centimeter). Hasil tersebut didapatkan dengan menempatkan marker dimeja dan

meletakkan kamera dijarak terjauh kemudian perlahan didekatkan kearah marker.

Page 68: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

57

Tabel 4.2 Hasil pengujian jarak dan kemiringan deteksi menggunakan marker 12x12 cm

No Marker Sudut Jarak antara Kamera

dan Marker (cm) Keluaran yang diperoleh Status

Terdekat Terjauh

1 Air 10° 18 60 Gambar, teks, suara Sukses 45° 15 50 Gambar, teks, suara Sukses 80° - - Tidak terdeteksi Gagal

2 Ayam 10° 16 55 Gambar, teks, suara Sukses 45° 13 43 Gambar, teks, suara Sukses 80° - - Tidak terdeteksi Gagal

3 Anjing 10° 17 58 Gambar, teks, suara Sukses 45° 13 46 Gambar, teks, suara Sukses 80° - - Tidak terdeteksi Gagal

4 Cacing 10° 13 55 Gambar, teks, suara Sukses 45° 13 45 Gambar, teks, suara Sukses 80° - - Tidak terdeteksi Gagal

5 Ikan 10° 12 55 Gambar, teks, suara Sukses 45° 12 45 Gambar, teks, suara Sukses 80° - - Tidak terdeteksi Gagal

6 Kucing 10° 18 57 Gambar, teks, suara Sukses 45° 15 46 Gambar, teks, suara Sukses 80° - - Tidak terdeteksi Gagal

7 Tanah 10° 20 54 Gambar, teks, suara Sukses 45° 17 42 Gambar, teks, suara Sukses 80° - - Tidak terdeteksi Gagal

8 Telur 10° 17 40 Gambar, teks, suara Sukses 45° 15 40 Gambar, teks, suara Sukses 80° - - Tidak terdeteksi Gagal

9 Ulat 10° 13 40 Gambar, teks, suara Sukses 45° 13 40 Gambar, teks, suara Sukses 80° - - Tidak terdeteksi Gagal

10 Kepompong 10° 18 58 Gambar, teks, suara Sukses 45° 15 47 Gambar, teks, suara Sukses 80° - - Tidak terdeteksi Gagal

11 Kupu-kupu 10° 13 59 Gambar, teks, suara Sukses 45° 13 52 Gambar, teks, suara Sukses 80° - - Tidak terdeteksi Gagal

Kesimpulan: Dari tabel 4.1 dapat disimpulkan jika area deteksi marker untuk

aplikasi ini umumnya berada dalam rentang 20 – 40 cm pada sudut kemiringan 0°

- 45° dengan menggunakan marker 12x12 cm.

Page 69: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

58

Kemudian akan dilakukan perbandingan dengan hasil pengukuran area

deteksi menggunakan marker yang lebih kecil, yaitu 7x7 cm

Tabel 4.3 Hasil pengujian jarak dan kemiringan deteksi menggunakan marker 7x7cm

No Marker Sudut Jarak antara Kamera

dan Marker (cm) Keluaran yang diperoleh Status

Terdekat Terjauh

1 Ayam 10° 5 22 Gambar, teks, suara Sukses 45° 12 20 Gambar, teks, suara Sukses 80° - - Tidak terdeteksi Gagal

2 Anjing 10° 5 28 Gambar, teks, suara Sukses 45° 10 25 Gambar, teks, suara Sukses 80° - - Tidak terdeteksi Gagal

3 Cacing 10° 5 28 Gambar, teks, suara Sukses 45° 11 24 Gambar, teks, suara Sukses 80° - - Tidak terdeteksi Gagal

4 Ikan 10° 5 30 Gambar, teks, suara Sukses 45° 10 25 Gambar, teks, suara Sukses 80° - - Tidak terdeteksi Gagal

5 Kucing 10° 5 28 Gambar, teks, suara Sukses 45° 10 25 Gambar, teks, suara Sukses 80° - - Tidak terdeteksi Gagal

Kesimpulan: Ketika menggunakan marker berukuran lebih kecil yaitu 7x7 cm,

rentang jarak deteksi berkurang menjadi 11 – 20 cm.

Setelah membandingkan kedua pengukuran diatas, maka dapat disimpulkan

jika rentang deteksi marker pada aplikasi ini dipengaruhi oleh ukuran marker yang

digunakan. Semakin besar marker yang digunakan maka semakin besar pula

rentang deteksi markernya.

IV.2.3 Pengujian Marker

Pengujian ini dilakukan dengan tujuan mengetahui keluaran aplikasi pada

beragam situasi deteksi marker. Pengujian dilakukan menggunakan tipe pengujian

equivalence class, berdasarkan tabel 4.4 berikut.

Page 70: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

59

Tabel 4 4 Pengujian Kamera AR

No. Data Uji Input Hasil tes diharapkan

Hasil didapatkan

Kesimpulan

1. Marker dideteksi = 0

Kamera hp tidak menyorot marker

Pesan “Sorot gambar hewan”

Pesan “Sorot gambar hewan”

Sukses

2. Marker dideteksi = 1

Marker Ayam

Tampil nama marker

Tampil pesan “Ayam”

Sukses

Tampil gambar hewan

Tampil gambar ayam

Sukses

Teks deskripsi hewan, hilang setelah beberapa saat

Teks deskripsi ayam, hilang setelah 12 detik

Sukses

Penjelasan melalui suara, berlanjut ketika marker dideteksi kembali

Penjelasan melalui suara, berlanjut ketika marker dideteksi kembali

Sukses

3. Marker dideteksi = 2

Marker Anjing dan Kucing, disorot berjauhan

Tampil kedua nama marker

Tampil pesan “Anjing dan Kucing”

Sukses

Tampil kedua gambar hewan sesuai gambar ketika deteksi 1 marker

Tampil gambar anjing dan kucing, tampilan sama ketika deteksi 1 marker

Sukses

Tidak menampilkan teks deskripsi & suara

Tidak menampilkan teks deskripsi & suara

Sukses

Marker Anjing dan Kucing, disorot berdekatan. Posisi marker kucing disebelah kiri marker anjing

Tampil kedua nama marker

Tampil pesan “Anjing mengejar Kucing”

Sukses

Tampil kedua gambar hewan yang berinteraksi dengan arah hadap yang sesuai

Tampil gambar anjing sedang mengejar kucing, menghadap kekiri

Sukses

Page 71: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

60

No. Data Uji Input Hasil tes diharapkan

Hasil didapatkan

Kesimpulan

Tidak menampilkan teks deskripsi & suara

Tidak menampilkan teks deskripsi & suara

Sukses

Marker Anjing dan Kucing, disorot berdekatan. Posisi marker kucing disebelah kanan marker anjing

Tampil kedua nama marker

Tampil pesan “Anjing mengejar Kucing”

Sukses

Tampil kedua gambar hewan yang berinteraksi dengan arah hadap yang sesuai

Tampil gambar anjing sedang mengejar kucing, menghadap kekanan

Sukses

Tidak menampilkan teks deskripsi & suara

Tidak menampilkan teks deskripsi & suara

Sukses

Marker Anjing dan Kucing, disorot bersentuhan

Tampil kedua nama marker

Tampil pesan “Anjing menyerang Kucing”

Sukses

Tampil kedua gambar hewan yang berinteraksi

Tampil gambar anjing dan kucing berkelahi

Sukses

Tidak menampilkan teks deskripsi & suara

Tidak menampilkan teks deskripsi & suara

Sukses

4. Marker dideteksi = 3

Marker Anjing, Kucing, dan Tanah.

Tampil ketiga nama marker

Tampil pesan “Anjing menyerang Kucing didarat”

Sukses

Tampil hubungan ketiga marker

Tampil gambar anjing menyerang kucing didaratan.

Sukses

Tidak menampilkan

Tidak menampilkan

Sukses

Page 72: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

61

No. Data Uji Input Hasil tes diharapkan

Hasil didapatkan

Kesimpulan

teks deskripsi & suara

teks deskripsi & suara

5. Marker dideteksi = 4

Marker Ayam, Ikan, Cacing, dan Tanah.

Tampil keempat nama marker

Tampil pesan "Ayam memangsa Cacing di Darat, Ikan tidak bernafas di Darat"

Sukses

Tampil hubungan keempat marker

Tampil gambar ayam memangsa cacing, dan gambar ikan tidak bernafas didarat

Sukses

Tidak menampilkan teks deskripsi & suara

Tidak menampilkan teks deskripsi & suara

Sukses

Marker Telur. Ulat, Kepompong, dan Kupu-kupu, tidak berurutan

Pesan “Urutan Salah”

Pesan “Urutan Salah”

Sukses

Marker Telur. Ulat, Kepompong, dan Kupu-kupu, urutan kiri ke kanan sesuai

Putar video metamorfosis kupu - kupu

Putar video metamorfosis kupu - kupu

Sukses

Kesimpulan : Keluaran aplikasi terhadap segala situasi deteksi marker yang diuji

sudah sesuai dengan perencanaan yang dibuat karena tidak ditemukan kesalahan

pada saat pengujian.

RINCIAN PENGUJIAN MARKER

Pada pengujian marker dilakukan 3 jenis pengujian berbeda untuk menguji

ketepatan keluaran objek berdasarkan penggabungan beberapa marker, atau yang

Page 73: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

62

bisa disebut sebagai multimarker. Pengujian ini meliputi pengujian kombinasi

marker, pengujian jarak antar marker, dan pengujian posisi antar marker.

IV.2.3.1 Pengujian Kombinasi Marker

Pada pengujian ini, dilakukan pengujian blackbox tipe equivalence class untuk

memeriksa kesesuaian keluaran objek hasil penggabungan beberapa marker dengan

perencanaan keluaran objek pada tabel marker yang telah dibuat, berdasarkan tabel

4.5 berikut.

Tabel 4.5 Blackbox pengujian multimarker

Masukan Keluaran

Marker 1 Marker 2 Marker 3 Marker 4 Hasil yang diharapkan Hasil

sebenarnya

Air Anjing

Sesuai yang diharapkan

Air Ikan Kucing

Sesuai yang diharapkan

Kucing Anjing

Sesuai yang diharapkan

Anjing Kucing

Sesuai yang diharapkan

Page 74: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

63

Masukan Keluaran

Marker 1 Marker 2 Marker 3 Marker 4 Hasil yang diharapkan Hasil

sebenarnya

Kucing (sentuh)

Anjing (sentuh)

Sesuai yang diharapkan

Telur Ulat Kepompong Kupu-kupu

Video

Sesuai yang diharapkan

Kucing3D

Sesuai yang diharapkan

Kesimpulan : Fitur deteksi multi marker telah berfungsi baik, dimana keluaran

objek hasil deteksi pada kondisi satu marker maupun kondisi penggabungan

beberapa marker sudah sesuai dengan perencanaan keluaran objek yang telah

dibuat.

IV.2.3.2 Pengujian Jarak Antar Marker

Pada pengujian ini, dilakukan pengukuran jarak antar marker yang memiliki

fitur deteksi jarak. Hanya marker antar hewan yang saling berinteraksi di dunia

nyata saja yang memiliki fitur ini, dan saat ini terbatas untuk 2 marker karena

keterbatasan ukuran layar perangkat. Pasangan marker yang memiliki fitur ini yaitu

marker Anjing - Kucing, Ayam - Cacing, Kucing - Ikan, dan Ikan - Cacing.

Pengujian dilakukan dengan 3 tahap pengukuran, yaitu saat marker berjauhan,

marker berdekatan, dan marker bersentuhan, yang didasarkan pada tabel 4.6.

Page 75: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

64

Gambar 4.6 Marker berjauhan, jarak 19 cm

Gambar 4.7 Marker berjauhan, jarak < 19 cm

Gambar 4.8 Marker berdekatan, jarak 0 cm

Page 76: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

65

Tabel 4.6 Pengujian jarak antar marker

Marker Jarak di unity

Hasil yang diharapkan

Jarak sebenarnya

(cm)

Hasil sebenarnya

Anjing – Kucing ≥ 500

Kedua marker menampilkan objek

awal, kucing & anjing

≥ 19 Sesuai yang diharapkan

Anjing – Kucing < 500 Tampilkan anjing mengejar kucing < 19 Sesuai yang

diharapkan

Anjing – Kucing < 200 Tampilkan anjing & kucing berkelahi 0 Sesuai yang

diharapkan

Ayam – Cacing ≥ 500

Kedua marker menampilkan objek

awal, Ayam & Cacing

≥ 19 Sesuai yang diharapkan

Ayam – Cacing < 500

Tampilkan ekspresi ayam siap mengejar

cacing yang ketakutan

< 19 Sesuai yang diharapkan

Ayam – Cacing < 200 Tampilkan ayam memakan cacing 0 Sesuai yang

diharapkan

Cacing – Ikan ≥ 500

Kedua marker menampilkan objek

awal, Cacing & Ikan

≥ 19 Sesuai yang diharapkan

Cacing – Ikan < 500

Tampilkan ekspresi ikan siap mengejar

cacing yang ketakutan

< 19 Sesuai yang diharapkan

Cacing – Ikan < 200 Tampilkan ikan memakan cacing 0 Sesuai yang

diharapkan

Ikan – Kucing ≥ 500

Kedua marker menampilkan objek

awal, Ikan & Kucing

≥ 19 Sesuai yang diharapkan

Ikan – Kucing < 500

Tampilkan ekspresi kucing ingin

memakan ikan yang ketakutan

< 19 Sesuai yang diharapkan

Ikan – Kucing < 200 Tampilkan kucing memakan ikan 0 Sesuai yang

diharapkan

Page 77: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

66

Kesimpulan : Fitur deteksi jarak antar marker berfungsi dengan baik, dimana

keluaran objek pada 3 kondisi jarak yang berbeda dapat berubah sesuai dengan

perancangan yang dibuat.

IV.2.3.3 Pengujian Posisi Antar Marker

Pada pengujian ini, dilakukan pemeriksaan posisi salah satu marker terhadap

marker lainnya. Marker yang memiliki fitur ini terbatas hanya pada marker yang

memiliki fitur deteksi jarak, ditambah marker metamorfosis kupu-kupu. Fitur ini

dibutuhkan untuk mencegah kesalahan tampilan objek pada kedua marker ketika

berada di posisi berdekatan, dimana sebagai contoh gambar anjing mengejar kucing

bisa berubah jadi kucing mengejar anjing jika posisi marker ditukar. Sedangkan

pada marker metamorfosis kupu-kupu digunakan untuk menentukan urutan posisi

marker yang menggambarkan fase metamorfosis. Pasangan marker yang memiliki

fitur ini yaitu marker Anjing - Kucing, Ayam - Cacing, Kucing - Ikan, Ikan – Cacing,

dan Telur – Ulat – Kepompong – Kupu-kupu. Pengujian ini dilakukan berdasarkan

tabel 4.7.

Gambar 4.9 Marker Anjing disebelah kiri marker Kucing

Page 78: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

67

Gambar 4.10 Marker Anjing disebelah kanan marker Kucing

Gambar 4.11 Urutan salah pada marker metamorfosis kupu-kupu

Gambar 4.12 Urutan benar pada marker metamorfosis kupu-kupu, putar video

Page 79: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

68

Tabel 4.7 Pengujian posisi antar marker

Posisi Marker Tampilan yang diharapkan

Tampilan sebenarnya

Anjing – Kucing Anjing & kucing menghadap kekanan

Sesuai yang diharapkan

Kucing – Anjing Anjing & kucing menghadap kekiri

Sesuai yang diharapkan

Ayam – Cacing Ayam & cacing menghadap kekanan

Sesuai yang diharapkan

Cacing – Ayam Ayam & cacing menghadap kekiri

Sesuai yang diharapkan

Kucing – Ikan Kucing & ikan menghadap kekanan

Sesuai yang diharapkan

Ikan – Kucing Kucing & ikan menghadap kekiri

Sesuai yang diharapkan

Cacing – Ikan Cacing & ikan menghadap kekiri

Sesuai yang diharapkan

Ikan – Cacing Cacing & ikan menghadap kekanan

Sesuai yang diharapkan

Telur – Ulat – Kepompong – Kupu-kupu Putar video metamorfosis kupu-kupu

Sesuai yang diharapkan

Telur – Ulat – Kupu-kupu – Kepompong Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Telur – Kupu-kupu – Kepompong – Ulat Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Telur – Kupu-kupu – Ulat – Kepompong Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Telur – Kepompong – Ulat – Kupu-kupu Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Telur – Kepompong – Kupu-kupu – Ulat Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Ulat – Telur – Kepompong – Kupu-kupu Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Ulat – Telur – Kupu-kupu – Kepompong Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Ulat – Kupu-kupu – Kepompong – Telur Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Ulat – Kupu-kupu – Telur – Kepompong Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Ulat – Kepompong – Telur– Kupu-kupu Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Ulat – Kepompong – Kupu-kupu – Telur Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Kepompong – Ulat – Telur – Kupu-kupu Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Page 80: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

69

Posisi Marker Tampilan yang diharapkan

Tampilan sebenarnya

Kepompong – Ulat – Kupu-kupu – Telur Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Kepompong – Kupu-kupu – Telur – Ulat Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Kepompong – Kupu-kupu – Ulat – Telur Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Kepompong – Telur – Ulat – Kupu-kupu Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Kepompong – Telur – Kupu-kupu – Ulat Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Kupu-kupu – Ulat – Kepompong – Telur Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Kupu-kupu – Ulat – Telur – Kepompong Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Kupu-kupu – Telur – Kepompong – Ulat Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Kupu-kupu – Telur – Ulat – Kepompong Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Kupu-kupu – Kepompong – Ulat – Telur Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Kupu-kupu – Kepompong – Telur – Ulat Tampilkan objek disertai teks : Urutan salah

Sesuai yang diharapkan

Kesimpulan : Fitur deteksi posisi berdasarkan koordinat vektor x antar marker

berfungsi dengan baik, dimana arah hadap keluaran objek berubah sesuai dengan

posisi markernya sebagaimana pada perancangan yang dibuat.

Setelah dilakukan 3 jenis pengujian untuk setiap perpaduan marker

berdasarkan tabel marker, maka hasil yang didapatkan telah sesuai dengan yang

diharapkan. Berdasarkan hasil tersebut, multimarker pada aplikasi ini telah berjalan

sesuai dengan perancangan.

IV.2.4 Pengujian spesifikasi perangkat Android

Pengujian kali ini dilakukan untuk mengetahui versi android yang dapat

mengoperasikan aplikasi PAUD - Pengenalan Hewan. Pada pengujian kali ini

digunakan beberapa perangkat, yaitu:

Page 81: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

70

- Lenovo K5 Vibe+ a6020

Spesifikasi Qualcomm MSM8929 Snapdragon 415 Octa-core (4x1.5 GHz

Cortex-A53 & 4x1.2 GHz Cortex-A53), RAM 3.0GB, Kamera utama 13 MP

f/2.2. Resolusi 1080 x 1920 piksel.

Sistem operasi Android 5.1 (Lollipop)

- Samsung Galaxy Grand 2 SM-G7102

Spesifikasi Qualcomm MSM8226 Snapdragon 400 Quad-core @1.2 GHz

Cortex-A7, RAM 1.5 GB, Kamera utama 8 MP f/2,4, Resolusi 720 x 1280

piksel.

Sistem operasi Android 4.3 (Jelly Bean) & 4.4 (KitKat)

- Samsung Galaxy Note 3 SM-N900

Spesifikasi Exynos 5420 Octa-core (4x1.9 GHz Cortex-A15 & 4x1.3 GHz

Cortex-A7), RAM 3.0GB, Kamera utama 13 MP f/2.2. Resolusi 1080 x

1920 piksel.

Sistem operasi Android 4.4 (Kitkat) & Android 5.0 (Lollipop)

Keterangan gambar:

a. Lenovo K5 Vibe Plus a6020 b. Samsung Galaxy Grand 2 SM-G7102 c. Samsung Galaxy Note 3 SM-N900

Page 82: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

71

Gambar 4.13 Pengujian pada perangkat android halaman menu

Gambar 4.14 Pengujian pada perangkat android halaman AR Kamera

Page 83: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

72

Hasil pengujian aplikasi pada perangkat - perangkat tersebut dapat dilihat pada tabel 4.8 berikut.

Tabel 4.8 Hasil pengujian beberapa perangkat Android

Perangkat Versi Android Beroperasi Lenovo K5 Vibe+ a6020

5.1 (Lollipop)

Ya

Samsung Galaxy Grand 2 SM-G7102

4.3 (Jelly Bean) Ya

Samsung Galaxy Grand 2 SM-G7102

4.4 (KitKat) Ya

Samsung Galaxy Note 3 SM-N9000

4.4 (Kitkat) Ya

Samsung Galaxy Note 3 SM-N900

5.0 (Lollipop) Ya

Kesimpulan : Dari hasil pengujian diatas, aplikasi PAUD – Pengenalan hewan

dapat beroperasi dengan baik pada perangkat dengan sistem operasi 4.3 (Jelly Bean)

hingga 5.1 (Lollipop), dengan perangkat yang memiliki spesifikasi RAM minimal

1.5 GB.

IV.3 Hasil Uji Kuesioner

Kuesioner terdiri dari 8 pertanyaan dan terdapat 10 guru & orang tua murid

sebagai responden yang menjawab kuesioner. Kuesioner ini dimaksudkan untuk

mengetahui pendapat guru mengenai augmented reality, aplikasi augmented reality

PAUD – Pengenalan Hewan berbasis android, dan manfaat penggunaan aplikasi

tersebut. Berikut adalah hasil penyebaran kuesioner:

1. Apakah Anda pernah menggunakan aplikasi augmented reality?

Pertanyaan ini bertujuan untuk mengetahui apakah sebelumnya responden

sudah pernah menggunakan aplikasi augmented reality. Persentase jawaban

responden terhadap pertanyaan ini dapat dilihat pada tabel 4.9 berikut.

Page 84: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

73

Tabel 4.9 Hasil kuesioner nomor 1

Pilihan Jumlah Responden Persentase Responden Ya 0 0%

Tidak 10 100%

Berdasarkan hasil yang diperoleh, seluruh responden belum pernah menggunakan

aplikasi augmented reality.

2. Apakah menurut anda aplikasi PAUD – Pengenalan Hewan sudah bagus?

Pertanyaan ini dibuat untuk mengetahui berapa banyak responden yang

beranggapan aplikasi augmented reality PAUD – Pengenalan Hewan sudah bagus

atau tidak. Persentase jawaban responden terhadap pertanyaan ini dapat dilihat pada

tabel 4.10 berikut.

Tabel 4.10 Hasil kuesioner nomor 2

Pilihan Jumlah Responden Persentase Responden Ya 10 100%

Tidak 0 0%

Hasil yang diperoleh menunjukkan bahwa semua responden merasa bahwa aplikasi

tersebut sudah bagus.

3. Apakah anda tertarik menggunakannya?

Pertanyaan ini ditujukan untuk mengetahui apakah responden tertarik

menggunakan aplikasi ini kepada anaknya. Persentase jawaban responden terhadap

pertanyaan ini dapat dilihat pada tabel 4.11 berikut.

Tabel 4.11 Hasil kuesioner nomor 3

Pilihan Jumlah Responden Persentase Responden Ya 10 100%

Tidak 0 0%

Berdasarkan hasil yang diperoleh 100% responden tertarik menggunakan aplikasi

ini kepada anaknya.

4. Apakah tampilan aplikasi PAUD – Pengenalan Hewan menarik?

Page 85: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

74

Pertanyaan ini bertujuan untuk mengetahui tanggapan responden terhadap

tampilan aplikasi PAUD – Pengenalan Hewan, apakah tampilan aplikasi terlihat

menarik atau tidak. Persentase jawaban responden terhadap pertanyaan ini dapat

dilihat pada tabel 4.12 berikut.

Tabel 4.12 Hasil kuesioner nomor 4

Pilihan Jumlah Responden Persentase Responden Ya 10 100%

Tidak 0 0%

Berdasarkan hasil yang diperoleh seluruh responden berpendapat tampilan aplikasi

ini menarik.

5. Apakah informasi yang didapat di aplikasi augmented reality PAUD –

Pengenalan Hewan lengkap?

Pertanyaan ini ditujukan untuk mengetahui bahwa informasi yang didapatkan

pada aplikasi augmented reality PAUD – Pengenalan Hewan sudah lengkap atau

tidak. Persentase jawaban responden terhadap pertanyaan ini dapat dilihat pada

tabel 4.13 berikut.

Tabel 4.13 Hasil kuesioner nomor 5

Pilihan Jumlah Responden Persentase Responden Ya 6 60%

Tidak 4 40%

Berdasarkan hasil yang diperoleh, 60% dari responden berpendapat bawah

informasi yang didapat dari aplikasi ini sudah lengkap. Adanpun saran dari

responden yang menjawab “tidak” umumnya menginginkan penambahan jumlah

karakter hewan yang ditampilkan pada aplikasi ini.

6. Apakah aplikasi ini mudah digunakan?

Pertanyaan ini ditujukan untuk mengetahui berapa banyak responden yang

berpendapat bahwa penggunaan aplikasi ini mudah. Persentase jawaban responden

terhadap pertanyaan ini dapat dilihat pada tabel 4.14 berikut.

Page 86: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

75

Tabel 4.14 Hasil kuesioner nomor 6

Pilihan Jumlah Responden Persentase Responden Ya 8 80%

Tidak 2 20%

Berdasarkan data yang diperoleh, 80% dari responden berpendapat aplikasi ini

mudah untuk digunakan.

7. Apakah Anda merasa terbantu dengan adanya aplikasi PAUD –

Pengenalan Hewan?

Pertanyaan ini ditujukan untuk mengetahui efektifitas penggunaan aplikasi ini

dalam membantu Pendidikan anak usia dini dalam hal pengenalan hewan.

Persentase jawaban responden terhadap pertanyaan ini dapat dilihat pada tabel 4.15

berikut.

Tabel 4.15 Hasil kuesioner nomor 7

Pilihan Jumlah Responden Persentase Responden Ya 10 100%

Tidak 0 0%

Berdasarkan data yang diperoleh, semua responden berpendapat aplikasi ini dapat

membantu proses pembelajaran.

8. Apakah aplikasi ini layak digunakan sebagai media pembelajaran?

Pertanyaan ini ditujukan untuk mengetahui tanggapan responden terhadap

aplikasi ini, apakah layak digunakan sebagai media pembelajaran terhadap anak.

Persentase jawaban responden terhadap pertanyaan ini dapat dilihat pada tabel 4.16

berikut.

Tabel 4.16 Hasil kuesioner nomor 8

Pilihan Jumlah Responden Persentase Responden Ya 10 100%

Tidak 0 0%

Berdasarkan hasil yang diperoleh, seluruh responden berpendapat aplikasi ini layak

digunakan sebagai media pembelajaran terhadap anak.

Page 87: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

76

Dari hasil seluruh pertanyaan kuesioner yang diajukan, selain topik tentang apakah

responden sudah pernah menggunakan aplikasi Augmented Reality, seluruh

responden menjawab “Ya” pada semua pertanyaan dengan persentase diatas 50%,

sehingga dapat disimpulkan jika implementasi multimarker augmented reality pada

aplikasi pengenalan hewan untuk anak usia dini (PAUD – Pengenalan Hewan)

dapat digunakan sebagai salah satu media pembelajaran untuk anak usia dini dalam

mengenal hewan, interaksi dan lingkungannya.

Page 88: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

77

BAB V

PENUTUP

V.1 Kesimpulan

Setelah melakukan tahapan implementasi dan hasil pengujian yang telah dibahas

sebelumnya maka dapat disimpulkan bahwa:

1. Pembuatan aplikasi pengenalan hewan untuk pendidikan anak usia dini

yang disesuaikan berdasarkan kurikulum PAUD tahun 2013, menampilkan

karakter hewan dalam bentuk 2D disertai penjelasan dalam bentuk tulisan

dan suara. Selain itu juga digambarkan ilustrasi interaksi antar hewan dan

lingkungannya.

2. Fitur multimarker augmented reality pada aplikasi PAUD – Pengenalan

Hewan diterapkan dengan mengombinasikan marker hewan - hewan dan

lingkungannya kedalam sorot kamera perangkat android. Setiap kombinasi

marker akan menampilkan objek baru yang menggambarkan perpaduan dari

marker yang digunakan, dengan jumlah maksimum marker yang dapat

dilacak secara bersamaan sebanyak 4 buah.

3. Aplikasi PAUD – Pengenalan Hewan dapat beroperasi pada perangkat

mobile berbasis android 4.3 (Jelly Bean) hingga 5.1 (Lolipop) menggunakan

kamera smartphone android dengan menyorot marker yang telah ditentukan

lalu menampilkan objek 2D maupun 3D dari hewan tersebut. Pendeteksian

marker yang optimal untuk aplikasi PAUD – Pengenalan Hewan berada

pada rentang jarak kamera terhadap marker dikisaran 20 – 40 cm dengan

menggunakan marker berukuran 12x12 cm, dan rentang jarak 6 - 22 cm

untuk marker berukuran 7x7 cm.

V.2 Saran

Berdasarkan tahapan implementasi dan pengujian sistem maka dapat disarankan

untuk pengembangan sistem berikutnya yaitu:

Page 89: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

78

1. Diharapkan kelengkapan karakter hewan yang didukung bisa ditingkatkan

jumlahnya, baik dalam bentuk 2D maupun 3D.

2. Saat ini pengembangan dan implementasi metode multimarker yang

membuat marker – markernya dapat saling berinteraksi pada aplikasi

augmented reality masih kurang dan terbatas. Hal itu terbukti dari

kurangnya tutorial dan aplikasi yang menerapkan topik multimarker yang

mengombinasikan banyak marker untuk menampilkan keluaran gabungan

1 objek yang penulis temukan selama merancang aplikasi ini. Sehingga

menurut penulis, topik multimarker dimana setiap marker dapat dibuat

saling berhubungan masih dapat dikembangkan lebih jauh lagi.

Page 90: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

79

DAFTAR PUSTAKA

[1] M. J. Sihaloho, “Ini Delapan Masalah PAUD di Indonesia,” Berita Satu, 10-Mar-2016.

[2] H. F. Jinan, E. M. Sjioen, N. H. Maulidiyah, F. P. Atikah, and T. M. Nisa, “DAMPAK NEGATIF GADGET TERHADAP PERKEMBANGAN ANAK USIA DINI.” Universitas Airlangga, 2015.

[3] Y. H. Widiartanto, “Ini Bahaya Layar ‘Smartphone’ bagi Mata Anak,” Kompas.com, 16-Jan-2017.

[4] H. Hilmansyah, “Aturan Main ‘Gadget’ agar Mata Tetap Sehat,” Kompas.com, 16-Apr-2016.

[5] F. Wahyutama, F. Samopa, and H. Suryotrisongko, “Penggunaan Teknologi Augmented Reality Berbasis Barcode sebagai Sarana Penyampaian Informasi Spesifikasi dan Harga Barang yang Interaktif Berbasis Android, Studi Kasus pada Toko Elektronik ABC Surabaya,” J. Tek. ITS, vol. 2, no. 3, pp. A481–A486, Dec. 2013.

[6] DESWARDI TIA PUTRA, “RANCANG BANGUN BUKU ENSIKLOPEDIA DINOSAURUS DENGAN TEKNOLOGI AUGMENTED REALITY (AR) BERBASIS MULTIMEDIA SEBAGAI MEDIA PEMBELAJARAN,” skripsi, UNIVERSITAS ISLAM NEGERI SULTAN SYARIEF KASIM RIAU, 2013.

[7] M. E. Apriyani and R. Gustianto, “Augmented Reality sebagai Alat Pengenalan Hewan Purbakala dengan Animasi 3D menggunakan Metode Single Marker,” J. INFOTEL, vol. 7, no. 1, pp. 47–52, May 2015.

[8] I. N. W. Kusuma, “PEMBANGUNAN APLIKASI MEDIA PERIKLANAN ARLOJI MENGGUNAKAN AUGMENTED REALITY BERBASIS ANDROID,” s1, UAJY, 2014.

[9] R. Silva, J. C. Oliveira, and G. A. Giraldi, “Introduction to Augmented Reality,” 2003.

[10] A. Z. Zharauri and A. Jayadi, “Aplikasi Penampil Informasi Hasil Pengenalan Foto Wajah pada Android Berbasis Augmented Reality,” s1, Universitas Hasanuddin, 2016.

[11] B. A. Pramono, “DESAIN DAN IMPLEMENTASI AUGMENTED REALITY BERBASIS WEB PADA APLIKASI FURNITURE SHOPPING MANAGER SEBAGAI ALAT BANTU BELANJA ONLINE,” J. Transform., vol. 10, no. 1, pp. 26–33, Jul. 2012.

[12] R. Roedavan, Unity Tutorial Game Engine. Bandung: Informatika, 2014.

Page 91: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

80

[13] E. B. Sembiring, S. Sapriadi, and Y. C. Brahmana, “Rancang Bangun dan Analisis Aplikasi Augmented Reality pada Produk Furniture,” J. INTEGRASI, vol. 8, no. 1, pp. 22–28, Apr. 2016.

[14] A. Prihantara and B. K. Riasti, “Design Dan Implementasi Sistem Informasi Apotek Pada Apotek Mitra Agung Pacitan,” Speed - Sentra Penelit. Eng. Dan Edukasi, vol. 4, no. 4, Apr. 2011.

[15] D. R. Rahadi, “PENGUKURAN USABILITY SISTEM MENGGUNAKAN USE QUESTIONNAIRE PADA APLIKASI ANDROID,” J. Sist. Inf., vol. 6, no. 1, Mar. 2014.

Page 92: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

81

LAMPIRAN

Page 93: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

82

LAMPIRAN

1. Dokumentasi sosialisasi pada guru TK, orang tua murid, dan murid TK

2. Marker yang digunakan

Anjing

Ayam

Page 94: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

83

Cacing

Ikan

Kucing

Telur

Ulat

Kepompong

Page 95: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

84

Kupu – kupu

Anjing 3D

Ayam 3D

Ikan 3D

Ikan 3D

Air

Page 96: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

85

Tanah

3. Daftar kombinasi marker dan keluaran objek yang dapat ditampilkan

Masukan Keluaran Marker 1 Marker 2 Marker 3 Marker 4 Hasil yang diharapkan

Air

Air Anjing

Air Anjing Ayam

Page 97: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

86

Masukan Keluaran Marker 1 Marker 2 Marker 3 Marker 4 Hasil yang diharapkan

Air Anjing Ayam Cacing

Air Anjing Ayam Ikan

Air Anjing Ayam Kucing

Air Anjing Ayam Tanah

Air Anjing Cacing

Page 98: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

87

Masukan Keluaran Marker 1 Marker 2 Marker 3 Marker 4 Hasil yang diharapkan

Air Anjing Cacing Ikan

Air Anjing Cacing Kucing

Air Anjing Cacing Tanah

Air Anjing Ikan

Air Anjing Ikan Kucing

Page 99: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

88

Masukan Keluaran Marker 1 Marker 2 Marker 3 Marker 4 Hasil yang diharapkan

Air Anjing Ikan Tanah

Air Anjing Kucing

Air Anjing Kucing Tanah

Air Anjing Tanah

Air Ayam

Page 100: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

89

Masukan Keluaran Marker 1 Marker 2 Marker 3 Marker 4 Hasil yang diharapkan

Air Ayam Cacing

Air Ayam Cacing Ikan

Air Ayam Cacing Kucing

Air Ayam Cacing Tanah

Air Ayam Ikan

Page 101: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

90

Masukan Keluaran Marker 1 Marker 2 Marker 3 Marker 4 Hasil yang diharapkan

Air Ayam Ikan Kucing

Air Ayam Ikan Tanah

Air Ayam Kucing

Air Ayam Kucing Tanah

Air Ayam Tanah

Page 102: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

91

Masukan Keluaran Marker 1 Marker 2 Marker 3 Marker 4 Hasil yang diharapkan

Air Cacing

Air Cacing Ikan

Air Cacing Ikan Kucing

Air Cacing Ikan Tanah

Air Cacing Kucing

Page 103: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

92

Masukan Keluaran Marker 1 Marker 2 Marker 3 Marker 4 Hasil yang diharapkan

Air Cacing Kucing Tanah

Air Cacing Tanah

Air Ikan

Air Ikan Kucing

Air Ikan Kucing Tanah

Page 104: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

93

Masukan Keluaran Marker 1 Marker 2 Marker 3 Marker 4 Hasil yang diharapkan

Air Ikan Tanah

Air Kucing

Air Kucing Tanah

Air Tanah

Tanah

Page 105: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

94

Masukan Keluaran Marker 1 Marker 2 Marker 3 Marker 4 Hasil yang diharapkan

Tanah Anjing

Tanah Anjing Ayam

Tanah Anjing Ayam Cacing

Tanah Anjing Ayam Ikan

Tanah Anjing Ayam Kucing

Page 106: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

95

Masukan Keluaran Marker 1 Marker 2 Marker 3 Marker 4 Hasil yang diharapkan

Tanah Anjing Cacing

Tanah Anjing Cacing Ikan

Tanah Anjing Cacing Kucing

Tanah Anjing Ikan

Tanah Anjing Ikan Kucing

Page 107: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

96

Masukan Keluaran Marker 1 Marker 2 Marker 3 Marker 4 Hasil yang diharapkan

Tanah Anjing Kucing

Tanah Ayam

Tanah Ayam Cacing

Tanah Ayam Cacing Ikan

Tanah Ayam Cacing Kucing

Page 108: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

97

Masukan Keluaran Marker 1 Marker 2 Marker 3 Marker 4 Hasil yang diharapkan

Tanah Ayam Ikan

Tanah Ayam Ikan Kucing

Tanah Ayam Kucing

Tanah Cacing

Tanah Cacing Ikan

Page 109: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

98

Masukan Keluaran Marker 1 Marker 2 Marker 3 Marker 4 Hasil yang diharapkan

Tanah Cacing Ikan Kucing

Tanah Cacing Kucing

Tanah Ikan

Tanah Ikan Kucing

Tanah Kucing

Page 110: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

99

Masukan Keluaran Marker 1 Marker 2 Marker 3 Marker 4 Hasil yang diharapkan

Ayam Cacing

Cacing Ayam

Ayam (sentuh)

Cacing (sentuh)

Cacing Ikan

Ikan Cacing

Cacing (sentuh)

Ikan (sentuh)

Ikan Kucing

Kucing Ikan

Page 111: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

100

Masukan Keluaran Marker 1 Marker 2 Marker 3 Marker 4 Hasil yang diharapkan

Ikan (sentuh)

Kucing (sentuh)

Kucing Anjing

Anjing Kucing

Kucing (sentuh)

Anjing (sentuh)

Telur Ulat Kepompong Kupu-kupu

Video

Anjing3D

Ayam3D

Page 112: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

101

Masukan Keluaran Marker 1 Marker 2 Marker 3 Marker 4 Hasil yang diharapkan

Ikan3D

Kucing3D

4. Kode halaman splashscreen

using UnityEngine; using System.Collections; public class splash : MonoBehaviour { void Start () { StartCoroutine(Example()); } //membuka halaman mainmenu setelah 2 detik IEnumerator Example() { yield return new WaitForSeconds(2); Application.LoadLevel ("mainmenu"); } }

5. Kode halaman mainmenu

using UnityEngine; using System.Collections; using UnityEngine.UI; using UnityEngine.SceneManagement; public class menu : MonoBehaviour { public GameObject loadingScreenObj; public Slider slider; //Inisialisasi Audio public AudioSource soundTarget; public AudioClip clipTarget; private AudioSource[] allAudioSources; AsyncOperation async; void playSound(string ss) {

Page 113: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

102

clipTarget = (AudioClip)Resources.Load(ss); soundTarget.clip = clipTarget; soundTarget.loop = false; soundTarget.playOnAwake = false; soundTarget.Play(); } void Start () { //Daftarkan audio sebagai game object soundTarget = (AudioSource)gameObject.AddComponent<AudioSource>(); //Putar musik latar pada halaman utama playSound("sounds/latar"); } //Fungsi LoadScreenExample(), ketika dieksekusi akan menjalankan coroutine LoadingScreen() public void LoadScreenExample() { StartCoroutine(LoadingScreen()); } //menampilkan progres loading sistem IEnumerator LoadingScreen() { loadingScreenObj.SetActive(true); async = SceneManager.LoadSceneAsync("training"); async.allowSceneActivation = false; while (async.isDone == false) { slider.value = async.progress; if (async.progress == 0.9f) { slider.value = 1f; async.allowSceneActivation = true; } yield return null; } } //Fungsi navigasi public void GoToMainMenu(){ Application.LoadLevel("mainmenu"); } public void GoToARCamera(){ Application.LoadLevel("training"); } public void ExitApplication(){ Application.Quit (); } public void GoToHow(){ Application.LoadLevel("panduan"); }

Page 114: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

103

public void GoToAbout(){ Application.LoadLevel("tentang"); } }

6. Kode fungsi tombol back / mundur pada smartphone

using UnityEngine; using System.Collections; public class mundur : MonoBehaviour { // Mundur ke halaman mainmenu void Update () { if (Input.GetKeyDown (KeyCode.Escape)) Application.LoadLevel ("mainmenu"); } }

7. Kode untuk halaman Kamera AR, yang mengendalikan multimarker

using UnityEngine; using UnityEngine.UI; using System.Collections; using System.Collections.Generic; namespace Vuforia{ public class DistanceCalc : MonoBehaviour { //Inisialisasi Panel public Transform TextTargetName; public Transform TextDescription; public Transform PanelDescription; public Transform Makanan; //Inisialisasi Audio public AudioSource soundTarget; public AudioClip clipTarget; private AudioSource[] allAudioSources; //Inisialisasi Marker public GameObject Ayam; public GameObject Cacing; public GameObject Ikan; public GameObject Kucing; public GameObject Anjing; public GameObject Telur; public GameObject Ulat; public GameObject Kepompong; public GameObject Kupu; public GameObject Air; public GameObject Tanah; public GameObject Ikan3D; public GameObject Kucing3D;

Page 115: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

104

public GameObject Anjing3D; //Inisialisasi Objek 1 Marker public GameObject ayam1; public GameObject cacing1; public GameObject ikan1; public GameObject kucing1; public GameObject anjing1; public GameObject air1; public GameObject tanah1; public GameObject ayam3D; public GameObject ikan3D; public GameObject kucing3D; public GameObject anjing3D; //Inisialisasi Objek 2 Marker public GameObject ayam2; public GameObject ayam2l; public GameObject cacing2; public GameObject cacing2l; public GameObject ikan2; public GameObject ikan2l; public GameObject kucing2; public GameObject kucing2l; public GameObject kucing5; public GameObject kucing5l; public GameObject anjing3; public GameObject anjing3l; public GameObject tanah2; public GameObject ikan4; public GameObject ikan5; public GameObject ikan5l; public GameObject airanjing; public GameObject airayam; public GameObject aircacing; public GameObject airikan; public GameObject airkucing; public GameObject airtanah; public GameObject anjingkucing; public GameObject anjingtanah; public GameObject ayamcacing; public GameObject ayamtanah; public GameObject cacingikan; public GameObject cacingtanah; public GameObject ikankucing; public GameObject kucingtanah; //Inisialisasi Objek 3 Marker - Air public GameObject airanjingayam; public GameObject airanjingcacing; public GameObject airanjingikan; public GameObject airanjingkucing; public GameObject airanjingtanah;

Page 116: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

105

public GameObject airayamcacing; public GameObject airayamikan; public GameObject airayamkucing; public GameObject airayamtanah; public GameObject aircacingikan; public GameObject aircacingkucing; public GameObject aircacingtanah; public GameObject airikankucing; public GameObject airikantanah; public GameObject airkucingtanah; //Inisialisasi Objek 3 Marker - Tanah public GameObject anjingayamtanah; public GameObject anjingcacingtanah; public GameObject anjingikantanah; public GameObject anjingkucingtanah; public GameObject ayamcacingtanah; public GameObject ayamikantanah; public GameObject ayamkucingtanah; public GameObject cacingikantanah; public GameObject cacingkucingtanah; public GameObject ikankucingtanah; //Inisialisasi Objek 4 Marker - Air+tanah public GameObject airanjingayamtanah; public GameObject airanjingcacingtanah; public GameObject airanjingikantanah; public GameObject airanjingkucingtanah; public GameObject airayamcacingtanah; public GameObject airayamikantanah; public GameObject airayamkucingtanah; public GameObject aircacingikantanah; public GameObject aircacingkucingtanah; public GameObject airikankucingtanah; //Inisialisasi Objek 4 Marker - Air public GameObject airanjingayamcacing; public GameObject airanjingayamikan; public GameObject airanjingayamkucing; public GameObject airanjingcacingikan; public GameObject airanjingcacingkucing; public GameObject airanjingikankucing; public GameObject airayamcacingikan; public GameObject aircacingikankucing;

Page 117: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

106

public GameObject airayamikankucing; public GameObject airayamcacingkucing; //Inisialisasi Objek 4 Marker - Tanah public GameObject anjingayamcacingtanah; public GameObject anjingayamikantanah; public GameObject anjingayamkucingtanah; public GameObject anjingcacingikantanah; public GameObject anjingcacingkucingtanah; public GameObject anjingikankucingtanah; public GameObject ayamcacingikantanah; public GameObject cacingikankucingtanah; public GameObject ayamikankucingtanah; public GameObject ayamcacingkucingtanah; public GameObject telur; public GameObject ulat; public GameObject kepompong; public GameObject kupu; //Fungsi stop suara void StopAllAudio() { allAudioSources = FindObjectsOfType(typeof(AudioSource)) as AudioSource[]; foreach (AudioSource audioS in allAudioSources) { audioS.Stop(); } } //fungsi play suara void playSound(string ss) { clipTarget = (AudioClip)Resources.Load(ss); soundTarget.clip = clipTarget; soundTarget.loop = false; soundTarget.playOnAwake = false; soundTarget.Play(); } //fungsi pause suara void PauseAllAudio() { allAudioSources = FindObjectsOfType(typeof(AudioSource)) as AudioSource[]; foreach (AudioSource audioS in allAudioSources) { audioS.Pause(); } }

Page 118: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

107

//fungsi putar video void PutarVideo() { float arah = telur.transform.position.x; float arah2 = ulat.transform.position.x; float arah3 = kepompong.transform.position.x; float arah4 = kupu.transform.position.x; if(arah < arah2 && arah2 < arah3 && arah3 < arah4){ Application.LoadLevel("videokupu"); } else { TextTargetName.GetComponent<Text>().text = "Urutan salah"; Makanan.gameObject.SetActive(false); TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); StopAllAudio(); } } //fungsi tidak putar video, jika urutan salah void TidakPutarVideo() { TextTargetName.GetComponent<Text>().text = "Urutan salah"; Makanan.gameObject.SetActive(false); TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); StopAllAudio(); } void Start () { //daftar suara sebagai game object soundTarget = (AudioSource)gameObject.AddComponent<AudioSource>(); } void Update () { //Pada setiap frame, seluruh gameObject dihilangkan ayam1.SetActive(false); cacing1.SetActive(false); ikan1.SetActive(false); kucing1.SetActive(false); anjing1.SetActive(false); air1.SetActive(false); tanah1.SetActive(false); ikan3D.SetActive(false); kucing3D.SetActive(false); anjing3D.SetActive(false); ayam2.SetActive(false); ayam2l.SetActive(false); cacing2.SetActive(false); cacing2l.SetActive(false);

Page 119: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

108

ikan2.SetActive(false); ikan2l.SetActive(false); kucing2.SetActive(false); kucing2l.SetActive(false); kucing5.SetActive(false); kucing5l.SetActive(false); anjing3.SetActive(false); anjing3l.SetActive(false); tanah2.SetActive(false); ikan4.SetActive(false); ikan5.SetActive(false); ikan5l.SetActive(false); airanjing.SetActive(false); airayam.SetActive(false); aircacing.SetActive(false); airikan.SetActive(false); airkucing.SetActive(false); airtanah.SetActive(false); anjingkucing.SetActive(false); anjingtanah.SetActive(false); ayamcacing.SetActive(false); ayamtanah.SetActive(false); cacingikan.SetActive(false); cacingtanah.SetActive(false); ikankucing.SetActive(false); kucingtanah.SetActive(false); airanjingayam.SetActive(false); airanjingcacing.SetActive(false); airanjingikan.SetActive(false); airanjingkucing.SetActive(false); airanjingtanah.SetActive(false); airayamcacing.SetActive(false); airayamikan.SetActive(false); airayamkucing.SetActive(false); airayamtanah.SetActive(false); aircacingikan.SetActive(false); aircacingkucing.SetActive(false); aircacingtanah.SetActive(false); airikankucing.SetActive(false); airikantanah.SetActive(false); airkucingtanah.SetActive(false); anjingayamtanah.SetActive(false); anjingcacingtanah.SetActive(false); anjingikantanah.SetActive(false); anjingkucingtanah.SetActive(false); ayamcacingtanah.SetActive(false); ayamikantanah.SetActive(false);

Page 120: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

109

ayamkucingtanah.SetActive(false); cacingikantanah.SetActive(false); cacingkucingtanah.SetActive(false); ikankucingtanah.SetActive(false); airanjingayamtanah.SetActive(false); airanjingcacingtanah.SetActive(false); airanjingikantanah.SetActive(false); airanjingkucingtanah.SetActive(false); airayamcacingtanah.SetActive(false); airayamikantanah.SetActive(false); airayamkucingtanah.SetActive(false); aircacingikantanah.SetActive(false); aircacingkucingtanah.SetActive(false); airikankucingtanah.SetActive(false); airanjingayamcacing.SetActive(false); airanjingayamikan.SetActive(false); airanjingayamkucing.SetActive(false); airanjingcacingikan.SetActive(false); airanjingcacingkucing.SetActive(false); airanjingikankucing.SetActive(false); airayamcacingikan.SetActive(false); aircacingikankucing.SetActive(false); airayamikankucing.SetActive(false); airayamcacingkucing.SetActive(false); anjingayamcacingtanah.SetActive(false); anjingayamikantanah.SetActive(false); anjingayamkucingtanah.SetActive(false); anjingcacingikantanah.SetActive(false); anjingcacingkucingtanah.SetActive(false); anjingikankucingtanah.SetActive(false); ayamcacingikantanah.SetActive(false); cacingikankucingtanah.SetActive(false); ayamikankucingtanah.SetActive(false); ayamcacingkucingtanah.SetActive(false); telur.SetActive(false); ulat.SetActive(false); kepompong.SetActive(false); kupu.SetActive(false); PauseAllAudio();

Page 121: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

110

//Mengambil behaviour berupa id / nama dari setiap marker sebagai pengenal StateManager sm = TrackerManager.Instance.GetStateManager(); IEnumerable<TrackableBehaviour> tbs = sm.GetActiveTrackableBehaviours(); foreach (TrackableBehaviour tb in tbs) { string name = tb.TrackableName; ImageTarget it = tb.Trackable as ImageTarget; Vector2 size = it.GetSize(); //tampilkan objek dan deskripsi, putar audio berdasarkan id / nama marker yang terdeteksi if(name == "ayam"){ ayam1.SetActive(true); if (!soundTarget.isPlaying){ playSound("sounds/ayam"); } TextDescription.GetComponent<Text>().text = "Ayam adalah salah satu jenis unggas yang daging dan telurnya bisa dimanfaatkan oleh manusia. Daging ayam mengandung protein, mineral, dan vitamin yang dibutuhkan oleh manusia. "; Makanan.GetComponent<Text>().text = "Ayam memakan biji-bijian seperti beras dan jagung dapat pula makan cacing, digolongkan sebagai hewan omnivora"; } if(name == "cacing"){ cacing1.SetActive(true); if (!soundTarget.isPlaying){ playSound("sounds/cacing"); } TextDescription.GetComponent<Text>().text = "Cacing tanah adalah cacing berbentuk tabung dan tersegmentasi dalam filum Annelida. Mereka umumnya ditemukan hidup di tanah."; Makanan.GetComponent<Text>().text = "Cacing memakan bahan organik baik yang hidup dan yang telah mati"; } if(name == "ikan"){ ikan1.SetActive(true); if (!soundTarget.isPlaying){ playSound("sounds/ikan"); } TextDescription.GetComponent<Text>().text = "Ikan adalah hewan yang hidup didalam air, mereka dapat bernafas didalam air karena insang yang mereka miliki. Ikan dapat ditemukan di air tawar (danau dan sungai) maupun air asin (laut dan samudra)."; Makanan.GetComponent<Text>().text = "Ikan memakan plankton dan cacing. Beberapa ikan di laut juga memakan ikan yang lebih kecil dari ukuran tubuhnya"; } if(name == "anjing"){ anjing1.SetActive(true);

Page 122: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

111

if (!soundTarget.isPlaying){ playSound("sounds/anjing"); } TextDescription.GetComponent<Text>().text = "Anjing adalah hewan mamalia yang memiliki indra penciuman yang sangat tajam"; Makanan.GetComponent<Text>().text = "Anjing merupakan hewan karnivora, pemakan daging & tulang"; } if(name == "kucing"){ kucing1.SetActive(true); if (!soundTarget.isPlaying){ playSound("sounds/kucing"); } TextDescription.GetComponent<Text>().text = "Kucing, disebut juga kucing domestik atau kucing rumah. Kata kucing biasanya merujuk kepada kucing yang telah dijinakkan"; Makanan.GetComponent<Text>().text = "Makanan yang digemari kucing adalah Ikan. Kucing merupakan hewan karnivora, pemakan daging."; } if(name == "air"){ air1.SetActive(true); if (!soundTarget.isPlaying){ playSound("sounds/air"); } TextDescription.GetComponent<Text>().text = "air, adalah senyawa yang penting bagi semua bentuk kehidupan. Air menutupi hampir 71% permukaan Bumi"; Makanan.GetComponent<Text>().text = ""; } if(name == "tanah"){ tanah1.SetActive(true); if (!soundTarget.isPlaying){ playSound("sounds/tanah"); } TextDescription.GetComponent<Text>().text = "tanah, Tanah sangat vital peranannya bagi semua kehidupan di bumi karena tanah mendukung kehidupan tumbuhan dengan menyediakan hara dan air sekaligus sebagai penopang akar tanaman"; Makanan.GetComponent<Text>().text = ""; } if(name == "telur"){ telur.SetActive(true); if (!soundTarget.isPlaying){ playSound("sounds/telur"); } TextDescription.GetComponent<Text>().text = "telur adalah zigot yang dihasilkan melalui fertilisasi sel telur dan berfungsi memelihara dan menjaga embrio. Telur-telur reptilia dan burung diselimuti kerak pelindung, yang memiliki pori-pori agar hewan yang belum lahir tersebut dapat bernafas"; Makanan.GetComponent<Text>().text = ""; } if(name == "ulat"){

Page 123: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

112

ulat.SetActive(true); if (!soundTarget.isPlaying){ playSound("sounds/ulat"); } TextDescription.GetComponent<Text>().text = "Ulat adalah tahap larva bagi kupu-kupu dan ngengat, yang memakan daun / tumbuhan. Bagian kulit larva tidak elastis sehingga larva harus mengganti kulit bila tubuhnya membesar"; Makanan.GetComponent<Text>().text = ""; } if(name == "kepompong"){ kepompong.SetActive(true); if (!soundTarget.isPlaying){ playSound("sounds/kepompong"); } TextDescription.GetComponent<Text>().text = "Kepompong atau pupa, memiliki struktur kulit yang keras, halus dan umumnya berwarna hijau, cokelat karena berkamuflase dengan lingkungan sekitarnya. Jika diamati pada fase pupa terlihat seperti sedang istirahat padahal di dalamnya berlangsung proses pembentukan serangga selama 7 sampai 20 hari tergantung pada spesies kupu – kupu."; Makanan.GetComponent<Text>().text = ""; } if(name == "kupu"){ kupu.SetActive(true); if (!soundTarget.isPlaying){ playSound("sounds/kupukupu"); } TextDescription.GetComponent<Text>().text = "Setelah keluar dari pupa maka kupu – kupu akan merangkak ke atas agar sayapnya yang lemah, kusut dan agak basah dapat mengembang secara normal. Setelah sayap berfungsi normal maka kupu – kupu akan mencoba untuk mengepakkan sayapnya dan mencoba terbang"; Makanan.GetComponent<Text>().text = ""; } if(name == "ayam3d"){ //ayam3D.SetActive(true); if (!soundTarget.isPlaying){ playSound("sounds/ayam"); } //TextDescription.GetComponent<Text>().text = "Ayam adalah salah satu jenis unggas yang daging dan telurnya bisa dimanfaatkan oleh manusia. Daging ayam mengandung protein, mineral, dan vitamin yang dibutuhkan oleh manusia. "; //Makanan.GetComponent<Text>().text = "Ayam memakan biji-bijian seperti beras dan jagung dapat pula makan cacing, digolongkan sebagai hewan omnivora"; } if(name == "ikan3d"){ ikan3D.SetActive(true); if (!soundTarget.isPlaying){ playSound("sounds/ikan"); }

Page 124: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

113

TextDescription.GetComponent<Text>().text = "Ikan adalah hewan yang hidup didalam air, mereka dapat bernafas didalam air karena insang yang mereka miliki. Ikan dapat ditemukan di air tawar (danau dan sungai) maupun air asin (laut dan samudra)."; Makanan.GetComponent<Text>().text = "Ikan memakan plankton dan cacing. Beberapa ikan di laut juga memakan ikan yang lebih kecil dari ukuran tubuhnya"; } if(name == "anjing3d"){ anjing3D.SetActive(true); if (!soundTarget.isPlaying){ playSound("sounds/anjing"); } TextDescription.GetComponent<Text>().text = "Anjing adalah hewan mamalia yang memiliki indra penciuman yang sangat tajam"; Makanan.GetComponent<Text>().text = "Anjing merupakan hewan karnivora, pemakan daging & tulang"; } if(name == "kucing3d"){ kucing3D.SetActive(true); if (!soundTarget.isPlaying){ playSound("sounds/kucing"); } TextDescription.GetComponent<Text>().text = "Kucing, disebut juga kucing domestik atau kucing rumah. Kata kucing biasanya merujuk kepada kucing yang telah dijinakkan"; Makanan.GetComponent<Text>().text = "Makanan yang digemari kucing adalah Ikan. Kucing merupakan hewan karnivora, pemakan daging."; } } // Mengukur jarak antar marker yang terdeteksi float distance3 = Vector3.Distance (Kucing.transform.position, Anjing.transform.position); float distance4 = Vector3.Distance (Kucing.transform.position, Ikan.transform.position); float distance = Vector3.Distance (Ayam.transform.position, Cacing.transform.position); float distance2 = Vector3.Distance (Cacing.transform.position, Ikan.transform.position); //fungsi deteksi multimarker untuk marker metamorfosis kupu-kupu if(telur.activeInHierarchy && ulat.activeInHierarchy && kepompong.activeInHierarchy && kupu.activeInHierarchy){ PutarVideo(); } else if (telur.activeInHierarchy && ulat.activeInHierarchy){ TidakPutarVideo(); } else if (telur.activeInHierarchy && kepompong.activeInHierarchy){ TidakPutarVideo();

Page 125: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

114

} else if (telur.activeInHierarchy && kupu.activeInHierarchy){ TidakPutarVideo(); } else if (ulat.activeInHierarchy && kepompong.activeInHierarchy){ TidakPutarVideo(); } else if (ulat.activeInHierarchy && kupu.activeInHierarchy){ TidakPutarVideo(); } else if (kepompong.activeInHierarchy && kupu.activeInHierarchy){ TidakPutarVideo(); } // Definisi Multi Marker AIR if(air1.activeInHierarchy){ if(anjing1.activeInHierarchy){ StopAllAudio(); TextTargetName.GetComponent<Text>().text = "Anjing mampu berenang"; TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); Makanan.gameObject.SetActive(false); if(ayam1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing mampu berenang, Ayam tenggelam"; if(cacing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing mampu berenang, Ayam tenggelam, Cacing mampu bernafas di Air"; airanjingayamcacing.SetActive(true); air1.SetActive(false); anjing1.SetActive(false); ayam1.SetActive(false); cacing1.SetActive(false); } else if(ikan1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing mampu berenang, Ayam tenggelam, Ikan hidup di Air"; airanjingayamikan.SetActive(true); air1.SetActive(false); anjing1.SetActive(false); ayam1.SetActive(false); ikan1.SetActive(false); } else if(kucing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing mampu berenang, Ayam & Kucing tenggelam"; airanjingayamkucing.SetActive(true); air1.SetActive(false); anjing1.SetActive(false); ayam1.SetActive(false); kucing1.SetActive(false); } else if(tanah1.activeInHierarchy){

Page 126: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

115

TextTargetName.GetComponent<Text>().text = "Anjing & ayam hidup didarat"; airanjingayamtanah.SetActive(true); air1.SetActive(false); anjing1.SetActive(false); ayam1.SetActive(false); tanah1.SetActive(false); } else { airanjingayam.SetActive(true); air1.SetActive(false); anjing1.SetActive(false); ayam1.SetActive(false); } } else if(cacing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing mampu berenang, Cacing mampu bernafas di Air"; if(ikan1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing mampu berenang, Cacing mampu bernafas di Air, Ikan hidup di Air"; airanjingcacingikan.SetActive(true); air1.SetActive(false); anjing1.SetActive(false); cacing1.SetActive(false); ikan1.SetActive(false); } else if(kucing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing mampu berenang, Cacing mampu bernafas di Air, Kucing tenggelam"; airanjingcacingkucing.SetActive(true); air1.SetActive(false); anjing1.SetActive(false); cacing1.SetActive(false); kucing1.SetActive(false); } else if(tanah1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing hidup didarat, Cacing hidup didalam tanah"; airanjingcacingtanah.SetActive(true); air1.SetActive(false); anjing1.SetActive(false); cacing1.SetActive(false); tanah1.SetActive(false); } else { airanjingcacing.SetActive(true); air1.SetActive(false); anjing1.SetActive(false); cacing1.SetActive(false); } } else if(ikan1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing mampu berenang, Ikan hidup di Air"; if(kucing1.activeInHierarchy){

Page 127: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

116

TextTargetName.GetComponent<Text>().text = "Anjing mampu berenang, Ikan hidup di Air, Kucing tenggelam"; airanjingikankucing.SetActive(true); air1.SetActive(false); anjing1.SetActive(false); ikan1.SetActive(false); kucing1.SetActive(false); } else if(tanah1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing hidup di darat, Ikan hidup di Air"; airanjingikantanah.SetActive(true); air1.SetActive(false); anjing1.SetActive(false); ikan1.SetActive(false); tanah1.SetActive(false); } else { airanjingikan.SetActive(true); air1.SetActive(false); anjing1.SetActive(false); ikan1.SetActive(false); } } else if(kucing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing mampu berenang, Kucing tenggelam"; if(tanah1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing mengejar Kucing di Darat"; airanjingkucingtanah.SetActive(true); air1.SetActive(false); anjing1.SetActive(false); kucing1.SetActive(false); tanah1.SetActive(false); } else { airanjingkucing.SetActive(true); air1.SetActive(false); anjing1.SetActive(false); kucing1.SetActive(false); } } else if (tanah1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing hidup di Darat"; airanjingtanah.SetActive(true); air1.SetActive(false); anjing1.SetActive(false); tanah1.SetActive(false); } else { airanjing.SetActive(true); air1.SetActive(false); anjing1.SetActive(false); } } else if (ayam1.activeInHierarchy){ StopAllAudio();

Page 128: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

117

TextTargetName.GetComponent<Text>().text = "Ayam tenggelam"; TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); Makanan.gameObject.SetActive(false); if (cacing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Ayam tenggelam, Cacing mampu bernafas di Air"; if (ikan1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Ayam tenggelam, Cacing mampu bernafas di Air, Ikan hidup di Air"; airayamcacingikan.SetActive(true); air1.SetActive(false); ayam1.SetActive(false); cacing1.SetActive(false); ikan1.SetActive(false); } else if (kucing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Ayam & Kucing tenggelam, Cacing mampu bernafas di Air"; airayamcacingkucing.SetActive(true); air1.SetActive(false); ayam1.SetActive(false); cacing1.SetActive(false); kucing1.SetActive(false); } else if (tanah1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Ayam hidup di Darat, Cacing hidup didalam tanah"; airayamcacingtanah.SetActive(true); air1.SetActive(false); ayam1.SetActive(false); cacing1.SetActive(false); tanah1.SetActive(false); } else { airayamcacing.SetActive(true); air1.SetActive(false); ayam1.SetActive(false); cacing1.SetActive(false); } } else if (ikan1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Ayam tenggelam, Ikan hidup di Air"; if (kucing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Ayam & Kucing tenggelam, Ikan hidup di Air"; airayamikankucing.SetActive(true); air1.SetActive(false); ayam1.SetActive(false); ikan1.SetActive(false); kucing1.SetActive(false); } else if (tanah1.activeInHierarchy){

Page 129: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

118

TextTargetName.GetComponent<Text>().text = "Ayam hidup di Tanah, Ikan hidup di Air"; airayamikantanah.SetActive(true); air1.SetActive(false); ayam1.SetActive(false); ikan1.SetActive(false); tanah1.SetActive(false); } else { airayamikan.SetActive(true); air1.SetActive(false); ayam1.SetActive(false); ikan1.SetActive(false); } } else if (kucing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Ayam & Kucing tenggelam"; if (tanah1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Ayam & Kucing hidup di Darat"; airayamkucingtanah.SetActive(true); air1.SetActive(false); ayam1.SetActive(false); kucing1.SetActive(false); tanah1.SetActive(false); } else { airayamkucing.SetActive(true); air1.SetActive(false); ayam1.SetActive(false); kucing1.SetActive(false); } } else if (tanah1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Ayam hidup di Darat"; airayamtanah.SetActive(true); air1.SetActive(false); ayam1.SetActive(false); tanah1.SetActive(false); } else { airayam.SetActive(true); air1.SetActive(false); ayam1.SetActive(false); } } else if (cacing1.activeInHierarchy){ StopAllAudio(); if (ikan1.activeInHierarchy){ if (kucing1.activeInHierarchy){ aircacingikankucing.SetActive(true); air1.SetActive(false); cacing1.SetActive(false); ikan1.SetActive(false); kucing1.SetActive(false); } else if (tanah1.activeInHierarchy){ aircacingikantanah.SetActive(true); air1.SetActive(false);

Page 130: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

119

cacing1.SetActive(false); ikan1.SetActive(false); tanah1.SetActive(false); } else { aircacingikan.SetActive(true); air1.SetActive(false); cacing1.SetActive(false); ikan1.SetActive(false); } } else if (kucing1.activeInHierarchy){ if (tanah1.activeInHierarchy){ aircacingkucingtanah.SetActive(true); air1.SetActive(false); cacing1.SetActive(false); kucing1.SetActive(false); tanah1.SetActive(false); } else { aircacingkucing.SetActive(true); air1.SetActive(false); cacing1.SetActive(false); kucing1.SetActive(false); } } else if (tanah1.activeInHierarchy){ aircacingtanah.SetActive(true); air1.SetActive(false); cacing1.SetActive(false); tanah1.SetActive(false); } else { aircacing.SetActive(true); air1.SetActive(false); cacing1.SetActive(false); } } else if (ikan1.activeInHierarchy){ StopAllAudio(); TextTargetName.GetComponent<Text>().text = "Ikan hidup di Air"; TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); Makanan.gameObject.SetActive(false); if (kucing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Ikan hidup di Air, Kucing tenggelam"; if (tanah1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Ikan hidup di Air, Kucing hidup di Darat"; airikankucingtanah.SetActive(true); air1.SetActive(false); ikan1.SetActive(false); kucing1.SetActive(false); tanah1.SetActive(false); } else { airikankucing.SetActive(true); air1.SetActive(false);

Page 131: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

120

ikan1.SetActive(false); kucing1.SetActive(false); } } else if (tanah1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Ikan hidup di Air"; airikantanah.SetActive(true); air1.SetActive(false); ikan1.SetActive(false); tanah1.SetActive(false); } else { airikan.SetActive(true); air1.SetActive(false); ikan1.SetActive(false); } } else if (kucing1.activeInHierarchy){ StopAllAudio(); TextTargetName.GetComponent<Text>().text = "Kucing tenggelam"; TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); Makanan.gameObject.SetActive(false); if (tanah1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Kucing hidup di Darat"; airkucingtanah.SetActive(true); air1.SetActive(false); kucing1.SetActive(false); tanah1.SetActive(false); } else { airkucing.SetActive(true); air1.SetActive(false); kucing1.SetActive(false); } } else if (tanah1.activeInHierarchy){ StopAllAudio(); TextTargetName.GetComponent<Text>().text = "Ekosistem Tanah & Air"; TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); Makanan.gameObject.SetActive(false); airtanah.SetActive(true); air1.SetActive(false); tanah1.SetActive(false); } } // Definisi Multi Marker TANAH else if (tanah1.activeInHierarchy){ if (anjing1.activeInHierarchy){ StopAllAudio(); TextTargetName.GetComponent<Text>().text = "Anjing hidup di Darat"; TextDescription.gameObject.SetActive(false);

Page 132: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

121

PanelDescription.gameObject.SetActive(false); Makanan.gameObject.SetActive(false); if (ayam1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing & Ayam hidup di Darat"; if (cacing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing hidup di Darat, Ayam memangsa Cacing di Darat"; anjingayamcacingtanah.SetActive(true); anjing1.SetActive(false); ayam1.SetActive(false); cacing1.SetActive(false); tanah1.SetActive(false); } else if (ikan1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing & Ayam hidup di Darat, Ikan tidak bernafas di Darat"; anjingayamikantanah.SetActive(true); anjing1.SetActive(false); ayam1.SetActive(false); ikan1.SetActive(false); tanah1.SetActive(false); } else if (kucing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing mengejar Kucing di Darat, Ayam hidup di Darat"; anjingayamkucingtanah.SetActive(true); anjing1.SetActive(false); ayam1.SetActive(false); kucing1.SetActive(false); tanah1.SetActive(false); } else { anjingayamtanah.SetActive(true); anjing1.SetActive(false); ayam1.SetActive(false); tanah1.SetActive(false); } } else if (cacing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing hidup di Darat, Cacing hidup didalam tanah"; if (ikan1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing hidup di Darat, Cacing hidup didalam tanah, Ikan tidak bernafas di Darat"; anjingcacingikantanah.SetActive(true); anjing1.SetActive(false); cacing1.SetActive(false); ikan1.SetActive(false); tanah1.SetActive(false); } else if (kucing1.activeInHierarchy){

Page 133: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

122

TextTargetName.GetComponent<Text>().text = "Anjing mengejar Kucing di Darat, Cacing hidup didalam tanah"; anjingcacingkucingtanah.SetActive(true); anjing1.SetActive(false); cacing1.SetActive(false); kucing1.SetActive(false); tanah1.SetActive(false); } else { anjingcacingtanah.SetActive(true); anjing1.SetActive(false); cacing1.SetActive(false); tanah1.SetActive(false); } } else if (ikan1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing hidup di Darat, Ikan tidak bernafas di Darat"; if (kucing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing mengejar Kucing di Darat, Ikan tidak bernafas di Darat"; anjingikankucingtanah.SetActive(true); anjing1.SetActive(false); ikan1.SetActive(false); kucing1.SetActive(false); tanah1.SetActive(false); } else { anjingikantanah.SetActive(true); anjing1.SetActive(false); ikan1.SetActive(false); tanah1.SetActive(false); } } else if (kucing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Anjing mengejar Kucing di Darat"; anjingkucingtanah.SetActive(true); anjing1.SetActive(false); kucing1.SetActive(false); tanah1.SetActive(false); } else { anjingtanah.SetActive(true); anjing1.SetActive(false); tanah1.SetActive(false); } } else if (ayam1.activeInHierarchy){ StopAllAudio(); TextTargetName.GetComponent<Text>().text = "Ayam hidup di Darat"; TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); Makanan.gameObject.SetActive(false); if (cacing1.activeInHierarchy){

Page 134: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

123

TextTargetName.GetComponent<Text>().text = "Ayam memangsa Cacing di Darat"; if (ikan1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Ayam memangsa Cacing di Darat, Ikan tidak bernafas di Darat"; ayamcacingikantanah.SetActive(true); ayam1.SetActive(false); cacing1.SetActive(false); ikan1.SetActive(false); tanah1.SetActive(false); } else if (kucing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Ayam memangsa Cacing di Darat, Kucing hidup di Darat"; ayamcacingkucingtanah.SetActive(true); cacing1.SetActive(false); ayam1.SetActive(false); kucing1.SetActive(false); tanah1.SetActive(false); } else { ayamcacingtanah.SetActive(true); cacing1.SetActive(false); ayam1.SetActive(false); tanah1.SetActive(false); } } else if (ikan1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Ayam hidup di Darat, Ikan tidak bernafas di Darat"; if (kucing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Ayam hidup di Darat, Kucing memangsa Ikan di Darat"; ayamikankucingtanah.SetActive(true); ayam1.SetActive(false); ikan1.SetActive(false); kucing1.SetActive(false); tanah1.SetActive(false); } else { ayamikantanah.SetActive(true); ayam1.SetActive(false); ikan1.SetActive(false); tanah1.SetActive(false); } } else if (kucing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Ayam & Kucing hidup di Darat"; ayamkucingtanah.SetActive(true); ayam1.SetActive(false); kucing1.SetActive(false); tanah1.SetActive(false); } else { ayamtanah.SetActive(true); ayam1.SetActive(false); tanah1.SetActive(false);

Page 135: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

124

} } else if (cacing1.activeInHierarchy){ StopAllAudio(); TextTargetName.GetComponent<Text>().text = "Cacing hidup di dalam tanah"; TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); Makanan.gameObject.SetActive(false); if(ikan1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Cacing hidup di dalam tanah, Ikan tidak dapat bernafas di Tanah"; if(kucing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Cacing hidup di dalam tanah, Kucing memangsa Ikan di Darat"; cacingikankucingtanah.SetActive(true); cacing1.SetActive(false); ikan1.SetActive(false); kucing1.SetActive(false); tanah1.SetActive(false); } else { cacingikantanah.SetActive(true); cacing1.SetActive(false); ikan1.SetActive(false); tanah1.SetActive(false); } } else if (kucing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Cacing hidup di dalam tanah, Kucing hidup di Darat"; cacingkucingtanah.SetActive(true); cacing1.SetActive(false); kucing1.SetActive(false); tanah1.SetActive(false); } else { cacingtanah.SetActive(true); cacing1.SetActive(false); tanah1.SetActive(false); } } else if (ikan1.activeInHierarchy){ StopAllAudio(); TextTargetName.GetComponent<Text>().text = "Ikan tidak dapat bernafas di Darat"; TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); Makanan.gameObject.SetActive(false); if (kucing1.activeInHierarchy){ TextTargetName.GetComponent<Text>().text = "Kucing memangsa Ikan di Darat"; ikankucingtanah.SetActive(true); ikan1.SetActive(false); kucing1.SetActive(false);

Page 136: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

125

tanah1.SetActive(false); } else { tanah1.SetActive(false); tanah2.SetActive(true); ikan1.SetActive(false); ikan4.SetActive(true); } } else if (kucing1.activeInHierarchy){ StopAllAudio(); TextTargetName.GetComponent<Text>().text = "Kucing hidup di Darat"; TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); Makanan.gameObject.SetActive(false); kucingtanah.SetActive(true); kucing1.SetActive(false); tanah1.SetActive(false); } } // Ayam + Cacing if(ayam1.activeInHierarchy && cacing1.activeInHierarchy){ if (200 <= distance && distance < 500) { Debug.Log ("Level 5"); float arah = ayam1.transform.position.x; float arah2 = cacing1.transform.position.x; if (arah <= arah2){ ayam2.SetActive(true); cacing2.SetActive(true); } else { ayam2l.SetActive(true); cacing2l.SetActive(true); } TextTargetName.GetComponent<Text> ().text = "Ayam mengejar Cacing"; Makanan.gameObject.SetActive(false); TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); StopAllAudio(); } if (200 > distance) { Debug.Log ("Level 2"); ayam1.SetActive(false); ayam2.SetActive(false); ayamcacing.SetActive(true); cacing1.SetActive(false); cacing2.SetActive(false); TextTargetName.GetComponent<Text> ().text = "Ayam memangsa Cacing"; Makanan.gameObject.SetActive(false); TextDescription.gameObject.SetActive(false);

Page 137: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

126

PanelDescription.gameObject.SetActive(false); StopAllAudio(); } } // Ikan + Cacing else if (cacing1.activeInHierarchy && ikan1.activeInHierarchy){ if (200 <= distance2 && distance2 < 500) { Debug.Log ("Level 5"); float arah = ikan1.transform.position.x; float arah2 = cacing1.transform.position.x; if (arah <= arah2){ ikan2.SetActive(true); cacing2.SetActive(true); } else { ikan2l.SetActive(true); cacing2l.SetActive(true); } ikan1.SetActive(false); cacingikan.SetActive(false); cacing1.SetActive(false); TextTargetName.GetComponent<Text> ().text = "Ikan mengejar Cacing"; Makanan.gameObject.SetActive(false); TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); StopAllAudio(); } if (200 > distance2) { Debug.Log ("Level 2"); ikan1.SetActive(false); cacingikan.SetActive(true); cacing1.SetActive(false); TextTargetName.GetComponent<Text> ().text = "Ikan memangsa Cacing"; Makanan.gameObject.SetActive(false); TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); StopAllAudio(); } } // Kucing + Ikan else if(kucing1.activeInHierarchy && ikan1.activeInHierarchy){ if (200 <= distance4 && distance4 < 500) { Debug.Log ("Level 5"); float arah = kucing1.transform.position.x; float arah2 = ikan1.transform.position.x; if (arah <= arah2){ kucing2.SetActive(true);

Page 138: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

127

ikan2.SetActive(true); } else { kucing2l.SetActive(true); ikan2l.SetActive(true); } kucing1.SetActive(false); ikan1.SetActive(false); TextTargetName.GetComponent<Text> ().text = "Kucing ingin Ikan"; Makanan.gameObject.SetActive(false); TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); StopAllAudio(); } if (200 > distance4) { Debug.Log ("Level 2"); kucing1.SetActive(false); ikankucing.SetActive(true); ikan1.SetActive(false); TextTargetName.GetComponent<Text> ().text = "Kucing memakan Ikan"; Makanan.gameObject.SetActive(false); TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); StopAllAudio(); } } // Anjing + Kucing else if(anjing1.activeInHierarchy && kucing1.activeInHierarchy){ float arah = anjing1.transform.position.x; float arah2 = kucing1.transform.position.x; if (500 <= distance3) { Debug.Log ("Level 2"); kucing1.SetActive(true); anjing1.SetActive(true); TextTargetName.GetComponent<Text> ().text = "Anjing dan Kucing"; Makanan.gameObject.SetActive(false); TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); StopAllAudio(); } if (200 <= distance3 && distance3 < 500) { Debug.Log ("Level 5"); if (arah <= arah2){ kucing5.SetActive(true); anjing3.SetActive(true); }

Page 139: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

128

else { kucing5l.SetActive(true); anjing3l.SetActive(true); } kucing1.SetActive(false); anjing1.SetActive(false); TextTargetName.GetComponent<Text> ().text = "Anjing mengejar Kucing"; Makanan.gameObject.SetActive(false); TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); StopAllAudio(); } if (200 > distance3) { Debug.Log ("Level 2"); kucing1.SetActive(false); anjingkucing.SetActive(true); anjing1.SetActive(false); TextTargetName.GetComponent<Text> ().text = "Anjing menyerang Kucing"; Makanan.gameObject.SetActive(false); TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); StopAllAudio(); } } else if(kucing1.activeInHierarchy && ayam1.activeInHierarchy){ StopAllAudio(); TextTargetName.GetComponent<Text>().text = ""; TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); Makanan.gameObject.SetActive(false); } else if(kucing1.activeInHierarchy && cacing1.activeInHierarchy){ StopAllAudio(); TextTargetName.GetComponent<Text>().text = ""; TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); Makanan.gameObject.SetActive(false); } else if(anjing1.activeInHierarchy && ayam1.activeInHierarchy){ StopAllAudio(); TextTargetName.GetComponent<Text>().text = ""; TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); Makanan.gameObject.SetActive(false);

Page 140: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

129

} else if(anjing1.activeInHierarchy && ikan1.activeInHierarchy){ StopAllAudio(); TextTargetName.GetComponent<Text>().text = ""; TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); Makanan.gameObject.SetActive(false); } else if(anjing1.activeInHierarchy && cacing1.activeInHierarchy){ StopAllAudio(); TextTargetName.GetComponent<Text>().text = ""; TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); Makanan.gameObject.SetActive(false); } else if(ayam1.activeInHierarchy && ikan1.activeInHierarchy){ StopAllAudio(); TextTargetName.GetComponent<Text>().text = ""; TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); Makanan.gameObject.SetActive(false); } } } }

8. Kode DefaultTrackableEventHandler

/*============================================================================== Copyright (c) 2010-2014 Qualcomm Connected Experiences, Inc. All Rights Reserved. Confidential and Proprietary - Protected under copyright and other laws. ==============================================================================*/ using UnityEngine; using UnityEngine.UI; using System.Collections; using System.Collections.Generic; namespace Vuforia { /// <summary> /// A custom handler that implements the ITrackableEventHandler interface. /// </summary> public class DefaultTrackableEventHandler : MonoBehaviour,

Page 141: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

130

ITrackableEventHandler { public Transform TextTargetName; public Transform TextDescription; public Transform PanelDescription; public Transform Makanan; public AudioSource soundTarget; public AudioClip clipTarget; private AudioSource[] allAudioSources; #region PRIVATE_MEMBER_VARIABLES private TrackableBehaviour mTrackableBehaviour; #endregion // PRIVATE_MEMBER_VARIABLES #region UNTIY_MONOBEHAVIOUR_METHODS //Fungsi stop suara void StopAllAudio() { allAudioSources = FindObjectsOfType(typeof(AudioSource)) as AudioSource[]; foreach (AudioSource audioS in allAudioSources) { audioS.Stop(); } } //fungsi play suara void playSound(string ss) { clipTarget = (AudioClip)Resources.Load(ss); soundTarget.clip = clipTarget; soundTarget.loop = false; soundTarget.playOnAwake = false; soundTarget.Play(); } //Fungsi pause suara void PauseAllAudio() { allAudioSources = FindObjectsOfType(typeof(AudioSource)) as AudioSource[]; foreach (AudioSource audioS in allAudioSources) { audioS.Pause(); } } IEnumerator Hilang() { yield return new WaitForSeconds(13);

Page 142: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

131

PanelDescription.gameObject.SetActive(false); Makanan.gameObject.SetActive(false); TextDescription.gameObject.SetActive(false); } void Start() { mTrackableBehaviour = GetComponent<TrackableBehaviour>(); if (mTrackableBehaviour) { mTrackableBehaviour.RegisterTrackableEventHandler(this); } soundTarget = (AudioSource)gameObject.AddComponent<AudioSource>(); } #endregion // UNTIY_MONOBEHAVIOUR_METHODS #region PUBLIC_METHODS /// <summary> /// Implementation of the ITrackableEventHandler function called when the /// tracking state changes. /// </summary> public void OnTrackableStateChanged( TrackableBehaviour.Status previousStatus, TrackableBehaviour.Status newStatus) { if (newStatus == TrackableBehaviour.Status.DETECTED || newStatus == TrackableBehaviour.Status.TRACKED || newStatus == TrackableBehaviour.Status.EXTENDED_TRACKED) { OnTrackingFound(); } else { OnTrackingLost(); } } #endregion // PUBLIC_METHODS #region PRIVATE_METHODS

Page 143: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

132

private void OnTrackingFound() { Renderer[] rendererComponents = GetComponentsInChildren<Renderer>(true); Collider[] colliderComponents = GetComponentsInChildren<Collider>(true); // Enable rendering: foreach (Renderer component in rendererComponents) { component.enabled = true; } // Enable colliders: foreach (Collider component in colliderComponents) { component.enabled = true; } Debug.Log("Trackable " + mTrackableBehaviour.TrackableName + " found"); //Eksekusi ketika marker ayam3d terdeteksi if (mTrackableBehaviour.TrackableName == "ayam3d") { playSound("sounds/ayam"); TextDescription.GetComponent<Text>().text = "Ayam adalah salah satu jenis unggas yang daging dan telurnya bisa dimanfaatkan oleh manusia. Daging ayam mengandung protein, mineral, dan vitamin yang dibutuhkan oleh manusia. "; Makanan.GetComponent<Text>().text = "Ayam memakan biji-bijian seperti beras dan jagung dapat pula makan cacing, digolongkan sebagai hewan omnivora"; } TextTargetName.GetComponent<Text>().text = mTrackableBehaviour.TrackableName; Makanan.gameObject.SetActive(true); TextDescription.gameObject.SetActive(true); PanelDescription.gameObject.SetActive(true); StartCoroutine(Hilang()); } private void OnTrackingLost() { Renderer[] rendererComponents = GetComponentsInChildren<Renderer>(true); Collider[] colliderComponents = GetComponentsInChildren<Collider>(true);

Page 144: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

133

// Disable rendering: foreach (Renderer component in rendererComponents) { component.enabled = false; } // Disable colliders: foreach (Collider component in colliderComponents) { component.enabled = false; } Debug.Log("Trackable " + mTrackableBehaviour.TrackableName + " lost"); //ketika marker hilang / tidak terdeteksi, pause audio, hilangkan deskripsi dan tampilkan pesan sorot gambar hewan PauseAllAudio(); TextTargetName.GetComponent<Text> ().text = "Sorot gambar hewan"; TextDescription.gameObject.SetActive(false); PanelDescription.gameObject.SetActive(false); Makanan.gameObject.SetActive(false); } #endregion // PRIVATE_METHODS } }

9. Kode pemutaran video

using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using UnityEngine.Video; using UnityEngine.SceneManagement; public class StreamVideo : MonoBehaviour { //Inisiasi gameObject public RawImage image; public VideoClip videoToPlay; public GameObject loadingScreenObj; public Slider slider; private VideoPlayer videoPlayer; private VideoSource videoSource; private AudioSource audioSource; AsyncOperation async; // Inisiasi proses coroutine playvideo, sehingga video langsung diputar setelah halaman dibuka void Start () {

Page 145: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

134

Application.runInBackground = true; StartCoroutine(playVideo()); } IEnumerator playVideo() { //Daftarkan videoPlayer sebagai gameObject videoPlayer = gameObject.AddComponent<VideoPlayer>(); //Daftarkan audioSource sebagai gameObject audioSource = gameObject.AddComponent<AudioSource>(); //Hentikan pemutaran otomatis untuk audio dan video videoPlayer.playOnAwake = false; audioSource.playOnAwake = false; audioSource.Pause(); //Load file video yang akan diputar videoPlayer.source = VideoSource.VideoClip; //Atur keluaran audio sebagai gameObject AudioSource videoPlayer.audioOutputMode = VideoAudioOutputMode.AudioSource; //Atur audio dari file video sebagai sumber audio pada gameObject AudioSource videoPlayer.EnableAudioTrack(0, true); videoPlayer.SetTargetAudioSource(0, audioSource); //Siapkan pemutaran video untuk menghindari "buffering" videoPlayer.clip = videoToPlay; videoPlayer.Prepare(); //Tunggu sampai file video selesai dimuat WaitForSeconds waitTime = new WaitForSeconds(1); while (!videoPlayer.isPrepared) { Debug.Log("Preparing Video"); yield return waitTime; break; } Debug.Log("Done Preparing Video"); //Tetapkan tekstur dari video kedalam gameObject RawImage yang tampil pada layar perangkat image.texture = videoPlayer.texture; //Play Video videoPlayer.Play(); //Play Suara audioSource.Play(); //Pesan debug, menampilkan waktu pemutaran video

Page 146: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

135

Debug.Log("Playing Video"); while (videoPlayer.isPlaying) { Debug.LogWarning("Video Time: " + Mathf.FloorToInt((float)videoPlayer.time)); yield return null; } Debug.Log("Done Playing Video"); } //Fungsi untuk kembali kehalaman kamera AR, tampilkan progres loading IEnumerator LoadingScreen() { loadingScreenObj.SetActive(true); async = SceneManager.LoadSceneAsync("training"); async.allowSceneActivation = false; while (async.isDone == false) { slider.value = async.progress; if (async.progress == 0.9f) { slider.value = 1f; async.allowSceneActivation = true; } yield return null; } } //Memfungsikan tombol back / kembali pada smartphone void Update () { if (Input.GetKeyDown (KeyCode.Escape)){ audioSource.Stop(); videoPlayer.Stop(); StartCoroutine(LoadingScreen()); } } }

Page 147: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

136

Page 148: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

137

Page 149: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

138

Page 150: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

139

Page 151: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

140

Page 152: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

141

Page 153: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

142

Page 154: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

143

Page 155: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

144

Page 156: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

145

Page 157: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

146

Page 158: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

147

Page 159: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

148

Page 160: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

149

Page 161: Implementasi Multi Marker Augmented Reality pada Aplikasi ...digilib.unhas.ac.id/uploaded_files/temporary/...penggunaannya dikombinasikan dengan media fisik berupa kartu sebagai marker

150