HTML5 Частота обновления игры с запросомAnimationFrame

Question

Я разрабатываю игру, используя холст HTML5 и JavaScript. Исходные fps приличные, но по мере продолжения игры fps уменьшается. Исходный fps составляет около 45 кадров в секунду, но он уменьшает до 5 кадров в секунду.

Ниже мой gameloop

var last_draw = Date.now(); //To track when last time GameDraw was called last time 
var fps; 
function gameloop() 
{ 
    var elapsed = Date.now() - last_draw; 
    last_draw = Date.now() 
    fps = 1000/elapsed; 
    context.clearRect(0,0,canvas.height,canvas.width);// This function clears the canvas. 
    GameUpdate();// This function updates property of all game elements. 
    GameDraw(); //This function draws all visible game elements in the canvas. 
    window.requestAnimationFrame(gameloop); //Requests next frame 
} 

window.requestAnimationFrame(gameloop); 

Он испытал это в следующих браузерах:

1. Mozilla Firefox 32.0.3
2. Google Chrome 38.0.2125.101 м

Мои вопросы::

1. Почему rAF вызывает это реже, так как игра продолжается?
2. Это из-за утечки памяти?
3. Это потому, что время, затраченное GameDraw и GameUpdate, очень велико?
4. Время выполнения функции Gamedraw отличается от времени, затраченного на фактическое рисование элементов в холсте. Gamedraw вызывает функцию draw для каждого игрового элемента.

Answer 1

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

Поскольку вопрос (ы) не может иметь один твердый ответ, я кратко рассмотрим каждую из подвопроса:

Почему RAF называет его менее часто, как игра продолжается?

Как вы уже догадались в следующем вопросе - что-то подтекает: это может быть что угодно, скажем, добавляя больше текстур, обработчики событий, объекты DOM и т.д. в каждом цикле ... просто имея слишком много JS объекты накапливаются, потому что они остаются ссылкой, поэтому сборщик мусора не может избавиться от них. Но суть в том, что вам нужно узнать, что меняется/incresing между каждыми двумя кадрами.

Это из-за утечки памяти?

Очень вероятно, и все же так легко проверить. В Chrome Shift + Escape открывает диспетчер задач, где вы можете видеть использование памяти, процессора и т. Д. Для каждой открытой вкладки. Отслеживайте это.

Это потому, что время, затраченное GameDraw и GameUpdate, очень велико?

Определенно! Это может также вызвать утечку памяти. Научитесь делать профилирование профилей CPU и canvas, это очень поможет вам. Я считаю, что профилирование холста в Chrome все еще является экспериментальной функцией, поэтому вам нужно сначала включить его из флагов конфигурации. Эти две функции составляют 99% запаздывания, исследуйте, что там происходит.

Время выполнения функции Gamedraw отличается от времени, затраченного на фактическое рисование элементов в холсте. Gamedraw вызывает функцию draw для каждого игрового элемента.

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