BAB IV IMPLEMENTASI DAN PENGUJIAN

(1)

49 BAB IV

IMPLEMENTASI DAN PENGUJIAN

4.1 Implementasi Desain Aplikasi

Dalam membuat aplikasi memerlukan beberapa proses yang diperlukan.

Proses tersebut dibuat dari rancangan yang sudah dibuat sebelumnya, yaitu : 4.1.1 Implementasi Desain Interaktif (Interactive Design)

Pada tampilan ini berisi tampilan game tebak bentuk dari aplikasi game edukasi augmented reality. Implementasi desain interaktif ditunjukkan pada Gambar 4.1

Gambar 4. 1 Implementasi Desain Interaktif 4.1.2 Implementasi Desain Antarmuka (Interface Design)

Interface aplikasi dibuat menggunakan tool Unity 3D dan menghasilkan bentuk .unity dan .meta yang nantinya akan digunakan sebagai interface augmented reality. Langkah awal dalam pembuatan antar muka adalah pilih file kemudian pilih new project dan secara otomatis akan masuk ke windows scene. Langkah selanjutnya adalah memberikan objek dan segala kebutuhan yang diperlukan untuk pembuatan scene tersebut. Untuk memasukkan objek pada unity, pada kolom project pilih folder asset kemudian buat folder didalamnya dan drag file yang dibutuhkan berupa gambar-gambar interface, tombol, marker, dan objek 3D ke dalam folder yang sudah dibuat di dalam assets, maka unity akan mengimport file yang telah di drag tersebut.

commit to user commit to user

(2)

4.1.2.1 Implementasi Desain Tampilan Splash Screen

Tampilan Splash screen merupakan tampilan pertama program yang muncul sebelum masuk ke menu utama. Pada tampilan splash terdapat button play yang digunakan untuk masuk ke menu utama. Untuk pembuatan gambar tampilan splash menggunakan software Corel Draw X7. Langkah awal pembuatan yaitu pembuatan background dengan cara membuat Rectangle ke dalam corel, kemudian sesuaikan ukurannya dan diberi warna ghost green. Lalu menambahkan button play, gambar papan tulis dan gambar animasi agar lebih menarik. Selain itu, juga diberi judul yang menggunakan font Spring Chicken DEMO. Pembuatan tampilan splash dapat dilihat pada Gambar 4.2

Gambar 4. 2 Implementasi Tampilan Splash 4.1.2.2 Implementasi Desain Tampilan Loading

Tampilan Loading digunakan untuk membuat tampilan aplikasi ada jeda diantara tampilan splash dan tampilan main menu. Untuk pembuatan gambar tampilan loading menggunakan software Corel Draw X7. Langkah awal pembuatan yaitu pembuatan background dengan cara membuat Rectangle ke dalam corel, kemudian sesuaikan ukurannya dan diberi warna ghost green. Lalu, menambahkan loading bar, gambar papan tulis, dan gambar kartun agar lebih menarik. Selain itu,

(3)

juga diberi text yang bertuliskan “LOADING” yang menggunakan font Spring Chicken DEMO. Pembuatan tampilan loading dapat dilihat pada Gambar 4.3

Gambar 4. 3 Implementasi Tampilan Loading 4.1.2.3 Implementasi Desain Main Menu

Tampilan main menu digunakan untuk membuat tampilan menu awal.

Untuk pembuatan gambar tampilan main menu menggunakan software Corel Draw X7. Langkah awal pembuatan yaitu dengan cara membuat Rectangle ke dalam corel, kemudian sesuaikan ukurannya dan memasukkan background taman yang telah dibuat. Lalu, diberi gambar animasi anak yang sedang bergelantungan dan memanjat agar lebih menarik. Selain itu, menambahkan tombol-tombol yang telah dibuat pada bagian tengah background sebagai tombol menu dan untuk tombol exit diletakkan di bagian kanan bawah pada background. Pembuatan tampilan main menu dapat dilihat pada Gambar 4.4

Gambar 4. 4 Implementasi Tampilan Menu Utama commit to user commit to user

(4)

4.1.2.4 Implementasi Desain Menu Belajar

Tampilan menu Belajar berisi beberapa tombol yang terdiri dari tombol belajar huruf, tombol belajar angka, tombol belajar warna, dan tombol belajar bentuk bangun datar. Untuk pembuatan gambar tampilan menu belajar menggunakan software Corel Draw X7. Langkah awal pembuatan yaitu dengan cara membuat Rectangle ke dalam corel, kemudian sesuaikan ukurannya dan memasukkan background taman yang telah dibuat. Lalu, diberi gambar kartun agar lebih menarik. Selain itu, menambahkan tombol-tombol yang telah dibuat pada bagian tengah background. Pembuatan tampilan menu belajar dapat dilihat pada Gambar 4.5

Gambar 4. 5 Implementasi Desain Desain Menu Belajar 4.1.2.5 Implementasi Desain Menu Belajar Angka

Tampilan menu belajar angka berisi tentang informasi pengenalan angka dari 0-9 yang berjumlah 10 angka. Untuk pembuatan gambar tampilan menu belajar angka menggunakan software Corel Draw X7. Langkah awal pembuatan yaitu dengan membuat Rectangle berwarna biru muda kemudian sesuaikan ukurannya.

Setelah itu, menambahkan gambar papan tulis ditengah-tengah background dan menambahkan gambar angka dari 0-9 yang diletakkan ditengah-tengah gambar papan tulis dengan warna yang berbeda-beda. Selain itu, juga menambahkan commit to user commit to user

(5)

gambar kartun agar lebih menarik dan menambahkan button yang terdiri dari button next, button preview, dan button back. Pada button next dan button preview dipilih maka audio angka akan keluar. Pembuatan tampilan menu belajar angka dapat dilihat pada Gambar 4.6

Gambar 4. 6 lmplementasi Desain Menu Belajar Angka 4.1.2.6 Implementasi Desain Menu Belajar Bentuk

Tampilan menu belajar bentuk berisi tentang informasi pengenalan bentuk bangun datar yang terdiri dari bangun persegi, persegi panjang, lingkaran, segitiga, belah ketupat, jajar genjang, segilima, segienam, layang-layang dan trapesium yang berjumlah 10 bentuk bangun datar. Untuk pembuatan gambar tampilan menu belajar bentuk menggunakan software Corel Draw X7. Langkah awal pembuatan yaitu dengan membuat Rectangle berwarna kuning kemudian sesuaikan ukurannya.

Setelah itu, menambahkan gambar papan tulis ditengah-tengah background dan menambahkan gambar bentuk bangun datar dengan warna yang berbeda-beda yang diletakkan ditengah-tengah gambar papan tulis. Selain itu, juga menambahkan gambar kartun agar lebih menarik dan menambahkan button yang terdiri dari button next, button preview, dan button back. Pembuatan tampilan menu belajar bentuk dapat dilihat pada Gambar 4.7

(6)

Gambar 4. 7 Implementasi Desain Menu Belajar Bentuk 4.1.2.7 Implementasi Desain Menu Belajar Huruf

Tampilan menu belajar angka berisi tentang informasi pengenalan huruf A- Z yang terdiri dari huruf kapital dan huruf kecil yang masing-masing berjumlah 26 huruf. Untuk pembuatan gambar tampilan menu belajar huruf menggunakan software Corel Draw X7. Langkah awal pembuatan yaitu dengan membuat Rectangle berwarna merah muda kemudian sesuaikan ukurannya. Setelah itu, menambahkan gambar papan tulis ditengah-tengah background dan menambahkan gambar huruf dengan warna yang berbeda-beda yang diletakkan ditengah-tengah gambar papan tulis. Selain itu, juga menambahkan gambar kartun agar lebih menarik dan menambahkan button yang terdiri dari button next, button preview, dan button back. Pada button next dan button preview dipilih maka audio angka akan keluar. Pembuatan tampilan menu belajar huruf dapat dilihat pada Gambar 4.8

