Использует ли ваше приложение какую-либо логику для requestAnimationFrame или покадровой анимации? Тогда низкий FPS или пропущенные кадры могут привести к критическим ошибкам. В этой статье рассказывается, почему вы не должны недооценивать это и как протестировать против пропущенных кадров и низкой частоты кадров.

Несколько месяцев назад мы отметили большое событие в Evolution Gaming - выпуск новой игры. Ура! Вышла в свет уникальная, первая в своем роде трехмерная рулетка, созданная с помощью React и WebGL. Мы искали признания и успеха…

Разработка игры длилась около года. Это первая игра, созданная отделом 3D-разработки компании. Наконец, мы начали использовать трехмерную графику вместо игр с потоковым видео. Наконец, a̶ ̶r̶o̶b̶o̶t̶ WebGL заменяет крупье. Наконец-то высокие технологии будут отмечены в таком консервативном сегменте, как решения B2B для крупных казино в Вегасе и Макао!

Через два дня после релиза к нам поступили жалобы от пользователей. Их было очень мало - менее 1% от общего числа игроков, но они были разрушительными.

«Вы нам изменяете! Ставлю на красное, мяч на красном, а игра говорит, что я проиграл! »

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

Как эта многослойная машина пропустила такую ​​серьезную ошибку, как потерю синхронизации между реальным результатом игры и визуальным представлением?

И да, это было менее 1% игроков… В нашей команде это практически не воспроизводилось. Нам потребовалось несколько напряженных часов, прежде чем мы получили первый улов: «Ошибка воспроизводится на старых телефонах Android». Следующий час - следующая новость: «Ошибка воспроизводится лучше при большой загрузке процессора». После этого отчета мы начали троттлинг процессора до максимума, так что ошибка воспроизводилась в 30% прогонов. Это лучше, чем 0%, но все же исправить ошибку таким способом безумно сложно. Каждый раз, когда вам нужно доказать или опровергнуть свою гипотезу, вам нужно будет воспроизвести 3 раза, но вы никогда не можете быть уверены в этом…

Ошибка была вызвана пропущенными кадрами и подходом, который мы использовали для анимации шарика рулетки (анимации по ключевым кадрам). Стоимость ошибки была огромной для компании, и команда была измотана ее исправлением. Поскольку отозвать игру у клиентов было невозможно, фиксация последней с полудня до 4 часов утра.

Как протестировать против пропущенных кадров?

Ваше приложение использует анимацию или любую логику, выполняемую в requestAnimationFrame? Специально для вас я сделал небольшое расширение Chrome под названием FPS Control, которое позволяет отбрасывать кадры (25% / 50% / 90%) и ограничивать FPS (2/10/30). Как это работает? По сути, обезьяна исправляет requestAnimationFrame, чтобы он работал так, как ожидалось, и если у нас есть это расширение раньше ...

Заключение

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