Создание 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 пикселей на север, то же самое происходит с востоком и западом. Поскольку вы рисуете только те плитки, которые видны, потери производительности не будут значительными.

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

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

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