January 28, 2008 // 9:54 pm
- For Fallout 3 we sought to create an interface system that was functional, unique and entertaining. The core of this is the Pip-Boy, a classic element of the series that exists as both an important object in-game as well as the player's primary method of interacting with his character.
This diary entry will provide some insight into the process that a team of artists, designers and programmers undertook to create and implement the Pip-Boy 3000.
The basic parameters for the industrial design of this piece of hardware were simple. It was decided early on that the device would be worn on the player character's arm and feature a display of some sort. Along with the design of the Vault Suit, the Pip-Boy was one of the first things that our resident conceptual artist and creative genius, Adam Adamowicz, began to sketch.
We went through pages and pages of drawings, iterating every little detail, in order to lock onto something that looked interesting and also seemed plausible from a realism point-of-view.
Inspiration came from both commercial product design and military industrial design of the 1950's to early 1960's. Elements from items such as old portable television sets and army field radios were studied and incorporated in some fashion along the way. As with all of Fallout 3's industrial design, a careful balance of realism, future-retro-style and practicality was sought in the final product. In terms of realism, it's not an essential factor, but a sense of believability within the rules as defined in the Fallout universe is important.
Technology in the world of Fallout 3 is somewhat paradoxical in that it's incredibly advanced in some ways, and downright primitive in others. Certain technological advancements that we take for granted in our own history either did not occur, or developed along a very different path. Miniaturization is one example; yes, the fact that a device with the capabilities of the Pip-Boy could be made at all is amazing, but it's still a rather bulky and heavy lump of hardware. It uses a monochrome cathode ray tube, there are no flat LCD/Plasma/OLED screens. Its housing is cast out of a metal alloy, not plastic. And it's an ergonomic nightmare. But all these qualities give it character, and this was an important aspect of the design, as the Pip-Boy is almost a character itself.
After much iteration the design was eventually narrowed down to a basic look. Once Adam's drawings all start looking too similar we know we've honed in on the most likely design. The device clamps on the user's arm, fastened via bolts (which implies that it doesn't come off very often.) It prominently features the aforementioned CRT display, hooded to prevent glare from the hot wasteland sun. There are various buttons and knobs, slightly oversized to facilitate handling with a gloved hand. The grill indicates that the circuitry within can get pretty hot, and proper ventilation is required. Also note the gloved hand with a control-box mounted on the back, it has a large knob and coiled wire connecting with the main unit. That knob is the primary controller for the user to manipulate the on-screen cursor. The overall design isn't too over-styled, as this is meant as tough piece of field equipment.
At this stage we moved on to mesh-building. Often times we draft more detailed, blueprint-like drawings before passing a design to a production artist, but sometimes its left rough so that there's some flexibility to experiment in 3D.
Creation of the Model
Now that we had a pretty good idea of what the Pip-Boy looked like, it was time to build the model that would eventually appear in-game. As with most hardware-based game assets, the artist starts with the high-poly version of the mesh. This is usually the most fun, since he doesn't have to pay any attention to poly-count. The goal is to refine the design in 3D, with every single detail fleshed out. This is our virtual maquette, something the creative staff can study to make comments on and the artist can tweak until just right. The result is spiritually close to the concept drawings, but has been tweaked to read better in 3D, given factors such as camera FOV, screen real estate issues, etc.
The lower-poly, game mesh is then built. Without getting into too much detail of the art development pipeline, we use the initial high-poly model to generate a series of normal maps which provide all the detail of the original with the efficient mesh construction of the final, in-game model.
The texture of the device was critical. It certainly isn't brand new when the player acquires it, and new models haven't been built for many years. Instead, a limited amount of prewar examples have been patched and maintained over time. So the finish is pretty worn down, paint-chipped and scratched. It took several tries to develop a color-scheme that felt right, but eventually we ended up with something not too far a field from the abstracted Pip-Boy interfaces from earlier games in the series, yellow lettering and all.
Textual User Interface
Designing the content for the on-screen display in the Pip-Boy 3000 was a challenge. There were a host of restrictions placed on the UI because of the unique nature of the hardware as imagined. We looked at old computers from the 70's to early 80's, when operating systems were text-based, interfaces were not-so-graphical, displays were low-rez, and color was a luxury many systems did not have. The Apple // was a primary influence, with its green phosphorus CRT raster scan monitor, and a 1mhz processor that couldn't quite keep up with its own frame buffer. The UI would have to be simple. No overlapping windows, few icons, and only basic animation capabilities.
Given these parameters, a UI design evolved that was primarily text-based. The only iconographic element would be the 1-bit representations of the various Vault Boys. These icons show up throughout the menus, providing humorous and descriptive imagery that accompany all of the stats as well as every item in the game. Natalia Smirnova illustrates each icon, a monumental task given the shear number of variations that exist. Part of the fun is just scrolling through the menus to find every Vault Boy example.
Other than Vault Boy, the interface is primarily text and numbers, with brackets to visually segment the many sections of the layout. Despite the sheer amount of information that needs to display within limited screen real estate, the minimal UI and smallish font present a clean and functional appearance, with zero ornamentation to get in the way of the data the player needs.
The biggest creative battle fought was to keep the Pip-Boy's screen monochrome, as adding a dash of color was often an easy solution to a usability problem. But color in UI design is often a crutch and not to be relied upon, plus it would have disrupted the purity of the concept. So we found ways around it, often forcing us to improve the layouts in the end.
A design doesn't become an interface until a skilled team of programmers enters the picture. That team consists of Erik Deitrick, Ricky Gonzalez and Dan Teitel, a group whose forte is translating a host of conceptual UI mockups into functional menus. It's a complex task given the fact that no interface makes it from concept to reality without a substantial bit of tweaking and refinement.
A good interface must evolve as it's used and tested, and the best idea on paper can often just plain "not work" until it's gone through this process. Luckily, the interdisciplinary dynamic between art, design and tech is tight and functions well. This is particularly invaluable when the artist is asking the programmer to move a button "3 pixels up, 2 to the left" until everything lines up just right. Or when a screen is completely scrapped if a better idea comes along.
We knew from the very beginning that we wanted the Pip-Boy to exist as an in-game object, on the player character's arm, and not fake the transition to the actual menus. On hitting the menu button the player character's arm raises into view, filling the screen with a close-up of the device. It never switches to an alternate model or mode, the effect is seamless and stunning.
However, in order to really sell the illusion, the Pip-Boy's screen needed to be convincing as an old glass tube. Orin Tresnjak was instrumental in devising a method to project the menu displays on the curved geometry of the screen, instead of simply overlaying UI graphics above 3D geometry. In addition, he created a series of imagespace filters and effects that transform the UI into a wonderfully authentic reproduction of that early Apple // monitor we were inspired by. Raster lines, a slight flicker, loss of vertical-hold when switching modes, these are examples of the sort of attention-to-detail that was lavished on the Pip-Boy 3000, to transform it from a simple object to a virtual prop that looks and feels as tactile and real as an actual physical prop.
The Pip-Boy 3000 isn't done yet. It's a work-in-progress that continues to evolve as we improve it, adding features and refining existing ones. The hopeful end result is that when the player activates the Pip-Boy, immersion isn't disrupted. He hasn't stopped playing the game in order to check something in a menu. But rather, his character has simply paused and looked down to fidget with his personal analog assistant for a moment, still in the wasteland.
1. If the player's in a dark room, only the green glow from the screen illuminates the Pip-Boy. The model is lit realistically within the current environment. In fact, the Pip-Boy can serve as a source of light when none is available. Its screen can be switched to a special over-bright mode, illuminating the immediate surroundings in a greenish glow. This can be quite handy at times.
2. Late in the design we added a physical radiation meter to the top left of the Pip-Boy's faceplate. The needle vibrates upwards as the player character absorbs rads. Given the reality that radiation is a major factor in survival in the wasteland, we wanted to make sure the rad-level was always visible at-a-glance, regardless which screen the player's in.
3. Once the Pip-Boy was working in-game, there was something missing. The animation of it coming into view was dynamic, the screen effects were great, but the whole thing felt too static, as if time had frozen. Indeed, time does freeze, but that's for practical gameplay issues, it's not desirable visually. The solution was to add a very slight constant idle motion to the Pip-Boy, the sense that the player character is breathing, his arm not perfectly steady. Josh Jones, our animation lead, spent a good deal of time tweaking the motion so that it was subtle and apparent, but not annoying in the least. We didn't want the player chasing buttons around with their cursor.
4. Sick of all that green? The player can choose to change the color of the Pip-Boy 3000's display. Perhaps amber, like an old Dynalogic Hyperion PC. But then it wouldn't be Fallout, would it?
The final touch was to add a layer of grime and finger-print smudges to the screen, pic below and other pics can be seen at the link at the top!