Login/Register
Canvas rendering performance
Asked Answered
performancehtmlcanvasandroid-browserframe-rate
D

1

7

I am modifying the HTML5 port of the game Jump'n'Bump to run on Apple and Android-based mobile devices. I use a cheap 1 GHz Cortex-A8 Android 4.0.3 tablet for testing. I have encountered strange behaviour in the system's Browser. I normally get a very low frame-rate of about 1 FPS (entire screen is re-drawn every frame, setTimeout is used...). However, when I add a <div> which has a position:fixed CSS attribute before the <canvas> tag, the frame-rate skyrockets and the game becomes playable.

Could someone please explain this odd phenomenon? Are there some rendering modes in the Android Browser which influence canvas performance? Is this a cross-platform issue? How do I make sure the page works efficiently in the user's browser?

An outline of the code I'm working on:

<!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>
Duello answered 16/10, 2012 at 18:22 Comment(4)
Can I ask what game engine you're using? – Audible
Jump'n'Bump, which originally ran in DOS. The HTML5 port is available here: link. See the Wikipedia article at link for links to other ports. – Duello
It doesn't seem to be using any game engine. There is a function which schedules itself with setTimeout, and calls a rendering function, which draws directly on the canvas. – Duello
This is interesting, I get a shoddy FPS on Windows Phone 7 - favourite this post! – Pershing
F
1

This issue is so curious.

Try using Request Animation Frame instead of setInterval (without the magic 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);
            };
}

Maybe this help to increase the perform.

Fronton answered 19/10, 2012 at 17:56 Comment(1)
Correct, but as far as I know, Request Animation Frame is not supported by most of the mobile browsers in the wild - see link. As far as I've figured out already, this may be a problem of when canvas to screen update is triggered rather than rendering to the canvas itself. Thanks for the tip, though - the snippet would be very useful when also targeting desktop browsers. – Duello

© 2022 - 2024 — McMap. All rights reserved.