Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.11.2012, 19:56
Интересующийся
Отправить личное сообщение для Simulator Посмотреть профиль Найти все сообщения от Simulator
 
Регистрация: 31.10.2012
Сообщений: 20

canvas animation (synchronized with the server)
Приветствую!
Я уже задавал подобный вопрос, мне на него ответили, но к сожалению я, вероятно, неправильно интерпретировал полученные сведения
приходится повторятся. Ткните пожалуйста носом, где ошибка.

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;
};

так обновляются танки в первой ссылке

На локальной машине все это работает прекрасно, но на хостинге
во всех трех случаях : лаги, лаги и еще больше лагов.
и все еще никак не могу понять : где я не прав?

Спасибо.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
canvas animation Simulator Общие вопросы Javascript 23 02.11.2012 16:59
canvas и drawImage() jussik Элементы интерфейса 0 27.10.2012 15:57
Почему неправильно вырисовывается canvas? Amateur Events/DOM/Window 0 19.09.2012 09:45
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 11:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 09:16