5 fundamentals for creating web games

Imagine offering players a quick and accessible gaming experience without barriers like mobile marketplace downloads or account signups. The ability to meet players everywhere through browsers or embedded into native applications via a web view is at your fingertips, and the possibilities with web-based gaming are endless.

Recently, we’ve seen a spike in player engagement on web platforms, especially mobile, and the trend shows no sign of slowing down. In 2023, the global browser gaming market generated approximately $15.03 billion USD of revenue. Despite the growing console and mobile gaming genres, in 2028, the segment is projected to increase to $22.33 billion USD in annual revenue.

This comprehensive e-book will help both aspiring creators and seasoned developers delve into and understand five fundamentals for building performant web games using Unity Web. It includes a behind-the-scenes look at how popular titles like Ready, Set, Cook!, Kasama: The Awakening, SquadBlast, and Project Prismatic came to life on web.

It covers the following insights:

1. Prioritize planning and prototyping

2. Build a dynamic UI

3. Create a cohesive audiovisual experience

4. Optimize. Optimize. Optimize.

5. Embrace multiple web platforms

1. Prioritize planning and prototyping

One key benefit of the web platform is the speed with which you can share your game with players around the world. However, to ensure a great experience, your game needs to be built on a solid design foundation.

Outlining a vision

Setting a clear vision helps guide a team throughout the development process. Stratton Studios wanted to push the boundaries of what could be achieved in a browser-based game from both a performance and visual fidelity perspective. Their goal was to deliver a best-in-class player experience that rivaled traditional platforms within a web environment.

“This vision was the anchor that kept us aligned during prototyping and iteration, and helped us make consistent, purposeful choices throughout development,” says Josh Loveridge, the managing director at Stratton Studios.

The first step in creating the game was to ensure they could achieve the vibrant environment they envisioned while maintaining solid performance, especially given the limitations of the mid-level hardware they were targeting. This provided a strong technical foundation for the rest of the game’s development.

“We began by building a test scene with a large draw distance, allowing us to assess whether we could render the dense foliage, varied terrain, and intricate details that were crucial to the game’s aesthetic,” says Loveridge. “Leveraging the new WebGPU graphics API, we tested the scene to make sure that it not only looked as lush as we wanted but also performed well across different devices.”

Testing from the beginning

At the outset, the ULTRAHORSE team focused on developing their main gameplay mechanics. They wanted to nail down the run-and-gun side-scroller multiplayer shooter aspect to ensure it was fun and engaging. They started with larger screens, consoles, and PCs to get the basic feel right.

“From there, we moved quickly to player testing. Even with our early beta build, we put it in front of players online via services like Antidote, and early betas at events like WASD Expo in London,” says CEO and Cofounder Anatolijs Ropotovs. ”This allowed us to validate our core mechanics and get immediate feedback on what was working and what wasn’t.”

The PIGIAMA KASAMA team echoes the idea of rapid prototyping and testing ideas early. The creation of Kasama: The Awakening began with defining the character and writing a narrative outline. They wanted the story, the protagonist, and the gameplay to connect deeply. They started by creating a simple 3D environment in Gravity Sketch VR, then moved it into Unity to build and test their main puzzle mechanic.

This hands-on approach allowed them to see if the mechanic worked well before investing too much time in it. Once they were confident in the mechanics and story, they decided to make the game a puzzle adventure, which felt like the perfect fit for the experience they were aiming to create.

“We go through multiple iterations during testing until the team feels confident the interactions work. Once we nailed the core gameplay, we moved on to concept art, making sure it aligned with the game’s story and overall vibe,” says PIGIAMA KASAMA cofounder Paride Stella.

Adapting to obstacles

As is often the case in game development, Stratton Studios adjusted their initial vision as they encountered technical limitations and discovered better ideas during prototyping.