Gambar 4. 8 Implementasi Desain Menu Belajar Hurufcommit to user commit to user

(7)

4.1.2.8 Implementasi Desain Menu Belajar Warna

Tampilan menu belajar warna berisi tentang informasi pengenalan warna yang terdiri dari warna merah, kuning, hijau, biru, ungu, orange, merah muda, putih, abu-abu, hitam, coklat yang berjumlah 11 warna. Untuk pembuatan gambar tampilan menu belajar warna menggunakan software Corel Draw X7. Langkah awal pembuatan yaitu dengan membuat Rectangle berwarna biru muda kemudian sesuaikan ukurannya. Setelah itu, menambahkan gambar papan tulis ditengah- tengah background dan menambahkan gambar balon dengan warna yang berbeda- beda yang diletakkan ditengah-tengah gambar papan tulis. Selain itu, juga menambahkan gambar kartun agar lebih menarik dan menambahkan button yang terdiri dari button next, button preview, dan button back. Pada button next dan button preview dipilih maka audio angka akan keluar. Pembuatan tampilan menu belajar warna dapat dilihat pada Gambar 4.9

Gambar 4. 9 Implementasi Desain Menu Belajar Huruf 4.1.2.9 Implementasi Desain Panduan

Tampilan panduan berisi tentang panduan bermain game. Untuk pembuatan tampilan panduan menggunakan software Corel Draw X7. Langkah awal pembuatan yaitu dengan membuat Rectangle kedalam corel sejumlah 3 dengan ukuran dan warna yang berbeda-beda. Warna background yang digunakan putih, commit to user commit to user

(8)

abu-abu, dan kuning. Setelah itu, membuat panduan dan menambahkan gambar kartun agar lebih menarik dan menambahkan back button dengan warna merah pada pojok kiri atas. Pembuatan tampilan panduan dapat dilihat pada Gambar 4.10

Gambar 4. 10 Implementasi Desain Panduan 4.1.2.10 Implementasi Desain Menu Game

Tampilan menu game berisi 3 jenis tombol game, yaitu tombol game tebak- tebakan, tombol game puzzle, dan tombol game pilih warna. Pada game tebak- tebakan terdiri dari 3 objek yaitu, game tebak bentuk, game tebak huruf, dan game tebak angka. Untuk game puzzle dan game pilih warna, objek yang digunakan hanya bentuk bangun datar. Untuk pembuatan menu game menggunakan software Corel Draw X7. Langkah awal pembuatan yaitu dengan membuat Rectangle ke dalam corel dengan warna biru kemudian sesuaikan ukurannya dan memasukkan background taman yang telah dibuat. Lalu, diberi gambar kartun agar lebih menarik. Selain itu, menambahkan back button dengan warna merah pada pojok kiri atas. Untuk tombol gamenya menggunakan objek balon yang diberi animasi balon bergoyang dengan warna kuning, orange, dan biru. Pembuatan tampilan panduan dapat dilihat pada Gambar 4.11

(9)

Gambar 4. 11 Implementasi Desain Menu Game 4.1.2.11 Implementasi Desain Menu Game Tebak-tebakan

Tampilan menu game tebak-tebakan berisi 4 jenis tombol game, yaitu tombol game tebak bentuk, game tebak huruf, game tebak angka, dan game tebak warna yang masing-masing memiliki cara main yang sama hanya beda objek yang digunakan. Untuk pembuatan menu game menggunakan software Corel Draw X7.

Langkah awal pembuatan yaitu dengan membuat Rectangle ke dalam corel dengan warna biru kemudian sesuaikan ukurannya dan memasukkan background taman yang telah dibuat. Lalu, diberi gambar kartun agar lebih menarik. Selain itu, menambahkan back button dengan warna merah pada pojok kiri atas. Untuk pembuatan tombol game menggunakan konsep dialog balon dengan warna yang berbeda. Warna yang digunakan yaitu warna biru, merah muda, ungu, dan hujau.

Pada tombol tersebut diberi sedikit animasi. Pembuatan tampilan panduan dapat dilihat pada Gambar 4.12

Gambar 4. 12 Implementasi Desain Menu Game Tebak-tebakan commit to user commit to user

(10)

4.1.2.12 Implementasi Desain Game Tebak Bentuk

Tampilan game tebak bentuk, game tebak angka, game tebak huruf, dan game puzzle umumnya sama. Langkah awal pembuatan yaitu dengan cara memasukkan button sound yang digunakan untuk sound pertanyaan, button pause untuk menghentikan sound pertanyaan, button back untuk kembali ke tampilan sebelumnya, button skip untuk menskip pertanyaan, image timer berupa waktu bermain game, image score berisi jumlah score dari jawaban yang benar, background untuk pertanyaan yang berupa teks, panel salah, dan panel waktu habis.

Pada panel benar terdapat popup yang menandakan bahwa jawaban benar, score, dan next button digunakan untuk ke pertanyaan selanjutnya. Pembuatan tampilan desain tebak bentuk jika jawaban benar dapat dilihat pada Gambar 4.13

Gambar 4. 13 Implementasi Desain Popup Jawaban Benar

Pada panel waktu habis, terdapat popup yang menandakan bahwa waktu yang digunakan bermain telah habis. Selain itu, terdapat image score yang berfungsi menampung score dan tombol home yang digunakan untuk kembali ke menu sebelumnya. Pembuatan tampilan desain tebak bentuk jika waktu habis dapat dilihat pada Gambar 4.14

Gambar 4. 14 Implementasi Desain Popup Waktu Habis commit to user commit to user

(11)

Pada panel salah terdapat popup yang menandakan bahwa jawaban salah.

Selain itu juga terdapat image score yang berfungsi menampung score, tombol ulangi yang digunakan untuk mengulangi pertanyaan, dan tombol home yang digunakan untuk kembali ke menu sebelumnya. Pembuatan tampilan desain tebak bentuk jika waktu habis dapat dilihat pada Gambar 4.15

Gambar 4. 15 Implementasi Desain Popup Jawaban Salah 4.1.2.13 Implementasi Desain Game Pilih Warna

Pada tampilan Game Pilih Warna sedikit berbeda dengan tampilan game tebak bentuk, game tebak huruf, game tebak angka, dan game puzzle. Yang membedakan pada tampilan game pilih warna terdapat macam-macam tombol warna yang digunakan untuk mengganti warna. Tombol warna tersebut terletak pada bagian samping kanan dan samping kiri yang terdiri dari 11 macam warna yaitu warna merah, kuning, hijau, biru, orange, merah muda, putih, hitam, abu-abu, coklat, dan ungu. Pembuatan tampilan desain game pilih warna dapat dilihat pada Gambar 4.16

Gambar 4. 16 Implementasi Desain Game Pilih Warna commit to user commit to user

(12)

4.1.2.14 Implementasi Desain Informasi

Tampilan informasi berisi tentang informasi game edukasi augmented reality dibuat. Untuk pembuatan tampilan informasi menggunakan software Corel Draw X7. Langkah awal pembuatan yaitu dengan membuat Rectangle ke dalam corel sejumlah 3 dengan ukuran dan warna yang berbeda-beda. Warna background yang digunakan ghost green, hijau, dan kuning. Setelah itu, membuat judul dan penjelasan informasi yang dibuat dengan menambahkan gambar kartun agar lebih menarik dan menambahkan back button dengan warna merah pada pojok kiri atas serta logo uns. Pembuatan tampilan panduan dapat dilihat pada Gambar 4.17

Gambar 4. 17 Implementasi Desain Informasi 4.1.2.15 Implementasi Desain Credit

Tampilan credit berisi tentang informasi penulis. Untuk pembuatan gambar tampilan credit menggunakan software Corel Draw X7. Langkah awal pembuatan yaitu dengan membuat Rectangle ke dalam corel sejumlah 3 dengan ukuran dan warna yang berbeda-beda. Setelah itu, membuat informasi penulis dan menambahkan logo uns. Selain itu, menambahkan gambar kartun agar lebih menarik dan menambahkan back button dengan warna merah pada pojok kiri atas.

Pembuatan tampilan credit dapat dilihat pada Gambar 4.18 commit to user

commit to user

(13)

Gambar 4. 18 Implementasi Desain Credit 4.1.3 Implementasi Desain Marker

Pada aplikasi game edukasi ini menggunakan 46 marker yang terdiri dari 10 marker angka, 10 marker bangun datar, dan 26 marker huruf. Pada marker tersebut berfungsi untuk menampilkan objek 3 dimensi yang terdiri dari 2 background yaitu background marker terang dan gelap. Adapun bentuk fisik dari marker tersebut dapat dilihat pada tabel 4.1.

Tabel 4. 1 Implementasi Desain Marker

1. 2.

(14)

3. 4.

5. 6.

7. 8.

9. 10.

(15)

11. 12.

13. 14.

15. 16.

17. 18.

(16)

19. 20.

21. 22.

23. 24.

25. 26.

(17)

27. 28.

29. 30.

31. 32.

33. 34.

(18)

35. 36.

37. 38.

39. 40.

41. 42.

(19)

43. 44.

45. 46.

Pada marker angka, huruf, dan bangun datar setelah diupload pada vuforia memiliki rating. Rating yang diberikan vuforia berbentuk bintang kisaran antara 1- 5. Pada marker angka, huruf, dan bangun datar memiliki rating 5. Berikut merupakan rating yang terdapat pada marker angka dapat dilihat pada Gambar 4.19

Gambar 4. 19 Rating Marker Angka commit to user

commit to user

(20)

Berikut merupakan rating yang terdapat pada marker huruf dapat dilihat pada Gambar 4.20

Gambar 4. 20 Rating Marker Huruf

Berikut merupakan rating yang terdapat pada marker bangun datar dapat dilihat pada Gambar 4.21

Gambar 4. 21 Rating Marker Bangun Datar

Desain pembuatan marker tersebut dibuat menggunakan CorelDraw X7.

Setelah marker terbuat, lalu mengupload marker pada vuforia dan masuk alamat www.develop.vuforia.com pada browser. Untuk masuk dalam vuforia dapat dilihat

pada Gambar 4.22

(21)

Gambar 4. 22 Halaman Utama Vuforia

Setelah itu, melakukan login dengan menggunakan akun yang sudah terdaftar dalam vuforia. Jika belum terdaftar harus membuat akun terlebih dahulu.

Login dalam vuforia dapat di lihat pada Gambar 4.23.

Gambar 4. 23 Halaman Login Vuforia

Setelah berhasil login, langkah selanjutnya yaitu masuk pada tab develop kemudian pilih target manager dan pilih Add Database untuk membuat database pada vuforia. Berikut adalah tampilannya dapat dilihat pada Gambar 4.24.

(22)

Gambar 4. 24 Halaman Add Database

Pada Add database, maka akan diminta memberikan nama pada database yang akan dibuat kemudian pilih create. Disini saya membuat 3 database yang terdiri dari databasae huruf, angka, dan bangun datar. Untuk pembuatan database dapat dilihat seperti pada gambar 4.25.

Gambar 4. 25 Halaman Create Database Vuforia

Pilih database yang telah berhasil dibuat dan pilih Add Target untuk menambahkan gambar yang akan dijadikan marker. Setelah itu, pilih file dengan pilih browse kemudian pada width isikan 1 dan beri nama markernya. Lalu pilih commit to user commit to user

(23)

Add. Pembuatan target manager dapat dilihat seperti pada Gambar 4.26.

Gambar 4. 26 Halaman Create Target Manager

Setelah itu, download hasil gambar yang telah dijadikan marker dengan pilih Download Database (All) dan pilih Unity Editor kemudian pilih Download dapat dilihat pada Gambar 4.27

Gambar 4. 27 Halaman Download Database

Setelah database telah dibuat, maka terdapat license key yang digunakan dalam pembuatan aplikasi. Klik license manager pada tiap-tiap database. Untuk melihat liscence manager pada database ABJAD dapat dilihat pada Gambar 4.28.

(24)

Gambar 4. 28 Halaman License Key Database ABJAD

Untuk melihat liscence manager pada database ANGKA dapat dilihat pada gambar 4.29

Gambar 4. 29 Halaman License Key Database ANGKA

Untuk melihat licence manager pada database BangunDatar dapat dilihat pada gambar 4.30

Gambar 4. 30 Halaman License Key Database BangunDatar commit to user commit to user

(25)

Selanjutnya, mengimportkan database yang telah dibuat ke dalam Unity 3D.

Setiap marker yang telah di unggah pada Vuforia merupakan Image Target yang memiliki nama yang berbeda-beda. Untuk melihat database objek 3D bangun datar dapat dilihat pada Gambar 4.31

Gambar 4. 31 Database Objek Bangun Datar

Selain database objek bangun datar, juga terdapat database objek angka.

Untuk melihat database objek 3D angka dapat dilihat pada Gambar 4.32.

Gambar 4. 32 Database Objek Angka commit to user

commit to user

(26)

Untuk melihat database objek 3D huruf dapat dilihat pada Gambar 4.33.

Gambar 4. 33 Database Objek Huruf 4.1.4 Implementasi Objek 3D

4.1.4.1 Implementasi Objek 3D Angka 1. Modeling

Langkah pertama pembuatan modeling atau objek 3D angka yaitu hapus objek cube lalu tambahkan teks dengan pilih add lalu pilih text. Kemudian ubah menjadi edit mode untuk mengganti tulisan sesuaikan dengan font yang disukai.

Langkah selanjutnya, ubah menjadi object mode untuk mengubah posisi teks dengan menekan R+X+90 untuk memutar text 90 derajat pada sumbu x. Untuk merubah teks menjadi 3D, klik tab pada Geometry ubah nilai Extrude. Offset, dan depth secara otomatis teks akan menjadi 3D. Untuk melihat objek 3D angka dapat dilihat pada Gambar 4.34.

Gambar 4. 34 Objek 3D Angka commit to user

commit to user

(27)

2. Pemberian material

Setelah langkah modeling selesai, kemudian pemberian material warna pada objek 3D angka yaitu pilih material lalu pilih new dan pilih warna kuning pada bagian diffuse color. Untuk melihat objek 3D angka yang sudah diberi material warna dapat dilihat pada Gambar 4.35.

Gambar 4. 35 Pemberian Material Warna Objek 3D Angka

Setelah pemberian material warna pada objek selsai, kemudian objek disimpan dalam bentuk .blend dan dimasukkan ke dalam folder asset di Unity 3D.

3. Pemberian animasi

Setelah dimasukkan dalam folder asset di Unity 3D, maka langkah selanjutnya memberi animasi sederhana pada objek 3D di unity 3D. Untuk melihat pemberian animasi pada objek 3D angka dapat dilihat pada Gambar 4.36.

