HTML5 Canvas Game Limit для игроков

Question

Я поместил 1000 игроков на холсте, но их движение не плавное.Есть ли способ для холста справиться с таким количеством игроков?Какие варианты у меня есть?

Позиция игроков отправляется 20 раз в секунду с использованием socket.IO.Когда событие достигает клиента, оно рисует игроков на холсте.

var images = {};
images.spriteSheet = new Image();
images.spriteSheet.src = "/images/spriteSheet.png";

socket.on('drawing', function(data){

  ctx.clearRect(0,0,1000,500);

  for(var i = 0; i < data.length; i++){

    ctx.drawImage(images['spriteSheet'], data[i].sx, data[i].sy, 100, 100, data[i].x, data[i].y, 70, 70);

  }

});

Answer 1

Я поместил 1000 игроков на холсте, но их движение не плавное.Есть ли способ для холста справиться с таким количеством игроков?

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

Позиция игроков отправляется 20 раз в секунду с помощью socket.IO.

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

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