html5 coding discussion

html5 coding discussion

Yeah, maybe slightly the wrong forum, but then again, those code platforms have no idea about game design, imho. Except maybe some js famework modders.


Personally I like to code. I was using Blitz3D in windows for a very long time. Besides an old direct3D library, it has also the basic 2D and sound command set you would expect. So it is perfect to quickly develop prototypes, which I then port to the rather picky javascript. This works well.


Initially there was a hype about the html5 canvas, but I quickly realized how slow it is. So I am currently going an other route, instead of drawing images to a canvas context, I am drawing them directly to the page body, by using css positioning. This of course requires each umage rendered to be a seperate image in Memory. Yet, it's not that much of a problem to keep 100 or something images in memory. By setting their. src I can give each one the data of any of the separately loaded reference tiles.


This way I can have at least ten times more sprites onscreen, with the same framerate, compared to canvas.


Additionally, using css, these sprites can be scaled, faded in/out (.opacity), rotated and even 3D transformed.


This is pretty fast, since most browsers use code that was optimized for decades for the basic page layout.

For me it's also an interesting aspect to write something that runs ok even on older browsers, like those with partial html5 support.


If it wasn't for atlas loading by using a cancas to copy the sprites etc. from the atlas to the single images, I wouldn't have any canvas in my little test engine.


I know, webgl may be even faster, but there are still too many users without proper support I think. But there may be other tricks? How to speed up graphics in html5 js coding?