GameDev

How web-slinging works in Marvel's Spider-Man

How web-slinging works in Marvel's Spider-Man

Learn: Profession Game Designer from scratch to PRO

Learn more

A key feature of 3D Spider-Man games is the web-slinging mechanic, which must combine realism and excitement. Players expect traversing the city to feel intuitive and natural, without the need to constantly aim and manually grab buildings. Effective implementation of this mechanic creates a sense of freedom and speed, which makes gameplay more immersive.

Developing Spider-Man's web-slinging mechanics while in flight is a complex task. Since the character moves in the air and is subject to vertical oscillation, it is important that the search for suitable objects to grab onto with webs is carried out automatically. This will ensure a smooth gameplay experience. However, it is also necessary to implement control elements so that the player can direct Spider-Man's movements and avoid collisions with obstacles. The optimal combination of automation and control will create an engaging and dynamic gaming experience.

The developers of Marvel's Spider-Man, released in 2018, achieved outstanding results in creating a game that captured the attention of players and critics. In this article, we will examine the main aspects that contributed to the success of this game.

One of the key reasons for this success is the high level of development of the game world. The New York City presented in the game is filled with detail and atmosphere, allowing players to fully immerse themselves in a unique atmosphere. In addition, the developers paid close attention to the control mechanics and combat system, which made the gameplay more dynamic and engaging.

The storyline also plays a significant role in the success of Marvel's Spider-Man. The game offers a deep and emotional story that touches on the personal experiences of Peter Parker and his confrontation with famous villains. This allows players not only to enjoy the gameplay but also to empathize with the main character.

The use of modern technologies, such as high-resolution graphics and improved animations, made the game visually appealing and realistic. This attracted the attention of both comic book fans and new players.

Thus, Marvel’s Spider-Man has become an example of a successful game thanks to its well-developed world, captivating storyline, and high-quality graphics.

A benchmark game about flying on a web

The era of 3D Spider-Man games began in 2000 with the release of Spider-Man. This game was available on all major gaming platforms of the time, but it was the PlayStation version that left the most vivid memories among players. It offered a unique gaming experience that combined a gripping storyline and innovative control mechanics. Spider-Man not only became a milestone in video game history but also laid the groundwork for future superhero projects, setting expectations for comic book-based games. The game didn't feature a full web-slinging simulation. Technically, it worked like this: double-tapping the jump button caused Spider-Man to leap and begin moving forward in the air. The animation created the illusion of swinging on a web, but the web itself shot upward beyond the edge of the screen. The developers didn't specify what it might be attached to in the air. As a result, the web was perceived more as a cosmetic element than as a real tool of movement.

Screenshot: Spider-Man game / Neversoft

This game had a unique feature: the player could not change the direction of flight, but only interrupt it. Despite this limitation, it remained an outstanding Spider-Man title. The game effectively created the illusion of web-slinging, making it particularly appealing to superhero fans. This combination of simple controls and deeply immersive gameplay allowed players to feel like true heroes striving for freedom and adventure in an open world.

Spider-Man: The Movie Game, released in 2002 and based on the first film starring Tobey Maguire, utilized a similar gameplay principle. Unlike other titles, players can control the character's movement while flying, allowing them to turn left and right. This mechanic adds an element of freedom and makes the gameplay more dynamic and exciting.

Screenshot: Spider-Man: The Movie Game / Treyarch

The Spider-Man game was released in 2004 2, based on the film of the same name starring Tobey Maguire. While games based on films were often of poor quality at the time, Spider-Man 2 managed to surprise players. Developer Treyarch implemented a number of innovations that significantly improved the gameplay and brought new elements to the genre. This game not only met fan expectations but also set new standards for subsequent superhero projects. Spider-Man 2 became an example of how licensed games can be not only commercially successful but also high-quality, which subsequently influenced the development of the gaming industry.

The new game features an open world, which includes a vast city comparable in size to Liberty City from GTA 3. Unlike previous games, where players could web-sling through limited levels, now a full-fledged city is available to explore. Importantly, web-slinging is implemented for the first time using physics. The protagonist can swing on a web like a pendulum and change the direction of their movement, creating a more realistic interaction with the game environment. Players can also release the web at any time and fire a new thread, adding dynamism and freedom to the gameplay. The web is no longer just a visual effect; it is now a fully-fledged physical object, the length of which determines the character's movement. This innovative mechanic significantly enriches the gameplay and makes it more engaging.

