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

Ответ 1

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

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

Вы можете, конечно, сделать 3D-рендеринг (либо изометрический, либо перспективный) на холсте, используя стандартные методы отображения 3d- > 2d. См. Например это 4k demo, в котором используется только 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 представляет собой контекст canvas, будет создана матрица, которая:

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

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

Ответ 2

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

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

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