Sementara metode yang dijelaskan oleh sws dan MarkR juga merupakan pilihan saya, saya ingin menyajikan pendekatan alternatif.
Opsi peretasan untuk membuat tampilan isometrik dengan upaya minimal adalah dengan benar-benar menggunakan ubin ortogonal, dan menggunakan context.transform untuk mengatur matriks proyeksi yang membuat peta tampak isometrik (atau kombinasi dari konteks. Perlindungan dan konteks. Skala ketika Anda tidak t tahu cara kerja matriks proyeksi).
Lihat spesifikasi untuk metode transformasi kanvas untuk detailnya.
Gambar ubin:
Kode gambar:
for (var x = 0; x < 5; x++) {
for (var y = 0; y < 5; y++) {
ctx.drawImage(img, x * img.width, y * img.height);
}
}
Hasil sebelum aplikasi matriks:
Kode yang sama dengan gambar ubin yang sama setelah menerapkan matriks transformasi ini:
ctx.transform( 1, 0.5,
-1, 0.5,
160, 0 );
Dengan kisi putus-putus dihapus dari gambar ubin dan mengubah offset ubin dalam kode gambar ke img.width - 1dan img.height - 1untuk menghilangkan celah yang disebabkan oleh transformasi. Tiba-tiba ubin terlihat setengah jelek:
Kelemahan utama dari metode ini adalah bahwa ketika Anda mendesain ubin Anda dalam editor grafis, mereka tidak akan benar-benar menjadi apa yang Anda lihat adalah apa yang Anda dapatkan. Anda juga akan mengalami masalah ketika Anda ingin menggambar benda yang tidak di lantai tetapi berdiri tegak. Untuk ini, Anda dapat mematikan matriks transformasi sebelum menggambar mereka, tetapi kemudian Anda harus menghitung posisi sendiri. Anda dapat menggunakan rumus ini untuk itu:
var xScreen = xWorld * 1 + yWorld * -1 + 160;
var yScreen = xWorld * 0.5 + yWorld * 0.5 + 0;
(perhatikan bagaimana angka-angka dari matriks transformasi muncul kembali dalam formula ini - Anda melakukan sendiri perkalian matriks di sini).
Jadi mengapa saya harus melakukan ini?
Metode ini bagus ketika Anda:
- tidak berpengalaman dalam mendesain ubin isometrik, tetapi Anda memiliki ubin ortogonal
- tidak ingin menghabiskan banyak waktu untuk mengembangkan mesin grafis isometrik, yang agak lebih sulit daripada yang ortogonal.
Fitur menarik lainnya adalah ketika Anda mengetahui cara penghitungan matriks, Anda dapat memodifikasi matriks proyeksi antara bingkai untuk memperbesar, memiringkan dan memutar peta secara real-time untuk beberapa efek palsu-3d yang bagus (coba lakukan ITU dengan ubin isometrik) .
Tetapi ketika Anda tahu cara menangani ubin isometrik, baik secara artistik dan teknis, dan Anda tidak memerlukan tipuan perspektif palsu, saya lebih suka menyarankan Anda menggunakan ubin berbentuk berlian dengan transparansi.
