Приветствую!
Я уже задавал подобный вопрос, мне на него ответили, но к сожалению я, вероятно, неправильно интерпретировал полученные сведения
приходится повторятся. Ткните пожалуйста носом, где ошибка.
http://learn.javascript.ru/js-animation - изучил. проблема все еще не решается(
собственно: Пытаюсь рисовать изображения в canvas, используя координаты полученные с сервера, однако в любом случае наблюдаются лаги.
Описание: для рисование везде используется requestAnimationFrame. Обновления приходят раз в 100 миллисекунд через WebSockets.
ссылки на демонстрацию:
http://159.253.23.45:8080/tanksWebApp/
http://159.253.23.45:8080/TanksLogicOnSpeed/
успел попробовать 3 разные техники:
1)
this.x += this.speedX * delta;
где x - текущие координаты, delta - время между текущим вызовом requestAnimationFrame и последним.
скорость на сервере и на клиенте проставлена одинаковая.
так обновляются ракеты в первой ссылке
2)
this.drawX=this.latest_x_from_server+Math.round(this.speedX*numberOfMillisecondsFromLustUpdateFromServer);
фактически тоже самое, но сам x не меняется, а numberOfMillisecondsFromLustUpdateFromServer - время от последнего апдейта с сервера, а не между вызовами requestAnimationFrame.
так обновляются танки во второй ссылке.
3)
var progress = (new Date().getTime() - this.start.getTime())/100;
// if(progress>1) {progress=1;}
var drawX = this.oldX+(this.x-this.oldX)*progress;
100 - промежуток между рассылками новых апдейтов сервером.
метод апдейта танка в этом случае
Tank.prototype.updateTank = function (x, y, direction) {
this.oldX=this.x;
this.oldY=this.y;
this.x = x;
this.y = y;
this.direction = direction;
this.start=new Date();
this.isAlive = true;
};
так обновляются танки в первой ссылке
На локальной машине все это работает прекрасно, но на хостинге
во всех трех случаях : лаги, лаги и еще больше лагов.
и все еще никак не могу понять : где я не прав?
Спасибо.