Cathode Tan - Games, Media and Geek Stuff
logo design by man bytes blog

Friday, July 28, 2006

More Canvas Tag Gamery

Checking out this canvas breakout example made me wonder why it works so much faster than my current tests. The code is almost completely identical. We even ended up calling out collision routine the same thing.

The reason? The canvas tag's performance is directly related to the size of the canvas itself, despite what you're putting on it. A large canvas requries more resources than a small one, even if they both are doing the exact same amount of drawing. 250x250 seems to produce pretty good results. Course, that's fairly small if you're trying to create enough space for two players. I may be able to get better performance by clipping the sections of canvas I'm not actually using when specific elements are being drawn ... not sure.


tagged: ,

2 comments:

Greg Tannahill said...

Granted that this is testing Canvas Tag, and not attempting to actually make a Breakout game, but for your reference:

*) The ball can get "stuck" travelling completely horizontally, only moving up or down one pixel in a complete left-to-right bounce, which makes it almost impossible to catch.

*) The ball sometimes moves through either the paddle or the bricks - the collision detection registers and the ball is bounced or takes out the brick, but the graphic of the ball appears over the brick or paddle.

It's still a little flickery even on that small canvas, but it's definitely visible and playable.

In terms of resource allocation, your're talking resources allocated on client machine, right, not on a server?

Josh said...

Client resources, right. When a normal game launches, it gets to dedicate all of it's resources to being a game. A browser-based game has a limited sandbox to begin with and one that is sharing it with a lot of other tasks. It's my problem with flash games as well.

On the collision detection - I've noticed the same thing with some of my tests. Not sure if it's the math on it or not.

I may try using the canvas tag as a replacement for images instead of trying to push everything onto one big canvas. This could be problematic, but it might be faster.