Güncelleme: Düzeltilmiş harita oluşturma algoritması, daha fazla resim ekledi, biçimlendirmeyi değiştirdi.
Belki de karoları ekrana eşlemek için "zig-zag" tekniğinin avantajı, karonun x
ve y
koordinatların dikey ve yatay eksenler üzerinde olduğu söylenebilir .
"Elmasla çizim" yaklaşımı:
"Bir elmas çizim" kullanarak bir izometrik harita çizerek, sadece for
bu örnek gibi iki boyutlu dizi üzerinde iç içe bir döngü kullanarak haritayı oluşturma anlamına gelir :
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)
)
Avantajı:
Yaklaşımın avantajı, for
tüm karolarda tutarlı bir şekilde çalışan oldukça düz ileri mantığa sahip basit bir iç içe geçmiş döngü olmasıdır.
dezavantajı:
Bu yaklaşımın bir dezavantajı , harita üzerindeki döşemelerin x
ve y
koordinatlarının çapraz çizgilerde artmasıdır, bu da ekrandaki konumu bir dizi olarak temsil edilen haritaya görsel olarak eşlemeyi zorlaştırabilir:

Bununla birlikte, yukarıdaki örnek kodun uygulanması için bir tuzak olacaktır - oluşturma sırası, belirli karoların arkasında olduğu düşünülen karoların önündeki karoların üstüne çizilmesine neden olacaktır:

Bu sorunu değiştirmek için, iç- for
loop'un sırası en yüksek değerden başlayıp daha düşük bir değere doğru döndürülmelidir:
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)
)
Yukarıdaki düzeltme ile haritanın görüntülenmesi düzeltilmelidir:

"Zig-zag" yaklaşımı:
Avantajı:
Belki de "zig-zag" yaklaşımının avantajı, oluşturulan haritanın "elmas" yaklaşımdan biraz daha dikey olarak kompakt görünebilmesidir:

dezavantajı:
Zig-zag tekniğini uygulamaya çalışmanın dezavantajı, for
bir dizideki her öğe üzerine iç içe bir döngü kadar basit yazılamayacağı için oluşturma kodunu yazmanın biraz zor olması olabilir :
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
)
Ayrıca, oluşturma sırasının şaşırtıcı doğası nedeniyle bir döşemenin koordinatını anlamaya çalışmak biraz zor olabilir:

Not: Bu cevaba dahil edilen resimler, sunulan karo oluşturma kodunun Java uygulamasıyla int
ve harita olarak aşağıdaki dizi ile oluşturuldu :
tileMap = new int[][] {
{0, 1, 2, 3},
{3, 2, 1, 0},
{0, 0, 1, 1},
{2, 2, 3, 3}
};
Döşeme resimleri:
tileImage[0] ->
İçinde bir kutu olan bir kutu.
tileImage[1] ->
Bir kara kutu.
tileImage[2] ->
Beyaz bir kutu.
tileImage[3] ->
İçinde uzun gri bir nesne olan bir kutu.
Karo Genişlikleri ve Yükseklikleri Üzerine Bir Not
Yukarıdaki kod örneklerinde kullanılan değişkenler tile_width
ve tile_height
döşemeyi temsil eden görüntüdeki zemin döşemesinin genişliğini ve yüksekliğini ifade eder:

Görüntü boyutları ve döşeme boyutları eşleştiği sürece görüntünün boyutlarını kullanmak işe yarayacaktır. Aksi takdirde, karo haritası karolar arasındaki boşluklarla oluşturulabilir.