Star Wars UI

* The Films
* Star Wars Games
* LucasArts Recommendations

### Classic Star Wars UI

Many of the graphics in the Original Trilogy are extremely simple monochromatic vectors. Simple clean lines, iconic shapes, and bold colours are all part of the analog look that defines classic Star Wars.

### Prequel-era UI

The Prequel era design builds on the motifs established in the classic films. There is more use of colour. Bleed, scanlines, and blur often occur on displays. Designs tend to be round or built on 45-degree angles. Episode III’s design is the closest to the Original Trilogy, and was the best aesthetic to look to for Battlefront III.

### Electrobinoculars

In Star Wars, HUDs most often appear when a character is looking through electrobinoculars. Electrobinocular displays are dynamic, updating as the character scans the horizon. They typically have an area of “focus” near the centre of the display. As with the UI elements, these displays generally rely on clean lines and round or sharply angular shapes. Scanlines, static, and analog data may all be part of the display.

### Targeting

In Star Wars, targets are often abstracted into simpler shapes. The colours are typically posterized or monochromatic. Guide lines or grids indicate the centre of the targeted area.

Sometimes filters or overlays are used to “pop” a target against a background. The technique was used to great effect in Rogue Leader and Rebel Strike when the player activated the “targeting computer” overlay.

There are not very many examples of crosshairs in Star Wars. Zam Wessel’s binoculars and sniper scope may be the best. While the design is visually very busy, the interesting thing to note is the way the reticle zeroes in on the target. This could be an interesting effect to emulate for Lock-on.

In the classic trilogy, crosshairs are very simple.

Star Wars games have had mixed success in capturing the look and feel of the films in their UIs. Below are some examples.

### Rogue Squadron series

The Rogue Squadron series uses a fairly minimal HUD that is very much keeping in line with classic elements. However, it did not always do a very good job of providing the player with critical information such as the status of their shields. The mini-map was good at orienting players towards objectives, but could be extremely difficult to interpret when looking for enemies in 3D space. The coolest feature of the Rogue Squadron HUD was that it folded seamlessly into the cockpit view if the player switched to first-person mode, and it included a targeting computer that would “pop” targets and objectives.

### Battlefront series

The shapes and iconography used in BF1’s HUD were definitely more “Star Wars-y” than those in BF2. However, players were not always clear on what the icons meant. On the PS2 and the Xbox, the HUD elements at the top of the screen took up quite a lot of space. In BF2, the HUD elements were consolidated into the lower left, leaving more room on screen for other in-game information. While the information was now more readily accessible in one spot, it is debatable whether it was any easier to understand.

### Jedi Knight series

The Jedi Knight series uses the round shapes and analog look common to many Star Wars interface elements. It uses clean, bold colours, and a Rebel colour palette of earth tones and gun metal. Health, shields, Force powers, and ammo, are depicted both graphically and numerically in these HUD elements.

### Clone Wars

Clone Wars makes uses of wireframe/vector representations of vehicles and gradient bars, an element that was very common in Episode I. The overall shape and iconography of the interface elements does a good job of capturing the feel of the vehicles seen in Episode I and II. Where it is less successful is in the size and placement of these elements, which often obscure the action in the lower part of the screen.

### (Jedi) Starfighter

The Starfighter series is very much rooted in the Prequels, and, as such, borrows from Episode I and II’s design and colour palette. Again, we can see the round shape, vector lines, colour bleed, and gradients that are common in the Prequels. Overall, the UI elements are rather large and busy-looking. They succeed in looking Star Wars-y, but they are somewhat over-designed for gameplay purposes.

* Keep the HUD elements simple.
* Use Star Wars motifs. Clean lines, circles, 45-degree angles, and simple curves.
* Use Star Wars visual effects where appropriate. Grids, scanlines, static, colour bleed, and gradients.
* Use iconic shapes, wireframe, and “hologram” versions of vehicles and structures wherever possible. In the films, you never see a photo-realistic depiction on a display.
* When looking to film reference for inspiration, focus on the simplicity of the Original Trilogy and the richness of Episode III.
* All HUD elements should change in some way when they are trying to get the player’s attention, e.g. health bars change colour and animate as damage is taken, weapon icons noticeably switch when the weapon is switched.
* Some HUD elements may not need to be on screen at all times. Some may expand when attention is needed and contract when the information is not needed by the player.
* Use metaphors from the Star Wars universe to enhance gameplay (e.g. see the targeting computer in the Rogue Squadron series). Zam Wessel’s targeting reticule and the electrobinoculars are other good examples.
* Wherever possible, try to build HUD elements into the world (e.g. maps that update in real time). Holograms of the Battlefront that reflect (roughly) the action of the battle, shields, and mini-maps in the cockpits of starfighters.
* If the choice comes down to making a HUD element more Star Wars-y or more clear, clarity should win out every time.

## References

* Star\_Warsy\_UI.pdf (04/04/2007, LucasArts)