we're developing a HTML5/Javascript jump and run game and therefore we have developed our own gameframework. It consists of following most important structures:
- Stage/Scene/Layer: divs
- ObjectEntites/Rectangle/Sprite: canvas
In the gameloop things get moved by calculating an offset value: e.g. if we place a coin and this coin moves through the screen, it gets a new offset in each gameloop-call. The dirty area of the coin is cleared in the canvas and the coin is repainted. We pay attention that we just draw at int-values (no floating point).
Unfortunately we have some performance issues now and can't figure out why our macbook pro's are running hot while playing the game.
Are the drawing operations so crucial? We have layered Canvas, so just moving stuff gets repainted and even not the whole canvas but just dirty-areas get cleared.
IStat shows following values while playing the game: Memory module A1 and Heatsink B get up to 60° and the rpm-Value of the Fans increases up to 3000-4000. In firefox we see these values:
And chrome shows us this, where we also see how cpu increases:
Do you have any idea how to check performance of our game, how to find bottlenecks or general tips? We have searched for canvas performance, used firebug profiler... We'd be grateful for any advice!