Animative Blogging: Two-Dimensional Vector Objects

Animation of the 1979 arcade game, Warrior, demonstrating the lines that make up the fighter.

The majority of video games produced in the late '70s and early '80s used raster graphics systems, where the individual graphical elements were pixels.  Groupings of pixel data, called bitmaps, can be extracted in the form of sprites, as I discussed in a previous blog entry.  But what if you want to extract objects from a game that uses vector graphics, like the one shown above?  

Connect the Dots

As I already discussed in my entry on vector graphics in early arcade games, the fundamental components of a vector graphic are points and lines, so extracting them is simply a matter of determining the positions of the points, then connecting them appropriately.

If you're playing a vector game in MAME, then you'll want to adjust the configuration so that the lines are as thin as possible.  This will make it easier to distinguish where they intersect.  To do so, adjust your core vector options like this:

#
# CORE VECTOR OPTIONS
#
beam_width_min            1.0
beam_width_max            1.0
beam_intensity_weight     0.75
flicker                   0

I suggest turning the flicker off as well.  This is in addition to the configuration changes that I suggested in my sprite extraction entry.  Also, make sure you don't have any of the vector game enhancements active, such as beam smoothing or bloom blending (they should be off by default).

With the configuration set, you can capture the gameplay using the same technique as I described for sprites, only this time you're best off recording the game in as high a resolution as possible.  The nice thing about vector graphics is that they can be scaled to any size without losing fidelity, so when you stretch the MAME window to a larger size, it just makes the points easier to distinguish on your raster screen.

If I follow the above steps, here's what I see when I zoom in on a MAME snapshot of the alien spaceship in Asteroids:


The alien ship in the 1979 arcade game, Asteroids, as seen in a snapshot from MAME.

Since you're playing the game on a raster display, the image will of course be made up of pixels, but those pixels contain much more information than we actually need to define the vector version of the alien ship.  It should be pretty clear to the eye where the lines are intersecting.


Now we just need to find the coordinates of the points and the order in which they're connected.  I have my own Python/OpenCV tool to do this, but you can use GIMP.  Specifically, the paths tool allows you connect points on an image and then dump the resulting path into an SVG file.  The format of this file, and how you can embed it in a web page, will be the subject of the next section.

The Scalable Vector Graphics (SVG) Format

It's possible to make ordinary images and GIF animation files from vector data, and I often do, but for a simple line drawing, you're probably better off using the scalable vector graphics (SVG) format.  For one thing, it speaks vector data natively and can thus be easily scaled to any size.  For another, it allows you to create extended animations that can be displayed on a web page without requiring users to download large files.

For example, here's a simple line drawing of the alien ship in SVG format:

To create this, I just embedded the following lines into the source of this page:
<svg height="60" width="80">
<path d="M18 33 L36 18 L45 6 L54 6 L63 18 L81 33 L63 48 L36 48 L18 33 L81 33 M63 18 L36 18"
fill="none"
stroke-width="1"
stroke="black">
</path>
</svg>

It's simpler than it probably looks.  All I'm doing is telling your browser to create a graphic window 60 x 80 pixels across, and then connect the given points with black lines.  The positions of the points are given as pairs of numbers in the "path" tag, with the letter "M" meaning to move to a point and the letter "L" meaning to draw a line to the next point.  The rest of the code is just giving the color and width of the lines, as well as making sure that it doesn't fill the inside of the path.  If you created your path from the paths tool in GIMP, it will dump a file that contains markup just like this, so you won't have to write it out manually.

Now that we have a line drawing, let's add motion to it.

This was done with the "animateTransform" tag as follows:
<svg height="80" width="400" x="0" y="0">
<g>
<path d="M18 33 L36 18 L45 6 L54 6 L63 18 L81 33 L63 48 L36 48 L18 33 L81 33 M63 18 L36 18" fill="none" stroke-width="1" stroke="black"/>
<animateTransform attributeName="transform"
type="translate"
values="0;150;0"
begin="0s"
dur="4s"
repeatcount="indefinite" />
</g>

</svg>
Here I'm highlighting the new markup in bold. The "<g>" tag is used to group the path and animation tags, the "type" attribute says that this is a translation, and the values tell it the coordinates to translate to (x coordinate only, in this case). The rest of the tags concern the properties of the animation, including when it starts, how long it lasts, and how many times to repeat it. Here we have a 4-second animation that repeats indefinitely, much like a GIF.

Finally, you can animate with frames. Here's a six-frame animation of the enemy in the 1979 arcade game, Barrier.

>
 Animation with frames is complicated, requiring the creation of layers with CSS, but you can find a nice walkthrough here.

There are many, many things you can do using SVG markup and covering it in depth is beyond the scope this blog entry, but a web search should turn up plenty of resources if you're interested in learning more.

Examples from Early Arcade Games

The actual appearance of vector graphics in early arcade games was a good bit different from what you see in these line drawings.  The electron beam that drew the graphics would dwell on different objects for different amounts of time, leading to persistence effects that made the gaming experience more spectacular, but at the same time would limit the amount of detail that could be made out in the graphics.

As such, I was surprised by the amount of nuance that went into the graphic design of some of these games.  For example, the animation below shows a clip of gameplay from the 1980 game, Rip-Off, with some of the tank designs shown on the side.  I doubt that the player would have been able to make out this much detail in the original arcade game (here is a YouTube clip for comparison).

Animation of the 1980 arcade game, Rip-Off, showing a clip of gameplay next to line-drawn versions of the player and enemies.

And this was far from the peak of graphical sophistication in early vector graphics games.  In 1979, Vectorbeam released a fighting game (one of the first ever) called Warrior, where each figure is animated in several sections.  The developers even used motion capture techniques to create the animations.

Animation of the 1979 arcade game, Warrior, demonstrating the lines that make up the fighter.

In this case, the figures are quite large on the screen, so it's easier to make out the individual lines.

Some vector game designers went further still, creating full three-dimensional figures, and even three-dimensional environments, but that's a topic for another time.

Comments