Jump to content

  • Log In with Google      Sign In   
  • Create Account

2D tile level drawing performance, which of two approaches is best?


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
6 replies to this topic

#1 hdnine   Members   -  Reputation: 136

Like
0Likes
Like

Posted 29 October 2012 - 09:57 AM

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?

Edited by hdnine, 29 October 2012 - 10:00 AM.


Sponsor:

#2 Maxamor   Members   -  Reputation: 361

Like
0Likes
Like

Posted 29 October 2012 - 02:42 PM

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.

Edited by Maxamor, 29 October 2012 - 02:49 PM.


#3 hdnine   Members   -  Reputation: 136

Like
0Likes
Like

Posted 29 October 2012 - 03:03 PM

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!

#4 Maxamor   Members   -  Reputation: 361

Like
0Likes
Like

Posted 29 October 2012 - 05:25 PM

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.

#5 MAD UNICORN GAMES   Members   -  Reputation: 297

Like
0Likes
Like

Posted 30 October 2012 - 05:35 AM

Ok, I dont know what your programming with, but I know a tile system that has worked great for me.
youll want to create an array of integers such as this:

g_iGrid[x][y] <-- X and Y can be referenced to a variable that defines the total size of your grid.

Example:

const int g_iMaxGridSize = 100;
g_iGrid[g_iMaxGridSize][g_iMaxGridSize];

the benefit to this is that you can develop functions that change the grid at any x,y point. You can additionally create functions to reference and update this points.

for rendering you can create a loop that draws tiles in a radius of the camera for top down games or that use an angle for 3rd person point of view games.
Mad Unicorn Games

#6 MAD UNICORN GAMES   Members   -  Reputation: 297

Like
0Likes
Like

Posted 30 October 2012 - 05:39 AM

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?


As i posted earlier. I believe the solution is to have the tile system an array which can be immediately referable to the display.

Edited by Bad Unicorn, 30 October 2012 - 05:39 AM.

Mad Unicorn Games

#7 hdnine   Members   -  Reputation: 136

Like
0Likes
Like

Posted 31 October 2012 - 03:14 AM

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!




Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS