How Coatsink reduced web load time for Ready, Set, Cook! by 25%

Ready, Set, Cook! is a cooperative restaurant management game for Messenger built by Coatsink, the studio behind Jurassic World Aftermath and Transformers: Battlegrounds. Here’s what they learned during their first foray into mobile web development.

How does a studio bring a game destined for Messenger Rooms from desktop to mobile?

Ready, Set, Cook! was originally built as a desktop web game, where players join video calls from their PCs or laptops. While Coatsink was pivoting development to target mobile, they collaborated with Meta and Unity, who had an existing strategic partnership to get the runtime working on mobile. This is one of the major updates to Unity Web in the upcoming Unity 6 release, which also includes added support for WebAssembly 2023, early access to WebGPU, and the addition of Emscripten 3.1.38 toolchain. Next year, game developers will be able to take advantage of Meta’s massive gaming ecosystem with Unity’s Instant Games platform support.

Testing out a new platform

“My favorite thing about Ready, Set, Cook! is the minimal click-to-play time. You’re in a video call in Messenger, and, with the press of a button, everyone’s in the lobby and then straight into the game. There’s no setup,” says Ross Furmidge, Coatsink's head of programming.

Since it was Coatsink's first time building a web game, the goal was to try and get the most out of the platform’s workflow. They treated it as an R&D project to analyze the platform’s viability and their strength in mobile web development.

The team mostly built upon existing functionality. They took ready-made building blocks, including Prefabs that touched on HUD, game managers, network, interactables, lobby, and game instructions, and added polished features to better telegraph what the user should do. They also incorporated new feature additions like pausing, cosmetics randomization, lobby tweaks and messaging, HUD changes, flexible aspect ratio support, and difficulty balancing, among others.

“We built and balanced the game around the multiplayer aspect and having fun with friends in a video call,” explains Furmidge. “When we delved into the project, we encountered common challenges for games going from desktop to mobile. We had to focus on the UI, and, for web in particular, we had to consider download times over mobile data since it’s not guaranteed that a player is connected to Wi-Fi.”

The results

• Reduced the game’s load time by 25%
• Decreased the size of the WebAssembly (Wasm) file by 2.5%
• Shortened the game’s transfer and unpacking times by 10%

Creating a dynamic UI orientation

As the Coatsink team began the project, 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 Furmidge.

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.”

Optimizing load time

Coatsink’s analytics showed that if the game’s file sizes were too big and took too long to load, users would drop off before they got to the main menu or gameplay.

Coatsink developer Andrei M. focused on reducing the file size by using options inside of the Unity Build Settings. For example, he set the code optimization setting to disk size with LTO, used Brotli compression format, set the IL2CPP code generation to faster (smaller) builds, turned the managed stripping level to high, and more. With these optimizations for web, the team was able to reduce load time significantly.

They then used Unity’s WebAssembly (WASM) tool, which strips out unused parts of the Unity Engine and outputs an optimized .wasm file. By reducing this file size, there was less to compress, transfer, and unpack on the device at runtime. “This way, the user goes straight into the game once they finish downloading the information,” explains Furmidge.

These game optimization practices led to a 4 MB decrease, which corresponds to a 2.5% reduction overall on the Wasm file. That translated into a 10% savings on both the transfer and unpacking times. While 4 MB may sound small, in the grand scheme of things it had a big impact for a game running on mobile browsers.

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,” Andrei M. explains. “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, 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.

Meeting unique testing and debugging challenges

When it came to testing and debugging the game, the team experienced some difficulties due to the unique circumstance of running the game inside of the Messenger app rather than a traditional web browser. While they had builds they could run in browsers using dummy players, they still wound up having to delve deeper for the bugs that only appeared inside of Messenger.

“For those bugs, we created a system that uploads the logs to our AWS servers in development builds, which we could then read,” explains Furmidge.

The team also used web browser development tools to catch errors in the console and track API calls. As a programmer, this was key for Furmidge.

“In the browser console, you can type in the commands and try to run them manually,” he says. “Since we had an external JavaScript library that we built to go between JavaScript and Unity, a native plug-in, we could access that when needed.” This was used to wrap the Meta JavaScript SDK to be able to communicate to their node multiplayer server, a feature that Unity is working to release as a package in future releases.

To help speed up development, Andrei M. also created his own local wrapper to mimic the Meta API calls he needed. He explains, “I focused on API calls that dealt with local server configuration, programmable responses, and latency.”

Becoming a natural extension of the platform

The Coatsink team wanted the Ready, Set, Cook! experience to be seamless for Messenger users. From enabling players to quickly join game sessions to short load times, their ultimate goal was to act as an organic extension of the platform.

Part of that is providing intuitive gameplay where players can advance without disruption, play across a number of devices, and cheer their friends on from the sidelines. To do this, the team incorporated scrollable tips about game features during loading, convenient how-to-play animations, and interactive elements. These features help players find the fun with friends while managing the chaos in the kitchen.

“We wanted to naturally tap into the people who were already using Messenger and add to their video call experiences,” says Nick Taylor, a senior producer at Coatsink. “Working with Meta and Unity was really collaborative and gave us the opportunity to do that in spades.”

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.