Pembaruan: Algoritma perenderan peta yang dikoreksi, menambahkan lebih banyak ilustrasi, pemformatan berubah.
Mungkin keuntungan untuk teknik "zig-zag" untuk memetakan ubin ke layar dapat dikatakan bahwa ubin xdan ykoordinat berada pada sumbu vertikal dan horizontal.
Pendekatan "Menggambar berlian":
Dengan menggambar peta isometrik menggunakan "drawing in a diamond", yang saya yakini hanya merujuk pada rendering peta dengan menggunakan nested for-loop pada array dua dimensi, seperti contoh ini:
tile_map[][] = [[...],...]
for (cellY = 0; cellY < tile_map.size; cellY++):
for (cellX = 0; cellX < tile_map[cellY].size cellX++):
draw(
tile_map[cellX][cellY],
screenX = (cellX * tile_width / 2) + (cellY * tile_width / 2)
screenY = (cellY * tile_height / 2) - (cellX * tile_height / 2)
)
Keuntungan:
Keuntungan dari pendekatan ini adalah ia bersarang sederhana for sarang-loop dengan logika yang cukup lurus ke depan yang bekerja secara konsisten di semua ubin.
Kerugian:
Satu kelemahan dari pendekatan itu adalah bahwa xdan ykoordinat ubin pada peta akan meningkat dalam garis diagonal, yang mungkin membuatnya lebih sulit untuk secara visual memetakan lokasi di layar ke peta yang direpresentasikan sebagai sebuah array:
Namun, akan ada kesulitan untuk mengimplementasikan kode contoh di atas - urutan rendering akan menyebabkan ubin yang seharusnya berada di belakang ubin tertentu yang akan ditarik di atas ubin di depan:
Untuk memperbaiki masalah ini, urutan inner- forloop harus dibalik - mulai dari nilai tertinggi, dan merender ke nilai yang lebih rendah:
tile_map[][] = [[...],...]
for (i = 0; i < tile_map.size; i++):
for (j = tile_map[i].size; j >= 0; j--): // Changed loop condition here.
draw(
tile_map[i][j],
x = (j * tile_width / 2) + (i * tile_width / 2)
y = (i * tile_height / 2) - (j * tile_height / 2)
)
Dengan perbaikan di atas, rendering peta harus diperbaiki:
Pendekatan "Zig-zag":
Keuntungan:
Mungkin keuntungan dari pendekatan "zig-zag" adalah bahwa peta yang diberikan mungkin tampak sedikit lebih kompak secara vertikal daripada pendekatan "berlian":
Kerugian:
Dari mencoba menerapkan teknik zig-zag, kerugiannya mungkin sedikit lebih sulit untuk menulis kode rendering karena itu tidak dapat ditulis sesederhana seperti bersarang-di foratas setiap elemen dalam sebuah array:
tile_map[][] = [[...],...]
for (i = 0; i < tile_map.size; i++):
if i is odd:
offset_x = tile_width / 2
else:
offset_x = 0
for (j = 0; j < tile_map[i].size; j++):
draw(
tile_map[i][j],
x = (j * tile_width) + offset_x,
y = i * tile_height / 2
)
Selain itu, mungkin agak sulit untuk mencoba mencari tahu koordinat dari ubin karena sifat urutan pembuatan yang dibuat:
Catatan: Ilustrasi yang disertakan dalam jawaban ini dibuat dengan implementasi Java dari kode render ubin yang disajikan, dengan intlarik berikut sebagai peta:
tileMap = new int[][] {
{0, 1, 2, 3},
{3, 2, 1, 0},
{0, 0, 1, 1},
{2, 2, 3, 3}
};
Gambar ubin adalah:
tileImage[0] -> Sebuah kotak dengan kotak di dalamnya.tileImage[1] -> Kotak hitam.tileImage[2] -> Kotak putih.tileImage[3] -> Sebuah kotak dengan benda abu-abu tinggi di dalamnya.
Catatan tentang Lebar dan Ketinggian Ubin
Variabel tile_widthdan tile_heightyang digunakan dalam contoh kode di atas merujuk pada lebar dan tinggi ubin tanah di gambar yang mewakili ubin:
Menggunakan dimensi gambar akan berfungsi, selama dimensi gambar dan dimensi ubin cocok. Kalau tidak, peta ubin bisa diberikan dengan celah di antara ubin.