How PIGIAMA KASAMA cut 218 MB from web game Kasama: The Awakening

Kasama: The Awakening is an episodic, story-driven, web-based adventure game created by PIGIAMA KASAMA. To create this game for web, the team needed to optimize performance across devices while maintaining high visual fidelity. Here’s how they brought their vision to life.

How does a studio deliver a visually stunning and emotionally engaging experience on the web?

After spending two years making games for other brands, the PIGIAMA KASAMA team felt confident that an original, narrative-driven game would find an audience on the web. While Kasama: The Awakening started as a VR and desktop fighting game, they decided to adapt the game into an episodic puzzle adventure.

To experience Kastania, we've embedded the game below for you to enjoy on desktop browsers. For mobile, please check out Spatial's app.

As longtime Unity developers, studio founders Matteo Fanchin and Paride Stella wanted to find a platform development and launch partner that shared similar priorities such as freedom of creation, high visual fidelity, great player experiences, and multiplatform support.

“We found Spatial to be the ultimate platform for user-generated content (UGC). By combining its process simplification capacities and the accessibility it gives players with the flexibility we have when building with Unity, we’ve been able to push the audio, visual, and experiential limits for a web game,” says Fanchin.

The Spatial team echoes the value that the PIGIAMA KASAMA team brought to the collaboration. Jake Steinerman, head of developer relations, says “We’ve built the platform in a way that creators can have really high quality experiences on web, mobile, and VR. When we saw the early builds of Kasama: The Awakening and other work that the team did, we knew we had to get behind it.”

Challenging the status quo

Even though the PIGIAMA KASAMA team has creativity, expertise, and support from Unity and Spatial, their vision brought many challenges. One of the main obstacles was optimizing the game for performance across devices while maintaining high visual fidelity. “WebGL’s limitations required us to be innovative in how we implemented graphics, gameplay mechanics, and overall user experience,” explains Stella.

To meet their visual and performance expectations, they needed to compress build size without sacrificing quality. They selected the Universal Render Pipeline (URP), Shader Graph, Unity’s Animation System, and built-in animation compression to achieve this.

The results

• Reduced the game’s texture memory from 264 MB to 140 MB
• Cut the number of mesh vertices from 550,000 to 351,000
• Decreased audio memory from 86 MB to 9 MB
• Shrunk sprite size for the UI from 45 MB to 28 MB
• Dropped the number of unique materials used from 75 to 57
• Improved performance from 4 fps at the onset to a minimum of 30 fps on low-end devices
• Amassed over 80,000 plays within the first seven weeks of launch

Maximizing limited resources

Their design approach was to be very mindful of their resource restrictions from the beginning, but to also have the flexibility and bandwidth to increase or decrease the visual fidelity at their discretion. Computing power and memory limitations proved to be their largest challenges, and to maintain performance, they had to lower the resolution of some of the textures. “We put the highest-quality texture where it was most visible,” says Stella.

The team used the least amount of resources possible and that approach affected everything. They kept the polygons low and the texture size small to limit the number of materials as much as possible. They also optimized the UVs, two-dimensional texture coordinates that correspond with the vertex information for a geometry.

“Since the camera movements are known and very restricted, we managed to proceed with an aggressive occlusion culling on all geometries before the texturing process so that every polygon and pixel was used to its maximum,” says Fanchin. “This process prevents Unity from performing rendering calculations for GameObjects that are completely hidden from view.”

Animation was another area where the team cut size. They used the Humanoid Animation Type from Unity’s Animation System, along with the Mecanim animation retargeting system. Additionally, Unity’s built-in animation compression process helped them optimize performance by decreasing the overall weight of the animations in the project. This was especially useful to reduce the motion capture animations for the character’s facial performance, which tend to be overly detailed and heavy.

Finding their light

Good lighting makes all the difference and is hard to achieve in a web game,” says Stella, and the 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,” says 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. Stella explains that, “to achieve this, 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.

This custom shader was also extremely helpful during another chapter, in which a large number of chestnuts explode. Handling the chestnuts as individual entities was impractical, so they grouped them as a single mesh and used the shader to manage the shaking and explosions.

Each chestnut is mapped on the UV grid from left to right, corresponding to the explosion sequence, with the chestnuts at the top of the piles exploding first. The shader selects predefined groups of chestnuts by index, while another script places particle system explosions at the precise locations where chestnuts are about to detonate.

“This approach allowed us to efficiently manage a large amount of geometry and complex dynamics without performance overloads, ensuring compliance with web performance requirements,” Stella explains.

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

Managing the audio production pipeline

Sound design influenced everything from the pacing of the gameplay to the design of the environments and interactions and 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.

“Whenever an experience or a product has bad audio, you hear it. If the audio is good, it's invisible,” says Stella.

They executed a rigorous three-stage technical process for audio production before implementing it into the game.

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. T a sample rate of 48 kHz and a bit depth of 16 bits, 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 team fine-tuned the Vorbis compression settings to strike a 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 adjusting 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 100 MB 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.

Deploying on multiple platforms

By partnering with Spatial on a multiplatform web release, the PIGIAMA KASAMA team embraced URP, the platform’s pipeline of choice. As a designer with 15 years of CGI experience, Stella used a lot of tools for diverse purposes and was impressed with URP’s capabilities.

“URP works great. I learned quickly how to use it to achieve our objective with Kasama: The Awakening. I think it’s accomplished pretty much everything I had thought of, so I’m very happy,” he says.

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,” explains Steinerman. “From a Spatial platform perspective, as we start to support future versions of Unity, we expect that URP will be supported there as well.”

Spatial’s servers created individual builds and optimized each platform. They helped the PIGIAMA KASAMA team with their WebGL build, and their separate builds for Android and native iOS. 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. On the other hand, audio on Android and iOS is much more performant,” says Fanchin. “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. All in all, the multiplatform release was pretty seamless,” Stella concludes.

Including players in the journey

After deciding to make a web game, the PIGIAMA KASAMA team needed to find a way to develop high-quality content in manageable portions. They chose an episodic release system that enabled them to gather player feedback after each episode, which they could incorporate into future installments. It also helped them test and iterate very quickly.

“We established a flexible roadmap that allows us to adjust the development process based on player feedback and new technology,” explains Stella. “Each episode is planned with the future in mind, ensuring that the narrative and gameplay mechanics can evolve naturally over time.”

Choosing this release schedule also brought multiple challenges. The team needs to ensure consistency across episodes, both in terms of quality and storytelling. Managing player expectations is also a potential hurdle since episodic releases require a delicate balance between delivering enough content to satisfy players while keeping them engaged for the next installment.

All in all, the team has learned a lot and is excited to bring this knowledge to the second episode. “We’re proud to continue showcasing the quality of the experience a developer can build for WebGL,” says Fanchin. “As a small studio, we’re excited to see what we can accomplish with technological advancements such as Unity 6 and WebGPU.”

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.