Лучшая техника для рисования изометрических плиток

Я думаю о создании простой изометрической игры с HTML5 Canvas и задаюсь вопросом, какой самый быстрый способ визуализации плиток.

Поскольку плитки имеют ромбовидную форму, но drawImage рисует прямоугольники, я должен пропустить углы (черные части ниже):

Я думаю, что это оставляет мне три варианта:

1. Используйте объекты изображения с альфа-каналами (.png). Боюсь, это может убить производительность.
2. Используйте обтравочный контур. Если визуализатор оптимизирован, это может быть довольно быстро.
3. Предварительно представьте квадратные плитки, как это:

Я бы выделил черный квадрат в качестве одного фактического фрагмента в памяти, и я бы нарисовал такой фрагмент для зеленого поля и всех полей рядом с ним или выше и ниже. Диагональные (синие) поля будут состоять из углов прямоугольных плиток. Это позволило бы избежать отсечения или альфа-каналов, но мне пришлось бы предварительно отображать все возможные комбинации плиток, и это выглядит как перебор.

Какой лучший или самый быстрый способ сделать изометрические плитки? Что используют другие игры, такие как FarmVille?

Я рекомендую использовать прозрачность (альфа-канал).

Это означает, что когда вы хотите вертикальный объект на плитке, как это:

Тогда вы можете легко это сделать, если ваш рендерер рисует тайлы спереди назад, т.е. алгоритм рисования.

КРЕДИТ ИЗОБРАЖЕНИЯ: набор плиток Райнера.

Хотя метод, описанный SWS и MarkR, также является тем, что я предпочитаю, я хотел бы представить альтернативный подход.

Хакерский вариант для создания изометрического вида с минимальными усилиями состоит в том, чтобы фактически использовать ортогональные плитки и использовать context.transform, чтобы установить матрицу проекции, которая делает карту изометрической (или комбинацию context.rotate и context.scale, когда вы не не знаю, как работают проекционные матрицы).

Подробности смотрите в спецификации методов преобразования холста .

Плитка изображения:

Чертежный код:

    for (var x = 0; x < 5; x++) {
        for (var y = 0; y < 5; y++) {
            ctx.drawImage(img, x * img.width, y * img.height);
        }
    }

Результат перед применением матрицы:

Тот же код с тем же изображением плитки после применения этой матрицы преобразования:

    ctx.transform(  1,   0.5,
                   -1,   0.5,
                  160,   0    );

С штриховой сеткой удаляется из мозаичного изображения и изменить плитки смещения в коде рисования до img.width - 1и img.height - 1избавиться от пробелов , вызванных преобразованием. Внезапно плитка выглядит наполовину безобразно:

Основным недостатком этого метода является то, что когда вы создаете свои плитки в графическом редакторе, они не будут такими, какими вы их видите. Вы также столкнетесь с проблемами, когда захотите нарисовать любые объекты, которые не находятся на полу, но стоят прямо. Для этого вы можете отключить матрицу преобразования, прежде чем рисовать их, но тогда вам придется рассчитать положение самостоятельно. Вы можете использовать эти формулы для этого:

var xScreen = xWorld * 1   + yWorld * -1  + 160;
var yScreen = xWorld * 0.5 + yWorld * 0.5 + 0;  

(обратите внимание, как числа из матрицы преобразования появляются в этих формулах - вы сами умножаете матрицу здесь).

Так почему я должен это делать?

Этот метод хорош, когда вы:

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

Еще одна интересная особенность заключается в том, что, когда вы знаете способ расчета матрицы, вы можете изменять матрицу проекции между кадрами, чтобы масштабировать, наклонять и поворачивать карту в режиме реального времени для получения некоторых хороших эффектов фальшивой трехмерности (попробуйте выполнить ТО с изометрическими плитками). ,

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

1. Вы используете context.drawImage для копирования пиксельных данных из одного источника (изображения или холста за пределами экрана) в другой (за пределами экрана или холста на экране), который изящно обрабатывает альфу из коробки. Canvas с аппаратным ускорением, поэтому тестирование позволит вам определить, есть ли заметная разница в скоростях рендеринга по сравнению с непрозрачными пикселями.

2. Отсечение потребует от вас нажатия / выталкивания состояния контекста при определении пути отсечения один раз для плитки, что может быть дорогостоящей операцией с учетом перерисовки изометрии.

3. Предварительно обработанные плитки, как вы заявляете, потребуют огромного количества плиток «коннекторов», которые могут быть или не быть выполнимыми. (Я больше склоняюсь к "не может".)

Четвертое решение состоит в том, чтобы принять предварительно визуализированный «фрагмент» (PRC) фрагментов, сгенерированных один раз для закадровых полотен, а затем покрыть экран PRC один раз за кадр. Все равно будет перерасход, но построение PRC один раз и рендеринг со смещением, определяемым положением персонажа игрока (или камеры наблюдения) относительно PRC, должно быть относительно простой операцией. Это позволит вам комбинировать рендеринг с опцией # 1, которая является IMO лучшим вариантом, если производительность не учитывалась (поскольку ее проще всего реализовать).

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