In this version of the game, the web actually attaches to buildings, significantly affecting maneuverability and speed of movement through the city. The attachment point determines the flight trajectory, allowing the player to more precisely control their movements. Furthermore, it is now possible to simultaneously release two web threads from both hands, allowing you to hover in the air and survey the surroundings or prepare for the next move. This mechanic adds a new level of strategy and freedom to the gameplay, making movement through the city more engaging and dynamic.

Screenshot: The Amazing Spider-Man / Beenox game

The web attachment points were located directly on the buildings. Initially, the developers planned to install them exclusively on the corners of buildings, but this approach proved ineffective. As a result, a system was developed that could automatically detect and create attachment points on surfaces within Spider-Man's line of sight. This solution significantly improved his maneuverability and effectiveness in urban environments, allowing him to move more freely along the vertical and horizontal surfaces of buildings. Unfortunately, subsequent Spider-Man games inherited the web-slinging mechanics from the 2000 game. In these games, the webs often flew into the sky, and players could not see what they were attaching to. This approach is seen, for example, in Spider-Man: Web of Shadows, released in 2008, as well as in The Amazing Spider-Man (2012) and Lego Marvel Super Heroes (2013). This affected the perception of the gameplay and reduced the level of immersion, as players did not feel the realism of movement.

Screenshot: Marvel’s Spider-Man game / Insomniac Games

Released in In 2018, Marvel's Spider-Man, developed by Insomniac Games, became the second Spider-Man game after Spider-Man 2 to feature realistic, physics-based web-slinging. In 2019, the team presented an hour-long talk at GDC detailing their achievements in this area. In this article, we'll explore key aspects of the movement mechanics that made gameplay more engaging and realistic.

How to Choose a Web Attachment Point

When developing the movement mechanics in Marvel's Spider-Man, the team aimed to address several important issues. The top priority was creating physically plausible movement so that players would feel like real superheroes sprinting between the skyscrapers of New York City on a web. This not only helped to convey the atmosphere of the city but also made the gameplay more engaging and realistic. The developers focused on creating intuitive controls that would maximize the effect of free movement, allowing players to enjoy dynamic moments and exciting stunts.

Webs should be able to latch onto objects in the game world, not just imaginary points in the sky. The player should focus on gameplay without thinking about the flight mechanics. They should be intuitive and easy to understand, allowing the player to simply enjoy the game and use its capabilities.

We aimed for players to focus solely on their flight directions, rather than on hooking methods. This approach allows players to devote more attention to other aspects of gameplay, including pursuing cars and dodging bullets and missiles. This creates a more immersive and dynamic gaming experience.

Doug Shehan is the lead programmer on Marvel's Spider-Man. His contributions to the development of this project played a key role in creating a high-quality gaming experience that has received acclaim from both critics and players. Through innovative technology and attention to detail, Doug Sheen and his team were able to implement unique mechanics for movement and interaction with the surrounding world. Marvel's Spider-Man has become a benchmark for action games, and Doug Sheen's work is a big part of that success.

Screenshot: Marvel's Spider-Man / Insomniac Games

Initially, the developers experimented with a web-attachment mechanic for buildings using an array of invisible raycasts that Spider-Man directed in different directions. This approach allowed for precise targeting of web-attachment objects, creating a realistic and engaging gameplay mechanic. As a result, players could enjoy dynamic movement through the city, adding depth to the gameplay and enhancing interaction with the environment.

The raycast functioned as a "comb" of the surrounding space ahead. If one of the rays reached the point designated for web-attachment on a building, the web would successfully capture it.

This approach had a significant drawback. The length of each ray in the game world was approximately 50 meters. Even with a large number of rays, at a certain point their distance from each other increased to 20 meters. These gaps meant that the beams failed to detect web attachment points on small objects like flagpoles and radio towers, as well as on larger structures like buildings. Building corners, which provided ideal web attachment points, allowing Spider-Man to easily navigate adjacent streets, were particularly frequently missed. This drawback significantly reduced the character's movement capabilities and affected the gameplay.

Screenshot: Marvel's Spider-Man / Insomniac Games

Ultimately, the use of a ray array had to be abandoned. While they are still used, their importance in finding web attachment points has significantly diminished. Instead, the developers implemented the concept of an invisible geometric shape that precisely follows the outline of each building. This shape contains numerous attachment points for the web to latch onto. When the Spider flies past such a building, the program instantly receives information about all available attachment points. It then selects one for further use. This approach significantly improves the search efficiency and optimizes the web attachment process.

