Destiny 2: Monument of Triumph

Director Refresh

Director interface. The sun is depicted in the top center of the screen, while a large version of the planet Earth sits at the bottom center of the screen. Many other planets and destinations are visible in the distance. In the center of the screen is the Traveler, a large white orb with a triangular, kaleidoscoping portal on its face.

Destiny's Director interface is one of its most iconic pieces of UI: a rich mix of influences ranging from topographic maps to star charts featuring a top-level overview screen that embraces the fantasy of looking out upon the Solar System from the player's ship. Unfortunately, for a number of reasons, the new destinations for the game's The Edge of Fate and Renegades releases could not be added to the Director's overview screen.

New UI shader tech was made available to Destiny 2 during The Edge of Fate's development. Over the course of two major releases Neon and Marc Schroder scaled up and stress-tested this tech, then began prototyping new approaches to the way the planets on this screen were rendered. Soon their work produced a breakthrough that reduced the overhead of rendering planets, freeing up enough headroom to add both destinations and make visual updates to nearly every existing destination. This would be no small task, though: every destination needed work to leverage the new approach.

With the technical approach validated, the team was expanded to allow for rapid execution of the planet updates and integration of the game's Portal system into the Director. Neon tackled the Eternity and Savathûn's Throne World nodes, which required additional shader development, and handled the final implementation and optimization of the Earth itself.

Director Transitions

A critical problem with integrating Destiny 2's Portal system into the Director interface was striking a balance between the Director's “map-like” aesthetic and the Portal's more straightforward “menu-like” aesthetic. Visual Design knew they wanted to connect the two using the presence of the Earth and pitched a transition animation between the two screens that would feel like a camera swinging down to reveal the Portal: they didn't think they'd get it, but they kept it in the pitch to inform the feeling that the shipped transition should have.

Initial implementations were built that replicated the motion of the stars in the background from the pitch, but across all of them the motion of the Earth felt merely serviceable. As the deadline for locking in the release loomed, Neon pitched a solution: a few slight adjustments to the lighting treatment during the transition allowed more of the Earth to be “hidden” at the exact moment when the screens replaced each other, and a blur effect would both help sell the motion of the animation and obscure a few visual artifacts from attempting to transition one object between two separate UI screens. The final, shipped approach (depicted above) was born.

Credits

Visual Design	Dustin Thaxton, Jessica Myers
Technical UI/UX Design	Neon O'Dea, Marc Schroder, Phil Etting, Sebastien Lienard, Hannah Chang, Zoe Soroka

Eternity

The Eternity destination was added in Destiny 2's 30th Anniversary Pack to celebrate Bungie's 30th anniversary as a studio. Due to a variety of factors the visuals for this destination node ended up being a different from what the shipped destination looked like, and Visual Designers wanted to seize this opportunity to bring it more in-line with its final representation as well as the visual language of the Director interface.

Neon wrote a custom UI shader to bring their vision to life and defined the motion design for the destination node.

Credits

Visual Design	Dustin Thaxton, Jessica Myers
Technical UI/UX Design	Neon O'Dea

Savathûn's Throne World

Savathûn's Throne World was added in Destiny 2's The Witch Queen expansion, and its original implementation was built by Jason Pfitzer (who has a great breakdown of the process and techniques he used on his website).

To free up some extra performance overhead and more seamlessly implement the “pie-slice” effect Jason cooked up, Neon wrote custom UI shaders to render this destination node alongside minor visual updates to help it fit within the Director's new visuals.

Credits

Visual Design	Dustin Thaxton, Jessica Myers
Technical UI/UX Design	Jason Pfitzer (Original Implementation), Neon O'Dea

Time Bonus Visualization

A menu organized into three distinct vertical slice sections. On the left, two sets of buttons are present for selecting between 'Matchmade' and 'Customize' activity modes and selecting between available difficulties for the activity mode. In the middle, there is a grid-based UI full of selectable modifiers, represented as icons with different frames and colors based on their gameplay effect, flanked on the left by modifier categories. On the right, a difficulty section tells the player the expected difficulty is 'Normal' based on the Activity Power Cap and the Combatant Power and that there is a Time Limit of 15 minutes and 37 seconds. Below the difficulty section, a heraldic banner features a shining badge with an S rating in the middle flanking a section that displays the rewards they can expect to receive based on their Team Score Forecast of 17,800. A bar depicts their Team Score Forecast progress against the thresholds for each score rating, and at the end of the bar is a dithered section capped with a line that points down to a clock icon.

The Monument of Triumph release brought with it major changes to either simplify or better explain the scoring model for activities. One such change was related to a modifier that allowed players to achieve a “time bonus” for completing activities before a time limit ran out; this modifier existed before, but its bonus was only being calculated at the end of an activity. Lack of visibility into this bonus lead players to add more difficulty modifiers to their activity than necessary to achieve their desired rewards, which was not an ideal experience.

Neon worked closely with UI Engineers to plan and execute on changes that allowed the pre-launch score prediction engine to calculate the time limit and achievable time bonus so that they could be displayed to players when the modifier that enabled this behavior was selected.

Credits

UX Design	Anna Parmentier, Graeme Goodman
Visual Design	McKenna Morison
UI Engineering	Basil Elhindi, Ashley Kling
Technical UI/UX Design	Neon O'Dea, Zoe Soroka