“Refining to ensure the best possible outcome is all part of the creative process. For example, one significant change we had to make involved the level design,” explains Loveridge. ”Initially, we envisioned more open, free-form environments, but as we progressed, it became clear that this approach would not work efficiently with the hex tile occlusion culling system we were implementing.”

To maintain performance, especially in a web-based environment, they optimized the rendering process by heavily reducing topology onscreen. This led them to restructure the level design into hex tile quadrants, which helped them manage the visibility and culling better, then focused on clear choke points. This improved gameplay and ensured the game ran smoothly across a wide range of devices. The adjustment was crucial in balancing their creative vision with technical performance requirements.

While good planning may lessen the impact of challenges that arise during development, it’s important to keep in mind that this won’t prevent bumps in the road entirely.

2. Build a dynamic UI

While the web is the most accessible platform to reach gamers everywhere, not all browsers are created equal. Variations in screen size, landscape vs portrait orientation, and UI considerations for the app hosting your game are all aspects to keep in mind when designing your game’s UI.

Keeping player experience top of mind

As the Coatsink team began developing Ready, Set, Cook!, they quickly realized there was a lot they had to take into account for the UI. Early on, they were concerned with ensuring that both players and non-playing video call users could participate. They needed to refine the existing spectating functionality that consistently keeps players online while offering other users a positive viewing experience.

“The spectating experience was always top of mind for us when designing other aspects of the game,” explains Kamil Bazydlo, a junior designer at Coatsink. ”It’s not a common feature across all game genres on other platforms, but since the players are on a video call, it was important to emphasize inclusive user participation throughout the game.”

They also began looking at screen orientation early on. Since the game was initially created for desktop, it was built with a landscape orientation. When they shifted to mobile, they had to support both landscape and portrait perspectives. In Messenger, players hold their screens like a phone since they’re in a video call, so if the phone is rotated, the camera goes sideways, which isn’t ideal. “This was a huge consideration when we designed the environments to support that,” says Ross Furmidge, Coatsink’s head of programming.

Overcoming UI challenges

One of the biggest challenges the ULTRAHORSE team faced was creating a gameplay experience that would be equally enjoyable whether you’re using a mouse and keyboard, a controller, or a touchscreen. This was crucial for their vision of building a truly cross-platform game.

“Initially, we experimented with different game styles, but we found that many traditional shooter formats favored one input method over others. This is actually how we arrived at the side-scrolling shooter format for SquadBlast,” says Ropotovs. “We realized that a 2D plane allowed for precise aiming with a mouse, intuitive movement with a controller, and simple, self-explaining touch controls on mobile devices.”

An unexpected challenge surfaced as the team transitioned from PC to mobile web development. Initially, they developed a fully polished PC experience that was complete with hover mouse elements in the UX. This allowed them to create a rich, detailed interface that took advantage of larger screens and precise mouse control. They used tooltips, hover states, and more complex menu structures to convey information and options to the player.

This led to some tough decisions about what information to show and how to present it. The team had to make the UI more self-explanatory since they couldn’t rely on the hover states or complex tooltips that work well on PC. Every element had to be comprehensible at a glance, which forced them to refine the visual language and iconography.

Adjusting based on screen space

The ULTRAHORSE team also ran into hurdles when designing around touch inputs. On PC, they could assume precise cursor control, but on mobile, they had to account for less accurate finger taps and potential misclicks. This led them to make touch targets larger and spacing between UI elements more generous, which further reduced the amount of information they could display at once.

They also discovered the importance of scalable and flexible UI components. Given the variety of mobile device sizes and aspect ratios, they needed their UI to adapt smoothly to different screen configurations and DPI. This led them to develop a more robust UI system that could automatically adjust based on the available screen space. Using this process of simplification for mobile web helped improve SquadBlast’s UI across all platforms.

Rethinking game controls

