Как оптимизировать веб-приложение HTML5 Canvas и JavaScript для Mobile Safari?


17

Я создал HTML5 Canvas и JS игру, которая отлично работает на настольном компьютере или ноутбуке в Chrome (30 кадров в секунду), но в мобильном Safari я получаю только около 8 кадров в секунду. Есть ли какие-нибудь простые советы или хитрости для увеличения частоты кадров?

Ответы:


14

К сожалению, ответ - рисовать меньше. Я обнаружил, что узким местом в приложениях, основанных на Canvas (на любой платформе, действительно), является время, необходимое для рисования пикселей.

Вот несколько вещей, которые можно попробовать:

  1. Используйте несколько слоев холста. Нарисуйте свой фон на один слой, а ваши объекты на другой слой (абсолютно поверх фонового слоя). (Примечание: я не пробовал это на мобильном сафари, но это может помочь на других платформах)

  2. Только перерисовать спрайты, которые изменились. Это сложно, но определенно увеличивает производительность. Идея состоит в том, чтобы сохранить, нужно ли перерисовывать спрайт, и перерисовывать только спрайты, которым он нужен, вместе с фоном позади них. (Это также необходимо каскадировать с другими объектами, которые могут перекрываться спрайтами.)

С разработкой в ​​Chrome важно то, что а) его движок JavaScript (V8) работает очень быстро и б) все новейшие версии (7,8,9) имеют некоторое ускорение на GPU, когда дело касается рендеринга холста. Это в сочетании с тем фактом, что мобильное оборудование не так мощно, как ваш настольный компьютер / ноутбук, означает, что на мобильном сафари будет очень сложно добиться почти такой же производительности.

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


+1 Рисование меньше - это определенно и, к сожалению, способ пойти сюда, хотя со вторым холстом для фонового слоя и подходом с грязной пометкой вы можете увеличить производительность на 50% в некоторых случаях.
Иво Ветцель

4

Это долгий путь, но может ли ваша игра работать с DIV-спрайтами с помощью CSS-преобразований? Я говорю об этом, потому что я получаю замечательную производительность, перемещая вещи на устройствах iOS с помощью CSS-преобразований и переходов.

Похоже, что они должным образом аппаратно ускорены, с причудливым предостережением, что вы должны использовать 3D-форму для преобразований (т.е. translate3D, а не translate) для ускорения. Это действительно очень плавно, и реализация браузера iOS поддерживает Форма, в которой вы просто устанавливаете 16-элементную матрицу с плавающей точкой, что очень удобно для меня.

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


Очень интересная идея. Надеемся, что в конечном итоге они также позволят ускорить 2D холст.
Даниэль Х Мур


3

все, что @Gosub сказал плюс:

посмотрите на то, что вы делаете, посмотрите, есть ли возможность использовать более эффективные алгоритмы.

используйте меньшие изображения. попробуйте сделать размеры изображения степеней 2

посмотрите, сможете ли вы избавиться от альфа-смешивания на холсте или не использовать свойство непрозрачности CSS.

пожалуйста, опубликуйте свои результаты. было бы интересно узнать, что помогло больше всего.


3

Я не хотел бы добавлять ответ в старую ветку - но я удивлен, что никто не упомянул об этом.

Когда вы пишете свои первые игры, просто напишите им, как вы ожидаете, что они будут работать с точки зрения производительности. Приведенные выше методы являются хорошей отправной точкой для поддержания высокой производительности, но реальный трюк - это профилировщик. Если вы профилируете свое приложение в Chrome или Firefox (подсказка: используйте множество методов, чтобы вы могли видеть точные узкие места; чтобы вам не приходилось перемещать вещи позже - вы должны делать это в любом случае.), Вы получите дополнительное преимущество от просмотра точные сроки результатов. В моем случае, я видел, как перерисовывание фона занимало 80% времени браузера. После того, как я убрал это с дороги, я увидел, что другие звонки занимают 40% и более соответственно. Через час или два я увидел значительный прирост FPS.


1

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

У меня было наложение переднего плана, которое отображало эффекты. Это было очень высокое качество изображения, но альфа-содержимое настолько замедлило его, что я полностью его отбросил за большее количество кадров в секунду.

Я также использовал PHP для проработки некоторых сложных математических задач. У меня были большие наборы данных, но вместо того, чтобы использовать JavaScript для вычисления и отображения данных, я решил позволить PHP делать работу и позволить JavaScript показывать результаты. Это не сэкономило много времени, потому что JavaScript "sehr gut" с математикой.

Я так понимаю, весь ваш сайт в HTML5, так что попробуйте поиграть с фоновым рабочим.

Надеюсь, я помог и, пожалуйста, поделитесь своими результатами.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.