DOM Test

One of the ideas I’ve had from the beginning was, instead of drawing to canvas, using the browser rendering/layout engine instead. Basically, creating DOM elements for the map cells and setting CSS backgrounds for them…
That solves a bunch of problems, simplifies code in a lot of ways, and the browser’s pretty fast, being not written in JS…
I wasn’t really expecting this to work, but I did want to see what happened.

So… I made a little routine that, on load, would create one <div> for each map cell, inside of which is one <div> for each layer.
Each of these inner divs had as its background image the appropriate sprite file, with background-position to clip accordingly.
I draw each row, and each column, incrementing a counter and setting z-index to that counter, which automatically fixes all my ordering problems…
A bit of position math, and VOILA! It draws beautifully! It actually looks perfect, exactly like the canvas one. (I’m very pleaseantly surprised at this). So far so good.

Put all these divs inside one “map” div, to be able to move them all at once, and that inside a “viewport” div with overflow:hidden to kill the scrollbars…

A little code to move the map div around with the arrow keys…
Ah, there it is…
20 FPS scrolling the map around. Damn.

Well… I am creating about 13,000 DOM elements after all, and it’s positioning and reflowing all of them, probably… Maybe if I only create the ones I need to fill up the screen, and when you scroll I create/delete what I need/don’t need anymore…

The great attractiveness of the DOM system is that it basically solves all my invalidation problems. If you move the character around, it’ll take care of ordering, z-indexing, and it’ll only update the things that it needs to, magically, i just need to move the top/left properties of my character, and move him from cell to cell when he walks too far… It solves all the mouse events. And the viewport math. And backward compatibility to a lot more browsers. So let’s try the minimum viable thing…

I centered the map, and had the arrow keys move just one cell around, a little tree, instead of the whole map. That’s only 2 DOM elements, that has to fly!

20 FPS
Ok, so it’s probably reflowing everything everytime, even though it’s all position-absolute. Or at least redrawing everything. Or something…

Tiny window?
30 FPS

Let’s try Firefox…

Fine, canvas it is.
All in all, it was worth the experiment, given how little time it took to try it, and the big potential upside if it worked.
And it still *could* work, maybe, if instead of creating ALL the elements I just have the ones I need.
But that’s not cool anymore.

Oh, well, I still liked canvas more, it’s more fun to work like that, and it feels more “straightforward” than the DOM hackery, but this could’ve been good.


  1. Bart

    I know this post is 2011, but is it viable to try the DOM way with react? Since react renders has a vertual dom you dont need to draw that many divs.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">