Ready, Set, Cook! can be played on a wide variety of devices with different screen sizes and aspect ratios, but the game’s viewport does not stretch across the entire screen since it allocates space for elements like Meta’s video feed and platform controls. These are not part of the game application itself, so they don’t show up in the Unity Editor when devs are working on the game.

“We had to take that into consideration when placing any UI elements on the screen,” says Bazydlo. “We got the rough range of how much screen real estate is taken by these platform elements and worked with our QA team to identify what would be the most narrow aspect ratio to target.”

On mobile, the device-specific controls are on the bottom of the screen. Since the game was built with landscape orientation in mind, the team used the bottom part of the screen to display some HUD elements rather than for critical gameplay inputs.

When the title was soft launched in the U.S., the team built analytics directly into the application, which was key to identifying when players exited the game. Early on, they noticed that users were dropping off before the game even loaded.

“We saw that when the menu was a bit busier and its flow into the game was too long for users in the lobby, they would drop off quickly. As soon as they got into the game, a majority of players continued to play it in its entirety,” says Furmidge. “This was instrumental data for us, and the analytics were a big factor in a lot of our decision making.”

3. Create a cohesive audiovisual experience

By leveraging advanced graphics and dynamic audio, creators can elevate the gaming experience regardless of the optimizations required for browsers. While it’s easier said than done and common bottlenecks must be carefully considered, as technology evolves, the potential for high visual and audio fidelity on web is more promising than ever.

Achieving higher levels of graphical complexity

The Stratton Studios team was looking to create a game with high visual fidelity and a detailed environment. This required more graphical power and flexibility than WebGL could provide.

“WebGL, while capable, has certain performance bottlenecks and limitations such as the lack of compute shaders and GPU skinning that would have forced us to compromise on our artistic vision,” says Loveridge.

They decided to move to WebGPU to achieve much higher levels of graphical complexity, including more advanced shading, lighting effects, and intricate textures via compute shaders. This allowed them to render dense, lush environments and maintain a consistent high frame rate, even in a browser.

The enhanced performance of WebGPU driven by the ability to further utilize the devices’ graphics card was essential for delivering the rich, immersive experience they envisioned, ensuring that players could enjoy the game with the level of detail and smoothness typically reserved for desktop and console games.

Managing performance and WebGPU

While WebGPU offered the advanced capabilities the Stratton Studios team needed, it also presented a unique set of challenges they had to address to maintain their artistic vision. One of the primary challenges was optimizing performance across a wide range of devices. Since WebGPU is still relatively new, ensuring consistent performance and compatibility required significant fine-tuning, and they baked in some fail-safes.

Another challenge was managing the complexity of the shaders and rendering techniques they used. “While WebGPU allows for more sophisticated rendering techniques like GPU skinning and compute shaders, there is also more potential for performance bottlenecks if not handled carefully,” says Loveridge. “We had to meticulously optimize our shaders and streamline them to ensure we could deliver high-quality visuals without causing frame rate drops or other performance issues like garbage collection (GC) spikes.”

Since WebGPU is relatively new, it sometimes led to unexpected behavior for the team such as random black screens or NaN pixels causing bloom bloat, particularly on less common hardware configurations. To overcome this, they invested extra time in rigorous testing across devices and browsers, ensuring the game performed consistently and looked as intended, regardless of the platform.

“To address these challenges, we implemented a robust performance monitoring system that allowed us to detect and address issues in real-time during development,” says Loveridge. “WebGPU allowed us to achieve our artistic vision, but it required careful management and a commitment to pushing through the hurdles that came with working on the cutting edge of web technology.”

Finding the light

“Good lighting makes all the difference and is hard to achieve in a web game,” says Stella, and the PIGIAMA KASAMA team wanted to make sure that lighting quality matched the rest of the game fidelity.

Lighting was also key to gameplay mechanics. The team used it to create tension, guide player movement, and highlight important areas or objects within the game. Dynamic effects emphasized key moments and transitions in the story. “We wanted to use baked lighting as much as possible. This is a way of giving the perception of high-quality lighting on platforms that usually don’t offer that degree of fidelity,” explains cofounder Matteo Fanchin.