Gambar 4. 36 Pemberian Animasi Objek 3D Angka commit to user commit to user

(28)

4.1.4.2 Implementasi Desain Objek 3D Huruf

Langkah pertama pembuatan objek 3D huruf yaitu hapus objek cube lalu tambahkan teks dengan pilih add lalu pilih text. Kemudian ubah menjadi edit mode untuk mengganti tulisan sesuaikan dengan font yang disukai. Langkah selanjutnya, ubah menjadi object mode untuk mengubah posisi teks dengan menekan R+X+90 untuk memutar text 90 derajat pada sumbu x. Untuk merubah teks menjadi 3D, klik tab pada Geometry ubah nilai Extrude. Offset, dan depth secara otomatis teks akan menjadi 3D. Untuk melihat objek 3D huruf dapat dilihat pada Gambar 4.37.

Gambar 4. 37 Pembuatan Objek 3D Huruf 2. Pemberian material

Setelah langkah modeling selesai, kemudian pemberian material warna pada objek 3D huruf yaitu pilih material lalu pilih new dan pilih warna merah pada bagian diffuse color. Untuk melihat objek 3D huruf yang sudah diberi material warna dapat dilihat pada Gambar 4.38.

Gambar 4. 38 Pemberian Material Warna Objek 3D Huruf commit to user commit to user

(29)

3. Pemberian animasi

Setelah dimasukkan dalam folder asset di Unity 3D, maka langkah selanjutnya memberi animasi sederhana pada objek 3D di unity 3D. Untuk melihat pemberian animasi pada objek 3D huruf dapat dilihat pada Gambar 4.39.

Gambar 4. 39 Pemberian Animasi Objek 3D Huruf 4.1.4.3 Implementasi Desain Objek 3D Bentuk Bangun Datar

Langkah pertama pembuatan objek 3D bentuk bangun datar pada lingkaran yaitu pilih add lalu pada mesh pilih UV Sphere dan menscale agar terlihat pipih.

Untuk pembuatan mata, bibir, dan pipi hanya digunakan untuk memepercantik tampilan bentuk lingkaran. Untuk melihat objek 3D bangun datar pada lingkaran dapat dilihat pada Gambar 4.40.

Gambar 4. 40 Objek 3D Bentuk Bangun Datar Lingkaran commit to user commit to user

(30)

2. Pemberian material

Setelah langkah modeling selesai, kemudian pemberian material warna pada objek 3D bentuk lingkaran yaitu pilih material lalu pilih new dan pilih warna hijau pada bagian diffuse color. Untuk bagian mata, pipi, dan mulut hanya digunakan untuk mempercantik objek. Untuk melihat objek 3D huruf yang sudah diberi material warna dapat dilihat pada Gambar 4.41.

Gambar 4. 41 Pemberian Material Warna Objek 3D Bentuk Bangun Datar Lingkaran

4.2 Implementasi Audio

Penggunaan audio pada aplikasi yang dibuat yaitu terdiri dari : a. Audio backsound

Audio backsound digunakan sebagai audio yang akan dijalankan sebagai latar belakang aplikasi yang sedang berjalan agar aplikasi lebih menarik dan interaktif. Audio backsound yang digunakan pada aplikasi ditunjukkan pada Gambar 4.42.

Gambar 4. 42 Audio Backsound commit to user

commit to user

(31)

b. Audio game

Audio game terdiri dari 3 macam audio yang terdiri dari : 1. Audio pertanyaan

Audio pertanyaan berisi pertanyaan dari game yang sedang dijalankan. Audio pertanyaan yang digunakan pada aplikasi ditunjukkan pada Gambar 4.43.

Gambar 4. 43 Audio Pertanyaan 2. Audio jawaban benar

Audio jawaban benar berisi audio jawaban benar jika marker yang discan sesuai dengan pertanyaan. Audio jawaban benar yang digunakan pada aplikasi ditunjukkan pada Gambar 4.44.

Gambar 4. 44 Audio Jawaban Benar commit to user

commit to user

(32)

3. Audio jawaban salah

Audio jawaban salah berisi audio jawaban salah jika marker yang discan tidak sesuai dengan pertanyaan. Audio jawaban salah yang digunakan pada aplikasi ditunjukkan pada Gambar 4.45.

Gambar 4. 45 Audio Jawaban Salah

4. Audio penjelasan dari objek huruf, angka, warna, dan bangun datar.

Audio penjelasan salah satu huruf yang digunakan pada aplikasi ditunjukkan pada Gambar 4.46.

Gambar 4. 46 Audio Objek Huruf

(33)

4.3 Implementasi Pemrograman Display Application 4.3.1 Implementasi Pemrograman Splash Screen

Dalam tampilan splash screen penulis memunculkan judul yang disertai dengan tombol play. Tombol play digunakan untuk melanjutkan ke tampilan loading. Berikut merupakan tampilan splash screen dapat dilihat pada Gambar 4.

47.

Gambar 4. 47 Tampilan Halaman Splash Screen

Dan berikut ini merupakan script yang digunakan pada tampilan splash screen dapat dilihat pada Gambar 4.48.

Gambar 4. 48 Script Menampilkan Halaman Splash Screen commit to user commit to user

(34)

Penjelasan script diatas yaitu :

1. Method void Start digunakan saat pertama kali loading screen muncul untuk menampilkan halaman loading.

2. yield return new WaitforSeconds(2) digunakan untuk menampilkan splash logo UNS selama 2 detik.

Dan berikut ini merupakan script yang digunakan pada Tombolplay.cs dapat dilihat pada Gambar 4.49.

Gambar 4. 49 Script Tombolplay Penjelasan script diatas yaitu :

1. Method void scale digunakan untuk merubah ukuran button saat ditekan.

2. Method public void scene digunakan untuk menuju ke scene selanjutnya yaitu scene loading.

4.3.2 Implementasi Pemrograman Tampilan Loading

Dalam tampilan loading digunakan untuk mengarahkan ke scene selanjutnya yaitu scene main menu. Jadi tampilan loading ini hanya digunakan commit to user commit to user

(35)

sebagai proses pengantar ke main menu. Berikut merupakan tampilan Loading dapat dilihat pada Gambar 4. 50

Gambar 4. 50 Tampilan Halaman Loading

Dan berikut ini merupakan script yang digunakan dapat dilihat pada Gambar 4. 51

Gambar 4. 51 Script Menampilkan Halaman Loading Penjelasan script loading.cs :

1. Privat float currentAmount digunakan untuk menentukan dimulainya jalan loading

2. Private float speed digunakan untuk kecepatan berjalan pada tampilan loading.

(36)

3. Jika currentAmount kurang dari 100 maka akan ditambahkan berdasarakan speed yang sudah ditentukan dan jika sudah 100 maka akan memanggil method Appliaction.LoadLevel(“main_menu”).

4. Method Appliaction.LoadLevel(“main_menu”) digunakan untuk pindah scene main_menu.

4.3.3 Implementasi Pemrograman Menu Utama

Dalam tampilan menu utama terdapat menu belajar, menu panduan, menu game, menu informasi, menu credit, dan menu exit. Berikut merupakan tampilan menu dapat dilihat pada Gambar 4. 52

Gambar 4. 52 Tampilan Menu Utama

Dan berikut ini merupakan script yang digunakan dapat dilihat pada Gambar 4. 53

(37)

Gambar 4. 53 Script Menampilkan Halaman Menu Penjelasan Script menu :

1. Method Application.LoadLevel berfungsi untuk pindah dari scene satu ke scene selanjutnya yang disertai dengan tombol. Tombol tersebut sudah disetting sesuai dengan fungsi yang akan digunakan.

