HTML5 холст камеры/просмотра - как на самом деле сделать это?
Я'м уверена, что это был солвен 1000 раз, прежде чем: у меня есть холст размером 960560 и номер в размер 50003000 из которых всегда только 960*560 должны быть сделаны, в зависимости от того, где игрок находится. Игрок должен быть всегда в середине, но когда рядом с границами - то лучший вид должен быть рассчитан). Игрок может перемещаться полностью свободно с WASD или клавиши со стрелками. И все объекты должны двигаться сами - вместо того, что я двигаюсь все остальное, но игроку создавать иллюзию, что игрок движется.
Сейчас я нашел эти два вопросы:
https://stackoverflow.com/questions/11464550/html5-creating-a-viewport-for-canvas работает, но только для этого типа игры, я могу'т воспроизводить код для шахты.
https://stackoverflow.com/questions/8592872/changing-the-view-center-of-an-html5-canvas представляется более перспективным, а также perfomant, но я только понимаю для рисования все объекты правильно по отношению к игроку, а не как свиток холста просмотра по отношению к игроку, которого я хочу добиться во-первых конечно.
Мой код (упрощенный - логическая игра отдельно):
var canvas = document.getElementById("game");
canvas.tabIndex = 0;
canvas.focus();
var cc = canvas.getContext("2d");
// Define viewports for scrolling inside the canvas
/* Viewport x position */ view_xview = 0;
/* Viewport y position */ view_yview = 0;
/* Viewport width */ view_wview = 960;
/* Viewport height */ view_hview = 560;
/* Sector width */ room_width = 5000;
/* Sector height */ room_height = 3000;
canvas.width = view_wview;
canvas.height = view_hview;
function draw()
{
clear();
requestAnimFrame(draw);
// World's end and viewport
if (player.x < 20) player.x = 20;
if (player.y < 20) player.y = 20;
if (player.x > room_width-20) player.x = room_width-20;
if (player.y > room_height-20) player.y = room_height-20;
if (player.x > view_wview/2) ... ?
if (player.y > view_hview/2) ... ?
}
Кстати я пытался заставить его работать, чувствует себя совершенно неправильно, и я Дон'т даже знаю, как я пытаюсь его... любые идеи? Что вы думаете о контексте.преобразование-вещь?
Я надеюсь, вы понимаете мое описание и то, что кто-то имеет представление. С уважением
[Демо](http://jsfiddle.net/gfcarv/QKgHs/) в jsfiddle.net Это демо иллюстрирует использование просмотра в реальном сценарии игр. Используйте клавиши со стрелками для перемещения игрока по комнате. Большой номер генерируется на лету с помощью прямоугольников и результат сохраняется в изображение. Обратите внимание, что игрок всегда в середине, за исключением, когда рядом с границами (как вы желаете).
Теперь я'постараюсь разъяснить основные части кода, по крайней мере, те части, которые более трудно понять, просто глядя на него.
С помощью метода drawImage для рисования больших изображений ПО для просмотра положение
Вариант drawImage метод имеет восемь новых параметров. Мы можем использовать этот метод для среза части исходного изображения и рисовать их на холсте.
Рисование игровых объектов, относящихся к области просмотра
При написании игры это'ы хорошая практика разделения логики и отображения для каждого объекта в игре. Так что в демке мы
обновить
и функцииничья
. "Обновить" изменения метода объекта статус как позицию о "Мир" и, применять законы физики, государственный анимации и т. д. "Рисовать" способ на самом деле сделать объект, а сделать его правильно с учетом просмотра, объект, нужно знать контекст рендеринга и свойства просмотра. Обратите внимание, что объекты игры обновляются с учетом игры World's позиции. Это означает, что (Х,Y) позиции объекта в позицию в мире. Несмотря на это, после просмотра меняется, объекты должны быть оказанными надлежащим образом и позиция визуализации будет отличаться от мира's позиции. Преобразование простой: позиция объекта в мире(номер): (Х, Y)<БР> позиция просмотра:
(технология xview, yView)**визуализация позиция**: (х-технология xview, г-yView)
Это работает для всех видов координат, даже отрицательных.Камера Игры
Наши игровые объекты обладают раздельный способ обновления. В реализации демо, камера рассматривается как объект игры, а также имеют раздельный способ обновления. Фотоаппарат объект, удерживая левую верхнюю позицию области просмотра
(технология xview, yView)
, объект для подражания, прямоугольник, представляющий просмотра, прямоугольник, представляющий игре World's границы и минимальное расстояние от каждой границы, что игрок мог быть перед камерой начинается движение (xDeadZone, yDeadZone). Также мы определили камеры'ы степени свободы (оси). На вид сверху, стиль игры, как РПГ, камера может перемещаться по оси X(горизонтальная) и y(вертикальной) оси. Чтобы держать игрока в середине просмотра мы устанавливаем DeadZone на каждой оси сходятся с центром холста. Рассмотрим функцию следовать в коде:Код в принятый ответ-это многовато. Его это просто:
И хомут выглядит так:
Вот как использовать холст для просмотра на другом больше, чем холст изображения
Видовой экран-это просто обрезается часть более крупного изображения, который отображается для пользователя.
В этом случае просмотра будет отображаться пользователю на холсте (холст просмотра).
Во-первых, код функции движение, которое перемещает просмотра вокруг изображения большего размера.
Эта функция перемещает верхний/левый угол просмотра по 5 пикселей в заданном направлении:
Функции перемещения вызывает функцию рисования.
В Draw(), то функция drawImage функция будет обрезать определенную часть общей картинки.
функция drawImage
также показывает, что “обрезанные фон” пользователю на холсте.В этом примере
Фоне полного фоновое изображение (обычно не отображается, но это скорее источник для обрезки)
cropLeft & cropTop определить, где на фоне изображения обрезки начнется.
cropWidth & cropHeight определить, как большой прямоугольник будет обрезана от фона изображения.
0,0 сказать, что суб-изображения, которые были купированы на фоне будет нарисован в 0,0 на окна холст.
viewwidth значение & viewheight значение имеют ширина и высота области просмотра холсте
Так вот пример метода drawImage с помощью чисел.
Скажем, в нашей области просмотра (= наш дисплей холст) составляет 150 пикселов в ширину и 100 пикселей в высоту.
На 75 & 50 говорят, что обрезки будут начинаться в позиции x=75/г=50 на фоне изображения.
В 150,100 сказать, что прямоугольник обрезки будет шириной 150 и высотой 100.
В 0,0,150,100 сказать, что обрезанное изображение прямоугольника будет отображаться, используя полный размер просмотра холста.
Вот именно для механики рисунка видового экрана...просто добавить ключ-контроль!
Вот код и скрипку: http://jsfiddle.net/m1erickson/vXqyc/
Путь вы'ре собираюсь сейчас об этом представляется правильным мне. Я бы поменял на "20" и хотя границы переменной, так что вы можете легко изменить границы уровня или всю игру, если вам требуется так.
Вы могли бы реферат из этой логики, в конкретных-то "просмотра" и способ, что бы просто ручка расчеты, необходимые для определения, где вашу "Камера", которая должна быть на карте, а затем убедитесь, что X и y-координаты персонажа матч в центре камеры.
Вы также можете перевернуть этот метод и определить местоположение вашей камеры исходя из положения персонажей (напр.:
(поз.х - (desired_camera_size.ширина / 2))
) и сделать камеру от этого.Когда у вас есть ваша позиция камеры разобрались, можно начать переживать по поводу рисования сам номер в качестве первого слоя холста.
Это просто вопрос настройки просмотра к цели'ы X и y, Колтон государства, на каждом кадре. Преобразования не нужны, но могут быть использованы в качестве желаемой. Формула, что работал для меня было:
Зажимая на карту-это необязательный второй шаг:
Здесь'ы пример: https://jsfiddle.net/ggorlen/7yv7u572/
@Густаво Карвальо'ы решение является феноменальным, но это связано с большим объемом вычислений и познавательную нагрузку. @Колтон'ы подход является шагом в правильном направлении, жаль, что это была'т выработано достаточно в его ответ. Я взял его идею и побежал с ним, чтобы создать этот сайт CodePen. Он достигает именно то, что @user2337969 просит за использование контекста.перевод
. Красота заключается в том, что это не'т требует взаимозачет любую карту или игрока координаты, чтобы рисовать их так же легко, как с помощью их
Xи
y` напрямую, что гораздо проще.Думать о 2D камеры в виде прямоугольника, внутри кастрюли карте большего размера. Его верхний левый угол в(Х, Y) координаты на карте, и его размер-это полотно, т. е. полотно.ширина
и
холст.высота. Это означает, что " Х " может находиться в диапазоне от
0до
карте.ширина - холст.ширина, и
yот
0до
карте.высота - холст.высота(включительно). Эти отметке " min " и "Max", которыми нас кормят в @Колтон's метод
хомут`.Чтобы сделать его работу, мне пришлось перевернуть знак на
X
иY
с context.translate
положительные значения сдвигают холст вправо (создавая иллюзию, как будто не хватало), а отрицательные - влево (как бы радио).