One of the team’s most complex challenges was transitioning the lighting in the environment without scene loading and creating dynamic lighting changes when the lights are turned on. They used a custom shader that manipulated the lightmaps in real-time to make everything flat and give the illusion of dynamic light. “To achieve this,” Stella says, “it is key to do the game design and environment design as a whole process instead of separating it. Every element needs to serve the other.”

They used Shader Graph to develop the custom shader, which was particularly useful during what the team calls “the Nightmare sequence.” It covers the map with black ooze while simultaneously neutralizing the lighting, rendering the environment in black and white.

“When the player turns on the light, the shader reverses this effect, creating the illusion that the light is being activated and clearing the black ooze from the illuminated area,” says Fanchin.

Due to their limited resources, they also made some artistic choices to improve performance. They chose to work with dark areas to hide elements, which helped them optimize the number of polygons and skinned mesh. “We added much more detail to the lighter areas,” Fanchin says.

Managing the audio production pipeline

In Kasama: The Awakening, audio influenced everything from the pacing of the gameplay to the design of the environments and interactions. It also guides players while deepening their emotional connection to the story. The PIGIAMA KASAMA team created and produced soundtracks to match the mood and pace of each episode. They also worked with voiceover artists and hired a linguist to invent a language. Their goal was to create an auditory experience that enhanced the immersive quality of the game.

The team executed a rigorous three-stage technical process for audio production before implementing it.

Stage 1: Audio clip unification and mixing/mastering

The first stage required unifying multiple audio clips, especially for looped sounds such as ambient soundscapes and the game’s soundtrack. This process extended to certain one-shot sound effects, which were layered and consolidated into singular tracks. These modifications were integrated during the mixing and mastering phase, ensuring that the unified clips maintained consistency in audio dynamics and overall balance across different playback environments. This stage was crucial for minimizing inconsistencies and ensuring cohesive auditory experiences, particularly for looped sequences that needed to transition seamlessly in-game.

Stage 2: Format conversion to optimized compression standards

In the second stage, the original high-fidelity audio files, typically in .AIFF and .FLAC formats, underwent conversion to .OGG format. This conversion was executed with a sample rate of 48 kHz and a bit depth of 16-bit, adhering to industry standards for maintaining a balance between audio quality and performance efficiency. The Vorbis compression codec was utilized, which allowed for significant file size reduction without compromising perceptual audio quality.

Stage 3: Unity implementation and fine-tuning

The final stage involved the integration of the processed audio files into Unity. This included the meticulous selection of appropriate loading methods (e.g., streaming for longer tracks or preloading for critical sound effects) to optimize performance during gameplay. The Vorbis compression settings were fine-tuned to strike the optimal balance between audio fidelity and resource utilization.

Additionally, careful decisions were made regarding whether specific audio files should be handled in mono or stereo, based on their role in the sound design and the desired in-game spatialization effects.

The rigorous optimization process implemented in the final stage resulted in significant storage and performance gains. By leveraging the OGG format and fine-tuning compression settings, the audio assets were compressed to around 10 MB in total. This marks a substantial reduction compared to the estimated 500 MB if uncompressed AIFF files had been used, or the 100MB footprint for MP3 equivalents. These results not only minimized the game’s overall size but also ensured efficient memory usage and smooth audio performance during gameplay.

4. Optimize. Optimize. Optimize.

To avoid player dropoff, you want to ensure they can get into your game as quickly as possible and have a great experience throughout. Expectations are high and time is of the essence, so it’s key to optimize, test, and optimize some more to ensure users stay engaged.

Reducing file size

To shrink the file size, the Coatsink team used AssetBundles, an archive file that contains platform-specific non-code assets. They hosted them on an external server and then downloaded them when the build ran to help users get into the game’s lobby as quickly as possible.

