Можете ли вы сделать изометрическую перспективу с HTML5 <canvas>?

Question

Можно сделать изометрическую перспективу с HTML5 <canvas>? Это с setTransform? Или это существует по-другому?

Пример:

ctxt.setTransform (1, -0.2, 0, 1, 0, 0);

Что-то вроде перспективы Фармвилля.

Большое спасибо.

Answer 1

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

Если вы имеете в виду, что если трехмерный конвейер уже встроен в холст, ответ будет отрицательным, контекст холста - 2d, поэтому команды - 2d. Вы можете настроить матрицу, которая сделает ваши команды рисования квадратов похожими на изометрический вид, но вы не сможете рисовать что-либо выше или ниже этой плоскости.

Конечно, вы можете сделать 3D-рендеринг (изометрический или перспективный) на холсте, используя стандартные методы отображения 3D-> 2d. Посмотрите, например, это демоверсия 4k , использующая только canvas / javascript ( это видео на YouTube , если ваш браузер не поддерживает HTML5).

Для изометрической проекции часть установки матрицы проще ... например

var cs = Math.cos(angle1), sn = Math.sin(angle1);
var h = Math.cos(angle2);
var a = 100*cs, b = -100*sn, c = 200;
var d = h*100*sn, e = h*100*cs, f = 200;
ctx.setTransform(a, d, b, e, c, f);

, где ctx - контекст холста, создаст матрицу, которая:

• имеет угол поворота XY angle1
• имеет угол наклона обзора angle2
• карты длиной от 1 до 100 пикселей
• карты (0, 0) на 200, 200

Вы можете увидеть небольшой пример этих формул в действии на странице этого примера .

Answer 2

Что ж, для создания изометрической игры нужно не столько искажать весь холст, сколько больше использовать графику, которую вы используете. Например, плитки обычно имеют вид h = w / 2. Таким образом, в обычной игре у вас будет плитка размером 32x32, в изометрической игре вы получите размер 32x16. Кроме того, расположение плиток немного отличается, чтобы компенсировать угол.

Короткий ответ: да, изометрические игры вполне возможны при использовании canvas. Посмотрите на Freeciv для примера одного.

Еще одно хорошее место, чтобы спросить об особенностях создания изометрических игр: https://gamedev.stackexchange.com/