Производительность рендеринга холста

Я модифицирую порт HTML5 игры Jump'n'Bump для работы на мобильных устройствах Apple и Android. Для тестирования я использую дешевый планшет Cortex-A8 Android 4.0.3 с тактовой частотой 1 ГГц. Я столкнулся со странным поведением в системном браузере. Обычно я получаю очень низкую частоту кадров около 1 кадра в секунду (весь экран перерисовывается каждый кадр, используется setTimeout...). Однако, когда я добавляю ‹div› с CSS-атрибутом position:fixed перед тегом ‹canvas›, частота кадров резко возрастает, и в игру можно играть.

Может ли кто-нибудь объяснить это странное явление? Существуют ли в браузере Android режимы рендеринга, влияющие на производительность холста? Это кроссплатформенная проблема? Как убедиться, что страница работает эффективно в браузере пользователя?

Набросок кода, над которым я работаю:

<!DOCTYPE html>
<html>
<title>Jump'n'Bump - HTML5</title>
<meta http-Equiv="Cache-Control" Content="no-cache">
<meta http-Equiv="Pragma" Content="no-cache">
<meta http-Equiv="Expires" Content="0">
<meta name="viewport" content = "width=400px, user-scaleable=no">

<!-- javascript files included here -->
<script type="text/javascript" src="main.js"></script>

<style type="text/css">
  body { margin: 0px 0px 0xp 0px }
  canvas { border: 0px solid black; }
  img.resource { display:none; }
  #fixed_div { position: fixed; width: 10px; height: 10px; left: 0px; top: 0px; }
  #gameArea { position: absolute; left: 0px; top: 0px; width: 400px; height: 256px; background: red; }
  canvas {
    image-rendering: optimizeSpeed;             // Older versions of FF
    image-rendering: -moz-crisp-edges;          // FF 6.0+
    image-rendering: -webkit-optimize-contrast; // Webkit
    image-rendering: optimize-contrast;         // Possible future browsers.
    -ms-interpolation-mode: nearest-neighbor;   // IE
  }  
</style>
<body onload="init()" text="#FFFFFF" bgcolor="#000000">

<!-- image resources like this here: -->
<img class="resource" id='rabbits' src='rabbit.png'/>

<!-- *** remove the line below and the game slows down *** -->
<div id='fixed_div'></div>

<div id="gameArea"><canvas id="screen" width="400" height="256"></canvas></div> 

</body>
</html>

canvas html performance frame-rate android-browser
person Witek Ewert    schedule 16.10.2012    source источник
comment
Могу я спросить, какой игровой движок вы используете?   -  person fulvio    schedule 17.10.2012
comment
Jump'n'Bump, который изначально работал в DOS. Порт HTML5 доступен здесь: ссылка. Ссылки на другие порты см. в статье Википедии по адресу ссылка.   -  person Witek Ewert    schedule 17.10.2012
comment
Похоже, он не использует какой-либо игровой движок. Существует функция, планирующая себя с помощью setTimeout и вызывающая функцию рендеринга, которая рисует прямо на холсте.   -  person Witek Ewert    schedule 17.10.2012
comment
Это интересно, у меня дрянной FPS на Windows Phone 7 - добавьте этот пост в избранное!   -  person Barrie Reader    schedule 17.10.2012

Ответы (1)


arrow_upward
1
arrow_downward

Этот вопрос так любопытен.

Попробуйте использовать Request Animation Frame вместо setInterval (без волшебного div, =])

function getRequestAnimFrame() {
    var game = this;
    // requestAnim shim layer by Paul Irish
    return  window.requestAnimationFrame       || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame    || 
            window.oRequestAnimationFrame      || 
            window.msRequestAnimationFrame     || 
            function(/* function */ callback, /* DOMElement */ element) {
                window.setTimeout(callback, 1000 / fps);
            };
}

Возможно, это поможет увеличить производительность.

person rogeriolino    schedule 19.10.2012
comment
Правильно, но, насколько я знаю, Request Animation Frame не поддерживается большинством мобильных браузеров в дикой природе - см. ссылка. Насколько я уже понял, это может быть проблемой, когда запускается обновление холста на экран, а не рендеринг на сам холст. Тем не менее, спасибо за подсказку — этот фрагмент был бы очень полезен, если вы также ориентируетесь на настольные браузеры. - person Witek Ewert; 20.10.2012