Tom Clancy’s The Division: Augmented Reality Mockups (personal)

Weapon-lock Mockup Development Details.

Project Origins: I love Visceral Games’ Dead Space (2008). Under the direction of Lead UI Designer Dino Ignacio, it deployed a fully diegetic holographic UI that successfully integrates the player’s health, weapons and inventory with the game world. By all indications, Tom Clancy’s The Division is now striving to create a similarly seamless gameplay experience. This flavor of UI rollout significantly increases immersion, and I developed the following images to explore this style.

Developing the Mockup: In Ubisoft’s 2013 E3 gameplay trailer, the aerial vehicle seen above is one of the player character’s teammates. Here I chose to represent the vehicle as an enemy in order to explore a weapon-lock scenario: when an airborne enemy has the player character in their sights. I see it as a two-way exchange, in that having the aerial vehicle know your location would also allow your tech to better return fire. The circles near the muzzle of the player’s weapon indicates probabilities of success: in this case directed bullet fire ( a strait orange line ) has a lower chance of success then either a grenade cartridge, or a self-guided missile ( curved yellow lines ). The ring beneath the player character indicates the directional danger posed by the aerial vehicle, while the projected hologram of the plane shows weak-spots and relative health (the skull icon).

post_footerHolo-Screen Mockup Development Details

Characters in The Divison find themselves traversing post-epidemic New York City. I wanted to develop HUD elements depicting a transmission scan.

Click here for a breakdown of the transmission display.

The scan utility is in the upper-right, and includes megahertz range and signal strength. Graphs correspond to the various broadcasts themselves, with those in the visual spectrum (television signals) displayed counter-clockwise as follows:

124.3: A standard Color Bar Graph with ‘ Please Stand By ‘ added.

111.9: Static – transmission contains to data.

108.2: Live CDC Broadcast with HAZMAT-clad staffer. Blood flecks are visible near his mouth, and the news station’s team has chaotically typed out the bullet points on the left (they are self-referential, not consistently capitalized, and alarmist). The CDC press conference backdrop and the HAZMAT man were found on the web, then combined with the hope of creating an unsettling juxtaposition.

119.4: Map illustrating the number of virus infections per state. I like the idea of a television station throwing up a single static image (sans logo) as it’s staff abandon the facility. The state outlines were found on the web. Everything else was put together in Adobe Photoshop.

post_footerFloating Utility Mockup Development Details.

An alternative visual representation of the same type of transmission scanner seen above. Here I wanted to avoid the ‘monochromatic floating flat panel’ look that many in-game holograms employ, and so created disconnected 3D elements.

Click here for a breakdown of each element.

From Left to Right:

US Map: The United States is shown in the context of the Black Friday pandemic: communications with many states have dropped out entirely, while warmer areas continue to experience riots and looting.

New York State Slideout: New York State has been selected on the US Map, prompting an expanded view. A flowchart illustrates the primary data transmitters that still remain active (concentrated in New York City).

Hexagonal Beacon Manipulator: the purple hexagon is a means of ‘dialing in’ specific frequency ranges. Turning it’s central axis will choose the specific data points represented to the right.

Coordinate Wave-finder: A modified representation of sonar waves, the globe in the upper-right shows specific signals relative to the player character’s position. Flowing downward on-screen, the signal strength is then represented in waveform, before being assigned a specific data plate with corresponding manipulation-cube (lower right). The cubes themselves can be further manipulated for additional information.