Javascript.RU

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

canvas animation
Приветствую!
Пытаюсь рисовать изображения в canvas, используя координаты полученные с сервера.
собственно отрисовка происходит как-то так:
function draw()
{
canvas.drawImage(image,myObject.x,myObject.y);
requestAnimationFrame(draw);
}

а координаты обновляются так:
function onmessage(data) {
    var packet = JSON.parse(data.data);
myObject.x = packet.x;
myObject.y= packet.y
}

То есть получается, что эти процессы(отрисовки и обновления) не связаны между собой.
И вроде бы все должно быть хорошо, ведь координаты с сервера присылаются примерно каждые семнадцать секунд, вот только анимация движения все равно дергается... видимо я не правильно понимаю алгоритм отрисовки изображений по координатам, полученным с сервера. Может кто-нибудь подскажет, где у меня ошибка?)
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 01.11.2012, 00:42
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

может дело в задержке ответа сервера?
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #3 (permalink)  
Старый 01.11.2012, 10:41
Интересующийся
Отправить личное сообщение для Simulator Посмотреть профиль Найти все сообщения от Simulator
 
Регистрация: 01.11.2012
Сообщений: 20

лаги есть даже на локальной машине. и как тогда модифицировать алгоритм отрисовки, что бы их не было
Ответить с цитированием
  #4 (permalink)  
Старый 01.11.2012, 11:13
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от Simulator
видимо я не правильно понимаю алгоритм отрисовки изображений по координатам, полученным с сервера.
нет, всё верно.

так и должно быть - координаты то вы не с течением времени изменяете, а сразу ставите конечные

Сообщение от Simulator
Может кто-нибудь подскажет, где у меня ошибка?)
в логике. когда приходят координаты, вы их сразу ставите

function onmessage(data) {
    var packet = JSON.parse(data.data);
myObject.x = packet.x;
myObject.y= packet.y
// и всё зашибись
}


нет, надо изменять эти координаты с течением времени.

в учебнике есть хорошая статья на эту тему
http://learn.javascript.ru/js-animation

ещё при анимации на канвасе нужно сначала очищать область, где был элемент - иначе он там и останется.
после этого изменять координаты, и только после этого отрисовывать текущее состояние.
Ответить с цитированием
  #5 (permalink)  
Старый 01.11.2012, 19:47
Интересующийся
Отправить личное сообщение для Simulator Посмотреть профиль Найти все сообщения от Simulator
 
Регистрация: 01.11.2012
Сообщений: 20

Сообщение от melky Посмотреть сообщение
нет, всё верно.

так и должно быть - координаты то вы не с течением времени изменяете, а сразу ставите конечные
но я даже пытался присылать координаты каждые 17 секунд, этого должно было быть более чем достаточно, по моему пониманию(
Сообщение от melky Посмотреть сообщение
нет, надо изменять эти координаты с течением времени.
я прочитал статью, но все же еще осталось недопонимание(
то есть фактически метод draw надо переделать как-то так?
var last=0;
function draw() {
    var progress = (new Date - last) 
    canvas.drawImage(image,myObject.x*progress,myObject.y*progress);
last = new Date;
}


Спасибо.
Ответить с цитированием
  #6 (permalink)  
Старый 01.11.2012, 20:19
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

по моему так нужно
запоминаем старые координаты xold yold
получаем новые x y
то есть расстояние будет x-xold y-yold
и дальше плавно его проходим за сколько то итераций допустим 10
for(var i=0;i<10;i++)render(i);
function render(i){
ctx.clearRect(w,h);//очищаем canvas
ctx.drawImage(image,xold+(x-xold)/10*i,yold+(y-yold)/10*i)
}

Последний раз редактировалось vadim5june, 01.11.2012 в 20:21.
Ответить с цитированием
  #7 (permalink)  
Старый 01.11.2012, 20:25
Интересующийся
Отправить личное сообщение для Simulator Посмотреть профиль Найти все сообщения от Simulator
 
Регистрация: 01.11.2012
Сообщений: 20

Сообщение от vadim5june Посмотреть сообщение
по моему так нужно
запоминаем старые координаты xold yold
получаем новые x y
то есть расстояние будет x-xold y-yold
и дальше плавно его проходим за сколько то итераций допустим 10
for(var i=0;i<10;i++)render(i);
function render(i){
ctx.clearRect(w,h);//очищаем canvas
ctx.drawImage(image,xold+(x-xold)/10*i,yold+(y-yold)/10*i)
}
но ведь получается что координаты отрисовки не будут соответствовать реальным?
Ответить с цитированием
  #8 (permalink)  
Старый 01.11.2012, 20:29
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от Simulator Посмотреть сообщение
но ведь получается что координаты отрисовки не будут соответствовать реальным?
У тебя просто изменятся растояние сразу одним скачком а мы разбиваем путь на n частей и в конечной точке приходим к реальным координатам но плавно
а здесь гдето еще надо setTimeout вставить
var i=0
function render(){
ctx.clearRect(w,h);//очищаем canvas
ctx.drawImage(image,xold+(x-xold)/10*i,yold+(y-yold)/10*i);
i++;if(i<10)setTimeout(render,100);
}

Последний раз редактировалось vadim5june, 01.11.2012 в 20:40.
Ответить с цитированием
  #9 (permalink)  
Старый 01.11.2012, 20:47
Интересующийся
Отправить личное сообщение для Simulator Посмотреть профиль Найти все сообщения от Simulator
 
Регистрация: 01.11.2012
Сообщений: 20

А разве такой метод для игры например подходит?
Сообщение от vadim5june Посмотреть сообщение
а здесь гдето еще надо setTimeout вставить
да у меня все в requestAnimationFrame, так что норм
Ответить с цитированием
  #10 (permalink)  
Старый 01.11.2012, 20:52
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от Simulator
А разве такой метод для игры например подходит?
ну это просто метод для плавного движения-так сделана анимация в jquery типа fladeIn animate итд
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
canvas и drawImage() jussik Элементы интерфейса 0 27.10.2012 16:57
Почему неправильно вырисовывается canvas? Amateur Events/DOM/Window 0 19.09.2012 10:45
Запуск Canvas в IE9! Severtain Общие вопросы Javascript 7 11.04.2012 12:36
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16