2. Method public void scale digunakan untuk merubah ukuran button saat ditekan 3. Method public void ExitApplication digunakan untuk keluar dari aplikasi

4.3.4 Implementasi Pemrograman Menu Belajar

Dalam tampilan menu belajar terdapat menu belajar bentuk, menu belajar warna, menu belajar huruf, dan menu belajar angka. Berikut merupakan tampilan menu belajar dapat dilihat pada Gambar 4.54

Gambar 4. 54 Tampilan Halaman Menu Belajar commit to user

commit to user

(38)

Dan berikut ini merupakan script yang digunakan dapat dilihat pada Gambar 4. 55

Gambar 4. 55 Script Menampilkan Halaman Menu Belajar Penjelasan Script diatas yaitu :

Method Application.LoadLevel berfungsi untuk pindah dari scene satu ke scene selanjutnya yang disertai dengan tombol. Tombol tersebut sudah disetting sesuai dengan fungsi yang akan digunakan.

Dalam tampilan Menu Belajar Bentuk terdapat 10 macam bentuk bangun datar yang terdiri dari bentuk lingkaran, persegi, persegi panjang, segitiga, segiempat, segilima, segienam, jajargenjang, belah ketupat, dan layang-layang.

Berikut merupakan tampilan Menu Belajar Bentuk dapat dilihat pada Gambar 4.56.

Gambar 4. 56 Tampilan Halaman Belajar Bentuk commit to user commit to user

(39)

Dan berikut ini merupakan script yang digunakan dapat dilihat pada Gambar 4.57

Gambar 4. 57 Script untuk mengatur tombol next dan preview dengan menggunakan scroll bar

Penjelasan script diatas yaitu :

1. Method public void next() digunakan pada tombol next 2. Method public void prev() digunakan pada tombol preview

3. Pada Void Update(), mendeklarasikan pos pos = new float[transform.childCount], lalu mengambil jarak antar objek nilai rangenya antara 0-1 dengan float distance = 1f / (pos.Length-1f).

4. Lalu, memasukkan jarak posposnya dari tiap objek dengan : commit to user commit to user

(40)

for (int i = 0; i < pos.Length; i++) {

pos[i] = distance * i;

}

5. if (Input.GetMouseButton(0)) merupakan fungsi scroll yang digunakan untuk mendrag objeknya.

6. scroll_pos = scrollbar.GetComponent<Scrollbar>().value; merupakan nilai value dari posisi objek tersebut dimasukkan ke variabel scroll pos 7. for (int i = 0; i < pos.Length; i++) digunakan untuk mengambil range

supaya ketika discroll dapat menuju ke tempat pos yang pas

Berikut merupakan script yang digunakan untuk memberi suara pada objek bentuk bangun datar ketika tombol nama bentuk bangun datar ditekan dapat dilihat pada Gambar 4. 58.

Gambar 4. 58 Script memberi suara pada objek bangun datar ketika tombol nama bangun datar ditekan commit to user commit to user

(41)

Penjelasan script diatas yaitu :

1. Void playSound(string ss) digunakan untuk memutar suara 2. Void pauseSound(string ss) digunakan untuk menghentikan suara

3. soundTarget=(AudioSource)gameObject.AddComponent<AudioSource>

();digunakan untuk mendeklarasikan audio dari setiap objek yang berbeda-beda.

Dalam tampilan Belajar Huruf terdapat 26 macam huruf yang terdiri dari huruf A - Z. Berikut merupakan tampilan Menu Belajar Huruf dapat dilihat pada Gambar 4.59.

Gambar 4. 59 Tampilan Halaman Belajar Huruf

Untuk melihat script yang digunakan dapat dilihat pada Gambar 4.60. Script tersebut juga digunakan pada tampilan belajar warna dan tampilan belajar angka.

Berikut merupakan penjelasan scriptnya :

1. int urutan = 0 untuk membuat variabel urutan untuk menentukan objek mana yang mau diaktifkan.

2. setActive () digunakan pertama kali display langsung dieksekusi mau objek mana yang diaktifkan.

3. public void control(int i) berfungsi sebagai kontrol ketika tombol ditekan commit to user

commit to user

(42)

urutan += i; digunakan ketika tombol ditekan urutannya otomatis kalau tidak tambah ya berkurang

if (urutan > transform.childCount-1), digunakan jika urutannya > dari batas objek yang paling akhir maka dikembalikan ke 0 atau ke a lagi. Jadi nilai i nya diatur di kelas control yang kita buat tadi

} else if (urutan<0), digunakan jika kembali mundur atau menekan tombol previous kalau sudah lebih kecil dari 0 maka akan kembali ke yang paling besar

4. public void setActive() berfungsi sebagai set active yaitu objek mana yang mau kita aktifkan. transform.GetChild(i).gameObject.SetActive(false) digunakan untuk mengambil semua objek huruf, dinonaktifkan dulu objeknya lalu transform.GetChild(urutan).gameObject.SetActive(true) digunakan untuk mengaktifkan objek sesuai urutannya.

Gambar 4. 60 Script Menampilkan Halaman Belajar Huruf, Warna, dan Angka Selain menggunakan script diatas, juga menggunakan script control.cs yang dapat dilihat pada Gambar 4.61. commit to user commit to user

(43)

Gambar 4. 61 Script Control.cs Penjelasan script diatas yaitu :

1. Method Void Start terdapat x = transform.localScale.x digunakan untuk menyimpan nilai x awalan dan y = transform.localScale.y digunakan untuk menyimpan nilai y awalan.

2. Method void OnMouseDown() terdapat

GetComponent<AudioSource>().Play() yang digunakan untuk mengakses suara tombol akan dibunyikan ketika tombol ditekan dan terdapat transform.localScale = new Vector2(x * 1.2f, y / 1.2f) digunakan ketika tombol ditekan, ukuran y nya mengecil, dan ukuran x nya melebar

3. Method void OnMouseUp() terdapat transform.localScale = new Vector2(x, y) digunakan ketika tombol dilepas maka akan dikembalikan ke ukuran semula dan terdapat huruf.GetComponent<Huruf>().control(kontrol) yang digunakan untuk mengontrol ke kanan dan ke kiri.

(44)

Untuk melihat script Backbutton dapat dilihat pada Gambar 4.62

Gambar 4. 62 Script BackButton yang digunakan pada tiap scene Penjelasan script diatas :

1. Method void scale digunakan untuk merubah ukuran button saat ditekan.

2. Application.LoadLevel berfungsi untuk pindah dari scene satu ke scene selanjutnya yang disertai dengan tombol. Tombol tersebut sudah disetting sesuai dengan fungsi yang akan digunakan.

4.3.5 Implementasi Pemrograman Panduan

Dalam tampilan panduan berisi panduan untuk menjalankan game yang terdiri dari tombol back dan tombol audio. Berikut merupakan tampilan panduan dapat dilihat pada Gambar 4. 63

(45)

Gambar 4. 63 Tampilan Panduan 4.3.6 Implementasi Pemrograman Informasi

Dalam tampilan informasi berisi informasi mengenai Game Edukasi AR secara singkat yang terdapat tombol back. Berikut merupakan tampilan informasi dapat dilihat pada Gambar 4. 64

Gambar 4. 64 Tampilan Informasi

(46)

4.3.7 Implementasi Pemrograman Credit

Dalam tampilan credit berisi informasi penulis. Berikut merupakan tampilan credit dapat dilihat pada Gambar 4. 65.

Gambar 4. 65 Tampilan Credit 4.3.8 Implementasi Pemrograman Menu Game

