Pengembangan Peta Interaktif Tiga Dimensi Menggunakan Unreal Engine Febriliyan Samopa1),Zinzia Shavira P.H. 2), Azlan Mufti3), Nur Safira A.4), Titus Damayanti5), Yuli Aria W.6), Fitrah Meilia Purnama 7), Fitriannisa Umami8)
Abstrak ITS Surabaya memiliki banyak stakeholder yang membutuhkan pelayanan dalam pemeliharaan hubungan di antaranya. Dalam hal ini, peningkatan layanan kepada pihak-pihak tersebut dilakukan dengan pembangunan peta 3 dimensi (3D) interaktif yang memberikan kemudahan bagi pengguna (pihak-pihak yang memiliki kepentingan berkunjung ke ITS Surabaya) untuk menelusuri lokasi ITS Surabaya. Pembangunan peta 3D ini dilakukan dengan menggunakan framework teknologi Unreal Engine, yaitu dengan menggunakan tool Unreal Development Kit 3 (UDK) dan teknologi pendukung lain, seperti UML (Unified Model Language), Microsoft Visio, Adobe Photoshop CS3 Extended, Adobe Flash CS5 serta aplikasi-aplikasi lain yang mendukung dalam penyediaan resource peta 3D yang dibuat. Hasil dari pengerjaan Tugas Akhir ini adalah peta 3D yang interaktif dan informatif dengan 21 lokasi beserta objek di dalamnya dengan fitur-fitur tambahan, yaitu penunjuk arah, penunjuk lokasi aktor dalam peta, dan teleportasi. Tingkat informatif dan interaktif dari peta 3D diukur melalui uji coba fungsional dan non-fungsional serta evaluasi akurasi tampilan dan penggunaan aplikasi oleh pengguna.
Key Words: Institut Teknologi Sepuluh Nopember
perusahaan yang ingin bekerja sama dengan ITS Surabaya. Salah satu cara peningkatan yang dapat dilakukan adalah dengan membuat aplikasi peta interaktif 3D yang memberikan kemudahan-kemudahan kepada pihak-pihak penting tersebut saat berkunjung ke ITS Surabaya.Melihat dari tren saat ini di mana kemudahan dan kepraktisan lebih diutamakan. Peta 3D merupakan aplikasi yang memvisualisasikan peta dengan tampilan 3D yang sesuai dengan kenyataannya. Peta interaktif 3D dibuat dengan menggunakan software Unreal Engine. Unreal Engine versi 3 yang juga disebut sebagai Unreal Development Kit (UDK) merupakan engine yang mampu membuat gambaran virtual yang sesuai dengan dunia nyata. Pembangunan aplikasi ini menggunakan metode bottom up untuk proses secara keseluruhan, metode top down untuk proses pembangunan modul peta. Dalam proses pembangunannya, dilakukan tahap integrasi dan pengujian sistem di akhir untuk mengetahui performa dari aplikasi.
2. Tinjauan Pustaka Dalam pembangunan aplikasi, digunakan beberapa dasar dari beberapa sumber bacaan.
2.1 Unreal Engine
(ITS) Surabaya, Peta 3D, Unreal Engine, UDK
1. Pendahuluan Institut Teknologi Sepuluh Nopember (ITS) Surabaya merupakan salah satu perguruan tinggi favorit yang diminati oleh banyak calon mahasiswa baru. Fakta tersebut dapat dilihat dari data Universitas Terbaik di Indonesia 2010 versi Webometrics, ITS Surabaya menduduki peringkat ke-7. Dengan peringkat yang berada di sepuluh besar, ITS Surabaya menjadi salah satu perguruan tinggi yang banyak menjadi incaran kerja sama oleh banyak industri. ITS Surabaya perlu melakukan peningkatan layanan terhadap pihak-pihak penting yang memberikan nilai tersendiri bagi ITS Surabaya. Yang dimaksud pihak-pihak penting di sini dapat meliputi calon mahasiswa baru, orang tua mahasiswa, alumni, atau pun
Unreal Engine merupakan salah satu teknologi yang digunakan untuk membangun sebuah game. Unreal Engine menggunakan konsep aliran data seperti gambar 1. DATA Maps
Textures
Musics
UNREAL ENGINE Graphics
Sounds
Physics
Gambar 1.Konsep aliran data dalam Unreal Engine
Dari gambar di atas, dapat diketahui bahwa untuk membuat suatu peta 3D dibutuhkan sumber daya awal yang nantinya diolah dengan menggunakan aplikasi Unreal Engine. Editor yang terdapat dalam Unreal Engine meliputi, 1) Unreal Front End Editor, melakukan packaging, eksekusi program, pengaturan jaringan, 2) Unreal Kismet, membentuk logika penyajian interaksi dan informasi dalam peta 3D, 3) Unreal Matinee, membuat efek pergerakan, 4) Unreal StaticMesh Editor, mengatur pemberian material dan collision dari suatu mesh/objek, 5) Unreal AnimSet dan Unreal AnimTree, mengatur aktor dari aplikasi, 6) Unreal SoundCue, membuat efek suara untuk peta 3D.
2.2Aplikasi Pendukung Unreal Engine Dalam penggunaan aplikasi ini, penyediaan sumber daya dalam pembuatan aplikasi dilakukan dengan menggunakan aplikasi pendukung di luar Unreal Engine, yaitu 1) Adobe Photoshop CS3 Extended dan plugin NVIDIA Normal, untuk mengelolah texture, 2) Adobe Flash CS5, untuk mengelolah informasi dan menu aplikasi, 3) Microsoft Visio, untuk desain peta 2D, 4) Adobe SoundBooth CS5, untuk mengolah suara, 5) Autodesk 3D Studio Max, untuk membuat objek-objek dalam bentuk 3D, 6) Adobe After Effect, untuk membuat animasi movie di awal aplikasi, 7) RAD Video Tools, untuk melakukan kompresi video.
2.3Interaksi Manusia Komputer IMK mempermudah hubungan antarmuka yang tidak hanya meliputi perancangan layout layar monitor dengan penggunanya. Selain itu, IMK juga memerhatikan unsur useful, usable, dan used. Useful menunjukkan adanya fungsional di dalamnya serta dapat melakukan suatu pekerjaan. Usable menunjukkan kemudahan dan kebenaran dalam mengerjakan sesuatu. Used menunjukkan ketersediaannya untuk digunakan. Terdapat beberapa elemen utama dalam IMK, yaitu manusia, komputer, interaksi, aktivitas, dan lingkungan kerja.
3. Pembahasan Pembangunan aplikasi 3D dilakukan dengan menggunakan tools Unreal Engine, khususnya Unreal Engine versi 3, Unreal Development Kit, yang selanjutnya disebut dengan UDK. Dalam pembangunan aplikasi 3D ini dilakukan beberapa tahapan, yaitu: Standardisasi pengerjaan, membuat standar perbandingan ukuran antara ukuran nyata dengan ukuran yang akan dibuat dalam peta 3D. Survey lokasi dan pengambilan data awal, memperoleh foto-foto dan data dari objek yang akan dibuat dalam aplikasi.
Desain sistem, membuat alur yang mungkin terjadi dalam aplikasi menggunakan tools Unified Modelling Language (UML), khususnya dengan menggunakan metode Use Case Driven Object. Desain peta, membuat peta 2D dari objek penelitian yang dibuat dengan menggunakan Microsoft Visio. Pembuatan aplikasi, memiliki beberapa tahapan di dalamnya, • Pembangunan peta 3D (geometri) • Pembuatan dan peletakan objek • Penambahan interaksi • Pengaturan pencahayaan • Penambahan suara Integrasi aplikasi Pengujian aplikasi
3.1Standardisasi Pengerjaan Peta interaktif 3D ITS Surabaya dibuat dengan menggunakan metode bottom up, di mana objek penelitian yang berupa area dari beberapa jurusan dibangun terlebih dahulu satu per satu sebagai modul peta. Modul-modul ini akhirnya disatukan menjadi aplikasi peta interaktif 3D ITS. Sedangkan untuk pengerjaan masing-masing modul dari peta interaktif 3D ITS Surabaya, metode yang digunakan adalah top down di mana setiap modul dilakukan dengan membangun keseluruhan gedung dan lokasi kemudian dibuat objek-objek dan detail-detail di dalamnya.
3.2Survey Lokasi dan Pengambilan Data Awal Tahapan ini menghasilkan foto-foto dan informasi tentang ruangan atau objek yang akan dibuat dalam aplikasi peta 3D. Hasil dari tahapan ini menjadi standar dan acuan dalam pembuatan aplikasi peta 3D.
3.3Desain Sistem Tahapan ini menghasilkan 1) GUI Storyboard yang digunakan sebagai acuan untuk jalannya aplikasi peta 3D dilihat dari desain tampilannya, 2) Domain model yang menunjukkan objek-objek yang digunakan dalam pembangunan aplikasi, 3) Diagram dan deskripsi use case yang menunjukkan alur yang mungkin terjadi ketika menggunakan aplikasi, 4) Diagram sequence yang menunjukkan jalannya aplikasi dilihat dari sisi aplikasi, 5) Test case merupakan rancangan yang digunakan dalam tahapan pengujian aplikasi dari sisi fungsional.
3.4Desain Peta Tahapan ini menghasilkan peta dari objek penelitian dalam bentuk 2D. Peta ini digunakan sebagai dasar dalam pembuatan aplikasi peta interaktif 3D. Desain yang pertama adalah desain peta 2D yang digunakan sebagai dasar pembuatan menu peta 2D aplikasi.
Gambar 3. Pembuatan Geometri Setelah melakukan pembuatan geometri bangunan, dilakukan pembuatan dan pemasangan material. Material dibuat dengan menggunakan Unreal Material Editor di mana sumber daya dari pembuatan material adalah berupa texture, gambar 2D. Material memberikan corak permukaan yang mendekati nyata untuk suatu objek. Sumber daya yang juga dapat dibuat dalam UDK adalah FluidSurface dan terrain. Kedua komponen ini diletakkan sebagai objek permukaan air dan halaman. Penggunaan kedua komponen ini memberikan efisiensi besarnya kapasitas dari pembuatan objek yang sama untuk area yang luas.
3.5.2Pembuatan dan Peletakan Objek
Gambar 2. Peta dua dimensi Gedung BAAK ITS lantai 2 Desain yang selanjutnya dilakukan adalah desain informasi di mana dilakukan penentuan bentuk-bentuk informasi yang ditampilkan dalam aplikasi. Selain kedua desain di atas, dilakukan desain interaksi yang memberikan rancangan tentang interaksi-interaksi yang akan dibuat.
Selain pembuatan dinding-dinding bangunan menggunakan brush, dilakukan pembuatan dan peletakan objek dari ruangan-ruangan tersebut. Pembuatan objek 3D atau mesh dilakukan menggunakan Autodesk 3D Studio Max kemudian diekspor dalam 3 pilihan ekstensi. Tabel 1 menunjukkan perbedaan dari masing-masing ekstensi. Tabel 1. Ekstensi Ekspor Objek dari Autodesk 3D Studio Max Format .ASE
.FBX
3.5Pembuatan Aplikasi Hasil dari tahapan sebelumnya digunakan dalam tahapan pembuatan aplikasi ini.
3.5.1 Pembangunan Peta 3D Tahapan yang dapat dilakukan pertama ketika telah melakukan desain adalah membuat geometri area dengan menggunakan brush melalui Back End Unreal Engine. Pembuatan geometri ini melibatkan 2 jenis brush, yaitu CSG_Add dan CSG_Substract (untuk memotong CSG_Add). Gambar 3 merupakan hasil pembuatan geometri dalam mode Brush Wireframe.
.DAE
Keterangan Format ini mengekspor objek yang hanya dapat diberi 1 material dalam Static Mesh Editor dalam UDK Format ini mengekspor objek yang dapat diberi banyak material dalam Static Mesh Editor dalam UDK. Namun, terdapat hambatan yang dapat ditemui dalam format ini, yaitu tidak sempurnanya atau rusaknya beberapa sisi objek. Sebelum proses pengeksporan, tidak perlu dilakukan penggabungan bagian-bagian dari objek yang akan diekpor. Hal ini dikarenakan bagian-bagian terpisah tersebut dapat disatukan saat proses impor ke dalam UDK. Format ini mengekspor objek yang dapat diberi banyak material dalam Static Mesh Editor dalam UDK. Sebelum mengekspor objek, dilakukan penggabungan bagianbagian dari objek tersebut. Dalam format ini, UDK tidak memiliki fitur untuk menggabungkan bagian-bagian objek menjadi satu kesatuan.
Setelah dilakukan proses ekpor, objek-objek hasil proses tersebut dimasukkan ke dalam aset UDK melalui Content Browser yang ada dalam Back End Editor. Dengan menggunakan Unreal StaticMesh Editor, objekobjek yang dimasukkan diatur material pembungkus objek tersebut serta collision (daya tabrak/kepadatan) dari objek tersebut.
3.5.3 Penambahan Interaksi Bagian penting dari pembuatan aplikasi ini adalah tahapan pemberian interaksi. Pemberian interaksi ini termasuk pemberian informasi dari setiap objek yang dapat diinteraksikan. Penandaan objek yang dapat diinteraksikan Dalam aplikasi peta 3D ITS Surabaya, terdapat objek-objek yang dapat diinteraksikan. Objek-objek tersebut ditandai dengan beberapa tanda menggunakan particle system. Terdapat 2 jenis particle system yang digunakan, yaitu particle system berwarna biru dengan ukuran besar yang diletakkan di depan setiap pintu. Selain itu, particle system berwarna hijau dengan ukuran kecil yang diletakkan di area objek-objek seperti alat percobaan/mesin laboratorium yang juga dapat diinteraksikan. Penambahan layar informasi Layar informasi diletakkan dalam peta 3D tepatnya di setiap pintu dari suatu ruangan yang memiliki informasi penting. Seperti yang telah dilakukan di tahapan penambahan particle system, diberikan informasi yang berupa file flash yang diimporkan ke dalam UDK melalui content browser. Penambahan informasi objek Untuk objek-objek yang dapat diinteraksikan, diberikan 3 jenis informasi, yaitu informasi pemberitahuan yang berupa instruksi penggunaan objek, informasi singkat tentang objek tersebut, dan informasi yang berjalan selama interaksi dilakukan. Penambahan menu peta 2D Menu Peta 2D merupakan tampilan menu animasi flash untuk tiga fungsi yang dapat digunakan oleh pengguna. Tiga fungsi tersebut yaitu mengetahui posisi aktor, teleportasi ke suatu tempat dan menunjukkan arah menuju suatu tempat. Dalam menu tersebut terdapat icon bintang. Jika icon tersebut di tekan mouse kiri, akan keluar dialog untuk fungsi teleportasi dan menunjukkan arah seperti terlihat pada Gambar 5.
Gambar 4. Dialog pilihan Dari dialog tersebut, jika pengguna memilih “Masuk ke dalam ruangan”, aktor akan dikirimkan ke dalam ruangan tersebut. Sedangkan saat pengguna memilih “Tunjukkan arah menuju ruangan” akan keluar flash
untuk menunjukan letak ruangan tersebut seperti terlihat pada Gambar 5.
Gambar 5. Petunjuk arah
3.5.4Pengaturan Pencahayaan Pencahayaan yang digunakan dibagi menjadi 2, yaitu pengaturan pencahayaan alam (matahari) dan pengaturan pencahayaan ruangan. Untuk pencahayaan alam, digunakan aktor DominantDirectionalLight yang memberikan efek pencahayaan matahari untuk keseluruhan lokasi peta 3D. Sedangkan untuk pencahayaan ruangan, digunakan aktor PointLight Toggelable yang memberikan efek pencahayaan untuk ruangan serta dapat dihidupkan dan dimatikan.
3.5.5Penambahan Suara Pengaturan lain yang dilakukan adalah penambahan suara untuk objek-objek yang dapat diinteraksikan. Misalnya, pintu atau mesin. Pembuatan efek suara ini dilakukan menggunakan Unreal SoundCue Editor kemudian digunakan dalam Unreal Kismet ataupun Unreal Matinee.
3.6 Integrasi Aplikasi Tahapan integrasi aplikasi dari semua modul peta meliputi beberapa bagian, yaitu: Standardisasi nama peta. Unreal memiliki beberapa pengaturan peta yang berbeda beda. Pengaturan yang dimaksud seperti navigasi dan actor yang digunakan. Agar semua modul peta dapat dipanggil sesuai pengaturan aplikasi peta 3D ITS Surabaya, maka dilakukan standardisasi nama peta, yaitu dengan awalan INI3D-
.udk. Selain untuk pengaturan, standarisasi nama peta juga untuk mempermudah proses integrasi. Pembuatan aktor UDK telah memberikan aktor default aplikasi, yaitu berupa robot. Untuk menyesuaikan dengan pembuatan peta 3D dari ITS Surabaya ini, dilakukan pengubahan aktor dengan cara membuat skeletal mesh serta gerakan aktor menggunakan Autodesk 3D Studio Max. Skeletal mesh dan gerakan-gerakan yang dibuat kemudian diimpor ke dalam UDK
melalui content browser. Pengaturan material dan skeletal mesh dari aktor dilakukan dalam Unreal AnimSet Editor. Sedangkan untuk penyusunan pergerakan aktor tersebut, digunakan Unreal AnimTree. Konfigurasi aplikasi Pengaturan-pengaturan aplikasi ada yang bersifat hardcode, di mana dilakukan pengeditan di bagian konfigurasi default UDK. Konfigurasi default udk berada pada folder _root/UDKGame/config. Konfigurasi yang diatur salah satunya adalah navigasi. Konfigurasi lain yang dilakukan adalah penggunaan aktor default yang digunakan. Konfigurasi ini dilakukan dengan mengubah file UTFamilyInfo_Ini3D_Female.uc dan UTPawn.uc Selain mengganti aktor default, dilakukan juga pengaturan kecepatan gerak aktor. Pengaturan World Properties Setelah pengubahan konfigurasi telah dilakukan, untuk menggunakan perubahan tersebut, dilakukan pengubahan WorldInfo di bagian World Properties. Di bagian ini, dipilih konfigurasi INI3D sehingga aplikasi berjalan sesuai dengan pengaturan yang dilakukan. Pembuatan menu aplikasi Menu aplikasi ini digunakan sebagai penyatu semua modul peta. Jadi, modul-modul peta yang diintegrasikan dapat diakses melalui menu ini. Menu aplikasi dibuat dengan menggunakan Adobe Flash yang dihubungkan dengan aplikasi peta 3D ITS Surabaya. Gambar 4 merupakan tampilan antarmuka dari menu utama untuk aplikasi ini. Penamaan modul (INI3D-) yang bisa dipanggil ditentukan pada menu ini.
Gambar 6. Antarmuka menu utama aplikasi peta 3D ITS Surabaya Penggantian splash screen dan movie Sama halnya dengan produk-produk yang diproduksi oleh perusahaan, aplikasi ini membutuhkan splash screen dan movie yang digunakan dalam aplikasi ketika pertama kali membuka .exe ataupun saat memproses peta yang akan ditampilkan. Penggantian splash screen dilakukan dengan syarat tidak menghilangkan logo UDK dari splash screen. Integrasi modul peta Modul-modul peta yang merupakan lokasi-lokasi yang berada di ITS, digabungkan dengan metode
Loading. Metode ini baik digunakan untuk modulmodul peta yang berukuran besar sehingga performa (fps) dari aplikasi tidak memburuk. Pada dasarnya terdapat metode lain, yaitu Streaming. Metode ini memiliki kelebihan tampilan yang lebih terlihat nyata yang dapat melihat suatu lokasi peta (walaupun berbeda modul) dalam suatu sudut pandang. Packaging aplikasi Packaging aplikasi dilakukan dengan menggunakan UnrealFrontEnd di mana dilakukan proses Cook terlebih dahulu yang dilanjutkan dengan proses Packaging. Perbandingan antara jumlah sumber daya pertama dan file hasil kompresi packaging mencapai 50% atau dengan kata lain 50% penyusutan.
3.7 Pengujian Aplikasi Tahapan ini meliputi 3 tahapan pengujian, yaitu 1) uji coba fungsional menggunakan unit test, yaitu test case yang telah dibuat sebelumnya. Dari hasil uji coba ini, aplikasi ini telah menunjukkan pemenuhan kebutuhan fungsional. 2) uji coba non-fungsional dilakukan dengan menggunakan console yang disediakan oleh UDK, yaitu stat FPS, stat UNIT, dan stat MEMORY. Hasil dari stat FPS yang dapat dilihat dalam gambar 6 menunjukkan bahwa aplikasi ini masih memiliki kelemahan dalam memproses tampilan yang kompleks. Kecilnya nilai fps yang dihasilkan, menunjukkan spesifikasi lingkungan implementasi aplikasi semakin tinggi. Sama halnya dengan hasil dari stat UNIT, hasil yang ditunjukkan adalah semakin besarnya nilai frame yang diproses sehingga menunjukkan bahwa tampilan dan tingkat kedetailan dari aplikasi ini adalah sangat tinggi. Untuk stat MEMORY, hasil ditunjukkan dengan tingginya penggunaan memory oleh komponen lighting dan audio. Evaluasi akurasi tampilan dilakukan dengan membandingkan hasil pengerjaan aplikasi dengan keadaan nyata, yaitu dengan menggunakan foto ketika survey di awal pengembangan aplikasi ini.
FPS 21 20 19 18 17
20.15 18.35
19.15 FPS
PC1
PC2
PC3
Gambar 6. Hasil uji coba FPS
4. Kesimpulan Dari pembahasan di atas, dapat diambil beberapa kesimpulan sebagai berikut. a. Dengan menggunakan framework teknologi Unreal Engine, Pembangunan peta 3D Gedung BAAK ITS yang informatif dan interaktif dapat dilakukan. Dimulai dari pemberian informasi dengan menggunakan animasi flash, peletakan obyek, sampai dengan pembuatan interaksi antara pengguna dengan aplikasi. b. Unreal Engine mampu melakukan kompresi ukuran sumber daya hingga mencapai 50% dari total ukuran sebenarnya. Sehingga aplikasi peta yang memiliki total ukuran sumber daya yang tinggi dapat dipackage menjadi paket instalasi yang ukurannya jauh lebih kecil. c. Metode penggabungan antar peta yang digunakan adalah metode streaming dan loading. Pemilihan metode penggabungan antar peta yang terdapat pada Unreal Engine dilakukan dengan mempertimbangkan ukuran masing masing peta yang dapat mempengaruhi tingkat kecepatan/kemudahan pengguna dalam menjalankan aplikasi. d. Ukuran sebuah peta dan sumber daya yang melebihi kapasitas sebesar 300Mb, dapat dilakukan pembagian peta menjadi dua atau lebih yang kemudian dapat digabungkan menjadi satu kesatuan peta. e. Fitur minimap yang ada pada UDK belum dapat dimanfaatkan dengan maksimal, sehingga fitur lokasi aktor dan penunjuk arah menggunakan animasi flash dan kismet.
5. Daftar Pustaka [1] Busby J., Parrish, Z., dan Wilson, J. Mastering Unreal Technology Volume I: Introduction to Level Design with Unreal Engine 3 [Book]. - Indiana : Sams Publishing, 2009. [2] Epic Getting Started Programming on the Unreal Development Kit [Online] // epicgames. - 2010. http://udn.epicgames.com/Three/DevelopmentKitProgram ming.html. [3] Lepouras G. dan Costas, V. Virtual Museums for all: Employing Game Technology for Edutainment [Article]. Luo L., Zou, X., Lu, J., Yang J., dan Chang, S. Research on Developing Client of Network Sport Fitness Game Based on 3D Game Engine [Journal]. - [s.l.] : International Journal of Sports Science and Engineering, 2007. - Vol. 1 (2007). - pp. 61-66. - 1750-9823. [4] Petridis P., Dunwell, I., de Freitas, S., Panzoli, D. An Engine Selection Methodology for High Fidelity Serious Games [Journal]. - [s.l.] : IEEE Computer Society, 2010. Vols. 978-0-7695-3986-7/10. - 10.1109/VS-GAMES.
[5] NVIDIA Unreal Development Kit [Online]. - 2010. URL:http://developer.nvidia.com/object/udk.html. O’Neill J. GameDaily Article: The Real Cost of Middleware [Online]. 2008. http://www.gamedaily.com/articles/features/my-turn-thereal-cost-of-middleware/71334/?biz=1. [6] Shiratuddin M. F. dan Fletcher, D. Utilizing 3D Games Development Tool For Architectural Design In A Virtual Environment [Journal]. - [s.l.] : International Conference on Construction Applications of Virtual Reality, 2007. [7] Shiratuddin M.F dan Thabet, W. Virtual Office Walkthrough Using a 3D game Engine [Journal]. - [s.l.] : Special Issue on Designing Virtual Worlds, International Journal of Design Computing, 2002. - Vol. 4.
