Оптимизация JavaScript

Рейтинг: 0Ответов: 1Опубликовано: 10.04.2015

Уже наверное целый месяц делаю небольшую игру на HTML5 Canvas и стал разочарован результатом. Сама игра работает на 5 с плюсом, все работает и отображается как надо, а вот fps оставляет желать лучшего. Я понял что нужно это дело оптимизировать, стал читать статьи и всякое прочее с этим связанное, сделал оптимизацию, но ФПС проседать не перестал, при этом в самой игре нет каких-либо сложных вещей, самое сложное - это массив из 40 объектов, который рисуется на холсте, разве это так много для JavaScript? Как вообще узнать в каком месте утекает память? возможно я что-то где-то упустил.

Решил проверить какой fps будет на обычном пустом холсте, почему выдает такой низкий понять не могу. У меня держит около 40.

http://jsfiddle.net/1tkftzyg/4/

Ответы

▲ 2

Первое что хочется посоветовать после просмотра Ваших ссылок, это научится пользоваться профилировщиком в браузере при помощи которого можно обнаружить утечки, узкие места, а так же он показывает fps. Лично я не люблю профилирующие инструменты в chrom, а использую, на мой взгляд самый лучший, IE. Так же нужно заметить что обязательно нужно и в firefox отдельно проверять, так как с canvas у него нелады и он урезает его возможности почти в два раза.

А теперь о Вашей проблеме. Скачки fps это вполне нормальная и обыденная история. Но Вас смущает дерганная анимация. Это недуг был всегда и лечится он лишь сглаживанием дельты времени. То есть Вам нужно в игре строить всю анимацию не на "тиках" таймера, а на прошедшем времени. Но и прошедшее время не помогает до той поры, пока его не начать сглаживать. Что это означает. Вот представьте, что Вы создаете анимацию движения квадратика с лева на права на расстояние 100px за одну секунду при установленном браузере обновлении 60fps в секунду. Что Вы для этого делаете? Вы берете и делите расстояние 100px на 60sec, что равно 1.6. При хорошем fps вызов функции обновления рендера вызывется 60 раз в секунду и умножая прошедшее время на заранее установленное значение (1.6) движение будет выглядеть плавным. Но если fps падает, то промежутки время увеличиваются и тем самым объекты начинают прыгать, так как при десяти обновлениях они удаляются на десять равных отрезков в 1,6 а при скачке fps это значение так же увеличивается. По этому выход один - создавать функцию сглаживания времени и строить всю анимацию на этом времени.

И если Вам не понятно что я пытался донести, поищите в гугле статьи, так как эта тема не одной большой статьи.