Dalam tampilan menu jenis game terdapat 3 jenis game yang terdiri dari game tebak-tebakan, game pilih warna, dan game puzzle. Berikut merupakan tampilan Menu Jenis Game dapat dilihat pada Gambar 4.66.

Gambar 4. 66 Tampilan Halaman Menu Jenis Game commit to user commit to user

(47)

Dan berikut ini merupakan script yang digunakan dapat dilihat pada Gambar 4.67.

Gambar 4. 67 Script Menampilkan Menu Jenis Game Penjelasan Script diatas yaitu :

Method Application.LoadLevel berfungsi untuk pindah dari scene satu ke scene selanjutnya yang disertai dengan tombol. Tombol tersebut sudah disetting sesuai dengan fungsi yang akan digunakan.

Dalam tampilan menu game tebak-tebakan terbagi menjadi 3 jenis game yang terdiri dari game tebak bentuk, game tebak huruf, dan game tebak angka. Berikut merupakan tampilan Menu Game Tebak-tebakan dapat dilihat pada Gambar 4.68.

Gambar 4. 68 Tampilan Halaman Menu Game Tebak-tebakan commit to user commit to user

(48)

Dan berikut ini merupakan script yang digunakan dapat dilihat pada Gambar 4.69.

Gambar 4. 69 Script Menampilkan Menu Game Tebak-tebakan Penjelasan Script diatas yaitu :

Method Application.LoadLevel berfungsi untuk pindah dari scene satu ke scene selanjutnya yang disertai dengan tombol. Tombol tersebut sudah disetting sesuai dengan fungsi yang akan digunakan.

Berikut merupakan script yang digunakan dapat dilihat pada Gambar 4.70.

Untuk game tebak angka, game tebak bentuk, game tebak huruf, dan game puzzle script yang digunakan hampir mirip dengan script tersebut yang membedakan hanya pada pertanyaannya saja.

(49)

Gambar 4. 70 Script yang digunakan game tebak angka Penjelasan script diatas :

1. benar.enabled = false;

salah.enabled = false;

WaktuHabis.enabled = false;

Ketika game dimulai canvas benar, canvas salah, dan canvas waktu habis dinon-aktifkan terlebih dahulu.

2. timeLeft = 30.0f merupakan batas waktu yang digunakan untuk bermain game sebanyak 30 detik.

3. SetSoal() berisi soal pertanyaan.

4. soundTarget = (AudioSource)gameObject.AddComponent<AudioSource>();

if (panelSound) {

ButtonAction.GetComponent<Button>().onClick.AddListener(delegate { playSound("Sound/" + soal.fact); });

panelSound = true; } else {

ButtonAction.GetComponent<Button>().onClick.AddListener(delegate { pauseSound("Sound/" + soal.fact); });

panelSound = false; }

(50)

digunakan jika button sound diklik akan keluar pertanyaan berbentuk suara yang sesuai dengan soal.fact maka panelSoundnya aktif dan jika button sound diklik akan keluar pertanyaan berbentuk suara yang tidak sesuai dengan soal.fact maka panelSoundnya tidak aktif.

Berikut merupakan lanjutan script yang digunakan pada game tebak angka.

Untuk melihat script yang digunakan dapat dilihat pada Gambar 4.71

Gambar 4. 71 Script yang digunakan pada game tebak angka commit to user commit to user

(51)

Penjelasan script diatas :

1. Method void SetSoal digunakan untuk mengeluarkan soal pertanyaan/kuis secara acak

2. Method public NextBenar digunakan jika PlayerPrefs memperoleh score, maka scorenya akan tambah 1.

3. Method void CobaLagi digunakan jika kuis yang dijawab salah maka dapat menjawab kuis kembali sampai benar.

4. Method void kembali digunakan untuk kembali ke kuis jika waktu yang digunakan habis.

5. Method void playSound(string ss) digunakan untuk memutar suara 6. Method void pauseSound(string ss) digunakan untuk menghentikan suara

Pada script kuisAR.cs digunakan jika soal habis mengambil dari kuis ar dan mengulang dari awal. Untuk melihat script kuisAR.cs dapat dilihat pada Gambar 4.72.

Gambar 4. 72 Script kuisAR.cs 4.4 Implementasi Player Input

4.4.1 Implementasi Ganti Warna

Dalam game pilih warna terdapat 11 tombol yang terdiri dari warna merah, kuning, hijau, biru, orange, merah muda, putih, hitam, abu-abu, coklat, dan ungu.

Untuk melihat tampilan game pilih warna dapat dilihat pada gambar 4.73.

(52)

Gambar 4. 73 Tampilan Game Pilih Warna

Berikut merupakan script yang digunakan untuk mengubah warna ketika tombol warna dipilih, dapat dilihat pada Gambar 4.74

Gambar 4. 74 Script untuk mengubah warna pada objek commit to user

commit to user

(53)

Cara main pada game pilih warna adalah mengubah warna dengan tombol.

Warna dibuat dengan penomoran array. Script diatas digunakan untuk merender/mengubah warna pada objek yang sesuai dengan kode nomor material color jika tombol warnanya diklik.

Berikut merupakan script yang digunakan dapat dilihat pada Gambar 4.75

Gambar 4. 75 Script untuk menampilkan popup dan audio jawaban benar atau salah pada game pilih warna

Jika pertama kali Image target discan berwarna putih. Dan jika memilih tombol warna yang sesuai dengan pertanyaan maka image target akan berubah warna dengan cara dicocokkan, jika warna yang dipilih pada image target sesuai dengan pertanyaan maka panel benar aktif yang memunculkan popup jawaban benar serta audio jawaban benar. Dan jika memilih tombol warna yang tidak sesuai dengan pertanyaan sehingga image target akan berubah warna tetapi warnanya salah ketika dicocokkan, maka panel salah aktif yang memunculkan popup jawaban salah dan audio jawaban salah. commit to user commit to user

(54)

4.5 Implementasi Animation Actor

4.5.1 Implementasi Popup Jawaban Benar dan Popup Jawaban Salah

Jika objek angka yang discan sesuai dengan pertanyaan maka muncul popup benar. Jika objek angka yang discan tidak sesuai dengan pertanyaan maka akan muncul popup salah. Berikut merupakan tampilan game tebak angka ketika dijalankan dapat dilihat pada Gambar 4.76.

Gambar 4. 76 Tampilan popup jawaban benar dan popup jawaban salah Untuk melihat script yang digunakan dapat dilihat pada Gambar 4.77.

Gambar 4. 77 Script untuk menampilkan popup jawaban benar dan popup jawaban salah beserta audio pada game tebak angka

(55)

Script diatas digunakan jika image target sesuai dengan soal yang dimaksudkan maka akan muncul suara jawaban benar dari folder Sound dan canvas benar akan diaktifkan. Jika image target tidak sesuai dengan soal yang dimaksudkan maka akan muncul suara salah dari folder Sound dan canvas salah akan diaktifkan.

4.5.2 Implementasi Popup Waktu Habis

Berikut merupakan tampilan popup ketika waktu bermain game telah habis, dapat dilihat pada Gambar 4.78

Gambar 4. 78 Tampilan popup waktu habis

Berikut merupakan script yang digunakan untuk menampilkan popup waktu bermain telah habis. Untuk melihat script yang digunakan dapat dilihat pada Gambar 4.79.

Gambar 4. 79 Script untuk menampilkan popup waktu habis commit to user commit to user

(56)

Penjelasan script diatas : 1. if (!pause) {

timeLeft -= Time.deltaTime;}

Digunakan jika tidak dipause atau game sedang berjalan maka pengurangan waktu.

