Canvas stuff

I've been lately experimenting a lot with the canvas element.

For those of you who don't know what this "canvas" thing I'm talking about is, it's a new element in HTML, supported by Firefox and Opera at the moment. You can use it to draw graphics and such, like in games.


The first thing I made, was an Asteroids clone.
Currently available in widget form from the opera widgets page, it's a pretty cool game, I might even say.

It's actually rather simple to draw different shapes and such with canvas... you just define the starting point and then it's a game of "connect the dots": just give it the points you want to draw lines to. Pretty simple stuff.

You can even do translations, rotations and scaling on the graphics, which might be expected from a vertex based renderer like DirectX. For example the asteroids are just defined as a few points, then stroked with a single command... they can be rotated as simply as calling a function and giving it the angle in radians.


The second experimental game is a Missile Command -style shooting game. Opera Command, as I call it, is also available from widgets.opera.com.

The non-widgetized version of it also worked on firefox... somewhat. Your own missiles wouldn't fire for some reason. Oh well, Firefox is so crappy anyway ;)



There's only one issue with canvas, though: JavaScript.

JavaScript is very slow compared to most programming languages which are usually used to make games. It seems that the canvas itself is okay rendering performance-wise, but the bottleneck is the scripting language.

Do a lot of math, like precise collision detection (say... pool), and you'll bog down everything. Opera's JavaScript engine is the fastest I've seen yet, and it's still slowing down when there's much action on the screen.

This leads to the fun part: optimization. Try to avoid every command.

An issue caused by slowdown of JS on slower machines cause another issue: the games run faster on other computers than others... this could be avoided if one introduced proper timing into the script.

That, however, would require even more calculations per frame... you'd need to take at least one new Date object per frame so you could calculate how long the last frame took... I haven't tried this yet, so I can't say for sure if it has a large impact, but considering that avoiding unnecessary things in JS is good...



The key in JS+canvas game dev: simplicity?

Take the explosions in Opera Command for example. There's no image involved or complicated shapes... only an expanding circle which is filled with a gradient. And it still looks pretty good!

I noticed a slight detoriation in the speed when I added the little missile graphics. I wonder if it would've been a better idea to just create them as lines instead of using a .png image...


It would seem that using images doesn't have much difference over using circles and paths and such if you look at the speed. For example in the Asteroids game, there were no images used in rendering and it still slows down a bit if there are lots of asteroids going around etc., Opera Command on the other hand has the little missile graphics and the city graphics being rendered.



So it seems to stand that the more going on -> the slower things will be. Well, this stands in every programming language, but the limit of what you can do comes very quickly in JavaScript, especially on slower machines.