A procedural city generation system, implemented using Houdini, distributes the attachment points along the walls of buildings. The game features a New York City consisting of 8,300 buildings, which was not created manually by the developers. All buildings were originally simple primitives—cubes and cylinders. Procedural generation adds details such as windows, cornices, and water towers. When changes are made to buildings or streets, the system automatically updates the web attachment point layout. This allows for the creation of a realistic and dynamic urban landscape that reflects the complexity of real New York City.

Screenshot: Marvel’s Spider-Man game / Insomniac Games

Now, with multiple attachment points on buildings, the game needed to choose the one to which the next one would attach thread during flight. Optimizing these attachment points allows players to effectively manage movement and achieve new heights in gameplay.

The player determines the character's direction of movement, and the system uses this vector to construct a line segment several meters long. This line segment is then rotated a certain number of degrees, simulating the hypothetical direction of a web shot. Since Spidey shoots webs not only forward but also sideways, a point is formed at the end of the line segment, which serves as the basis for subsequent calculations.

Point X is located in the air between Spider-Man and the wall. The program analyzes the surrounding space and determines the two closest points on the building: point A, which is closest to point X, and point B. This algorithm allows for efficient simulation of character movement and interaction with environmental objects.

Point B is the end point of a segment on the building, which this segment reaches if extended.

Infographics: Maya Malgina for Skillbox Media

Point A is the optimal choice when moving along the wall of a building in the game. Point B becomes relevant when a direct hit to a given location is required. Depending on the player's direction of movement, the game automatically determines which point is more suitable or calculates an average value between them. This approach ensures smooth and precise control, significantly improving gameplay.

There is one important point: the system can detect similar points on other buildings. The question arises: how, from a multitude of such points, can we determine the one that the web will catch on in the next frame?

Screenshot: Marvel’s Spider-Man game / Insomniac Games

The rating system decides This question is answered by comparing points with each other and assigning them points based on specified criteria. For example, if the character is moving along a building, the point that allows him to continue moving in that direction receives a certain number of points. If there is an intersection with four building corners ahead, points are awarded to the point on the corner that allows a turn onto a perpendicular street. The point with the highest number of points becomes the attachment point for the web. This ensures more natural and intuitive character movement in the game space.

How to control speed

The developers had to solve the complex problem of controlling Spider-Man's speed while flying. Unlike Superman, his movement does not represent a typical flight, but rather resembles jumping between various objects. This unique mechanic adds dynamism to the gameplay and requires precision and reaction from players.

From a physics perspective, Spider-Man's flight speed depends on gravity. As he moves downward, his speed increases when he grabs a web. While ascending, his speed decreases. This dynamic interaction with gravity plays a key role in his maneuverability and ability to navigate urban landscapes effectively.

However, there is a problem: if Spider accelerates too quickly, the city will not be able to load new areas quickly. Therefore, the maximum speed was limited to 30 meters per second. This limitation ensures the stability and smoothness of the system, which is critical for high-quality interaction with the game environment.

As Spider descends, the system artificially slows his movement. Players are unaware of this thanks to visual effects that create the illusion of increasing speed. In reality, Spider moves slower than he perceives. This technique helps maintain interest and dynamism in the game, making the process more immersive. Visual effects play a key role in creating this deceptive sense of speed, which in turn improves the user experience and promotes player engagement.

Infographics: Maya Malgina for Skillbox Media

When Spider-Man climbs the arc When Spider-Man moves upward, he is affected by gravity, which slows down his movement—exactly what the player expects. However, the developers implemented an interesting technique, allowing the character to maintain speed for longer, making his movements more similar to the effect of flight. This adds dynamism to the gameplay and enhances the feeling of freedom in moving around the game world.

Challenging flight controls

After the developers figured out how to attach the web to buildings and the mechanics of how Spider-Man gains speed, they encountered a number of difficulties unrelated to technical aspects. These problems were identified during testing. The first players noticed that, contrary to their expectations, they could not move on the web in a strictly straight line, which caused some frustration.

The laws of physics affect Spider-Man's movement, pulling him to the point where the web is attached. This creates a zig-zag effect in his movements. If Spider-Man existed in real life, his movements might actually look exactly like this—with constant left and right sways. This approach to movement would allow him to effectively maneuver around obstacles and maintain balance, making him a character that is not only interesting but also physically believable.

