One cool feature in Overgrowth is that it automatically and intelligently converts your image files when you run it. For example, Aubrey can be designing a level and working on textures in the raw TGA format. Aubrey likes TGA because it has a separate channel for alpha transparency so in Photoshop you can draw directly onto its transparency mask seamlessly.

Note the fourth transparency channel.

However, the TGA format is completely uncompressed and produces huge files which are not really practical for video games. There are many other image formats that are better for production. Aubrey could manually convert everything to a lossless PNG format, for example, but that would be annoying. Why should Aubrey have to deal with that? Luckily, we have some technology.

When a developer launches Overgrowth (or even just alt-tabs into it from Photoshop -- see live texture/shader updating) these files are seamlessly converted into the superior PNG format if they need to be lossless, or the extra hot DDS format using DXTC texture compression if appropriate. Right now you tell it whether you want it to be lossless or not by adding _nocompress to its filename.

This was actually really easy to do thanks to FreeImage. As a bonus, we are releasing a little utility based on our FreeImage graphic converter wrapper. :) Feel free to use it to convert your images.

Mac OS X: Click to download
Windows: Click to download

People who played Lugaru will be familiar with the ruins in that game-- often simple blocks of stone-like material, they played a critical gameplay role in many of the levels. Going into Overgrowth, I thought this was one of the more original aspects of the art direction. They seemed very mysterious and abstract, and that was my favorite thing about them.

The best example of my old Lugaru 2 ruins concepts.

It was kind of hard to keep the designs of the ruins abstract enough. When I first started working on Lugaru 2 my designs were very different. Part of the problem was understanding them. As a player I wanted the mysterious ruins to be mysterious, but as a designer, I had to have a concrete understanding of where these things came from and why. This involved a lot of deep discussion with David over the course of many years.

One of my first concepts for the new style of ruins.

Recently we have been talking about pushing the ruins into more interesting territory. We want things to make sense and be consistent, but there is a lot of room for more imaginative concepts. It took awhile to settle on how these new idea fit into the world but I have been working on new concepts.

Here is an example of our arch ruins. One of many new things in Overgrowth.

What do you think about the ruins?

David made this video a little while ago to help spice up our ModDB profile (be sure to join it if you haven't already!) I thought I would post it to the blog as well.

Be sure to click here to watch it in HD!

Be sure to subscribe to the Wolfire YouTube channel if you haven't already, and be sure to join our ModDB page.

There is something slightly different about this version of the video. We are interested to see the reactions to this one.

Minoru Niijima's version of E.J. Marey's train schedule from Paris to Lyon. X-axis is time, Y-axis is space. Horizontal red lines are stations. Diagonal red lines chart out individual trains. Copied from cover graphic of The Visual Display of Quantitative Information.

I have recently been reading some of Edward Tufte's books on information graphics. Tufte is an expert on the subject and I'd highly recommend the books to anyone who finds beauty in data visualization. Video games seem to have a bad reputation for honest and direct graphical feedback. At several points in his books, Tufte makes comparisons to video games in order to point out bad design. Referring to one particularly gaudy chart, Tufte writes, "Credibility vanishes in clouds of chartjunk; who would trust a chart that looks like a video game" (Envisioning Information (EI from here on), page 34). The implication is video game graphics are flashy and decorative, but content-poor. Sometimes that's fine -- colorful, loud graphics can convey an amusement park fun that has no need for deep content. But other times, games do benefit from elegant information graphics. This is especially true for game editors. I've recently been adding more graphical feedback to the map editor, and I've been thinking about how Tufte's principles might apply.

Concise, Multi-Functioning Elements

Charles Minard's visualization of Napoleon's invasion of Russia. The dominate line depicts several variables at once: army position in space and time, number of troops, and army advance versus retreat.

One of Tufte's key theses is that good information graphics "maximize the data-ink ratio" (The Visual Display of Quantitative Information (VDQI), page 105). That is, effective graphics show a lot of data with only a little ink (or only a few pixels, as the case may be). Related are the principles "Erase non-data-ink" and "Erase redundant data-ink" (VDQI, page 105). I have been trying to follow each of these rules for the map editor. Avoiding redundant icons and uninformative embellishment has been relatively easy -- I simply have less work to do! Packing in useful information is a bit harder. One way to condense the presentation is to make each stroke multi-function. I've tried to apply this idea to the grid in the editor: it shows both the plane of locked movement and it shows the snap lengths. Further, so as not to clutter the map with redundant information, the grid lines fade away after a certain distance, having served their purpose. And, the fade out of the grid is also meant to multi-function. To me it urges motion, as the fading lines thin out and point like needles.

The editor grid display multi-functions.

Micro/Macro Readings

Stem-and-leaf plot of volcano heights. A histogram of heights is built out of the actual full listing of all 218 mountains' heights. Copied from The Visual Display of Quantitative Information, page 140.

One particularly interesting way to create dense graphics is through what Tufte calls micro/macro readings. These are graphics that convey one layer of information on a micro scale and another layer on a zoomed out, macro scale. One nice consequence of this technique is information is consumed hierarchically. The viewer may glance from a distance to observe an aggregate trend, and later peer in closely to examine individual pieces of that trend. Stem-and-leaf plots provide a good example of this technique. In these plots, numbers become the 'pixels' that graph the data, and these numbers carry micro-scale information. Tufte quotes John Tukey, the inventor of these plots: "If we are going to make a mark, it may as well be a meaningful one" (EI, page 46).

I have only just begun to think about micro/macro readings for the map editor (any suggested uses are welcome :)), but I can share one simple effect along these lines. The latest cursor, which changes according to what the user is doing, can be viewed as a micro/macro graphic. On the large scale, the cursor serves to locate the mouse, and on the small scale, the cursor both indicates the tool selected and suggests how that tool should be used.