2. Waktu.text = “” + Mathf.Round(timeLeft) digunakan untuk menampilkan waktu dalam bentuk teks.

3. Jika waktu < 0, maka canvas waktu habis akan diaktifkan.

4.5.4 Implementasi Score

Berikut script yang digunakan untuk menampilkan score pada game dapat dilihat pada Gambar 4.80.

Gambar 4. 80 Script implementasi score Penjelasan Script diatas yaitu :

1. Method void Start digunakan untuk mengambil score.

2. Method void Update digunakan untuk menampilkan score. commit to user commit to user

(57)

Berikut script yang digunakan pada tombol Next yang terdapat pada popup jawaban benar dapat dilihat pada Gambar 4.81.

Gambar 4. 81 Script implementasi score pada game

Method public NextBenar digunakan jika PlayerPrefs memperoleh score, maka scorenya akan tambah 1.

4.6 Pengujian

Pada tahap ini, dilakukan pengujian aplikasi yang dilakukan dengan 4 cara yaitu pengujian berdasarkan fungsional aplikasi, pengujian penerimaan, pengujian kesesuaian, serta pengujian melalui kuesioner.

4.6.1 Pengujian Fungsional (Functional Testing)

Dalam pengujian ini menampilkan hasil uji dari setiap komponen atau objek yang telah dibuat dapat dilihat dan diimplementasikan dari bermacam aspek serta pengujian, untuk hasilnya dapat dilihat pada Tabel 4.2.

Tabel 4. 2 Pengujian Fungsional

No Jenis Komponen Tes Keterangan

1 Scene Splash Sukses Splash muncul saat

awal aplikasi dijalankan

Loading Sukses Loading muncul

setelah splash dijalankan

Main_menu Sukses Main_menu muncul

setelah setelah commit to user

commit to user

(58)

setelah loading selesai

Belajar Sukses Muncul setelah

tombol Belajar ditekan

Panduan Sukses Muncul setelah

tombol Panduan ditekan

Jenisgame Sukses Muncul setelah

tombol Game ditekan

Infomasi Sukses Muncul setelah

tombol Informasi ditekan

Credit Sukses Muncul setelah

tombol Credit ditekan

Belajarangka Sukses Muncul setelah

tombol Angka ditekan

Belajarbangundatar Sukses Muncul setelah tombol Bentuk ditekan

Belajarhuruf Sukses Muncul setelah

tombol Huruf ditekan

(59)

Belajarwarna Sukses Muncul setelah tombol Warna ditekan

Gamepilihwarna Sukses Muncul setelah tombol Game Pilih Warna ditekan

Gamepuzzle Sukses Muncul setelah

tombol Game Puzzle ditekan

Gametebakangka Sukses Muncul setelah tombol Tebak Angka ditekan Gametebakbentuk Sukses Muncul setelah

tombol Tebak Bentuk ditekan Gametebakhuruf Sukses Muncul setelah

tombol Tebak Huruf ditekan Gametebaktebakan Sukses Muncul setelah

tombol Game Tebak-tebakan ditekan

2 Objek 3D Semua objek 3D Huruf dan Angka

Sukses Semua objek huruf dan angka dapat commit to user

commit to user

(60)

menampilkan bentuk 3D 3 Animasi Semua objek 3D

Huruf, Angka, dan Bangun Datar

Sukses Semua objek dapat menampilkan animasi sederhana

4 Audio Audio Backsound Sukses Dapat memutar

audio backsound Audio pertanyaan Sukses Dapat memutar

audio pertanyaan Audio jawaban

benar

Sukses Dapat memutar

audio jawaban benar

Audio jawaban salah

jawaban salah

Audio huruf Sukses Dapat memutar

audio huruf

Audio angka Sukses Dapat memutar

audio angka

Audio bangun datar Sukses Dapat memutar audio bangun datar

5 Tombol Tombol Play Sukses Dapat menuju

halaman Loading Tombol Back Sukses Dapat kembali ke

halaman sebelumnya Tombol Sound

Pertanyaan

memutar sound pertanyaan

(61)

Tombol Pause Sukses Dapat

menghentikan sound

Tombol Next Sukses Dapat

menampilkan objek selanjutnya

Tombol Preview Sukses Dapat

menampilkan objek sebelumnya

Tombol Menu Belajar

Sukses Dapat menuju

halaman belajar Tombol Menu

Panduan

Sukses Dapat menuju

halaman panduan Tombol Menu

Game

Sukses Dapat menuju

halaman jenis game Tombol Menu

Informasi

Sukses Dapat menuju

halaman informasi Tombol Menu

Credit

Sukses Dapat menuju

halaman credit

Tombol Skip Sukses Dapat menyekip

kuis selanjutnya Tombol Ulangi Sukses Dapat mengulangi

kuis yang salah Tombol Next Benar Sukses Dapat melanjutkan

ke kuis selanjutnya Tombol Menu

Belajar Angka

Sukses Dapat menuju

halaman belajar angka

(62)

Tombol Menu Belajar Huruf

Sukses Dapat menuju

halaman belajar huruf

Tombol Menu Belajar Bentuk

Sukses Dapat menuju

halaman belajar bentuk bangun datar

Tombol Menu

Game Tebak-

tebakan

Sukses Dapat menuju

halaman game tebak-tebakan Tombol Game

Puzzle

Sukses Dapat menuju

halaman game puzzle

Tombol Game Pilih Warna

Sukses Dapat menuju

halaman game pilih warna

Tombol Game Tebak Bentuk

Sukses Dapat menuju

halaman game tebak bentuk

Tombol Game Tebak Angka

Sukses Dapat menuju

halaman game tebak angka

Tombol Game Tebak Huruf

Sukses Dapat menuju

halaman game tebak huruf

6 Grafis Tampilan aplikasi Sukses Dapat ditampilkan dengan baik

Resolusi Layar Sukses Dapat ditampilkan dengan baik pada commit to user

commit to user

(63)

beberapa resolusi layar yang berbeda

4.6.2 Pengujian Penerimaan (Acceptance Testing)

Untuk pengujian pada perangkat dimaksudkan agar mengetahui performa dan kebutuhan saat aplikasi diinstall dan dijalankan pada beberapa perangkat yang berbeda sehingga akan mendapatkan informasi mengenai performa dari aplikasi.

Pengujian perangkat ini terdapat pengujian dengan parameter jarak kamera ke marker, sudut pandang ke marker, dan pencahayaan. Untuk hasilnya dapat dilihat pada Tabel 4.3.

Tabel 4. 3 Pengujian Penerimaan Perangkat

No Jenis Komponen Tes Keterangan

1. Jarak kamera dengan sudut pandang 0⁰ diatas marker

Semua objek 3D huruf, angka, dan bangun datar

Jarak 5 cm dengan sudut pandang 0⁰ diatas marker

Tidak Terdeteksi

Terdeteksi

(64)

Tidak terdeteksi

Terdeteksi

Tidak terdeteksi

Tidak Terdeteksi

Terdeteksi

(65)

Terdeteksi

Tidak Terdeteksi

Terdeteksi

(66)

Terdeteksi

Tidak Terdeteksi karena arahnya berlawanan

Tidak Terdeteksi karena arahnya berlawanan commit to user

commit to user

(67)

3 Pencahayaan Semua objek 3D

Gelap Tidak terdeteksi

dengan baik menggunakan aplikasi Lux Light Meter

Sedang Terdeteksi dengan

kurang baik dengan menggunakan aplikasi Lux Light Meter

Terang Terdeteksi dengan

baik dengan menggunakan aplikasi Lux Light Meter

