buffington

I got a bit obsessive tonight and set myself up with a challenge. After watching one of CNN's international news broadcasts, I got interested in recreating their new on screen headline graphics with HTML and Javascript. Here's what it looks like:

In the game I'm currently working on I've been tinkering with creating Javascript objects for each tile, duplicating, and placing the tiles wherever I need them. This is in preparation for a smarter blitter that does an Ajax call to the server, asking for the squares it needs to fill the current game window.

In theory, making objects seems like the way to go because you'd think it's the most efficient way - make one thing, then duplicate it, only changing its properties enough so that it appears on the screen in the right place. In practice it renders very slowly.

So far, the most effective approach seems to be to ditch the object creation approach entirely. Instead, I build up a string, then append that string to the HTML element that's supposed to contain my squares. It looks like this:


function draw_map(tiles) {
for (var i = 0; i < tiles.length; i++) {
x_y = iso_node_to_screen(tiles[i].attributes['x_choord']-x_choord,tiles[i].attributes['y_choord']-y_choord);
insert_string += draw_tile(x_y[0],x_y[1],tiles[i].attributes['x_choord'],tiles[i].attributes['y_choord']);
}
new Insertion.Bottom('board',insert_string);
}


Insertion.Bottom* comes from Prototype and simply adds a string to whatever element I tell it to.

The problem is that even that doesn't provide instant response. In Firefox, it's quick, but with Safari there is a flash. It's worth noting that in my current game, I'll only grab that entire field of tiles on a new page load - as the user scrolls the window only a single row of squares will be added at any given time - a total of what'll probably be just 10 new squares.

I'm not quite sure how to get it any faster, but studying these benchmarks might help. Most suggest that using innerHTML is the way to go, so perhaps I can figure out how to write my own version of Insertion.Bottom that's a bit more efficient.

* Insertion.Bottom is by far the worst name for a method I think anyone could come up with.

I think I've invented something of significant purpose for something I'm becoming ever more passionate about. But to help paint the picture, let's think about the hero who invented compression molding presses. Without this kind of machine there'd be no inner tubes, no melamine crockery and no brake pads. There'd be no bike riding, no green bean casserole, no stopping of massive vehicles. Read: mayhem.

But no one goes out and tries to invent things like this, it just sort of falls into place. You need something to press the hell out of some bits of material, so you make something to do it, and you refine it, and with enough iterations you end up with some massive device with blinking lights and pressure gauges that can squeeze out a conveyor belt while you eat a Baby Ruth.

I've been doing the same thing with casually played massive multiplayer games. I keep finding the need for tools, and I keep building new things because I think I'm the only one daft enough to try and do this. But I have the same itch that the guy who needed to press the hell out of something had. I'm _compelled_ to do things like build programmatic routines that let me efficiently blit an isometric perspective tile map with depth sorting using just CSS and HTML. And while they're not yet perfect, they're a preview of what's to come.

Consider this example of depth sorting. It's not perfect, but it's a tool I really need for a new game I'm working on. Find the "North, South, East" and "West" links to see the red cube move around. There's no real magic going on here, but it took a lot of trial and error to determine the best way to pull it off, much like I'm sure the compression molders so near and dear to all of our hearts took.

I can only hope that I'll be able to make the work that I'm doing now to build rudimentary tools will become just as important, even if just indirectly, to what we do on the Internet as the compression molder is to baby bottle nipples.