55 BAB IV
IMPLEMENTASI DAN PENGUJIAN
Pada bab ini akan dibahas mengenai implementasi dan pengujian, setelah sebelumnya dilakukan analisa dan perancangan terhadap aplikasi pembelajaran persendian menggunakan Augmented Reality. Implementasi merupakan tahap realisasi dari rancangan sistem kedalam struktur pemrograman dan menghasilkan aplikasi yang siap untuk di uji dan dioperasikan oleh target pengguna. Pembahasan tersebut akan dijelaskan pada subbab berikut ini.
4.1 Perangkat Pendukung Pengembangan
Untuk melaksanakan penelitian ini tentunya membutuhkan alat pendukung berupa perngkat keras dan perangkat lunak, alat-alat yang digunakan dijelaskan sebagai berikut :
4.1.1 Perangkat Keras (hardware)
Berikut adalah spesifikasi perangkat keras yang digunakan selama pengembangan sistem.
1. Laptop
a. Processor Intel Core i3-2310M 2.10GHz b. DDR3 RAM 2GB
c. Graphic Card Intel HD Graphics Family
2. Ponsel Android
a. Processor Dual-core 1Ghz b. RAM 1GB
c. GPU PowerVR SGX540
d. Display 7.0 inch, 600 x 1024 pixels (170 ppi) e. Kamera 3.15 MP
4.1.2 Perangkat Lunak (software)
Berikut adalah tabel spesifikasi perangkat lunak yang digunakan selama pengembangan sistem.
1. Laptop
1. Windows 7 Ultimate 32-bit sebagai sistem operasi.
2. Unity Game Engine 4.3.0 sebagai aplikasi pengembangan android. 3. Blender 2.69 sebagai aplikasi pemodelan objek.
4. Mono Develop-Unity 4.0.1. Sebagai scripting editor. 5. Vuforia 2.8.7. Sebagai SDK Augmented Reality
6. Android SDK. Sebagai Compiler untuk membuat Android package (.apk) 7. Adobe Photoshop CS3. Sebagai editor gambar.
8. Adobe Ilustrator CS2. Sebagai editor gambar. 2. Ponsel Android
a. Android 4.0.3 (Ice Cream Sandwich) sebagai sistem operasi.
4.2 Pengumpulan Bahan
Pada tahap pengumpulan bahan, penulis membaginya kedalam tiga katagori, yaitu katagori gambar 2D, katagori objek 3D dan katagori file suara.
Tabel 4.1 Bahan Katagori Gambar 2D
No Nama File Ukuran File Resolusi Tipe Dibuat Dengan 1 About klik2 11.6 KB 156x80 PNG Adobe Photoshop 2 About normal2 10.8 KB 156x80 PNG Adobe Photoshop 3 Bonejoint 78 KB 600x525 JPG Adobe Photoshop 4 Exit klik2 16.3 KB 300x90 PNG Adobe Photoshop 5 Exit normal2 14.7 KB 300x90 PNG Adobe Photoshop
6 Exit 1.49 KB 24x24 PNG Adobe Photoshop
7 Instal 25.3 KB 300x149 JPG Adobe Photoshop 8 Menu utama 134 KB 1600x1000 JPG Adobe Photoshop 9 Panduan klik 16.1 KB 300x90 PNG Adobe Photoshop
Tabel 4.1 Bahan Katagori Gambar 2D (lanjutan)
10 Panduan normal 14.4 KB 300x90 PNG Adobe Photoshop 11 Print 24.9 KB 256x256 JPG Adobe Photoshop
12 Scan 19.2 KB 218x245 JPG Adobe Photoshop
13 Splash screen2 87.8 KB 1600x1000 JPG Adobe Photoshop 14 Start klik2 16.0 KB 300x90 PNG Adobe Photoshop 15 Start normal2 14.3 KB 300x90 PNG Adobe Photoshop
16 Wood 57 KB 640x423 JPG Adobe Photoshop
Tabel 4.2 Bahan Katagori Objek 3D
No Nama File Ukuran
File Jumlah Vertex Tipe Dengan Dibuat 1 Sendi engsel animasi 118 KB 260 FBX Blender 2 Sendi geser animasi 370 KB 2423 FBX Blender 3 Sendi kondiloid animasi 266 KB 803 FBX Blender 4 Sendi pelana animasi 749 KB 3972 FBX Blender 5 Sendi peluru animasi 424 KB 1539 FBX Blender 6 Sendi putar animasi 206 KB 1280 FBX Blender 7 Skeleton engsel animasi 6.94 MB 134075 FBX Blender 8 Skeleton geser animasi 9.93 MB 134075 FBX Blender 9 Skeleton kondiloid animasi 8.17 MB 134075 FBX Blender 10 Skeleton pelana animasi 6.73 MB 134075 FBX Blender 11 Skeleton peluru animasi 7.43 MB 134075 FBX Blender 12 Skeleton putar animasi 6.28 MB 134075 FBX Blender
Tabel 4.3 Bahan Katagori File Suara
No Nama File Ukuran File Durasi Tipe Dibuat Dengan 1 Sendiengsel 94 KB 00:00:05 MP3 Sound Recorder 2 Sendigeser 145 KB 00:00:09 MP3 Sound Recorder 3 Sendikondiloid 107 KB 00:00:06 MP3 Sound Recorder 4 Sendipelana 107 KB 00:00:06 MP3 Sound Recorder 5 Sendipeluru 94 KB 00:00:05 MP3 Sound Recorder 6 Sendiputar 114 KB 00:00:07 MP3 Sound Recorder
4.3 Implementasi
Implementasi pembuatan aplikasi yang dibuat meliputi implementasi rancangan pemodelan objek, implementasi pembuatan marker, implementasi pembuatan aplikasi android disertai dengan potongan kode program tertentu. Setelah sistem diimplementasikan, selanjutnya akan dilakukan tahap pengujian terhadap aplikasi tersebut.
4.3.1 Implementasi Pemodelan Objek
Objek diimplementasikan pada perangkat lunak Blender 2.69. Pada pembuatan aplikasi ini penulis membuat enam buah objek simulasi persendian gerak tubuh manusia beserta animasi dan enam buah karakter kerangka manusia yang akan menggambarkan bagaimana gerakan dari masing-masing sendi. Namun karena proses pembuatan dari masing-masing objek hampir sama, maka penulis akan membuat salah satu objek 3D berupa sendi engsel dan objek karakter kerangka manusia gerakan sendi engsel.
Untuk membuat objek sendi engsel yang harus dilakukan adalah pertama membuat objek silinder 1 untuk menggambarkan simulasi tulang pada sendi, dengan cara memilih menu Add lalu pilih Mesh dan pilih Cylinder. Selanjutnya atur dimensi silinder sehingga menjadi sebuah bentuk yang memanjang secara vertical. Penulis membuat silinder 1 dengan ukuran yaitu 0.400x0.400x1.200 yang mengarah pada sumbu x,y,z. Lalu ubah Shading objek menjadi Smooth agar permukaan objek tampak halus.
Gambar 4.1 Membuat silinder pertama
Selanjutnya membuat silinder untuk simulasi sumbu pada sendi engsel. Tambahkan sebuah silinder baru dengan cara yang sama seperti pada silinder pertama. Lakukan pengaturan dimensi silinder 2 yaitu dengan ukuran x=0.550 , y=0.550 dan y=1.000 dan lakukan rotasi pada sumbu x menjadi 900. Sehingga bentuk silinder memanjang secara horizontal. Selanjutnya letakkan silinder 2 pada bagian bawah dari silinder 1 sehingga menutupi bagian bawah atau alas dari silinder 1. Hasilnya akan tampak pada gambar 4.2.
Gambar 4.2 Hasil silinder 2
Selanjutnya untuk membuat simulasi tulang kedua atau silinder 3 dapat mengcopy dari objek silinder 1. Dengan cara pilih objek silinder 1, lalu copy (Ctrl
+ C) dan paste (Ctrl + V). Dan selanjutnya membuat objek silinder 4 atau sebuah simulasi dari putaran sendi engsel yang bersumbu pada silinder 2. Untuk membuat silinder 4 dapat mengcopy bentuk dari silinder 2. Lalu modifikasi bentuknya menjadi setengah lingkaran dari bentuk awalnya dengan cara masuk ke Edit Mode (Tab), lalu ubah model vertex menjadi face select, selanjutnya lakukan seleksi menggunakan Circle Select (C) untuk dapat menseleksi dengan cepat, seleksi setengah bagian dari lingkaran silinder lalu hapus face tersebut dengan cara tekan Del lalu pilih faces, sehingga objek silinder 4 menjadi hanya setengah lingkaran.
Gambar 4.3 Hapus face silinder
Setelah itu pilih semua face yang tersisa lalu lakukan extrude (E) untuk menambah ketebalan dari objek silinder 4. Hasilnya dapat dilihat pada gambar 4.4.
Gambar 4.4 Modifikasi silinder 4
Selanjutnya letakkan hasil modifikasi silinder 4 pada bagian atas silinder 3 sehingga silinder 4 bertumpu pada silinder 3. Hasilnya akan tampak seperti pada gambar 4.4.
Gambar 4.5 Hasil silinder 3 dan 4
Setelah itu letakkan hasil objek silinder 1 dan 2 di atas dari silinder 3 dan 4 agar dapat menyerupai hubungan antar tulang yaitu sendi engsel. Hasilnya seperti ditunjukkan pada gambar 4.6 dibawah ini :
Gambar 4.6 Objek simulasi sendi engsel
Setelah seluruh objek simulasi sendi engsel jadi, lakukan perubahan warna pada setiap objek silindernya, dengan cara pilih menu Material pada tab Properties lalu pada kolom diffuse ganti warnanya menjadi putih. Dapat dilihat pada gambar 4.7 berikut :
Gambar 4.7 Mengganti Warna
Selanjutnya masuk kedalam proses Rigging, menambahkan komponen Armature agar objek bisa digerakan dan dijadikan animasi. Untuk menambahkan
Armature dengan cara klik menu Add lalu pilih Armature lalu pilih Single Bone. Letakkan Armature Bone 1 diantara silinder 1 dan 2, lalu pilih objek silinder 1, dalam keadaan objek silinder 1 masih terpilih, pilih objek silinder 2 dengan menekan Shift + klik Kanan, dan pilih juga objek Armature Bone. Setelah itu tekan Ctrl + P untuk melakukan Set Parent lalu pilih Armature Deform. Hal tersebut agar Armature Bone dan Objek silinder dapat terhubung. Lakukan hal tersebut pada objek silinder 3 dan 4 juga. Hasilnya dapat dilihat pada gambar 4.8 berikut :
Gambar 4.8 Armature Bone
Setelah tahap pembuatan objek dan penambahan Armature Bone selesai. Selanjutnya penulis membuat objek simulasi tersebut menjadi animasi, agar lebih menarik untuk dilihat dan memudahkan untuk pembelajarannya. Proses pembuatannya yaitu pertama ubah Window menjadi Animation, sehingga lembar kerja Blender menjadi seperti berikut :
Gambar 4.9 Window Animation
Untuk objek yang akan dianimasikan yaitu Armature bone 2, atau objek silinder 3 dan 4. Sendi engsel merupakan sendi yang hanya memungkinkan bergerak dalam satu arah saja. Sehingga gerakan yang akan dibuat hanya satu arah yaitu hanya berporos pada sumbu Y. Sebelumnya pastikan mode bone 2 pada Pose Mode. Ubah Frame pada posisi 1, tekan I lalu pilih LocRotScale untuk mengkunci gerakan pada Frame 1 tersebut.
Gambar 4.10 Keyframe menu
Gambar 4.11 Hasil keyframe
Selanjutnya pindahkan frame pada posisi 50, lalu rotasi objek dengan menekan R + Y untuk memindahkan posisi objek silinder agar menyerupai gerakan sendi engsel dan kunci gerakan pada frame tersebut.
Gambar 4.12 Gerakan pada frame 50
Setelah itu pindahkan frame pada posisi 100. Pada frame ini kembalikan posisi Armature Bone ke awal sama seperti pada frame 1. Untuk mempermudah copy Keyframe dan paste pada frame 100. Sehingga objek simulasi sendi engsel
memiliki 3 keyframe. Putar animasi dengan menekan Alt + A untuk mengetahui bagaimana objek berjalan.
Gambar 4.13 Gerakan objek
Selanjutnya agar objek 3D beserta animasi dapat digunakan kedalam aplikasi Unity, ubah format ekstensi file .blend menjadi .fbx dengan cara buka menu File lalu pilih menu Export dan pilih Autodesk FBX (.fbx). Dapat dilihat pada gambar 4.14 berikut :
Setelah objek simulasi sendi engsel selesai di buat, selanjutnya membuat objek karakter kerangka manusia yang akan mencontohkan gerakan dari sendi tersebut. Dalam hal ini karena keterbatasan waktu dan kemampuan, penulis memanfaatkan objek 3D yang sudah dibuat oleh feelgoodcomics pada web www.blendswap.com. Pemodelan kerangka manusia ini sudah memiliki Rigging atau pertulangan, sehingga memudahkan untuk proses pergerakan objek yang akan dijadikan animasi.
Contohnya untuk menggerakkan tangan kanan dapat menggunakan Armature bernama MCH_armIKtar.R, untuk menggerakkan tangan kiri menggunakan Armature bernama MCH_armIKtar.L. Selanjutnya penulis melakukan modifikasi gerakan untuk menjadikan objek 3D menyerupai gerakan sendi engsel. Pertama buka file feelgoodcomics_fgc_skeleton.blend yang sudah di download. Hasilnya tampak pada gambar berikut :
Gambar 4.15 Objek karakter kerangka
Sendi engsel itu sendiri dalam tubuh terdapat pada sendi siku tangan dan sendi lutut. Sehingga harus membuat gerakan pada karakter kerangka di kedua bagian sendi tersebut untuk memberikan contoh gerakannya. Contohnya untuk membuat gerakan siku tangan kanan menekuk dapat menggunakan Armature MCH_armIKtar.R dan MCH_elbow.R. Arahkan kedua Armature Bone tersebut sehingga dapat melakukan gerakan penekukan pada sendi siku yang merupakan
contoh dari gerakan sendi engsel. Hasil dari modifikasi gerakan objek kerangka dapat dilihat pada gambar berikut :
Gambar 4.16 Gerakan siku tangan
Selanjutnya buat contoh gerakan sendi engsel pada bagian tubuh lainnya yaitu pada sendi lutut kaki. Untuk menggerakan kaki dapat menggunakan Armature Bone dengan nama CONTROL_FOOT.R dan MCH_kneeTar.R untuk kaki bagian kanan serta CONTROL_FOOT.L dan MCH_kneeTar.L untuk kaki bagian kiri. Berikut gambar hasil dari modifikasi posisi kaki kanan pada karakter kerangka.
Animasikan setiap gerakan sendi tersebut dengan cara yang sama seperti menganimasikan gerakan objek simulasi sendi engsel sebelumnya. Lalu Export kembali pemodelan 3D karakter kerangka manusia ini menjadi file berekstensi .fbx agar dapat digunakan pada aplikasi Unity.
4.3.2 Implementasi Rancangan Marker
Pada tahap pembuatan marker penulis membuat 6 buah marker, yaitu marker untuk masing – masing persendian yang ada. Dalam tahap pembuatan marker penulis menggunakan aplikasi Adobe Photoshop CS3 dan Adobe Ilustrator CS2. Karena tahap pembuatan marker memiliki kesamaan satu sama lain, maka penulis akan memberikan contoh dalam pembuatan marker sendi engsel.
Buka aplikasi Adobe Photoshop CS3 lalu buat lembar kerja baru dengan ukuran 10x10cm dengan resolusi sebesar 300 pixels. Untuk membuat desain bagian dasar marker atau background penulis menggunakan beberapa desain yang sudah ada dan memiliki warna yang cukup tajam untuk dijadikan marker. Desain tersebut berekstensi .eps sehingga harus dibuka menggunakan aplikasi Adobe Ilustrator. Setelah desain tersebut dibuka, lalu drag seluruh layer desain tersebut dan drop pada lembar kerja yang ada di Adobe Photoshop CS3 yang sudah di buat sebelumnya. Hasilnya dapat dilihat pada gambar berikut.
Setelah itu pada tengah – tengah gambar marker letakkan gambar simulasi sendi engsel yang telah dibuat sebelumnya menggunakan aplikasi Blender, lalu berikan informasi nama sendi di atas gambar simulasi sendi engsel tersebut dan pada posisi bagian kanan bawah dari marker tambahkan pula logo dari AR for learning yang sudah dibuat. Hasilnya akan seperti gambar 4.19 berikut.
Gambar 4.19 Hasil marker sendi engsel
Setelah desain gambar marker selesai dibuat, agar dapat digunakan sebagai marker untuk aplikasi AR persendian maka gambar tersebut harus diunggah pada database vuforia untuk menjadi unity package marker. Unity package itulah yang akan digunakan pada saat membangun aplikasi untuk mendeklarasikan marker yang akan digunakan.
Untuk meregristasikannya buka web https://developer.vuforia.com, lakukan regristrasi dengan menekan tombol Register jika belum memiliki account, dan lakukan login jika sudah memiliki account web developer vuforia. Setelah login berhasil, kemudian pilih menu Develop dan pilih tab Target Manager. Tampilannya dapat dilihat pada gambar berikut.
Gambar 4.20 Tampilan target manager
Selanjutnya buat database baru dengan memilih menu add database, maka akan muncul formCreate Database seperti pada gambar 4.21.
Gambar 4.21 Form membuat database baru
Setelah itu berikan nama database pada kolom Name lalu pilih tipe database. Karena aplikasi ini hanya menggunakan database pada perangkat android maka pilih tipe databaseDevice lalu tekan Create. Setelah database selesai dibuat, masuk ke folder database tersebut. Maka akan muncul halaman sebagai berikut.
Gambar 4.22 Folder database
Selanjutnya unduh gambar marker dengan memilih add target. Maka akan muncul form sebagai berikut.
Gambar 4.23Formadd target marker
Selanjutnya isi setiap form tersebut. Pada kolom Type pilih Simple Image karena aplikasi ini hanya menggunakan gambar 2 dimensi sebagai markernya.
Selanjutnya pilih file gambar marker yang sudah dibuat pada kolom File. Pada kolom Width isi ukuran lembar dari gambar marker yang dibuat. Dan pada kolom Name akan secara otomatis terisi dengan nama file yang sudah kita pilih sebelumnya. Setelah itu pilih tombol Add untuk mengupload marker. Berikut folder database yang sudah dibuat oleh penulis.
Gambar 4.24 Folder database yang sudah terisi target marker
Masing – masing dari target marker tersebut memiliki nilai atau rating sendiri sebagai tanda seberapa layak gambar tersebut untuk dijadikan marker. Gambar yang dijadikan marker minimal memiliki nilai ranting 3 bintang. Hal tersebut berguna agar dapat mengetahui bahwa marker yang akan digunakan memiliki sensitivitas tinggi untuk memudahkan pendeteksian marker pada sistem. Setelah semua marker diunggah pada database, unduh unity package untuk marker tersebut dengan cara klik Download Dataset (all). Maka akan muncul form seperti pada gambar berikut.
Gambar 4.25 FormDownload
Pada kolom Select a development platform pilih Unity Editor, karena penulis menggunakan Unity sebagai aplikasi pengembangan sistem. Selanjutnya pilih Download. Dan unity package yang berisi markerakan terunduh dan dapat digunakan.
4.3.3 Implementasi Pembuatan Augmented Reality Pada Android
Aplikasi pembelajaran sendi gerak ini menggunakan Unity game engine untuk membuat aplikasi android. Penggunaan game engine adalah satu-satunya solusi yang dapat digunakan dalam pembuatan aplikasi yang berupa animasi tiga dimensi. Aplikasi yang dibuat akan memiliki tiga buah sceneatau tampilan halaman utama yaitu tampilan splash screen, tampilan menu utama dan tampilan halaman augmented reality.
4.3.3.1. Tampilan Splash Screen
Halaman splash screen ini berfungsi untuk menampilkan identitas pembuat aplikasi. Splash screen pada aplikasi ini berbentuk gambar dengan tulisan AR For Learning. Karena penulis mengimplementasikan augmented reality sebagai amplikasi untuk pembelajaran. Tampilan splash screen ini di buat dalam sceneyang diberi nama splash screen.
Gambar 4.26 Tampilan splash screen
Berikut merupakan potongan kode program pada scene splash screen :
Dari potongan kode di atas dapat dijelaskan bagaimana scenetampilan splash screen hanya berjalan selama 5 detik saja. Ketika waktu yang berhitung mundur berjalan sudah mencapai detik ke-0, maka aplikasi akan melanjutkan ke scene selanjutnya.
4.3.3.2. Tampilan Menu Utama
Pada scene menu utama terdapat empat buah menu pilihan yaitu menu mulai, panduan, aplikasi ini dan keluar. Sceneini merupakan scene utama dari
public class SplashScreen : MonoBehaviour { public float timer = 5; // lama waktu public void Update(){
timer -= Time.deltaTime; // waktu di hitung mundur if (timer > 0){
Debug.Log(timer); }else {
Application.LoadLevel(1); // next ke scene selanjutnya }
} }
keseluruhan scene, karena semua scene yang dibuka dapat kembali ke scene menu utama ini. Berikut merupakan tampilan dari menu utama.
Gambar 4.27 Tampilan menu utama
Berikut ini merupakan potongan kode program pada scenemenu utama.
Kode di atas merupakan kode yang menggambarkan bagaimana akibat dari aktivitas yang dilakukan oleh user pada menu utama. Seperti ketika button start atau tombol mulai di sentuh maka scene akan berpindah ke scene 2 yaitu
public void OnButtonStateChange(Button changedButton, int buttonPhaseId) { if (changedButton == buttonStart) { // jika button touch di tekan
Application.LoadLevel(2); // pindah ke scene 2 (Menu Augmented Reality ) }
if(changedButton == buttonPanduan) { // jika panduan ditekan menuPanduan=true; // slideshow panduan ditampilkan }
if(changedButton == buttonAbout) { // jika about ditekan menuAbout=true; // slideshow about ditampilkan }
if (changedButton == buttonExit) { Application.Quit(); // keluar dari aplikasi }
scene halaman augmented reality persendian. Lalu ketika tombol panduan di sentuh makan aplikasi akan menampilkan slideshow panduan. Ketika button about atau tombol aplikasi ini di sentuh maka akan menampilkan slideshow berisi informasi mengenai aplikasi tersebut. Dan ketika button exit di sentuh maka akan keluar dari aplikasi.
Berikut ini merupakan potongan kode program untuk menampilkan GUI (Graphical User Interface) yang digunakan pada menu utama aplikasi AR persendian ini. GUI merupakan tampilan grafis yang mengandung alat-alat atau komponen-komponen yang memampukan pengguna untuk melakukan pekerjaan interaktif. Pada hal ini GUI di gunakan untuk tampilan halaman panduan dan tentang aplikasi. Halaman tersebut ditampilkan secara popup dengan tipe slideshow.
Kode tersebut merupakan kode yang mendeklarasikan bagaimana GUI slide show diletakkan dan ukuran dari masing-masing GUI. Tampilan slideshow tersebut terdiri dari dua kolom yaitu kolom untuk menampilkan gambar dan kolom untuk menampilkan teks informasi. Tampilan slideshow menu Panduan dapat di slide sebanyak tiga kali, sedangkan untuk tampilan Aplikasi Ini hanya menampilkan teks dan hanya memiliki satu halaman slide.
void OnGUI() {
if(menuPanduan==true){ //membentuk slideshow aplikasi
GUI.BeginGroup(new Rect(Screen.width/2-200,Screen.height/2-250,800,500)); GUI.Box(new Rect(0,50,405,460),"Informasi");
if(GUI.Button(new Rect(0, 50, 30, 30),exit)){
menuPanduan = false; // jika tombol exit ditekan slideshow akan keluar }
scrollPosition1 = GUI.BeginScrollView(new Rect(30,0,350,470),scrollPosition1,new Rect(0,0,1150,200));
GUI.DrawTexture(new Rect(0,90,350,210),gambar1); // menampilkan gambar pada slideshow info1 = GUI.TextArea(new Rect(0,300,350,130),info1,200); // menampilkan informasi pada slideshow
GUI.DrawTexture(new Rect(400,90,350,210),gambar2); info2 = GUI.TextArea(new Rect(400,300,350,130),info2,200); GUI.DrawTexture(new Rect(800,90,350,210),gambar3); info3 = GUI.TextArea(new Rect(800,300,350,130),info3,300); GUI.EndScrollView();
GUI.EndGroup(); }
if(menuAbout==true){
GUI.BeginGroup(new Rect(Screen.width/2-200,Screen.height/2-250,800,370)); GUI.Box(new Rect(0,50,405,360),"About App");
if(GUI.Button(new Rect(0, 50, 30, 30),exit)){
menuAbout = false; // jika tombol exit ditekan slideshow akan keluar }
info1 = GUI.TextArea(new Rect(25,90,350,250),info4,300); // menampilkan informasi pada slideshow
GUI.EndGroup(); }
4.3.3.3. Tampilan scene Augmented Reality
Halaman ini dapat di akses ketika memilih menu mulai yang ada pada halaman menu utama. Halaman ini disediakan untuk pengguna memulai aplikasi AR persendian. Dalam halaman ini terdapat tombol – tombol pilihan dengan fungsinya masing – masing. Gambar 4.28 berikut merupakan halaman AR persendian.
Gambar 4.28 Tampilan scene Augmented Reality
Potongan kode program untuk menampilkan menu yang terdapat dihalaman AR yaitu sebagai berikut.
Kode di atas merupakan potongan kode program untuk menampilkan tombol rotasi dan menu utama. Ketika tombol rotasi disentuh maka objek tiga dimensi akan berputar dan untuk memberhentikan rotasi dapat menyentuh tombol stop rotasi. Ketika tombol menu utama disentuh maka aplikasi akan kembali kehalaman menu utama.
void Rotasi() {
GUI.matrix = Matrix4x4.TRS (new Vector3(Screen.width - 258*GUIsF.x,GUIsF.y,0),Quaternion.identity,GUIsF); if (statusRotasi==false){
if(GUI.Button (new Rect (-208, 10, 238, 59), "ROTASI")) { statusRotasi = true;
} } else {
if(GUI.Button (new Rect (-208, 10, 238, 59), "STOP ROTASI")) { statusRotasi = false;
} }
if(GUI.Button (new Rect(40,10,208,59), "MENU UTAMA")){ Application.LoadLevel(1); // ke menu utama
} }
void Update(){ if(statusRotasi==true) {
sendi1.transform.Rotate(Vector3.up, kecepatanRotasi * Time.deltaTime); }
{ if (statusRotasi==true) {
skeleton1.transform.Rotate(Vector3.up, kecepatanRotasi * Time.deltaTime); }
} {
//perubahan ukuran
sendi1.transform.localScale = new Vector3(100f, 100f, 100f) * hsliderval * 0.1f; skeleton1.transform.localScale = new Vector3(15f, 15f, 15f) * hsliderval * 0.1f; }
Potongan kode di atas merupakan kode untuk memprogram fitur banyak objek dalam satu marker dan fitur perbesar dan perkecil objek. Dalam aplikasi ini terdapat dua jenis objek yaitu objek simulasi persendian dan karakter yang menirukan gerakan tubuh dari persendian tersebut. Sehingga pengguna dapat memilih objek mana yang dibutuhkan. Hal tersebut dideklarasikan dalam tombol Simulasi dan Gerakan Tubuh. Ketika tombol simulasi disentuh, maka objek sendi muncul dan objek kerangka tidak muncul dan ketika tombol gerakan tubuh di sentuh maka objek kerangka akan muncul dan objek sendi tidak akan muncul.
Dalam aplikasi ini juga disediakan fitur perbesar dan perkecil objek. Button perbesar dan perkecil objek menggunakan horizontal slider, jadi pengguna cukup menyentuh dan menggeser button secara horizontal atau mendatar untuk memperbesar dan memperkecil ukuran objek.
void MultiObjek(){ //button
GUI.matrix = Matrix4x4.TRS (new Vector3(GUIsF.x,Screen.height-89*GUIsF.y,0),Quaternion.identity,GUIsF);
if(GUI.Button(new Rect(20,12,202,61),"SIMULASI")){ sendi1.SetActive (true);
skeleton1.SetActive(false); }
if(GUI.Button(new Rect(230,12,222,61),"GERAKAN TUBUH")){ sendi1.SetActive(false); skeleton1.SetActive(true); } } void ZoomObject() //hasil ukuran {
GUI.matrix = Matrix4x4.TRS (new
Vector3(GUIsF.x,GUIsF.y,0),Quaternion.identity,GUIsF); {
hsliderval = GUI.HorizontalSlider(new Rect(65, 45, 150.0f,10.0f) , hsliderval,1.0f, 10.0f);
} }
Gambar 4.29 Tampilan marker terdeteksi objek simulasi
Gambar 4.30 Tampilan marker terdeteksi objek gerakan tubuh
Gambar 4.29 dan 4.30 merupakan tampilan ketika marker terdeteksi dan objek ditampilkan. Dalam marker tersebut juga tersedia fitur informasi berupa popup slideshow yang ditampilkan ketika tombol informasi disentuh. Berikut ini merupakan potongan kode program untuk menampilkan objek ketika marker terdeteksi.
Ketika marker diarahkan ke kamera perangkat, maka sistem akan mendeteksi marker tersebut. Ketika marker telah terdeteksi maka sistem akan memunculkan objek tiga dimensi yang sesuai dengan merker tersebut. Dan ketika kamera perangkat tidak diarahkan ke marker, maka sistem tidak dalam mendeteksi marker sehingga objek tiga dimensi tidak akan muncul.
4.4 Pengujian Aplikasi
Sebelum aplikasi didistribusikan dan digunakan oleh pengguna, maka harus dilakukan proses pengujian terhadap aplikasi terlebih dahulu agar aplikasi yang telah dibangun dapat berjalan dengan baik semua konten dan fungsinya sebagaimana yang telah dirancang oleh penulis. Pengujian ini juga dapat meminimalisir kesalahan-kesalahan yang akan terjadi yang dapat menimbulkan ketidaknyamanan pengguna dalam menggunakan aplikasi ini. Pengujian aplikasi pembelajaran persendian ini menggunakan metode black box. Tahapan yang
private void OnTrackingFound() {
Renderer[] rendererComponents = GetComponentsInChildren<Renderer>(true); // merender objek
foreach (Renderer component in rendererComponents) {
component.enabled = true; }
Debug.Log("Trackable " + mTrackableBehaviour.TrackableName + " found"); }
private void OnTrackingLost() {
Renderer[] rendererComponents = GetComponentsInChildren<Renderer>(true); foreach (Renderer component in rendererComponents)
{
component.enabled = false; }
Debug.Log("Trackable " + mTrackableBehaviour.TrackableName + " lost"); }
dilakukan pada pengujian ini meliputi; lingkungan pengujian, skenario pengujian, hasil pengujian, pengujian marker dan hasil pengujian.
4.4.1 Lingkup Pengujian
Pada proses pengujian, penulis menggunakan perangkat mobile device Samsung Galaxy Tab dengan spesifikasi yang sudah dijelaskan sebelumnya.
4.4.2 Pengujian Black Box
Pengujian dengan metode black box dilakukan dengan cara menjalankan aplikasi pada perangkat keras android Samsung Galaxy Tab . Pengujian dilakukan dengan menekan fungsi-fungsi tombol dan melihat apakah fungsi tersebut dapat berjalan dengan baik dan benar. Berikut adalah skenario pengujian pada aplikasi pembelajaran persendian.
Tabel 4.4 Tabel Skenario Pengujian
No Skenario Bagian yang
diuji Prosedur Pengujian Hasil yang diinginkan 1. Pengujian menampilkan splash screen Halaman splash screen Menekan icon aplikasi pada menu utama Dapat menampilkan splash screen 2. Pengujian menampilkan menu utama Halaman menu
utama Setelah menampilkan splash screen Dapat menampilkan halaman menu utama 3. Pengujian tombol Panduan pada menu utama Tombol Panduan pada menu utama Menekan tombol panduan pada menu utama Dapat menampilkan popupslideshow 4. Pengujian tombol exit pada slideshow panduan Tombol exit pada slideshow panduan Menekan tombol exit pada slideshow panduan Menghilangkan popup slideshow dan kembali ke menu utama 5. Pengujian tombol Aplikasi ini pada menu utama
Tombol Aplikasi Ini pada menu utama
Menekan tombol Aplikasi ini pada menu utama
Dapat
menampilkan popup informasi aplikasi
Tabel 4.4 Tabel Skenario Pengujian (Lanjutan) 6. Pengujian
tombol exit pada popup informasi aplikasi Tombol exit pada popup informasi aplikasi Menekan tombol exit pada popup informasi aplikasi Menghilangkan popup informasi aplikasi dan kembali ke menu utama 7. Pengujian tombol Mulai pada menu utama Tombol Mulai pada menu utama Menekan tombol Mulai pada menu utama Dapat menampilkan halaman Augmented Reality 8. Pengujian pendeteksian marker Halaman Augmented Reality Mengarahkan kamera pada marker Dapat menampilkan objek simulasi sendi berdasarkan marker 9. Pengujian tombol Gerakan Tubuh pada halaman Augmented Reality Tombol Gerakan Tubuh pada halaman Augmented Reality Menekan tombol Gerakan Tubuh pada halaman Augmented Reality Dapat merubah objek simulasi menjadi objek karakter kerangka 10. Pengujian tombol Simulasi pada halaman Augmented Reality Tombol Simulasi pada halaman Augmented Reality Menekan tombol Simulasi pada halaman Augmented Reality Dapat merubah objek karakter kerangka menjadi objek simulasi 11. Pengujian tombol Rotasi pada halaman Augmented Reality Tombol Rotasi pada halaman Augmented Reality Menekan tombol Rotasi pada halaman Augmented Reality Dapat memutar objek 3D yang sedang aktif. 12. Pengujian tombol stop rotasi pada halaman Augmented Reality Tombol Stop Rotasi pada halaman Augmented Reality Menekan tombol Stop Rotasi pada halaman Augmented Reality Dapat memberhentikan objek 3D yang sedang berputar
Tabel 4.4 Tabel Skenario Pengujian (Lanjutan) 13. Pengujian Slider perbesar objek pada halaman Augmented Reality Tombol Slider perbesar objek pada halaman Augmented Reality Menggeser Slider ke arah kanan pada halaman Augmented Reality Dapat memperbesar ukuran objek 3D yang sedang aktif 14. Pengujian Slider perkecil objek pada halaman Augmented Reality Tombol Slider perkecil objek pada halaman Augmented Reality Menggeser Slider kea rah kiri pada halaman Augmented Reality Dapat memperkecil ukuran objek 3D yang sedang aktif 15. Pengujian pendeteksian marker ketika marker dihilangkan Halaman Augmented Reality Mengarahkan kamera tidak pada marker Dapat menghilangkan objek 3D yang sedang aktif 16. Pengujian tombol Menu Utama pada halaman Augmented Reality Tombol Menu Utama pada halaman Augmented Reality Menekan tombol Menu Utama pada halaman Augmented Reality Dapat membuka kembali halaman menu utama 17. Pengujian tombol Keluar pada halaman menu utama Tombol Keluar pada halaman menu utama Menekan tombol Keluar pada halaman menu utama Dapat mengeluarkan aplikasi
4.4.3 Hasil Pengujian Black Box
Setelah dilakukan pengujian berdasarkan skenario pengujian yang telah dibuat maka hasil pengujian akan ditulis dalam bentuk tabel. Berikut adalah hasil pengujian berdasarkan skenario yang telah dibuat.
Tabel 4.5 Hasil Pengujian Skenario
No Skenario Bagian yang
diuji
Prosedur
Pengujian Hasil Uji 1. Pengujian menampilkan splash screen Halaman splash screen Menekan icon aplikasi pada
menu utama Berhasil 2. Pengujian
menampilkan menu utama
Halaman menu
utama Setelah menampilkan splash screen Berhasil 3. Pengujian tombol Panduan pada menu utama Tombol Panduan
pada menu utama Menekan tombol panduan pada
menu utama Berhasil 4. Pengujian tombol
exit pada slideshow panduan
Tombol exit pada slideshow panduan Menekan tombol exit pada slideshow panduan Berhasil 5. Pengujian tombol Aplikasi ini pada menu utama
Tombol Aplikasi Ini pada menu utama
Menekan tombol Aplikasi ini pada
menu utama Berhasil 6. Pengujian tombol
exit pada popup informasi aplikasi
Tombol exit pada popup informasi aplikasi
Menekan tombol exit pada popup informasi aplikasi
Berhasil
7. Pengujian tombol Mulai pada menu utama
Tombol Mulai
pada menu utama Menekan tombol Mulai pada menu
utama Berhasil 8. Pengujian pendeteksian marker Halaman Augmented Reality Mengarahkan kamera pada marker Berhasil 9. Pengujian tombol Gerakan Tubuh pada halaman Augmented Reality Tombol Gerakan Tubuh pada halaman Augmented Reality Menekan tombol Gerakan Tubuh pada halaman Augmented Reality Berhasil 10. Pengujian tombol Simulasi pada halaman Augmented Reality Tombol Simulasi pada halaman Augmented Reality Menekan tombol Simulasi pada halaman Augmented Reality Berhasil
Tabel 4.5 Hasil Pengujian Skenario (Lanjutan) 11. Pengujian tombol Rotasi pada halaman Augmented Reality Tombol Rotasi pada halaman Augmented Reality Menekan tombol Rotasi pada halaman Augmented Reality Berhasil 12. Pengujian tombol stop rotasi pada halaman Augmented Reality Tombol Stop Rotasi pada halaman Augmented Reality Menekan tombol Stop Rotasi pada halaman Augmented Reality Berhasil 13. Pengujian Slider perbesar objek pada halaman Augmented Reality Tombol Slider perbesar objek pada halaman Augmented Reality Menggeser Slider ke arah kanan pada halaman Augmented Reality Berhasil 14. Pengujian Slider perkecil objek pada halaman Augmented Reality Tombol Slider perkecil objek pada halaman Augmented Reality Menggeser Slider kea rah kiri pada halaman Augmented Reality Berhasil 15. Pengujian pendeteksian marker ketika marker dihilangkan Halaman Augmented Reality Mengarahkan kamera tidak
pada marker Berhasil
16. Pengujian tombol Menu Utama pada halaman Augmented Reality Tombol Menu Utama pada halaman Augmented Reality Menekan tombol Menu Utama pada halaman Augmented Reality Berhasil 17. Pengujian tombol Keluar pada halaman menu utama Tombol Keluar pada halaman menu utama Menekan tombol Keluar pada halaman menu utama Berhasil
4.4.4 Uji Pendeteksian Marker
Uji pendeteksian marker dilakukan untuk mengetahui kondisi-kondisi seperti apa saja yang akan mempengaruhi sistem dalam mendeteksi marker.
Sehingga dapat diketahui batasan maksimum dan minimum sistem dalam mendeteksi marker.
4.4.4.1. Uji Jarak Marker
Uji jarak dilakukan dengan cara mengukur jarak kamera perangkat terhadap marker. Pengujian dilakukan dengan marker berukuran 17x17cm dan pencahayaan ruangan yang cukup. Pengujian jarak menggunakan alat kabel sebagai penanda jarak dan penggaris sebagai pengukur panjang. Setelah dilakukan pengujian sebanyak tiga kali perjarak maka hasil pengujian ditulis dalam tabel 4.6 berikut.
Tabel 4.6 Hasil Pengujian Jarak
No Jarak Marker (cm) Hasil
1. 100 Tidak terdeteksi 2. 80 Terdeteksi Lambat 3. 60 Terdeteksi cepat 4. 40 Terdeteksi cepat 5. 20 Terdeteksi cepat 6. 10 Terdeteksi lambat 7. 5 Tidak terdeteksi
Dari hasil uji coba tersebut dapat disimpulkan bahwa jarak 20 – 60 cm adalah jarak yang ideal untuk pendeteksian marker dan menampilkan objek dengan baik.
4.4.4.2. Uji Sudut Kemiringan
Uji sudut kemiringan dilakukan untuk mengukur seberapa jauh kemampuan sistem dalam mendeteksi marker apabila kamera atau marker dalam keadaan miring. Pengujian dilakukan dengan cara meletakkan marker pada bidang datar, kemudian kamera perangkat dimiringkan hingga maksimal 90o. Karena apabila kemiringan melebihi 90o maka sistem tidak akan mampu mendeteksi
marker karena kamera tidak dapat mengarah kearah marker. Pengujian menggunakan alat bantu berupa busur untuk mengukur kemiringan.
Setelah dilakukan pengujian sebanyak tiga kali persudut kemiringan, maka hasil pengujian ditulis dalam tabel 4.7.
Tabel 4.7 Hasil Pengujian Sudut Kemiringan
No Sudut Kemiringan (o) Hasil
1. 90 Tidak Terdeteksi 2. 75 Terdeteksi Lambat 3. 55 Terdeteksi cepat 4. 35 Terdeteksi cepat 5. 15 Terdeteksi cepat 6. 0 Terdeteksi cepat
Berdasarkan hasil uji coba tersebut, dapat disimpulkan bahwa sistem mampu mendeteksi marker hingga kemiringan 75o. Dengan sudut kemiringan 0o – 55o merupakan sudut terbaik untuk pendeteksian marker.
4.4.5 Analisis Hasil Pengujian
Dari hasil pengujian yang telah dilakukan terhadap aplikasi, sistem beserta fungsi-fungsinya sudah berjalan dengan baik dan sesuai dengan rancangan aplikasi. Hasil pengujian dapat dijelaskan sebagai berikut:
1. Pengguna dapat menginstal aplikasi pada perangkat ponsel dan menggunakannya dengan baik.
2. Seluruh fungsi tombol yang disediakan dalam setiap scenedapat berjalan dengan baik sesuai dengan rancangan.
3. Seluruh marker dapat terdeteksi dengan baik pada jarak 20cm sampai dengan 60cm dari kamera perangkat yang digunakan.
4. Seluruh marker dapat terdeteksi dengan baik pada kamera perangkat dengan sudut kemiringan 0o sampai dengan 55o.
