DESIGNING SUPERCHARGERS' HUD
When we began development on what became Skylanders: SuperChargers, we knew only a few things:
-
New and legacy Skylanders would both be playable.
-
VEHICLES.
I can't overstate: we were simply directed to make Vehicles the big new feature of the 2015 Skylanders game. How we'd choose to do this, and whether "simply" would be a word we'd use again...that was up to us.
It was clear that Vehicles needed to be meaningful, and everything about them should be smoothly communicated. Vehicles were a fresh challenge. Adding something to an existing franchise that's done very well without it? The information carried over from previous games had the benefit of iteration; their problems were already solved. So the trick became adding new elements without them feeling like they either broke what already worked, or felt like bad bolt-ons that don't belong.
Thinking about how Vehicles would impact the HUD, I immediately had a pile of questions. Skylanders have health, so would Vehicles also? How would you prioritize that information for the player, to avoid confusion? Were there times when the player didn't need to worry about one or the other?
Because it was so early in development, there were many things which weren't yet pinned down. It made sense to present some of these questions (and possible answers) to the team, for consideration. After a few days' work in After Effects, I screened this:
I believed 2 competing systems of health - one for the Skylander, and one for the Vehicle - would get overwhelming if not handled just right. It seemed you could avoid the problem altogether by allowing the Vehicle to act as armor which protected the Skylander's health and slowed the rate of damage.
DESIGN & REDESIGN
The next steps happened independently:
Our gameplay Designers began experimenting in rough levels and testing environments, to see what balance of classic on-foot Skylander action and new in-vehicle action felt good. If you spent ALL your time in a Vehicle, the Skylander had less value; if you didn't spend enough, the Vehicle suffered.
I began mockups for an overall HUD redesign. The existing HUD from Skylanders Swap Force was large and already felt like a series of modules; adding Vehicle info to it would only take up more space and feel more complex.
Thinking about a theme for the HUD went like this: vehicles = motors = things spinning = circles.
After playing around on paper and in Photoshop for a few days, I'd worked through a series of circular concepts until arriving here:
In roughly half the space, we were able to communicate all of the same Skylander information/stats as the older games: character name, portrait, and elemental alignment; health; XP level and progress; and amount of gold collected. It's possible that if we hadn't added Vehicles, we could have shipped with something close to this.
To show people how this would feel in action, I brought everything into After Effects. I also decided to try making our HUD animate more than it ever had before: I wanted to see the HUD portrait react to gameplay, the same way the character portrait had in Wolfenstein 3D. My reasoning was that players mostly see their chosen Skylander from behind, which allowed far less of their personality to show through; making the HUD act as a window for greater expression would build affinity:
While some were excited about a 3D character in the HUD, there were significant technical challenges that made others wary: our UI layer is handled by a different rendering pass from the main view of the world (including how lighting and some of our 3D materials work). Supporting our 3D characters there would require many tradeoffs, and they hadn't even begun solving for many of the things we knew our game would need. This was less essential, and tabled.
Meanwhile, we began to hear from Design on what information they wanted to give the Vehicles...
CIRCLING AROUND AN IDEA
The word from Design was that gameplay would be divided into sections: areas meant to be handled by a Skylander on-foot, and others where you'd need to be in their car/boat/plane to get the job done.
As such, Vehicles would act as a complement to Skylanders, and would have similar but different information.
-
Skylanders have health; Vehicles would have armor that acted like a shield for the team.
-
Skylanders have a Level, and collect XP points to level-up; Vehicles might, or might not.
-
Skylanders collect Gold to buy ability upgrades; Vehicles would collect Gearbits to buy mechanical upgrades.
Fortunately, there would be almost no competition for priority on these; when you were on-foot, most of the Vehicle information wouldn't matter. For example: it wouldn't matter how many Gearbits you had when you were running around (and couldn't upgrade your vehicle); it wouldn't matter how much XP your Skylander had while driving around (where you wouldn't be collecting XP).
This meant that a similar layout could be used for each state (on-foot/in-vehicle), and there would be almost no doubling up on information. There were only two elements Design hoped to see all the time:
-
the portraits for both the Skylander AND the Vehicle
-
the amount of remaining Skylander health and Vehicle armor.
...but they added a question: could they see some HUDs that felt more like the one from Swap Force?
In the following week I mocked up many layouts (some of which are included here), which well illustrated a lot of concerns I'd been having.
Showing portraits for both the Skylander and Vehicle made the HUD immediately feel very heavy. For them each to be visually readable/recognizable, the portraits had to be nearly the same size as each other. If they were too close in size, there was a competition for attention. Too small, and it just became noise.
The horizontal layouts most similar to Swap Force's suffered from three different problems. The first problem was how to integrate a second portrait into a horizontal layout. The second was that everything grew "bandy"; there were so many things being expressed horizontally that there was difficulty establishing a hierarchy/priority of information. This bandiness caused a third problem; expressing the vehicle's armor and how it affected Skylander health was extremely difficult with so many elements packed in and around each other. Whatever we did had to be comprehensible for players at a quick glance, and these problems meant we were already failing that test.
The designs where the portrait was partially encircled by the Skylander's health began as an easy way to separate the active and inactive member of the team. Whichever (Skylander/Vehicle) was on the outside of the circle was effectively excluded from the remainder of the information. But the design was proving its worth in another way: the encirclement also created an excellent visual system for how the Vehicle's armor acted as a shield to Skylander health. The Skylander was at the center, with their health shown around the portrait, and Vehicle armor would wrap around and protect both.
We also used these mockups to ask a few questions:
-
Do you actually need to see the Vehicle expressed when you're on foot?
-
When you're in a Vehicle, does it matter enough which Skylander is driving that you'd need to see them?
-
Should you still see your Skylander's health when in a Vehicle, or only the amount of remaining Armor your vehicle provides?
In reviewing the mockups and questions with the project's Design and Art Leads, the consensus was that the circular designs were the most successful and we were all most fond of the one that's second from the bottom. We decided that it was not important to show the images for both members of the team; you'd see your Skylander when on-foot, and your Vehicle when driving. We also decided that the Vehicle Armor should physically shield the Skylander's health by overlapping it, but that the Health should stay visible.
With all that in mind, I began working on a new mockup that resolved all of these, while incorporating one last new piece: a visual style.
STYLE
Previous Skylanders games had styled their HUDs to look like the remainder of the game's menus... essentially graphic frames. I was eager to make something that felt more technological. We'd heard many times that the technology of the Skylands is quite different from that of Earth: more old-fashioned and slightly magical, rather than high-tech. Aside from a few vehicles, the only precedent we'd seen in prior Skylanders games were turrets and pieces of ancient Arkeyan technology. Mostly, they felt like a mix of steampunk and slightly amateur mechanics, viewed through a cartoon lens.
At the same time, in SuperChargers we would be refining many elements of the visual style. We'd have room to grow it up a bit. I began researching old Victorian mechanical devices of every sort: astrolabes, compasses, orreries, old microscopes and telescopes, and magic lanterns.
I loved the look of all the old brass. It develops a wonderful patina, and in the crevasses it becomes rich and dark. Adjacent pieces won't age to the same color, all depending on how it was machined and later handled and used. I wanted that.
The mechanical nature of this treatment also allowed for great animation opportunities. When switching between Skylander and Vehicle: the "coin" that held the character portrait would spin on its axis to reveal the vehicle portrait; the blue XP meter would retract and disappear; the hinged bar that displays your collected Gold would swing out of view and then swing back showing your Gearbits; and the Health bar would dim as a multi-sectioned Armor shield clasped into place around the HUD's outer edge.
I broke this up into its components, and put it into our UI tool, creating all of the animations for different functionality and handing it off to Engineering for hookup. The HUD looked and behaved like this from June 2014 until February 2015.
SUPERCHARGING
After delivering the project's Alpha build to Activision, the game was carefully reviewed and feedback returned. We also did a deep review on our end. Coming out of this, a few things began to change.
One was minor: Design determined that Vehicles wouldn't level-up the way Skylanders did. It was one thing too many.
The other would be far more significant. Until this point, "SuperChargers" was just the classification for the new Skylanders, and they could best use the Vehicles. Reviewing everything now that we were out of Alpha came the breakthrough... Now, every Vehicle would have an ideal match in a specific Skylander; even though any Skylander could drive any vehicle, if you paired the correct new Skylander and Vehicle something special would happen: Supercharging.
Supercharging would lead to a new set of HUD additions. When Supercharged, the Skylander's level would jump up and their health would go beyond maximum - they would be literally overdriven. To express this, we added an extension at the end of the health bar (only for this year's new Skylanders; legacy characters would have just the existing healthbar) which would ordinarily appear to be a brass panel, but would fill brightly with overflowing health when SuperCharged. The Skylander's level number would glow bright blue, and the rim of their portrait would glow and crackle with energy.
Finally, here's a video of the HUD in action when a Skylander leveled-up.