Rancang Bangun Aplikasi 3D Tuntunan Sholat untuk Anak Asyrofil Afika Fatta, Kholid Fathoni, Setiawardhana Politeknik Elektronika Negeri Surabaya Kampus PENS-ITS, Keputih, Sukolilo, Surabaya. Email:
[email protected],
[email protected],
[email protected] Abstrak Pembelajaran yang bersifat manual dirasa kurang menarik dan monoton. Kini diperlukan pembelajaran yang serba digital. Anak diharapkan mampu belajar sendiri tanpa panduan dari guru / pembimbing. Aplikasi yang beredar tentang agama Islam saat ini sudah banya k, tetapi belum ada yang menyediakan materi pembelajaran tuntunan sholat yang menarik dan mudah dipelajari. Apabila tuntunan sholat disajikan dengan animasi dan tampilan yang menarik, maka anak akan makin tertarik untuk mempelajari. Tugas akhir ini membuat sebuah aplikasi pembelajaran interaktif yang berbasis 3D dengan memanfaatkan XNA v4.0 dan Visual Studio. Life cycle dari aplikasi ini adalah menyiapkan material yang dibutuhkan yaitu animasi karakter dan audio, jika semua sudah tersedia lalu dimasukkan d alam content pipeline. Visual Studio dan XNA v4.0 library akan mengolah material yang terdapat pada content pipeline sehingga menjadi aplikasi desktop yang siap pakai. Hasil dari uji coba aplikasi ini menunjukkan bahwa terdapat kegagalan dalam meload model dikarenakan kurang lengkapnya library yang terdapat pada XNA v4.0. Kata kunci : animasi, 3D, sholat, tutorial.
Abstract Manual learning is less interesting and monotone. Now required with digital learning. Children are expected to learn on their own without the guidance of teacher / mentor. Applications are circulating about the religion of Islam are now widely, but there is no guidance that provides learning materials for prayers that interesting and easy to learn. If the prayer guide is presented with animations and an attractive appearance, then the child will be more interested to learn. The final project is to make an interactive learning-based 3D applications using XNA v4.0 and Visual Studio. Life cycle of this application is to prepare the necessary materials that is character animation and audio, if all are available and included in the content pipeline. Visual Studio and XNA v4.0 library will process the material contained in the content pipeline so be ready to use desktop application. Results from the experiment of these applications shows that there is a failure to load the model due to lack of details contained in the XNA library v4.0. Keywords: animation, 3D, prayers, tutorials.
1. Pendahuluan Sarana belajar dan sumber belajar yang sangat banyak akan mempercepat pengetahuan mereka. Perkembangan pengetahuan dan teknologi informasi saat ini sangat menjanjikan bagi siswa utnuk belajar. Siswa yang kreatif dan terampil, ia akan cepat mahir untuk memahami materi pembelajaran. Di lembaga pendidikan saat ini harus tersedia sarana belajar dan sumber belajar yang dapat membangkitkan anak untuk belajar. Guru adalah fasilitator. Ia berperan sebagai pengarah kegiatan anak yang sedang belajar. Guru harus mahir memilih dan
meggunakan sumber belajar, materi belajar, dan sarana belajar. Materi dan sarana pembelajaran harus menarik bagi anak. Masa anak adalah masa-masa bermain. Anak akan cepat bosan untuk belajar jika kegiatan belajar itu tidak menyenangkan. Guru harus mampu menciptakan suasana yang menyenangkan, menghibur dan mendidik. Sarana pembelajaran menjadi unsur yang penting dalam proses belajar-mengajar. 2. Related Works Sebelum terbentuknya aplikasi ini, terdapat aplikasi yang sudah dibuat oleh beberapa kalangan yang mw menularkan
ilmunya. Aplikasi yang dibuat berbasis 2D dengan menggunakan software developer Visual Basic atau dengan Flash. Apliksi tersebut memberikan contoh sholat dengan menunjukkan gambar tahap orang sholat. Kemudian pada tahap tersebut akan terdengar suara doanya. Pilihan sholat kebanyakan dengan menggunkan sholat wajib lima waktu.
Gambar 1 : Aplikasi Sholat 2D Pada penelitian ini aplikasi yang akan dibuat dengan menyempurnakan sistem yang mulanya dengan menggunakan sistem 2D menjadi 3D. Serta dapat diputar sesuai keinginan untuk memperjelas bagian sholat tersebut untuk sisi yang lain. 3. Teori Penunjang 3.1. Sistem Belajar Belajar adalah usaha secara sadar untuk dapat memahami atau melakukan sesuatu. Dalam proses belajar terdapat beberapa komponen yang sangat berpengaruh. Guru, siswa/anak, materi pembelajaran, dan alat pembalajaran adalah komponen proses belajar yang sangat penting. Guru, bukanlah segala-galanya di era sekarang. Anak yang kreatif dan teramapil, ia akan lebih cepat memahami sesuatu. Media elektronik adalah salah satu media pembelajaran yang cocok untuk saat ini. Dunia anak saat ini penuh dikelilingi dengan alat-alat serba elektro. Alat pembelajaran tradisional tidak menarik bagi anak untuk belajar karena itu guru dituntut untuk dapat untuk dapat menggunakan alat-alat elektronik
seperti laptop, komputer, dan alat elektronika yang lain. Teori tabularasa dari tokoh pendidikan yaitu John Locke ia berpendapat bahwa anak yang baru lahir bagai kertas putih. Hal ini juga sesuai dengan sabda Nabi Muhammad S.A.W yang artinya “ Setiap anak yang lahir adalah bersih/suci dan orang tuanyalah yang menjadikan anak itu menjadi majusi (penyembah api) atau Nassrani”. Dari pandangan di atas orang dewasa mempunyai andil besar dalam pendidikan anak-anak. 3.2. Visual Studio Microsoft Visual Studio merupakan IDE (integrated development environment) atau sebuah perangkat lunak lengkap (suite) yang dapat digunakan untuk melakukan pengembangan aplikasi, baik itu aplikasi bisnis, aplikasi personal, ataupun komponen aplikasinya, dalam bentuk aplikasi console, aplikasi Windows, ataupun aplikasi Web. Apliksi ini untuk menyelesaikan tugas akhir ini, karena tugas akhir ini membutuhkan pemrograman C# yang terintegrasikan dengan library XNA. 3.3. XNA XNA merupakan suatu framework yang dibuat oleh Microsoft khusus untuk pengembangan game baik Xbox maupun PC. Kata XNA sendiri tidak memiliki arti dan bukan akronim juga. XNA menggunakan bahasa pemrograman C# dengan konsep OOP. Fitur yang dibawa oaleh XNA yaitu menggunakan teknologi DirectX, mendukung grafik 2D dan 3D, serta content pipeline. Pengembangan dengan XNA membutuhkan Microsoft Visual C#, .NET Framework 3.5 & 4.0, XNA (2.0, 3.0, 3.1, 4.0), image editor 2D dan 3D editor.
dirasa sangat perlu yaitu kartu grafis, processor, dan RAM. 3.5. C#
Gambar 2 : Data Flow XNA Bagan diatas merupakan bagan data flow XNA yang merupakan pengolahan data dan runtime aplikasi. Aplikasi dimulai kemudian XNA akan menginisialisasi apa saja yang dibutuhkan dalam apliksi tersebut, kemudian material yang dibutuhkan akan diload dan ditampung pada conten DOM. Untuk lebih detailnya dapat dilihat pada bagan berikut :
C# merupakan suatu bahasa pemrograman yang diciptakan oleh Microsoft yang digunakan oleh banyak developer .NET dalam mengembangkan aplikasi berplatform .NET. Bahasa pemrograman ini digunakan karena library XNA hanya bisa digunkan dengan pemrograman ini. 4. Perancangan Sistem 4.1. Perencanaan Sistem Secara garis besar perangcangan kerja proyek akhir ini sebagai berikut:
Gambar 3 : Conten Manager XNA XNA dapat menerima 3 format material yang dibutuhkan, yaitu .x, .fbx, dan .tga. Kemudian file tersebut akan diimport pada content DOM lalu diubah menjadi format .xnb dengan bantuan processor dan konten compiler. Setelah dirubah dalam format .xnb maka data tersebut akan ditampung di content manager. 3.4. 3Ds Max 3D Studio Max (kadangkala disebut 3ds Max atau hanya MAX) adalah sebuah perangkat lunak grafik vektor 3-dimensi dan animasi, ditulis oleh Autodesk Media & Entertainment (dulunya dikenal sebagai Discreet and Kinetix). Aplikasi ini untuk membuat karakter orang tersebut dan animasi orangnya. Dalam hal pembuatan karakter atau menganimasi ternyata dibutuhkan spesifikasi komputer yang cukup untuk merender hasil animasi agar hsilnya maksimal. Harware yang
Gambar 4 : Rancangan Kerja Proyek Akhir Diagram tersebut merupakan alur pokok pengerjaan tugas akhir ini. Langkah awal yang diperlukan yaitu pengumpulan materi yang dibutuhkan. Seperti membuat karakter dari 3dsmax dan merekam suara lafal doa gerakan sholat.
Gambar 5 : Karakter yang Telah Dibuat Material yang sudah dibuat dan kumpulkan akan diolah. Untuk
material karakter akan dikonvert terlebih dahulu ke format .fbx, untuk material suara harus dimasukkan properti terlebih dahulu melalui aplikasi Microsoft Cross-Platform Audio Creation Tool (XACT) v3.0 kemudian semua material yang dibutuhkan akan ditampung pada content pipeline. Pada bagian desain interface dilakukan proses membuat user interface dan pemrograman yang digunakan untuk membuat aplikasi tersebut. Dan langkah akhir yaitu tahap ujicoba aplikasi jika terdapat eror atau bug maka segera dipatch.
4.2. Proses Kerja Sistem Proses kerja sistem apliksi ini dapat digambarkan dengan design perilaku sistem seperti dibawah ini :
START
Intro
User Memilih Menu
Zuhur ?
T
Ashar ?
T
Maghrib ?
T
Isya’ ?
T
Subuh ?
T
Ied ?
Y
Y
Y
Y
Y
Y
Tutorial Sholat Zuhur
Tutorial Sholat Ashar
Tutorial Sholat Maghrib
Tutorial Sholat Isya’
Tutorial Sholat Subuh
Tutorial Sholat Ied
T
Tutorial Sholat Jenazah
END
Gambar 7 : Design Proses Dalam diagram tersebut telah dijelaskan bagaimana aplikasi ini berjalan. Dimulai dari start user akan dibawa ke langkah selanjutnya dengan disuguhi sebuah intro yang mana berisi penyemangat dan cuplikan isi dari aplikasi ini sehingga user merasa penasaran untuk melanjutkan menggunakan aplikasi ini. Seperti pada sebuah game user akan dipertemukan game menu yang berisi pilihan sholat yang akan ditampilkan dalam aplikasi tutorial tersebut. Setelah user memilih tutorial misalnya sholat dzuhur maka animasi tutorial shoalt dzuhur akan ditampilkan. 4.3. Pembuatan Aplikasi Dari proses kerja sistem maka langsung dapat dibuat aplikasinya karena batasan kerja sudah jelas dan apa yang dibutuhkan sudah terpenuhi. Design menu dari aplikasi ini dapat dilihat seperti berikut : Intro
Gambar 6 : Desain Perilaku User Design perilaku sistem tersebut menunjukkan bahwa alur bagaiman seorang user memperlakukan software tersebut. User melakukan beberapa aktifitas pada apaliksi tersebut seperti membuka apliksi, melakukan pembelajaran, mengerjakan kuis yang telah disediakan, dan menutup aplikasi. Untuk melakukan pembelajaran, user dapat memilih belajar sholat yang telah disediakan aplikasi tersebut. Dan semua yang terdapat pada design perilaku sistem dapat di bentuk flowchart aplikasi tersebut seperti diagram berikut.
Menu
Play Tutorial
Option
Quiz
Exit
Tutorial Zuhur
Tutorial Ashar
Tutorial Maghrib
Tutorial Isya’
Tutorial Subuh
Tutorial Ied
Back to Menu
Sound
Gambar 8 : Design Menu Aplikasi Diagram menu diatas mengambarkan alur ini dari aplikasi yang akan dibuat. Pada menu terdapat 4 pilihan yaitu play, option, kuis dan exit. Menu play sendiri memiliki 5 pilihan tutorial sholat fardhu dan terdapat tambahan sholat Idul Fitri dan sholat jenazah. Kedua
Tutorial Jenazah
menu play dan option setelah selesai akan kembali ke menu utama lagi. Dari menu tersebut terdapat source code utama sebagai berikut :
dipilih akan memanggil layer yang sudah dipilih tadi. Dari source code di atas maka tampilan dari menu utama adalah sebagai berikut :
MenuEntry playTutorialMenuEn try = new MenuEntry("Play Tu torial"); MenuEntry quizMenuEntry = ne w MenuEntry("Quizs");
MenuEntry optionsMenuEntry = new MenuEntry("Options"); MenuEntry exitMenuEntry = ne w MenuEntry("Exit"); playTutorialMenuEntry.Select ed += PlayTutorialMenuEntryS elected; quizMenuEntry.Selected += Qu izTutorialMenuEntrySelected;
Gambar 10 : Menu Utama Menu utama tersebut terdiri dari 4 pilihan yaitu play tutorial dimana kita akan memperlajari tutorial tersebut dengan pilihan shlta yang tersedia sebagai sub menu aplikasi ini, agar lebih jelas user interfacenya adalah sebagai berikut :
optionsMenuEntry.Selected += OptionsMenuEntrySelected;
exitMenuEntry.Selected += On Cancel; MenuEntries.Add(playTutorial MenuEntry);
Gambar 11 : Pilihan Tutorial
MenuEntries.Add(quizMenuEntr y);
Inilah source code yang membentuk sub menu tersebut :
MenuEntries.Add(exitMenuEntr y);
MenuEntries.Add(optionsMenuE ntry); MenuEntries.Add(exitMenuEntr y);
Gambar 9 : class MainMenuScreenc.cs Pada class MainMenuScreenc.cs merupakan class implement dari class MenuScreen.cs yang berisi pilihan menu. Dalam class ini semua variable berparameter MenuScreen kemudian jika variabel tersebut
sholatZuhur = new MenuEntry ("Sholat Zuhur");
sholatAshar = new MenuEntry ("Sholat Ashar"); sholatMaghrib = new MenuEnt ry("Sholat Maghrib"); sholatIsya = new MenuEntry( "Sholat Isya'");
sholatSubuh = new MenuEntry ("Sholat Subuh"); sholatIed = new MenuEntry(" Sholat Ied"); sholatJenazah = new MenuEnt ry("Sholat Jenazah");
Gambar 12 : Class SubMenu.cs Pada pilihan quiz maka akan muncul user interface sebagai berikut:
Gambar 13 : Contoh Soal Quis ini berisi pertanyaan multply choice yang terdapat 4 pilihan jawaban. Jawaban yang salah akan menampilkan dialog box bahwa anda salah. Jika benar maka user akan langsung masuk pada layer berikutnya yang berisi soal nomer dua, begitu seterusnya hingga sampai soal nomer tujuh. 5. Hasil dan Analisa Hasil dari pengujian sistem dapat ditarik kesimplan sebagai berikut : Tabel 1 : Hasil Pengujian Aspek Gagal Menu utama Sub menu Tutorial Quis 1-7
Berhasil √ √ √ √
Dari percobaan tersebut aplikasi ini dapat berjalan lancar jika pada laptop atau komputer yang menggunakan kartu
grafis, sehingga tampilan lebih halus. Aplikasi tersebut hampir sesuai dengan batasan masalah dan sesuai dengan keinginan. Sebenarnya diperlukan komputer yang lebih tinggi spesifikasinya untuk merender animasi tersebut. Minimal yang dibutuhkan yaitu processor P4 2.0 GHz, RAM 512, kartu grafis minimal 512MB, HDD 60MB, dan sudah terinstal Microsoft .NET 4.0. Untuk menguji ketertarikan user dengan aplikasi ini, dibuat suatu kuisioner terbuka. Karena kuisioner terbuka lebih mudah digunakan untuk kalangan anak kecil. Kuisioner dilakukan dengan 26 jumlah koresponden dan dilakukan di SDN Catak Gayam 2. Tabel 2 : Hasil Kuisioner No. Poling Jumlah 1. Tidak 5 menarik 2. Kurang 7 Menarik 3. Menarik 9 4. Sangat 5 Menarik 5. Sulit 3 6. Cukup 12 Mudah 7. Mudah 7 8. Sangat 4 Mudah 9. Senang 9 10. Kurang 14 Senang 11. Tidak 3 Senang 12. Tidak 4 Bermanfaat 13. Bermanfaat 10 14. Sangat 12 Bermanfaat 15. Ya 18 16. Tidak 8
Prosentase 15,4% 26,9% 38,5% 19,2% 11,5% 46,1% 26,9% 15,4% 34,6% 53,8% 11,5% 15,4% 38,5% 46,2% 69,2% 30,7%
6. Kesimpulan Dari hasil uji coba perangkat lunak ini dapat ditarik beberapa kesimpulan: 1. Aplikasi yang dibuat ini telah dapat memenuhi apa yang tertuang pada proposal.
2. Aplikasi ini mampu menarik minat siswa untuk belajar sholat dengan benar. 3. Aplikasi ini masih memerlukan penyempurnaan kembali, karena menurut penulis masih banyak kekurangan. 4. Memerlukan spesifikasi computer yang terdapat grapic card minimal 512MB, processor P4 2.0GHz, RAM 512 MB, HDD 100MB dan terinstal Microsoft .NET 4. 7. Daftar Pustaka [1] Al-Albani, M. Nashiruddin. “Sifat Sholat Nabi”. 2008. Jakarta: Gema Insani. [2] Hendratman,S.T, Hendi. “The Magic of 3DnStudio Max”. Desember 2008. Bandung: Informatika. [3] Felisitas, Johan. 26 Maret 2008. “Ilmu Grafis”. http://www.ilmugrafis.com/3dma x-studio3.php. Diakses pada tanggal 24 Maret 2011. [4] “XNA Game Studio Team Blog”. http://blogs.msdn.com/b/xna/. Diakses pada tanggal 24 Maret 2011. [5] “APP HUB (Developer for Windows Phone and XBOX 360)”. http://create.msdn.com/enUS/. Diakses pada tanggal 24 Maret 2011. [6] “Riemer’s XNA Tutorial”. http://www.riemers.net/. Diakses pada tanggal 27 Maret 2011.
