Создание Javascript TileEngine с возможностью прокрутки в Canvas

Question

Основа для кода взята из блога Джона Э. Грэма http://johnegraham2.com/blog/2010/09/25/project-javascript-2d-tile-engine-with-html5-canvas-part-4-using-zones-for-further-optimization/

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

Вот пример с прозрачностью, помогающей визуализировать зоны http://simplehotkey.com/Javascript/canvas.html (загрузка позиций из 1188 плиток, ноНарисовал всего пару сотен, чтобы заполнить экран) У меня была загрузка массива с 70000 записей, и это было все еще быстро, потому что он рисует только то, что на экране, но не может понять, как скользить все на основе ввода ...

Я выдвинул пару идей и не уверен, что лучше.

Здесь показан один экран с количеством плиток:

 tilesArray = [ 
              0,0,0,0,0,0,0,1,2,9,6,0,0,7,0,0,1,0,
              0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,
              0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,9,0,
              0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,9,0,
              0,9,9,9,9,9,9,0,7,2,0,0,0,0,0,1,2,0,
              0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,
              0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,
              0,9,0,7,2,9,9,9,9,9,9,9,9,9,9,9,9,0,
              0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,
              0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,
              0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
              ];

Где 0 - стенаплитка (по периметру), 9 плитка для пола, 7 дверь и пара других случайных плиток.

Это именно то, что загружается на экран, но я не могу понять, как сдвинуть все 1 плитка внаправление, основанное на вводе, вверх, вниз, влево, вправо.

Единственная идея, к которой я сейчас склоняюсь, это просто использовать этот массив выше в качестве основы для рендеринга и каким-то образом подавать новые значения вэто основано на вводе с клавиатуры, из другого массива.Может быть, вырезать из другого, гораздо большего массива (содержащего все плитки для всего уровня) и использовать этот фрагмент, чтобы заполнить массив, который фактически визуализируется ???

Это заменяет каждую плитку каждый кадр, хотя ...

для получения информации от игрока, которую я использовал:

//Key listener 
document.onkeydown = function(e){
e = e?e:window.event;
console.log(e.keyCode + "Down");
switch (e.keyCode){
    case 38:
    //UP KEY
    Game.inputReaction('up');   
    //Game.moveDir('up');
    break;
    case 40:
    //DOWN KEY  
    //Game.inputReaction(40);
    //Game.moveDir('down');
    break;
    case 37:
    //Left Key  
    //Game.inputReaction(37);
    break;
    }
}

Другая альтернатива - попытаться настроить плитки ужена экране и добавление новых плиток, но этот движок не использует глобальные переменные, поэтому я не уверен, как программно воздействовать на движок плиток на основе ввода .... как я могу добавить другой метод (inputReaction (num)) и триггернекоторые действия из моего ввода с клавиатуры (console.log ()), но я не могу получить доступ к другим методам рисования тайлов.Или, может быть, мне нужно сделать копию объекта, изменить его и вернуть?но это довольно сложно.

Я думаю, что может быть проще настроить значения массива, которые подаются в «движок» (массив выше), чем изменять то, как движок вычисляет то, что рисуется.Вы можете это подтвердить?

Answer 1

Добавьте абстракцию камеры, которую вы можете перемещать по карте, затем смещайте позиции рисования в соответствии с положением камеры. Когда камера перемещается на 10 пикселей на юг, все плитки перемещаются на 10 пикселей на север, то же самое происходит с востоком и западом. Так как вы рисуете только видимые плитки, потери производительности не будут значительными.

Средство визуализации смотрит на камеру, чтобы выяснить, что нужно нарисовать, и вы можете выставить объект камеры наружу, чтобы манипулировать им. Таким образом, вам нужно всего лишь изменить положение камеры, чтобы изменить то, что отображается на экране.

Я сделал это в доказательстве концептуального движка листов год назад и смог плавно прокручивать и масштабировать огромные карты тайлов.

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