Don't mean a thing if you ain't got that swing...in Spider-Man
We can't get enough of Marvel's Spider-Man from Insomniac Games.
After a wider-ranging chat with game director Ryan Smith on Gamasutra's Twitch channel, we followed up with more questions specifically related to movement in the game -- mainly because traversal in Marvel's Spider-Man is the fastest and most fluid of any open world game in recent memory. Smith explain's the art of web-slinging design in his own words.
Edited for clarity.
"Literally the first thing we started working on"
We started from a few core principles: we knew the webs had to attach to buildings, and we knew we needed to have a physics-based swing. It needed to be like swinging, not flying. We also wanted to push to make it as accessible as possible – we wanted people to very quickly feel like Spider-Man, but feel like an even greater Spider-Man over time.
Swinging was literally the first thing we started working on for the game. We did initial prototypes in grey-box levels, starting with the core pendulum physics and learning about how the player would interact with the web. We worked on steering and web-line connections, and what that meant for swinging physics – for example, lines that go out to the side cause you to turn, while lines that go more vertical let you swing more straight ahead.
"Taking the system from something that developers could play to a traversal system that met the goal of making all players feel like Spider-Man was a multi-year process of iteration, getting feedback, adjusting, simplifying, and finding the right next step to improve the system."
After we had a playable swing, we started looking into the other types of traversal we’d need to have. This meant adding the web-zip move that could help you quickly change direction. We also added environmental interaction like the ability to zip to certain points – such as lamp posts and water towers – and then to spring off them for boost in momentum. Having these different abilities enables the player to move through different types of spaces and to change up the rhythm of traversal.
We also had major development work to get an expressive camera system – a camera that helps you feel the action. This meant custom camera control code for being on the swing line to roll the camera slightly based on your web connection, and other camera behaviors to really emphasize the boost in speed from the web-zip and other point-launch moves. We built additional features into the camera to really amplify the sense of speed through visual effects and FOV adjustments.
We did a ton of playtesting and iteration – internally and informally at our desks as well as in the PlayStation user testing labs with large groups of players. Taking the system from something that developers could play to a traversal system that met the goal of making all players feel like Spider-Man was a multi-year process of iteration, getting feedback, adjusting, simplifying, and finding the right next step to improve the system.
So many of our iterations were focused around smoothing the connections between all of our traversal moves, enabling the player to build and maintain momentum through traversal. Smoothly connecting from a swing into a wall run, and then transitioning back off the wall – these connections made a huge difference. Working on web-line releases, where your momentum is carries you further forward or further upward depending on where you release, was another key element of blending physics and player control to get the best swinging experience possible.
Designing for speed in the air, speed on the ground
To establish our swing speed, we built some city areas with detailed geometry that had real-world scale, so that we could establish target speeds that would really give the player the sense of motion in the world. Then we pushed our streaming technology to support those detail levels in the city – the scale cues are so important – and established budgets for our assets so that we could maintain that speed across the city. Our tech and environment teams did a great job optimizing our world streaming to support the high-speed traversal.
We definitely expected players to spend most of their traversal time swinging, zipping, and wall-running through the city. However, Spider-Man is an acrobatic hero and we knew he needed to be agile on the ground as well.
We wanted a parkour run that could take our hero up and over almost any obstacles. To keep this believable and make our animations feel grounded, we knew we didn’t need to keep up with the swing speed – but we still tuned the speed to help you feel like an athletic super-hero. Additionally, our open world is highly detailed and dense with pedestrians and traffic, so we added special handling to help you smoothly traverse over cars and through groups of pedestrians.
#blocktober "Wheels Within Wheels" 1/3— Timmy Jordan (@mrtimmyjordan) October 22, 2018
We drew disparate design elements from real world shipyards to form this multipurpose combat space. Design on #SpiderManPS4 was all about creating spaces that embrace New York City just as much as Spider-Man's own extraordinary abilities. pic.twitter.com/vHeBw9YtD3
When swinging isn't fast enough...
Fast travel was something we always expected to have, at some level. We had to be player-centric, and we knew that no matter how easy and fun it was to traverse swinging a city the size of our Manhattan – which we wanted to feel significant – that a fast travel system for player’s convenience would be necessary.
Our subway-themed fast travel vignettes came about as a terrific collaboration that wasn’t entirely planned. Two Insomniacs -- Josue Benavidez (designer) and Steve Ryder (animator) -- worked together to come up with an idea that made fast travel feel unique and charming. When they shared it with the team, it was a great moment where we realized that they’d hit on an approach that gave us a great opportunity for humor and story-telling, and it was a very welcome surprise for many of us.
#Blocktober - Hell’s Stacks. This was the first space I designed when I was hired onto #SpiderManPS4 in early 2017. This location ended up being used for the Electro / Vulture boss fight. pic.twitter.com/u8pP5M0UYX— Shane McCloskey (@shanemccloskey_) October 17, 2018
Building a "real" city alongside swinging mechanics
The city and the web-swinging mechanics were developed together to get the best possible experience. We looked at building heights and street widths to get the optimal swing connections, and we also set metrics for typical building lengths, so that we had a good balance of realistic building sizes and a dynamic feel to the buildings as you are swinging by.
"We looked at building heights and street widths to get the optimal swing connections, and we also set metrics for typical building lengths, so that we had a good balance of realistic building sizes and a dynamic feel to the buildings as you are swinging by."
We knew it was critical that webs attach to buildings – if you don’t have something to swing from, you can’t swing. Architecturally, there are major height differences in the different districts of Manhattan. For example, the Financial District has skyscrapers and some pretty huge open spaces between them; Chinatown has larger swathes of lower buildings; and of course Central Park has almost no buildings! We had to evaluate the traversal system in all of those spaces, and that’s why having moves like the web zip and point-launch to help connect between swings or over lower building roofs was so important.
Our Manhattan is meant to be the Big Apple as you’ve always imagined it, so the location of key landmarks and major streets should be correct relative to one another. However, we crafted our streets so that you don’t get as many long straight roads as you see in the real Manhattan. Instead, your swing will carry into the blocks of buildings, which are then in turn sculpted to have height variation and through-ways for swinging that get you traversing between and over buildings, getting up close and personal with Manhattan as only a web-slinger can.
We wanted to have a very realistic and believable Manhattan. We also added special handling for fire escapes – when you wall run through them horizontally, you’ll play a special animation to keep you moving smoothly over them, and we have custom vertical approaches too – and special support to help you wall-run up and over the awnings and signage that covers the street level of many buildings in the city. These traversal mechanics help bring a real-world feel to Manhattan while keeping the player experience smooth and flowing.