2010-08-04 4 views
3

Я делаю игру, используя html-холст.Поведение багги с использованием холста?

Вот мой прогресс:

http://db.tt/ei3LlR (используйте WASD и клавиши влево/вправо) Помогает ZOOM.

Мои вопросы:

  • Почему тень мерцания в Google хром, когда бак вращается?
  • Почему изображение башни мерцает в сафари при повороте башни?
  • Почему это нормально работает в Firefox?

Изображение танков и изображение башни - это простые старые png. Тени динамически создаются с использованием этих изображений. Тени не являются объектами изображения, а элементами холста.

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

Что здесь происходит? Это проблема на моем конце?

+0

Я не вижу ни одного «мерцания» в Chrome или Firefox. Единственное, что я вижу, это анимация маленькой башни. Но приятная работа, хотя .. для меня это выглядит довольно гладко. –

+0

Я вижу, как танковые башни мерцают таким образом, что он выглядит как вращающийся пулемет, и на каждом танке есть белая прямоугольница, которая движется вперед и назад. Это то, что вы имеете в виду? Почти выглядит намеренно ... – MooGoo

+0

@MooGoo: Я думаю, что это был предполагаемый эффект. Увеличьте масштаб, и вы увидите его более подробно. Мне также было интересно, об этом говорит OP. –

ответ

0

ОБНОВЛЕНИЕ. Проблема больше не существует! Должно быть, они исправили это!

1

Что касается мерцающих проблем, вы, похоже, не дублируете свой холст двойной буферизацией. Таким образом, возможно, что вещи мерцают, потому что земля или тени нарисованы перед танками, и обновление экрана происходит до того, как вы нарисуете танки и башенки.

Этот вопрос немного о двойной буферизации с Canvas 2D: Does HTML5/Canvas Support Double Buffering?

Я также интересно, если небольшие ошибки округления в контексте в rotate и translate методов может быть причиной рывков в Крюки изображения. Различные реализации браузера могут иметь разные уровни точности для этих операций. Вы можете попробовать округлить свои параметры до ближайшего целого, чтобы проверить это.

PS: Ваша игра до сих пор отлично смотрится - графика танков и обработка действительно хороши.

+0

Благодарим вас за помощь. Я попробовал округлить цифры, но это не помогло. Проблема, скорее всего, в том, что вы описываете. Эта библиотека processing.js выглядит довольно аккуратно. Думаю, я заберу его и отчитаю. Еще раз спасибо! – Tiby312

+0

На второй мысли. этот обработка.js предмет похоже overkill. Я дам метод, с которым вы связались. – Tiby312

+0

Argh! Я добавляю двойную буферизацию, и она все еще дергается за меня. Таким образом, это не похоже на ошибку округления, которая вызывает это. Возможно, это просто недостаток Google Chrome. :( – Tiby312

Смежные вопросы