Как оптимизировать веб-приложение HTML5 Canvas и JavaScript для Mobile Safari?
17
Я создал HTML5 Canvas и JS игру, которая отлично работает на настольном компьютере или ноутбуке в Chrome (30 кадров в секунду), но в мобильном Safari я получаю только около 8 кадров в секунду. Есть ли какие-нибудь простые советы или хитрости для увеличения частоты кадров?
К сожалению, ответ - рисовать меньше. Я обнаружил, что узким местом в приложениях, основанных на Canvas (на любой платформе, действительно), является время, необходимое для рисования пикселей.
Вот несколько вещей, которые можно попробовать:
Используйте несколько слоев холста. Нарисуйте свой фон на один слой, а ваши объекты на другой слой (абсолютно поверх фонового слоя). (Примечание: я не пробовал это на мобильном сафари, но это может помочь на других платформах)
Только перерисовать спрайты, которые изменились. Это сложно, но определенно увеличивает производительность. Идея состоит в том, чтобы сохранить, нужно ли перерисовывать спрайт, и перерисовывать только спрайты, которым он нужен, вместе с фоном позади них. (Это также необходимо каскадировать с другими объектами, которые могут перекрываться спрайтами.)
С разработкой в Chrome важно то, что а) его движок JavaScript (V8) работает очень быстро и б) все новейшие версии (7,8,9) имеют некоторое ускорение на GPU, когда дело касается рендеринга холста. Это в сочетании с тем фактом, что мобильное оборудование не так мощно, как ваш настольный компьютер / ноутбук, означает, что на мобильном сафари будет очень сложно добиться почти такой же производительности.
Я думаю, на данный момент лучшим подходом может быть нацеливание вашей игры на мобильное сафари с самого начала и попытка создать игру, которая не так интенсивно перерисовывается.
+1 Рисование меньше - это определенно и, к сожалению, способ пойти сюда, хотя со вторым холстом для фонового слоя и подходом с грязной пометкой вы можете увеличить производительность на 50% в некоторых случаях.
Иво Ветцель
4
Это долгий путь, но может ли ваша игра работать с DIV-спрайтами с помощью CSS-преобразований? Я говорю об этом, потому что я получаю замечательную производительность, перемещая вещи на устройствах iOS с помощью CSS-преобразований и переходов.
Похоже, что они должным образом аппаратно ускорены, с причудливым предостережением, что вы должны использовать 3D-форму для преобразований (т.е. translate3D, а не translate) для ускорения. Это действительно очень плавно, и реализация браузера iOS поддерживает Форма, в которой вы просто устанавливаете 16-элементную матрицу с плавающей точкой, что очень удобно для меня.
Я настолько впечатлен тем, насколько гладко это получается, что я собирался попробовать простой игровой проект, написанный таким образом.
Я не хотел бы добавлять ответ в старую ветку - но я удивлен, что никто не упомянул об этом.
Когда вы пишете свои первые игры, просто напишите им, как вы ожидаете, что они будут работать с точки зрения производительности. Приведенные выше методы являются хорошей отправной точкой для поддержания высокой производительности, но реальный трюк - это профилировщик. Если вы профилируете свое приложение в Chrome или Firefox (подсказка: используйте множество методов, чтобы вы могли видеть точные узкие места; чтобы вам не приходилось перемещать вещи позже - вы должны делать это в любом случае.), Вы получите дополнительное преимущество от просмотра точные сроки результатов. В моем случае, я видел, как перерисовывание фона занимало 80% времени браузера. После того, как я убрал это с дороги, я увидел, что другие звонки занимают 40% и более соответственно. Через час или два я увидел значительный прирост FPS.
Я также хотел бы услышать от ваших результатов. Я пытался сделать то же самое. Я обнаружил, что хорошо выполнять математику - это хорошо, но как только вы кладете туда холст, он становится ментальным, и частота кадров падает.
У меня было наложение переднего плана, которое отображало эффекты. Это было очень высокое качество изображения, но альфа-содержимое настолько замедлило его, что я полностью его отбросил за большее количество кадров в секунду.
Я также использовал PHP для проработки некоторых сложных математических задач. У меня были большие наборы данных, но вместо того, чтобы использовать JavaScript для вычисления и отображения данных, я решил позволить PHP делать работу и позволить JavaScript показывать результаты. Это не сэкономило много времени, потому что JavaScript "sehr gut" с математикой.
Я так понимаю, весь ваш сайт в HTML5, так что попробуйте поиграть с фоновым рабочим.
Надеюсь, я помог и, пожалуйста, поделитесь своими результатами.
Это долгий путь, но может ли ваша игра работать с DIV-спрайтами с помощью CSS-преобразований? Я говорю об этом, потому что я получаю замечательную производительность, перемещая вещи на устройствах iOS с помощью CSS-преобразований и переходов.
Похоже, что они должным образом аппаратно ускорены, с причудливым предостережением, что вы должны использовать 3D-форму для преобразований (т.е. translate3D, а не translate) для ускорения. Это действительно очень плавно, и реализация браузера iOS поддерживает Форма, в которой вы просто устанавливаете 16-элементную матрицу с плавающей точкой, что очень удобно для меня.
Я настолько впечатлен тем, насколько гладко это получается, что я собирался попробовать простой игровой проект, написанный таким образом.
источник
В случае рисования линий, объедините столько команд lineTo, прежде чем вызывать штрих.
Этот и некоторые другие советы: http://dt.deviantart.com/blog/38471599/
источник
все, что @Gosub сказал плюс:
посмотрите на то, что вы делаете, посмотрите, есть ли возможность использовать более эффективные алгоритмы.
используйте меньшие изображения. попробуйте сделать размеры изображения степеней 2
посмотрите, сможете ли вы избавиться от альфа-смешивания на холсте или не использовать свойство непрозрачности CSS.
пожалуйста, опубликуйте свои результаты. было бы интересно узнать, что помогло больше всего.
источник
Я не хотел бы добавлять ответ в старую ветку - но я удивлен, что никто не упомянул об этом.
Когда вы пишете свои первые игры, просто напишите им, как вы ожидаете, что они будут работать с точки зрения производительности. Приведенные выше методы являются хорошей отправной точкой для поддержания высокой производительности, но реальный трюк - это профилировщик. Если вы профилируете свое приложение в Chrome или Firefox (подсказка: используйте множество методов, чтобы вы могли видеть точные узкие места; чтобы вам не приходилось перемещать вещи позже - вы должны делать это в любом случае.), Вы получите дополнительное преимущество от просмотра точные сроки результатов. В моем случае, я видел, как перерисовывание фона занимало 80% времени браузера. После того, как я убрал это с дороги, я увидел, что другие звонки занимают 40% и более соответственно. Через час или два я увидел значительный прирост FPS.
источник
Я также хотел бы услышать от ваших результатов. Я пытался сделать то же самое. Я обнаружил, что хорошо выполнять математику - это хорошо, но как только вы кладете туда холст, он становится ментальным, и частота кадров падает.
У меня было наложение переднего плана, которое отображало эффекты. Это было очень высокое качество изображения, но альфа-содержимое настолько замедлило его, что я полностью его отбросил за большее количество кадров в секунду.
Я также использовал PHP для проработки некоторых сложных математических задач. У меня были большие наборы данных, но вместо того, чтобы использовать JavaScript для вычисления и отображения данных, я решил позволить PHP делать работу и позволить JavaScript показывать результаты. Это не сэкономило много времени, потому что JavaScript "sehr gut" с математикой.
Я так понимаю, весь ваш сайт в HTML5, так что попробуйте поиграть с фоновым рабочим.
Надеюсь, я помог и, пожалуйста, поделитесь своими результатами.
источник