Хотя метод, описанный 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;
(обратите внимание, как числа из матрицы преобразования появляются в этих формулах - вы сами умножаете матрицу здесь).
Так почему я должен это делать?
Этот метод хорош, когда вы:
- не имеют опыта проектирования изометрических плиток, но у вас есть ортогональные
- не хочу тратить много времени на разработку изометрического графического движка, который несколько сложнее, чем ортогональный.
Еще одна интересная особенность заключается в том, что, когда вы знаете способ расчета матрицы, вы можете изменять матрицу проекции между кадрами, чтобы масштабировать, наклонять и поворачивать карту в режиме реального времени для получения некоторых хороших эффектов фальшивой трехмерности (попробуйте выполнить ТО с изометрическими плитками). ,
Но когда вы знаете, как обращаться с изометрическими плитками, как в художественном, так и в техническом плане, и вам не нужны какие-либо хитрые фальсификации, я бы лучше предложил вам использовать прозрачные плитки в форме ромба.
