SORU
21 Mayıs 2009, PERŞEMBE


Çizim İzometrik oyun dünyaları

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?

CEVAP
21 Mayıs 2009, PERŞEMBE


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:

Image of tile map 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:

Resulting image from incorrect rendering order

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:

Resulting image from correct rendering order

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

Zig-zag approach to rendering seems compact

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

Coordinates on a zig-zag order rendering

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

Image showing the tile width and 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.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Amir Parmar

    Amir Parmar

    25 Kasım 2010
  • B3ASTTY™

    B3ASTTY™

    27 Mayıs 2013
  • sk8ingis4me

    sk8ingis4me

    16 Mart 2006