2D bir oyun izometrik fayans çizmek için doğru yolu nedir?

Fayans-zig zag bir şekilde işlenecek haritanın 2D dizi gösterimi her sütun önermek başvuran okudum (this one gibi). Ekrana çizilmiş olur ne daha yakından 2D dizi nasıl olacağını ilgilidir, biraz döndürülmüş nerede elmas bir şekilde daha çizilmiş olması gerektiğini düşünüyorum.

Her iki yöntem için avantaj ve dezavantajları nelerdir?

Güncelleme: Düzeltilmiş harita oluşturma algoritması, bir çok resim eklenmiş, biçimlendirme değişti.

Belki de avantajı için "zig-zag" tekniği için eşleme fayans ekrana söylenebilir çini x y koordinatlar üzerinde dikey ve yatay eksen.

"Çizim elmas" yaklaşımı

Çizim bir izometrik harita kullanarak "çizim bir elmas", inanıyorum anlamına gelir sadece render Haritayı kullanarak iç içe fordöngü üzerinde iki boyutlu bir dizi gibi örnek:

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ı:

Bu yaklaşımın avantajı, sürekli olarak tüm taşlar boyunca çalışır for-döngü ile iç içe ileriye oldukça düz basit bir mantık.

Dezavantajı:

Tek dezavantajı bu yaklaşım olduğunu x y koordinatlar fayans haritada artacak çapraz çizgiler, hangi-ebilmek yapmak daha zor için görsel olarak harita konumunu ekrandaki harita temsil gibi bir dizi:

Full size image

Ancak, orada olacak bir hatadır uygulama yukarıdaki örnek kod oluşturma amacıyla neden olur döşer vardır olmalı ardında fayans çizilmesini üstüne fayans ön:

Bu sorunun değiştirilmesi için forçevrim içi sırasını ters olmalı -- en yüksek değerden başlayarak, ve daha düşük değere doğru işleme:

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 işleme düzeltilmelidir:

"Zig-zag" yaklaşımı

Avantajı:

Belki de avantajı "zig-zag" yaklaşımı işlenen harita biraz daha dikey kompakt görünebilir "elmas" yaklaşımı

Dezavantajı:

Denemeye uygulamak için zig-zag tekniği, dezavantajı olabilir o biraz zor yazmak oluşturma kodu çünkü olamaz yazılmış gibi basit bir iç içe fordöngü içinde her öğe bir dizi:

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, biraz render sipariş sendeleyerek doğası gereği: bir karo koordinat anlamaya çalışmak zor olabilir

Not: resimler bu cevap dahil kodu int şu dizi ile sunulan harita olarak işleme: çini bir Java uygulaması ile oluşturulmuştur

tileMap = new int[][] {
    {0, 1, 2, 3},
    {3, 2, 1, 0},
    {0, 0, 1, 1},
    {2, 2, 3, 3}
};

Karo görüntüleri

• tileImage[0] -> bir kutu içinde Bir kutu.
• tileImage[1] -> siyah Bir kutu.
• tileImage[2] -> beyaz Bir kutu.
• tileImage[3] -> uzun, gri bir nesne ile Bir kutu.

Karo Genişlikleri ve Yükseklikleri üzerinde bir Not

Değişkenleri tile_width ve Fayans temsil: resmi örnekler zemin genişliği ve yüksekliği bakın yukarıdaki kod çini kullanılan tile_height

Görüntü boyutlarını kullanarak, görüntü boyutlarını ve karo boyutları aynı olduğu sürece çalışacaktır. Aksi halde, karo harita karolar arasındaki boşlukları ile işlenmiş olabilir.