Hey everyone,

As i was trying to implement my tile based level in the game i started thinking about performance. Right now the level is set up like this:

[source lang="jscript"]map: [
[2,2,2,0,0,0,0,0,0,0,0,0,0,0,2,2,2,1,1,1,0,0,0,0,0,0,0,0,0,0,0,2,2,2],
[2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2],
[2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2],
[0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,2,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,2,0,0,0,0],
[0,0,2,0,0,2,0,0,0,0,0,2,2,0,0,0,0,0,0,2,0,0,2,0,0,0,0,0,2,2,0,0,0,0],
[0,0,0,2,2,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,2,2,0,0,0,0,0,0,0,2,0,0,0,0],
[2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2],
[2,0,0,0,0,0,0,2,2,2,0,0,0,0,0,0,2,2,0,0,0,0,0,0,2,2,2,0,0,0,0,0,0,2],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
],
[/source]
The width of the screen is equal to 17 of the above 23 tiles in width. Right now, all of the above are pushed into a current level array which the drawing routine later renders to screen. This basically means that all tiles that are not 0 have their own X-Y positions and as the player moves right, all of them are updated with new X positions. I was figuring if this was a bad approach since there are so many tiles to keep track of. Half of them are rendered off-screen but still...

Would it be better to just render the first 17 columns and then have a routine that pushes the next column set into the current level array and remove the "left most" ones as the player moves right and vice versa? Would this improve performance?

The thing is that i would first have to find which column of tiles that are the next in line, pull them out, set their X-Y positions and then push them into the current level array and lastly render them out. Seems equally taxing from a performance stand point so what do you guys think?

I recently revised my map rendering code to do some optimization for performance. Before you do something similar, have you tested to see if your current design actually needs performance tweaking? That is, have you taken actual measurements and noticed bottlenecks caused by rendering excessive off-screen tiles? If not, don't worry about it. Focus on other things until it becomes a problem.

If you are having an actual problem, one way to solve it is to find only the visible portion of tiles and draw those. This can be done rather easily and cheaply by keeping track of your "starting" X and Y tile positions, and just drawing a "screen width" amount of tiles from your starting point. You simply need to determine the range of tiles to draw based on which ones would appear on screen.

Since you screen is 17 tiles wide, your ranges should always be ("starting X" .. "starting X" + 17). The "starting X" can be determined by the position of the view/camera. In my case, it's the left edge of the camera that's used to determine the "starting X".

Another approach would be to pre-render your tiles to a larger texture, and then just render the portion that would be visible. If your tiles are not animated this approach will save a lot of extra rendering calls since the tiles are only rendered once.

Right now i can't say if my chosen approach will affect performance or not but it was one of those things that i realized just might do. But as you say, maybe i'm better off focusing on other things until it actually becomes a problem.

One issue i have with detecting performance bottlenecks is that the canvas atm isn't optimized to such a point that it would run smoothly in all browsers. At times it lags, jerks and does other wierd stuff with only minimal animations on stage, so it's hard to tell if these are browser issues or if i have some poorly written code. Anyway, thanks!

At times it lags, jerks and does other wierd stuff with only minimal animations on stage, so it's hard to tell if these are browser issues or if i have some poorly written code.

How is your rendering loop set up? Are you using setTimeout? setInterval? requestAnimationFrame? It should be possible to draw a reasonable number of things to <canvas> without poor performance.

How is your rendering loop set up? Are you using setTimeout? setInterval? requestAnimationFrame? It should be possible to draw a reasonable number of things to <canvas> without poor performance.

What i use is requestAnimFrame:
[source lang="jscript"]
function render() {
// Basically renders graphics, checks for collision and moves the player
}

window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();

(function animloop(){
requestAnimFrame(animloop);
render();
})()
[/source]

It might be that the lagging and jerking comes from the browser? I've noticed that Chrome seems to work best for Canvas while i personally like to develop in Firefox. Thanks also to Bad Unicorn for the input!