Рисование изометрических игровых миров

обновление: исправлен алгоритм отображения карты, добавлены дополнительные иллюстрации, изменено форматирование.

возможно, преимущество для метода "зигзаг" для отображения плитки на экран можно сказать, что плитка x и y координаты находятся на вертикальной и горизонтальной осях.

"рисование в алмазе" подход:

рисуя изометрическую карту, используя "рисунок в алмазе", который, как я считаю, относится к просто рендеринг карты с помощью вложенного for-цикл по двумерному массиву, например, в следующем примере:

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)
        )

преимущество:

преимущество подхода заключается в том, что он является простым вложенным for-петля с довольно прямой логикой, которая работает последовательно во всех плитках.

минус:

одним из недостатков этого подхода является то, что x и y координаты плитки на карте увеличатся в диагональных линиях, что может затруднить визуальное отображение местоположения на экране на карту, представленную в виде массива:

тем не менее, будет ловушка для реализации приведенного выше примера кода - порядок рендеринга приведет к тому, что плитки, которые должны быть позади определенных плиток, будут нарисованы поверх плиток в фронт:

чтобы исправить эту проблему, внутренний for - порядок цикла должен быть обращен-начиная с самого высокого значения, и рендеринга к более низкому значению:

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)
        )

с вышеуказанным исправлением, рендеринг карты должен быть исправлен:

"Зигзаг" подход:

преимущество:

возможно, преимущество" зигзагообразного " подхода заключается в том, что визуализированная карта может показаться немного более компактной по вертикали, чем "алмазный" подход:

минус:

при попытке реализовать метод зигзага недостатком может быть то, что немного сложнее написать код рендеринга, потому что он не может быть написано так просто, как вложенный for-цикл над каждым элементом в массиве:

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
        )

кроме того, может быть немного сложно попытаться выяснить координату плитки из-за шахматного характера порядка рендеринга:

Примечание: иллюстрации, включенные в этот ответ, были созданы с использованием Java-реализации представленного кода рендеринга плитки, со следующим int массив как карта:

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

плитки изображения являются:

• tileImage[0] -> коробка с коробкой внутри.
• tileImage[1] -> "черный ящик".
• tileImage[2] -> белая коробка.
• tileImage[3] -> коробка с высоким серым предметом в нем.

примечание по ширине и высоте плитки

переменные tile_width и tile_height которые используются в приведенных выше примерах кода относятся к ширине и высоте плитки земли на изображении, представляющем плитку:

использование размеров изображения будет работать, пока размеры изображения и размеры плитки совпадают. В противном случае карта листов может быть отображена с промежутками между плитками.