The rotation icon locates the cursor and, on a smaller scale, also indicates what the user should do with it.

Color

Natural color palettes. Photos by Gretchen Garner, A Grove of Birches. Copied from Envisioning Information, page 90.

Yet another way to create data-rich strokes is to give them multiple feature dimensions. For example, color provides a nice addition over black and white. With color we have at least three perceptible dimensions, but we have to be careful how we choose these. Computers tend to parameterize color with red, green, and blue (RGB). Unfortunately RGB is not easily visualized by humans. For example, try it yourself: which is more blue, pale pink or bright yellow? When mixed with other colors, blueness is hard to identify. For a more perceptually salient parameterization, artists often use hue, saturation, and value (HSV). HSV describes the familiar color wheel, which actually becomes a color cylinder when value (i.e. brightness) is added as the height dimension. Angle parameterizes hue and radius parameterizes saturation. Thus, HSV provides three useful dimensions of information, since each dimension can be visualized independently.

Tufte of course has ample advice for color use. Two lessons I've extracted are to use bright colors sparingly (only for important content), and to choose a color palette drawn from nature, as these tend to be easily digestible. With regard to these lessons, I am exploring use of bright colors to hightlight only the most important actions, and for less important selections I'm shifting toward a more subdued palette of blues, greens, browns, and grays (though the colors are still awfully bright in the screenshot below).

Group color conveys information. Exactly what information is still something I'm experimenting with... Here, hue indicates the number of subgroups within a group.

For editors, it's relatively straightforward to apply principles of information design. But what about for the game itself? One thing I've liked about David's past games is he always paid close attention to concise, multidimensional, visceral feedback. For example, in Lugaru, health was conveyed by character posture, screen dimness, and motion blur -- these are high impact channels that most games either leave empty or else fill with data-thin binary shifts. I think David's techniques were effective cues to orient and involve the player.

What do you guys think? What are good ways to provide salient feedback in games and/or editors? Can you think of any games that have excelled at information graphics? Is empty (but fun) decoration a fine thing to have in games, or should Tufte's principles of information design be more rigorously applied?

Another week, another alpha. Here is what is new in Overgrowth this week.

As usual, we have fixed a number of bugs, tweaked some stuff, and implemented some new features. Aubrey has created even more art.

Going through our svn the past week, here are a few highlights:

- Better graphical feedback for editor
- Improved feedback grid
- Lighting changes on the selected faces
- New icon when rotating and new handle line
- Fixed compression artifacts in the sky
- Added support for uncompressed textures via _nocompress tag
- Add skybox saving and loading
- FTGL replaced with webkit text

We have also finished migrating the forums and blog to a fancy new dedicated server! Also, be sure to watch the map editor tutorial.

P.S. I am going to open a public bug tracker for Overgrowth this week. Does anyone have any suggestions for which software to use? We use Trac internally, but I would really like something light weight and easy to use like Google Code. Unfortunately Google Code only allows open source apps.