They also used the Addressable Asset System to load assets on demand. This helped them split packages into the groups required for different parts of the game and contributed greatly to the 25% reduction in load time.

“This way, we have the minimum amount of assets for lobbies to help players get in early, the minimum amount for each level, and some common packages with common assets for different levels,” explains developer Andrei M. “The goal is to have as few files to download as possible since HTTP/2 is not everywhere, and we want as few non-required assets inside as possible.”

The team created a workflow that helped them detect whether a user was on mobile or desktop when they booted up the game. In a web template, during a load, they could determine if the device was mobile, and, if so, they would change data and asset directories to use assets optimized for the platform.

“We created our own double build system, which produced two versions that weren’t completely different. It references different atlases and changes both the type of compression and size. It’s two different views of assets based on the same codebase,” says Andrei M.

Stratton Studios were able to make significant reductions in both file sizes and load times throughout the development process. Initially, their game’s payload was approximately 400 MB, which was far too large for a web-based experience.

“Through a series of optimizations, including asset compression, code splitting, and leveraging Unity’s Addressable Asset System, we successfully reduced the initial payload size to 29 MB,” Loveridge explains.

This drastic reduction not only shortened the load times significantly but also made Project Prismatic much more accessible to a broader audience, ensuring faster initial loads and a smoother overall player experience.

The ULTRAHORSE team reduced the initial download bundle size from 200 MB to 133 MB at launch. They then split it between 21 MB for mandatory bundles and 112 MB for on-demand bundles. “The CPU load time is more than three times faster than it was at the beginning,” says Ropotovs. “Profiling, optimization, and disabling unnecessary bundles were a big part of it.”

Optimizing load times

Stratton Studios focused on reducing payload size, improving asset delivery, and enhancing overall efficiency to optimize load times. The team used Unity’s built-in asset compression to minimize the size of textures, audio, and other assets along with general texture atlasing.

They implemented lazy loading for non-essential assets, which allowed the game to load critical components first and then progressively load additional content in the background as needed via the Addressables framework.

They used the Addressable Asset System to efficiently manage and load assets on demand. This allowed them to dynamically load assets as players progressed through the game, ensuring that only the necessary data was loaded at any given time.

Unity’s Cloud Content Delivery (CCD) framework helped the team deliver assets from geographically closer servers. This reduced latency and sped up download times for players everywhere as the assets load in the background.

They ensured that assets were stored locally on the player’s device after the first load, allowing for much faster subsequent load times. The team also split code into smaller, more manageable chunks to load only the essential code for initial gameplay upfront and have additional features and modules load asynchronously.

Testing and debugging tools

To address the performance limitations they encountered when using WebGPU, the Stratton Studios team used the Frame Debugger to identify the most resource-intensive elements, such as high-resolution textures, complex shaders, and extensive draw distances. From there, they implemented a series of optimizations aimed at reducing the load without significantly sacrificing visual quality.

“We utilized texture atlases to minimize the number of texture loads, reduced poly counts in less critical areas, and employed matte paintings for far-off topologies to save on rendering costs,” says Loveridge. “We also applied level-of-detail (LOD) techniques to manage the rendering of distant objects more efficiently.”

The main challenge was striking a balance between performance and visual quality. “By focusing on optimizing the most demanding aspects of the game and making smart use of the tools available in Unity, we were able to deliver a visually rich experience that performed well across a wide range of devices,” says Loveridge. “This approach allowed us to achieve our artistic goals while ensuring the game remained accessible and enjoyable for all players, regardless of their hardware.”

To debug Project Prismatic, the team also relied on the Unity Profiler to track their performance metrics, including CPU and GPU usage, memory allocation, and frame rates. It helped them pinpoint performance bottlenecks and optimize the game’s performance, particularly in resource-intensive areas.

Lastly, Unity Cloud Diagnostics helped them collect crash reports and exceptions from users in the field. It provided them with valuable insights into issues that may not have been caught during development.

