Creating canvas background image for each level

[Dream Of Sleeping]

I have an idea for a platform game. Each level will only be one screen. My game won't be using images for platforms but instead shapes that will be filled using an image for a pattern. I wanted to do this because I want the way the platforms are spaced and sized to be quite irregular. As a lot of these platforms will not move I thought I might draw them all onto a canvas, then convert it to an image using toDataURL and set the main game canvas css backgroundImage property to this new image.

 

Does anyone know if this would be better performance wise than just drawing all the shapes each frame? Am I making a grave mistake? Some of the later levels will be made up of a  lot of shapes.

 

This game will be aimed at desktops only.  The screen size will probably be 800 x 600.

[rich]

If you're aiming for desktop only then just draw them all, every frame. Unless we're talking tens of thousands of platforms you'll hardly notice it.

 

Optimise once you hit a problem, not because you think there might possibly be one.

[Dream Of Sleeping]

No there probably would only be about 100 platforms at once at most, but each drawn as a shape using an image for a fill and each shape would have an outline again using an image for a stroke.  Also I want to have each level be a room with wall paper, which will be a repeating image too.

 

What I'm thinking actually makes it easier to code, not harder, so as long as it won't make the performance worse I might try it this way. I just wanted to make sure it wasn't going to make performance worse. But thank you, I still have no clue about what slows down a game and what doesn't.

 

I have a question about collision detection too, instead of posting another topic I may as well ask here.  I'm just doing simple rectangle against rectangle collision. How many shapes on screen can I check one sprite against before that becomes a problem? I have ideas how to handle this and cut down the checks, but unlike the shape drawing, this will make the code more complex.

[OadT]

I think the idea with the CSS background has a better performance and if you think it's easier to code, why not? But instead of a background image you may could use 2 different canvas. One as main canvas and the other as bg canvas. I see some developer doing this and I think it's a nicer style as the CSS property. Just put them on the same position via CSS and make the main canvas transparent.

For the rectangle collision you may could do a little test. Create a little programm where you spawn many rects randomly and check how long it takes to check the collisions.

[rich]

Yeah if the platforms don't move then you could just render the whole scene once to a canvas (or dataURI) and then use that in-game.

 

For a rect vs. rect collision, say 1 player vs. 100 rects, that will be fine. I mean it's a little bit inefficient but I think the cost of implementing say a quadtree would probably outweight the 'brute force' approach in this instance. If your world size increased dramatically, then start worrying about it. But doing a brute force loop is proven to be quicker than any other system when dealing with low numbers of objects.

[Dream Of Sleeping]

Thank you both for replying.

 

I have an idea for limiting the number of checks. If I divide the level into a grid, just like a regular platform game, and at the start of each level, only once I have to loop through each platform and see which cells of the grid it falls into, and give this cell a reference for that shape.

 

Then when it's time to check collissions, first create a rectangle from the characters new position and it's previous position, then work out which cells of the grid this falls into. If it's not already been added, I add the platforms that each cell contains to an array, setting a boolean variable to say it's already been added. Then I should have a very small number of platforms to check. Afterwards reset the boolean variable that says it's been checked to false again. It sounds complicated but I think that would take very few calcuations.

 

I'm only going to do this if it prove necessary and if I manage to get it working. There are other elements about the game that make this platform collision even trickier than a normal platform game. I've certainly not made it easy on myself.

[rich]

Yeah that's basically a quadtree right there. The only difference is that a quadtree breaks itself down as a quad gets too full up.