This is roughly what Spider-Man's original trajectory looked like. He was swept left or right, depending on where the web latched onto. Infographic: Maya Malgina for Skillbox Media

Players tried to move along the center of the street, but they were constantly distracted by the force of their attachment points. They tried to straighten their course, but the next attachment point ended up on the opposite side, pulling them sideways again. This created palpable frustration. Moreover, the zigzagging movement significantly slowed their speed on the straight section, and the players felt they couldn't achieve the momentum needed to advance successfully.

Doug Sheen is the lead programmer on Marvel's Spider-Man. During his professional career, he played a key role in the development of one of the most popular titles in the video game industry. Thanks to his efforts and expertise, the game achieved high-quality graphics and immersive gameplay, making it a favorite among comic book and video game fans. Doug Shehan continues to make significant contributions to gaming, inspiring a new generation of developers and players.

The developers solved the problem by moving the web's attachment point from the wall of the building to the center of the street. Visually, the web continues to appear attached to the wall, but its movement is calculated from a point in the middle of the street. This allows Spider-Man to constantly move along the center of the street. Thus, in Marvel's Spider-Man, the web actually clings to the sky, as in most previous games about the character. Players are unaware of this, since it visually appears to cling to the wall.

When Spider-Man clings to a corner, his attachment point remains on the wall. This ensures natural turning and realistic movement. Without this element of interaction with the environment, maneuvers would appear implausible. Correct placement of the attachment point allows you to create the effect of a real superhero who masterfully uses surrounding objects to perform acrobatic stunts.

To make Spider-Man fly in the middle of the street, the point around which he swings was moved further from the wall of the building. Visually, the web remained attached to the building itself. Infographic: Maya Malgina for Skillbox Media

Another issue arose when the player, while moving along the street, rose to roof level. During testing, it was discovered that at this point, the player lost the ability to swing normally using the web. This occurred because effective swinging requires an attachment point located at least slightly above the player.

To ensure flight stability, the developers raised the attachment points above roof level. Visually, the web still clings to the cornice, but Spider-Man swings around a point located above the building. This change improves maneuverability and allows the character to move more efficiently around the city, while maintaining realistic animation.

The attachment point for the web near the roof was actually slightly higher. Infographic: Maya Malgina for Skillbox Media

The problems didn't end there. During testing, players were overly aggressive in controlling Spider-Man's flight, which led to frequent collisions with obstacles. When attempting to turn corners, they often crashed into the corner itself. As a result, the developers had to implement a system that seamlessly adjusted the flight trajectory to improve the gameplay and make it more comfortable for users.

The game scans the space in front of the character using beams. If an obstacle appears ahead, Spider-Man automatically shifts left or right. Players may feel like they're masterfully controlling the web-slinging experience, avoiding obstacles, but in reality, they're only setting the overall direction.

Screenshot: Marvel's Spider-Man / Insomniac Games

The issue with ledges was solved in a similar manner. Players would sometimes collide with ledges when attempting to fly over building rooftops, as the web's length was too long. A possible solution would have been to add a feature that would allow for web length control during flight, but the developers didn't implement this option. Instead, the game implemented a system that scans the space in front of the player. If it detects an obstacle that can be flown over, it automatically and gradually shortens the web's length, ensuring safer movement.

The game implements a web-shortening mechanic, allowing Spider-Man to maneuver effectively in urban environments. When flying over streets, the hero always has the ability to avoid collisions with the ground, traffic, pedestrians, and other obstacles. This ensures safe movement and creates a sense of freedom in the game, allowing the player to focus on dynamic action and exploration of the surrounding world.

Web-swinging in Marvel's Spider-Man is one of the most impressive elements in the Spider-Man games. The illusion of flight created looks very realistic. The web clings firmly to objects in the environment, rather than abstract points in the sky. The developers also paid attention to detail, ensuring seamless movement through the highly detailed city, avoiding collisions with obstacles. This makes the gameplay more engaging and dynamic, giving players the opportunity to enjoy freedom of movement in the Marvel world.

Game Designer Profession from Scratch to PRO

A game designer creates the structure of a game. They think through the idea, rules, gameplay, and decide what emotions the plot will evoke in players. You'll master game design principles from scratch and learn how to work with popular engines like Unity and Unreal Engine. You'll learn how to retain player interest and monetize your games. And we will help you start a career in the gaming industry.

Find out more