5. Embrace multiple web platforms

One tip we hear from studio experts again and again is to “meet players where they are.” Developing for web gives you the opportunity to offer gamers an easy, quick, and accessible gaming experience. With more hardware options, faster connection speeds, and powerful devices in the hands of more gamers than ever before, it’s important to consider all your options for deploying across various web platforms.

Fine-tuning across platforms

In partnering with Spatial on a multiplatform web release, the PIGIAMA KASAMA team embraced the Universal Render Pipeline (URP), the platform’s pipeline of choice. The render pipeline’s flexibility and efficiency were particularly important for the team when deploying on web platforms, since the cross-platform compatibility and customizability helped them scale with ease.

“Performance can be optimized for each platform, even on lower end devices, and developers can use their own shaders. It’s built to do well in the future. From a Spatial platform perspective, as we start to support future versions of Unity, we expect that URP will be supported there as well,” explains Spatial’s head of developer relations, Jake Steinerman.

Spatial’s servers created individual builds for each platform. They had different target qualities for certain platforms. “Depth of field runs pretty well on WebGL, but we found it less performant on some mobile devices,” Fanchin says. “On the other hand, audio on Android and iOS is much more performant. We could have used filters and EQ, an audio tool that allows devs to adjust the volume level of specific frequencies within an audio source, better on Android, but that wouldn't have worked on WebGL.”

They tuned certain elements to be compliant with every platform, while others were adapted specifically for the platform. “For WebGL, we used a higher-resolution texture since the screen is typically bigger, and incorporated lower-resolution textures on smaller mobile screens,” says Stella. “All in all, the multiplatform release was pretty seamless.”

Rendering with ease

Stratton Studios also leveraged URP to strike a balance between performance and extensibility. A key feature was URP’s ability to easily create custom render pipeline passes. This flexibility allowed the team to fine-tune the rendering process to meet their specific needs, optimize certain visual effects, and implement custom shaders that enhanced the game’s overall look and feel without compromising performance.

“I particularly appreciated the modularity of URP, which allowed us to enable or disable certain features based on the target platform’s capabilities. This made it easier to optimize the game for different devices while maintaining a consistent visual experience,” says Loveridge.

Benefiting from a multiplatform release

There are numerous benefits to releasing a game on multiple platforms, even though this can add workflow differences to consider during planning.

“By having SquadBlast available on web and other platforms, we can reach a much wider audience. Players can easily jump into a game without needing to download or install anything, which lowers the barrier to entry significantly,” says Ropotovs.

Distribution is also a major factor for the ULTRAHORSE team, and having a web version opens up a whole new world of channels that the team wouldn’t have had access to otherwise.

They initially launched SquadBlast on their own web portal at SquadBlast.com. This gave them a great testing ground to iterate quickly, get immediate feedback from players, and make rapid improvements. From there, they expanded to larger web game portals like CrazyGames, which has been game-changing for the team.

“These sites have a massive reach – we’re talking tens of millions of monthly active users. By putting SquadBlast on these portals, we’ve been able to get our game in front of an enormous audience that we might never have reached through other distribution channels,” Ropotovs explains.

The team’s also seeing opportunities with other platforms that embed web games, like messaging apps and social media platforms. As Ropotovs puts it, “the potential reach here is staggering, and the much improved optimizations for mobile web technology with Unity 6 will unlock a whole new generation of platforms to incorporate games.”

Conclusion

In this e-book, we covered five fundamentals for building successful web games. We asked our experts for their top tip when developing for web.

If you’re considering developing a web game, porting your game from another platform to the web, or are solely looking for new information, we hope that the experts’ insights have been valuable and inspiring.

Expanded possibilities with Unity 6

Unity 6 is all about putting fast, easy game creation directly in your hands, no matter where your players are. Download Unity 6 in the Unity Hub.