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.

Transkripsi

1 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. 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 : 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 55

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 sebagai aplikasi pengembangan android. 3. Blender 2.69 sebagai aplikasi pemodelan objek. 4. Mono Develop-Unity Sebagai scripting editor. 5. Vuforia Sebagai SDK 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 (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 klik KB 156x80 PNG Adobe Photoshop 2 About normal KB 156x80 PNG Adobe Photoshop 3 Bonejoint 78 KB 600x525 JPG Adobe Photoshop 4 Exit klik KB 300x90 PNG Adobe Photoshop 5 Exit normal 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

3 57 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 screen KB 1600x1000 JPG Adobe Photoshop 14 Start klik KB 300x90 PNG Adobe Photoshop 15 Start normal KB 300x90 PNG Adobe Photoshop 16 Wood 57 KB 640x423 JPG Adobe Photoshop Tabel 4.2 Bahan Katagori Objek 3D No Nama File Ukuran Jumlah Tipe Dibuat File Vertex Dengan 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 FBX Blender 8 Skeleton geser animasi 9.93 MB FBX Blender 9 Skeleton kondiloid animasi 8.17 MB FBX Blender 10 Skeleton pelana animasi 6.73 MB FBX Blender 11 Skeleton peluru animasi 7.43 MB FBX Blender 12 Skeleton putar animasi 6.28 MB FBX Blender

4 58 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 Implementasi Pemodelan Objek Objek diimplementasikan pada perangkat lunak Blender 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.

5 59 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 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

6 60 + 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.

7 61 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 :

8 62 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

9 63 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 :

10 64 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 Hasil dari mengkunci gerakan tampak pada gambar 4.11 berikut :

11 65 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

12 66 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 : Gambar 4.14 Export file

13 67 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 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

14 68 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. Gambar 4.17 Gerakan lutut kaki kanan

15 69 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 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. Gambar 4.18 Desain background marker

16 70 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 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.

17 71 Gambar 4.20 Tampilan target manager Selanjutnya buat database baru dengan memilih menu add database, maka akan muncul formcreate Database seperti pada gambar 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 sebagai berikut.

18 72 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.

19 73 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.

20 74 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 Implementasi Pembuatan 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 utama yaitu tampilan splash screen, tampilan menu utama dan tampilan augmented reality 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.

21 75 Gambar 4.26 Tampilan splash screen Berikut merupakan potongan kode program pada scene splash screen : 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 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 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

22 76 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. public void OnButtonStateChange(Button changedbutton, int buttonphaseid) { if (changedbutton == buttonstart) { // jika button touch di tekan Application.LoadLevel(2); // pindah ke scene 2 (Menu ) 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 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

23 77 scene 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 panduan dan tentang aplikasi. Halaman tersebut ditampilkan secara popup dengan tipe slideshow.

24 78 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(); 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 slide.

25 Tampilan scene Halaman ini dapat di akses ketika memilih menu mulai yang ada pada menu utama. Halaman ini disediakan untuk pengguna memulai aplikasi AR persendian. Dalam ini terdapat tombol tombol pilihan dengan fungsinya masing masing. Gambar 4.28 berikut merupakan AR persendian. Gambar 4.28 Tampilan scene Potongan kode program untuk menampilkan menu yang terdapat di AR yaitu sebagai berikut.

26 80 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; 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 ke menu utama.

27 81 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); 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.

28 82 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.

29 83 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"); 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

30 84 dilakukan pada pengujian ini meliputi; lingkungan pengujian, skenario pengujian, hasil pengujian, pengujian marker dan hasil pengujian Lingkup Pengujian Pada proses pengujian, penulis menggunakan perangkat mobile device Samsung Galaxy Tab dengan spesifikasi yang sudah dijelaskan sebelumnya 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 1. Pengujian menampilkan splash screen 2. Pengujian menampilkan menu utama 3. Pengujian tombol Panduan pada menu utama 4. Pengujian tombol exit pada slideshow panduan 5. Pengujian tombol Aplikasi ini pada menu utama Bagian yang diuji Halaman splash screen Halaman menu utama Tombol Panduan pada menu utama Tombol exit pada slideshow panduan Tombol Aplikasi Ini pada menu utama Prosedur Pengujian Menekan icon aplikasi pada menu utama Setelah menampilkan splash screen panduan pada menu utama exit pada slideshow panduan Aplikasi ini pada menu utama Hasil yang diinginkan Dapat menampilkan splash screen Dapat menampilkan menu utama Dapat menampilkan popupslideshow Menghilangkan popup slideshow dan kembali ke menu utama Dapat menampilkan popup informasi aplikasi

31 85 Tabel 4.4 Tabel Skenario Pengujian (Lanjutan) 6. Pengujian tombol exit pada popup informasi aplikasi 7. Pengujian tombol Mulai pada menu utama 8. Pengujian pendeteksian marker 9. Pengujian tombol Gerakan Tubuh 10. Pengujian tombol Simulasi 11. Pengujian tombol Rotasi 12. Pengujian tombol stop rotasi pada Tombol exit pada popup informasi aplikasi Tombol Mulai pada menu utama Halaman Tombol Gerakan Tubuh pada Tombol Simulasi pada Tombol Rotasi Tombol Stop Rotasi pada exit pada popup informasi aplikasi Mulai pada menu utama Mengarahkan kamera pada marker Gerakan Tubuh Simulasi pada Rotasi pada Stop Rotasi pada Menghilangkan popup informasi aplikasi dan kembali ke menu utama Dapat menampilkan Dapat menampilkan objek simulasi sendi berdasarkan marker Dapat merubah objek simulasi menjadi objek karakter kerangka Dapat merubah objek karakter kerangka menjadi objek simulasi Dapat memutar objek 3D yang sedang aktif. Dapat memberhentikan objek 3D yang sedang berputar

32 86 Tabel 4.4 Tabel Skenario Pengujian (Lanjutan) 13. Pengujian Slider perbesar objek 14. Pengujian Slider perkecil objek 15. Pengujian pendeteksian marker ketika marker dihilangkan 16. Pengujian tombol Menu Utama pada 17. Pengujian tombol Keluar menu utama Tombol Slider perbesar objek Tombol Slider perkecil objek Halaman Tombol Menu Utama pada Tombol Keluar menu utama Menggeser Slider ke arah kanan pada Menggeser Slider kea rah kiri pada Mengarahkan kamera tidak pada marker Menu Utama Keluar pada menu utama Dapat memperbesar ukuran objek 3D yang sedang aktif Dapat memperkecil ukuran objek 3D yang sedang aktif Dapat menghilangkan objek 3D yang sedang aktif Dapat membuka kembali menu utama Dapat mengeluarkan aplikasi 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.

33 87 Tabel 4.5 Hasil Pengujian Skenario No Skenario 1. Pengujian menampilkan splash screen 2. Pengujian menampilkan menu utama 3. Pengujian tombol Panduan pada menu utama 4. Pengujian tombol exit pada slideshow panduan 5. Pengujian tombol Aplikasi ini pada menu utama 6. Pengujian tombol exit pada popup informasi aplikasi 7. Pengujian tombol Mulai pada menu utama 8. Pengujian pendeteksian marker 9. Pengujian tombol Gerakan Tubuh 10. Pengujian tombol Simulasi pada Bagian yang diuji Halaman splash screen Halaman menu utama Tombol Panduan pada menu utama Tombol exit pada slideshow panduan Tombol Aplikasi Ini pada menu utama Tombol exit pada popup informasi aplikasi Tombol Mulai pada menu utama Halaman Tombol Gerakan Tubuh pada Tombol Simulasi Prosedur Pengujian Menekan icon aplikasi pada menu utama Setelah menampilkan splash screen panduan pada menu utama exit pada slideshow panduan Aplikasi ini pada menu utama exit pada popup informasi aplikasi Mulai pada menu utama Mengarahkan kamera pada marker Gerakan Tubuh Simulasi pada Hasil Uji Berhasil Berhasil Berhasil Berhasil Berhasil Berhasil Berhasil Berhasil Berhasil Berhasil

34 88 Tabel 4.5 Hasil Pengujian Skenario (Lanjutan) 11. Pengujian tombol Rotasi pada 12. Pengujian tombol stop rotasi pada 13. Pengujian Slider perbesar objek 14. Pengujian Slider perkecil objek 15. Pengujian pendeteksian marker ketika marker dihilangkan 16. Pengujian tombol Menu Utama 17. Pengujian tombol Keluar pada menu utama Tombol Rotasi Tombol Stop Rotasi pada Tombol Slider perbesar objek Tombol Slider perkecil objek Halaman Tombol Menu Utama pada Tombol Keluar menu utama Rotasi pada Stop Rotasi pada Menggeser Slider ke arah kanan Menggeser Slider kea rah kiri pada Mengarahkan kamera tidak pada marker Menu Utama Keluar pada menu utama Berhasil Berhasil Berhasil Berhasil Berhasil Berhasil Berhasil Uji Pendeteksian Marker Uji pendeteksian marker dilakukan untuk mengetahui kondisi-kondisi seperti apa saja yang akan mempengaruhi sistem dalam mendeteksi marker.

35 89 Sehingga dapat diketahui batasan maksimum dan minimum sistem dalam mendeteksi marker 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 Tidak terdeteksi Terdeteksi Lambat Terdeteksi cepat Terdeteksi cepat Terdeteksi cepat Terdeteksi lambat 7. 5 Tidak terdeteksi Dari hasil uji coba tersebut dapat disimpulkan bahwa jarak cm adalah jarak yang ideal untuk pendeteksian marker dan menampilkan objek dengan baik 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 90 o. Karena apabila kemiringan melebihi 90 o maka sistem tidak akan mampu mendeteksi

36 90 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 Tidak Terdeteksi Terdeteksi Lambat Terdeteksi cepat Terdeteksi cepat Terdeteksi cepat 6. 0 Terdeteksi cepat Berdasarkan hasil uji coba tersebut, dapat disimpulkan bahwa sistem mampu mendeteksi marker hingga kemiringan 75 o. Dengan sudut kemiringan 0 o 55 o merupakan sudut terbaik untuk pendeteksian marker 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 0 o sampai dengan 55 o. 5. Seluruh animasi objek dapat berjalan baik sesuai dengan rancangan.