(68)

4.6.3 Pengujian kesesuaian (Compatibility Testing)

Dalam pengujian kompatibilitas ini akan ditunjukkan pada tabel dibawah ini dengan hasil pengujian pada berbagai macam device, untuk hasilnya dapat dilihat pada tabel 4.4

Tabel 4. 4 Pengujian Kesesuaian No. Jenis

Perangkat

Spesifikasi Tes Keterangan

1. Vivo Y21 - Android 5.1 Lollipop, Funtouch OS 2.1.

- RAM: 1GB.

- 854×480 pixel, 4.5 inch

Penginstalan Proses penginstalan membutuhkan waktu 45 detik Masuk ke

aplikasi

Proses masuk ke aplikasi membutuhkan waktu 17 detik Scan marker Proses scan

marker

membutuhkan waktu 1 detik Scene Seluruh scene

dapat berjalan Tombol Seluruh tombol

dapat berfungsi dengan baik Objek 3D Seluruh objek

3D dapat

ditampilkan

(69)

Animasi Seluruh animasi objek 3D dapat ditampilkan Audio Seluruh audio

dapat ditampilkan 2. Oppo Neo 7

A33W

- Android 5.1 (Lollipop); ColorOS 2.1

- RAM: 1GB

- 540 x 960 pixels, 5.0 inches

aplikasi

Proses masuk ke aplikasi membutuhkan waktu 13 detik Scan marker Proses scene

marker

membutuhkan waktu 1 detik Scene Seluruh scan

3D dapat

ditampilkan Animasi Seluruh animasi

objek 3D dapat ditampilkan commit to user

commit to user

(70)

Audio Seluruh audio dapat

ditampilkan 3. Zenfone 4 Max

ZC554KL

- Android 8.1.0 - RAM: 3 GB

- 720 x 1280 pixels, 5.5 inches

aplikasi

Proses masuk ke aplikasi membutuhkan waktu 13 detik Scan marker Proses scan

marker

membutuhkan waktu 1 detik Scene Seluruh scene

3D dapat

objek 3D dapat ditampilkan Audio Seluruh audio

dapat ditampilkan commit to user

commit to user

(71)

4. Vysor - For windows 32 bit

- For android

Masuk ke aplikasi

Proses masuk ke aplikasi dapat

ditampilkan Scan marker Proses scan

marker dapat ditampilkan Scene Seluruh scene

dapat dapat ditampilkan Objek 3D Seluruh objek

3D dapat

objek 3D dapat ditampilkan Audio Seluruh audio

dapat ditampilkan

4.6.4 Pengujian Pengguna (Beta Testing)

Pada pertanyaan nomor 1 yaitu Apakah dengan menggunakan teknologi augmented reality dapat digunakan sebagai media alternatif pembelajaran dan hiburan yang menarik bagi anak usia dini (usia 2-5 tahun)?. Dari 10 tanggapan guru PAUD menjawab 90% Setuju, 10% Cukup Setuju, dan 0% Tidak Setuju. Dapat dilihat pada gambar 4.82 :

(72)

Gambar 4. 82 Hasil Kuisioner Pertanyaan 1

Pada pertanyaan nomor 2 yaitu Apakah aplikasi game edukasi augmented reality efektif untuk membantu pembelajaran anak usia dini (usia 2-5 tahun)?. Dari 10 tanggapan guru PAUD menjawab 80% Setuju, 20% Cukup Setuju, dan 0%

Tidak Setuju. Dapat dilihat pada gambar 4.83 :

Pada pertanyaan nomor 3 yaitu Apakah anak usia dini mampu memahami materi yang disampaikan pada aplikasi game edukasi augmented reality?. Dari 10 tanggapan guru PAUD menjawab 70% Setuju, 30% Cukup Setuju, dan 0% Tidak Setuju. Dapat dilihat pada gambar 4.84 :

90%

10% 0%

Setuju Cukup Setuju Tidak Setuju

80%

20%

0%

(73)

Pada pertanyaan nomor 4 yaitu Apakah dengan aplikasi game edukasi augmented reality anak usia dini lebih termotivasi dan tertarik untuk belajar?. Dari 10 tanggapan guru PAUD menjawab 90% Setuju, 10% Cukup Setuju, dan 0%

Tidak Setuju. Dapat dilihat pada gambar 4.85 :

Pada pertanyaan nomor 5 yaitu Apakah aplikasi game edukasi augmented reality menarik dan interaktif saat digunakan?. Dari 10 tanggapan guru PAUD menjawab 60% Setuju, 40% Cukup Setuju, dan 0% Tidak Setuju. Dapat dilihat pada gambar 4.86 :

70%

30%

0%

Setuju Cukup Setuju TidaK Setuju

90%

10% 0%

(74)

Pada pertanyaan nomor 6 yaitu Apakah aplikasi game edukasi augmented reality sudah cocok digunakan sebagai media pembelajaran?. Dari 10 tanggapan guru PAUD menjawab 60% Setuju, 40% Cukup Setuju, dan 0% Tidak Setuju.

Dapat dilihat pada gambar 4.87 :

Pada pertanyaan nomor 7 yaitu Apakah jenis game edukasi pada aplikasi yang telah dibuat sudah sesuai dengan anak usia dini (usia 2-5 tahun)?. Dari 10 tanggapan guru PAUD menjawab 60% Setuju, 40% Cukup Setuju, dan 0% Tidak Setuju. Dapat dilihat pada gambar 4.88 :

60%

40%

0%

60%

40%

0%

(75)

Pada pertanyaan nomor 8 yaitu Apakah implementasi desain tampilan aplikasi game edukasi augmented reality sudah bagus?. Dari 10 tanggapan guru PAUD menjawab 70% Setuju, 30% Cukup Setuju, dan 0% Tidak Setuju. Dapat dilihat pada gambar 4.89 :

Pada pertanyaan nomor 9 yaitu Apakah tombol/navigasi pada tiap menu mudah digunakan dan dipahami tiap kegunaannya?. Dari 10 tanggapan guru PAUD

60%

40%

0%

70%

30%

0%

(76)

menjawab 70% Setuju, 30% Cukup Setuju, dan 0% Tidak Setuju. Dapat dilihat pada gambar 4.90 :

Pada pertanyaan nomor 10 yaitu Apakah animasi pada aplikasi game edukasi augmented reality sudah interaktif dan menarik?. Dari 10 tanggapan guru PAUD menjawab 60% Setuju, 40% Cukup Setuju, dan 0% Tidak Setuju. Dapat dilihat pada gambar 4.91 :

70%

30%

0%

60%

40%

0%

(77)

Pada pertanyaan nomor 11 yaitu Apakah implementasi objek 3D sudah memvisualisasikan objek yang sesungguhnya?. Dari 10 tanggapan guru PAUD menjawab 80% Setuju, 20% Cukup Setuju, dan 0% Tidak Setuju. Dapat dilihat pada gambar 4.92 :

Pada pertanyaan nomor 12 yaitu Apakah implementasi audio dapat didengar dengan jelas?. Dari 10 tanggapan guru PAUD menjawab 80% Setuju, 20%

Cukup Setuju, dan 0% Tidak Setuju. Dapat dilihat pada gambar 4.93 :

80%

20%

0%

80%

20%

0%

(78)

Pada pertanyaan nomor 13 yaitu Apakah petunjuk penggunaan aplikasi dapat dimengerti dengan jelas?. Dari 10 tanggapan guru PAUD menjawab 80%

Setuju, 20% Cukup Setuju, dan 0% Tidak Setuju. Dapat dilihat pada gambar 4.94 :

80%

20%

0%