Режим7-подобная перспектива трансформируется в холст?

Я создаю игровой движок на основе холста, и мне интересно, есть ли у кого-нибудь хорошая информация о том, как достичь перспективной перспективы. То, что я ищу, находится где-то на полпути между традиционным видом на птичий глаз и видом старого режима SNES. Просто небольшой угол, чтобы создать иллюзию 3D.

Я пытаюсь понять, что будет лучшим способом борьбы с перспективой перекоса. Я не делаю вращения, поэтому материал из трехмерной матрицы будет за бортом, но мне нужно иметь дело с отображением слоев карты под постоянным углом, и было бы неплохо, если бы угол был регулируемым. Мне также нужно иметь дело с глубиной. В основном, нижняя строка пикселей должна быть шириной и высотой 1:1 пикселя, а затем для каждой строки, которая получилась бы, например, на 5% меньше или что-то в этом роде. Я хотел бы иметь возможность поставлять большой холст в виде текстуры, а затем снабжать угол камеры от 0 до 90, где 0 абсолютно горизонтальный, а 90 - вид птиц.

У кого-нибудь есть соответствующие учебники или примеры кода? Я искал в Интернете немного, но все, что я нашел, кажется либо непригодным для использования в этом конкретном приложении, либо слишком сложным, делая всевозможные сумасшедшие 3D-перекосы и ротации. Все, что я хочу, это взять обычную решетчатую сетку и немного наклонить ее назад, никаких поворотов или сложных вещей вроде этого.

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

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

Только проблема, я сосать математику, когда дело доходит до вычисления углов и т.д.

Ответы

Ответ 1

Если я понимаю вас правильно, вам просто нужно простое преобразование трапеции. если да, возможно this или эта ссылка поможет вам. для изображений, которые не центрированы, это просто дополнительная ромбовидная трансформация, с которой я легко могу справиться с холстом. Насколько я знаю.

Ответ 2

То, что вы говорите, это то, что можно сделать просто с любым 3D-апи. Однако, поскольку вы решили попытаться использовать 2D-холст, вам нужно сделать все в 2D-мире, что означает работу с прямоугольниками, поворот, масштабирование, перекос и т.д. Также известны как аффинные преобразования, как упоминалось в другом ответе.

То, что вы хотите сделать, возможно, но поскольку вы хотите использовать 2D, вам нужно думать о функциях 2D.

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

Псевдо код будет выглядеть следующим образом:

imgA = document.getElementById('source');

// grab image slices from bottom to top of image
for (var ix=height-slice_height;ix>=0;ix-=slice_height)
{

    // move a section of the source image to the target canvas
    ctx.drawImage(imgA, 0,ix,width,slice_height, 
         0-half_slice_width_increase,width,slice_height);
    // stretch the whole canvas
    ctx.scale(scale_ratio, 1);
}

Это потребует много настроек, но это общее решение.

scale_ratio будет немного больше, но очень близко к 1.
ctx - это стандартный двухмерный контекст canvas.
half_slice_width_increase - это сумма, которую холст будет расти при масштабировании по отношению к масштабу. Это позволяет масштабировать изображение по центру.

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