Isometric Mapping dengan Javascript

Berlanjut dari iseng bermain saya dengan Lansekap Kota Isometris, kali ini saya mencoba melangkah lebih jauh dan mendalam. Sebelumnya, saya masih coba-coba membuat beberapa petak isometrik. Harapannya, setiap petak dapat disusun sedemikian rupa agar dapat menjadi lansekap yang utuh.

Banyak konsentrasi terkuras saat menyusun petak isometrik secara manual. Salah satunya adalah saat memperhatikan posisi antar petak yang dilakukan demi menghindari ketidakselarasan antar satu dan lainnya. Mungkin bukanlah pekerjaan yang berat jika hanya menyusun 3x4 petak, tapi bagaimana jika harus menyusun ratusan petak?

Penasaran untuk menyelesaikan hal tersebut, saya mencoba membuat serangkaian kode Javascript sederhana. Kode-kode ini saya manfaatkan untuk membangun Isometric Mapping. Konsep dari kode tersebut hanyalah mengubah metode pemetaan dari drag & drop menjadi array. Cukup dengan mengetikkan beberapa baris array(multidimensional array lebih tepatnya), program akan membaca lalu memetakan setiap petak yang ada sesuai data dalam array.

Misal, untuk membentuk peta 3x4, saya cukup mengetikkan:

var map = [[forest, forest, forest, forest],[road, road, road, road],[forest, forest, forest, forest]];

dengan asumsi bahwa forest memuat informasi SVG dari petak hutan dan road memuat informasi SVG dari petak jalan raya. Voila, ini hasil yang akan diberikan:

Dengan ini, desainer isometrik tak perlu lagi repot zoom-in, zoom-out hanya untuk memastikan setiap petak posisinya sesuai. Cukup dengan SVG setiap petak yang sudah diperhitungkan, lalu muat ke kode Javascript.

Lebih lanjut, saya juga menambahkan interaksi setiap petak. Saat ini, interaksi masih sangat sederhana. Setiap petak dapat dipilih untuk ditampilkan versi zoom. Klik petak satu kali untuk zoom, klik dua kali untuk mengembalikan petak ke bentuk asalnya.

Anda bisa mencoba interaksinya di alamat ini.

Masih banyak kekurangan yang perlu diperbaiki. SVG yang saya gunakan masihlah belum rapi, sehingga jika dipetakan pun, masih ada celah yang tampak. Load page yang dihabiskan untuk satu halaman pun tergolong tinggi, setiap petak masih mengambil langsung dari server (yang semestinya menggunakan petak yang sudah pernah digunakan sebelumnya). Akibatnya, banyak request yang diperlukan.

Insya Allah, waktu luang berikutnya akan ada lebih banyak perbaikan. Tertarik bergabung? Yuk garap bersama proyek iseng ini di Github.