canvas animation (synchronized with the server)
Приветствую!
Я уже задавал подобный вопрос, мне на него ответили, но к сожалению я, вероятно, неправильно интерпретировал полученные сведения :cray: приходится повторятся. Ткните пожалуйста носом, где ошибка. 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; }; так обновляются танки в первой ссылке На локальной машине все это работает прекрасно, но на хостинге во всех трех случаях : лаги, лаги и еще больше лагов. и все еще никак не могу понять : где я не прав? Спасибо. |
Часовой пояс GMT +3, время: 03:41. |