Мышь вниз и перемещение капель Chrome Canvas до 30 кадров в секунду, используя CreateJS

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

Когда левая кнопка мыши нажата и мышь перемещается, FPS падает до 30 на Chrome (как сообщили инструменты разработчика). Это до боли очевидно по сравнению с 60FPS, в которых игра обычно работает.

Чтобы попытаться понять это, я снял голый холст и тикер, и проблема остается. Итак, я заблудился. Проблема может быть воспроизведена мной с помощью этого кода:

<html>
<head>
    <script src="./javascript/easeljs-0.8.1.combined.js"></script>
    <script>
        function init() {
            canvas = document.getElementById("gameCanvas");
            createjs.Ticker.setFPS(60);
            createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNC;

            stage = new createjs.Stage(canvas);
            createjs.Ticker.on("tick", tick);
        };

        function tick(evt)
        {
            stage.update();
        }
    </script>
</head>
<body onLoad="init();" bgcolor="#ffffff">
    <canvas id="gameCanvas" width="1136px" height="640px" style="border: thin black solid; margin: 0 auto;"></canvas>
</body>
</html>

Мне известен вопрос: HTML задержка холста, когда левая мышь не работает и перемещается в Chrome, но я не понимаю, как это может помочь в этом случае.

У кого-нибудь есть идеи или ресурсы, чтобы помочь с этим?

РЕДАКТИРОВАТЬ:

Извинения, я нашел один обходной путь, установив тикер в

createjs.Ticker.timingMode = createjs.Ticker.RAF;

Это решает эти проблемы и пропуски кадров, которые я получаю (но не упомянул)

Независимо от того, может ли кто-нибудь пролить свет на то, почему это происходит, и почему на земле я бы использовал синхронизированный тикер, если это приведет к этому?

Источник

1 ответ

Решение

RAF обеспечивает недетерминированную частоту кадров (т. Е. Вам не гарантируется какая-либо конкретная частота кадров), что означает, что браузер может свободно регулировать или произвольно увеличивать fps в ответ на любое количество вещей. Кажется, что Chrome может запускать дополнительные события RAF, когда мышь не работает, чтобы перекрашивать чаще и предлагать более плавные взаимодействия с мышью.

RAF_SYNC работает, пытаясь выровнять указанную частоту кадров с произвольной частотой кадров. Он имеет некоторые допуски, чтобы позволить ему работать, когда частота кадров не выравнивается хорошо, но это работает намного лучше, когда указанная частота кадров значительно ниже, чем реальная частота кадров RAF (например, нацеливание на 20 или 30 кадров в секунду).

Из документов:

Дисперсия обычно самая низкая для частоты кадров, которые являются делителями частоты RAF. Обычно это 60, поэтому частота кадров 10, 12, 15, 20 и 30 работает хорошо.

В этом случае, поскольку ваш целевой fps достаточно высок (в основном максимальный RAF, скорее всего, пойдет), у него мало места для маневра. Когда Chrome становится слишком большим, чем 60fps, RAF_SYNC начинает испытывать проблемы с выравниванием кадров по частоте кадров, которые он пытается достичь. Недостаточно времени прошло между предыдущим и текущим кадром, поэтому он ждет дополнительного кадра. Результатом является то, что частота кадров падает чуть более половины вашей указанной скорости. При 20 или 30 кадрах в секунду вы, скорее всего, этого не заметите, потому что он может довольно хорошо выровняться.

Например, скажем, Chrome переходит на 80 кадров в секунду, и вы нацеливаетесь на 60 кадров в секунду в режиме RAF_SYNC:

  1. Chrome запускает событие RAF.
  2. Тикер смотрит на время, прошедшее с момента последнего тика, видит, что оно составляет всего 12 мс, решает, что оно недостаточно близко к своей цели в 16,67 мс, и ждет следующего события RAF.
  3. Chrome запускает еще одно событие RAF.
  4. Тикер смотрит и видит, что с момента последнего тика прошло более 16,67 мс, и сразу же запускает тик, но в этот момент прошло 25 мс.
  5. Повторение. Теперь вы работаете со скоростью ~40 кадров в секунду вместо 60 кадров в секунду, хотя реальная частота кадров составляет ~80 кадров в секунду.

Я надеюсь, что в этом есть смысл.

Источник
Другие вопросы по тегам