Общие советы по холсту html5

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

На ipad, который будет холстом 1024x786; при таком разрешении я замечаю значительное снижение частоты кадров. При меньшем разрешении, как 480x320 на iphone, игра работает гладко! Я предполагаю, что это связано с тем, что устройство ограничено заполнением.

Во всяком случае, я бы хотел как можно больше оптимизировать. Я был бы очень благодарен, если бы вы могли опубликовать какие-либо общие рекомендации по производительности, которые у вас есть для разработки html5.

Ответы

Ответ 2

Вы можете читать Создание iPad-приложения HTML5 и сделать его действительно быстрым Thomas Fuchs

Основные моменты, которые он делает:

  • Изображения медленно замедляют работу - избавьтесь от них.
  • Избегайте text-shadow и box-shadow
  • Аппаратное ускорение совершенно новое... и багги (параллельная анимация ограничена)
  • Избегайте opacity, если это возможно (иногда мешает аппаратно-ускоренному рендерингу)
  • Используйте translate3d, а не translate (последнее не сильно ускорено)

Некоторые другие моменты, которые могут значительно повысить производительность:

  • используйте getImageData как можно реже (основное замедление) [2]
  • объединить более одного холста, чтобы перекрасить более мелкие части, которые чаще меняются.

Вы также можете проверить ваше приложение с профилем Chrome/Firebug может показать вам, какие функции медленны.

[2] http://ajaxian.com/archives/canvas-image-data-optimization-tip

Ответ 3

Еще несколько ссылок:

Трудно дать какие-то конкретные советы, так как я недостаточно знаком с вашей игрой. Однако вы можете разделить рендеринг на несколько слоев. Это имеет смысл, особенно если у вас есть некоторые статические элементы. Таким образом, вы можете избежать некоторой очистки и в итоге получить более хороший код в целом.