The Multiplatform Casual Games using WASM and .NET 7
The Challenge
In September 2022, SV Group, one of the leading gastronomy companies in Switzerland came to us with a unique request for a proposal. They wanted to launch a series of arcade games throughout the advent calendar to promote their restaurant brands. The games were set out to increase customer loyalty through a themed online gaming experience. Each of their brands was to engage its customers through unique arcade games in which one could win unique prizes such as product discounts, vouchers and dining events. Players would be selected based on different criteria such as crossing a certain score, being the highest scorer of the day, the week, and the entire advent calendar. Every day a unique prize would be displayed for each brand under the brand’s unique gaming URL. Instead of running a typical online advertising campaign, the SV group team wanted to interact with their customers through a competitive, yet fun gaming experience. So the games were not an end product as such but rather used as a new tool to drive customer engagement in the hospitality industry. The client’s plan not only pushed the boundaries of content marketing but also put forward high demands towards technology. All seven games had to address a large audience accessing the games from almost any operating system running on almost any screen size both on desktop and mobile. And as if this was not already challenging enough – keeping customers waiting for downloads to complete was not an option either. It is known that these types of campaigns have high initial drop-off rates and thus the games would need to load instantly. In summary the games had to feel like a native mobile game and a native PC game at the same time. Along with that the games should be playable within the browser and not require the user to download and install anything.
In September 2022, SV Group, one of the leading gastronomy companies in Switzerland came to us with a unique request for a proposal. They wanted to launch a series of arcade games throughout the advent calendar to promote their restaurant brands. The games were set out to increase customer loyalty through a themed online gaming experience. Each of their brands was to engage its customers through unique arcade games in which one could win unique prizes such as product discounts, vouchers and dining events. Players would be selected based on different criteria such as crossing a certain score, being the highest scorer of the day, the week, and the entire advent calendar. Every day a unique prize would be displayed for each brand under the brand’s unique gaming URL. Instead of running a typical online advertising campaign, the SV group team wanted to interact with their customers through a competitive, yet fun gaming experience. So the games were not an end product as such but rather used as a new tool to drive customer engagement in the hospitality industry. The client’s plan not only pushed the boundaries of content marketing but also put forward high demands towards technology. All seven games had to address a large audience accessing the games from almost any operating system running on almost any screen size both on desktop and mobile. And as if this was not already challenging enough – keeping customers waiting for downloads to complete was not an option either. It is known that these types of campaigns have high initial drop-off rates and thus the games would need to load instantly. In summary the games had to feel like a native mobile game and a native PC game at the same time. Along with that the games should be playable within the browser and not require the user to download and install anything.
Choosing the right Technology
To achieve the above we had to go far beyond responsive web design and eventually arrived in the domains of adaptive scaling, procedural elements generation, and rendering elements according to the screen size, resolution and aspect ratio.
We considered using Unity to build our game, but ultimately decided against it because Unity WebGL player-hosted games are not responsive. If you build a game on Unity for the web, you have to specify a fixed render resolution and screen size. This can lead to black bars on the sides of the screen if the game was designed for portrait orientation, and on the top and bottom of the screen if it was designed for landscape orientation. Additionally, these games do not run as web apps, but rather in a WebGL player, which means they cannot be played on phones properly. This is because the WebGL player requires an additional plugin to be installed, and most phones do not support it well.
This requirement sparked a fire in our minds. As programmers at SELISE who are continuously on the hunt for the next new-age tech, we found WebAssembly pretty interesting and a potential candidate for this use case. Also, we wanted to leverage the power of C#.
We were determined to build these games using WASM and C#, even though it was uncharted territory for us. Our passion for innovation and unique solutions fueled us, and after two months of intensive research and development, we were able to create a prototype 2D game engine that could run on any browser, adapt to any screen size, and deliver a consistent platform-specific gameplay experience. It was a challenging journey, but we were up to the task.
The Latest and Greatest
Our games looked pixel-perfect on all devices, thanks to the Uno Platform. Uno was the only UI framework that allowed developers to render the same look and feel across all platforms. Our custom-built game engine was optimized for 2D games, resulting in small, efficient game packages. Our codebase produced a single output that could run on all OS platforms using WebAssembly, allowing us to target multiple platforms with a single codebase. We were excited about the potential of Uno and its capabilities for game development.
With the prototype game engine in our hands, we set out to build the final games. Everything was going great, until one month before launch we took a calculated risk and made a huge decision: on November 13th, we migrated all of our games to the latest and greatest version of .NET, .NET 7! It was an exciting moment for us, and we couldn’t wait to see how this change would impact our games.
Yes, you read that correctly, .NET 7, which got released by Microsoft on Nov 8th. .NET 7 brings many improvements for WebAssembly, including a new and improved compilation target that results in smaller binary files and faster download and response times. Additionally, the support for JSImport and JSExport from Microsoft has greatly improved JS interoperability and exception handling in WebAssembly. Overall, .NET 7 has been a great addition to our game engine and has helped to improve the gameplay experience for our users.
The Outcome
We were thrilled to announce the launch of our seven games on December 1st! Built with Uno Platform, .NET Mono Runtime, C#, and XAML, our games are running natively in the browser without the need for a WebGL player. This means that all of the elements on the game screen are native HTML5 elements with CSS styling, and are not running inside a hosted WebGL player. With the addition of experimental multi-threading and SIMD support in .NET 7, WebAssembly is entering a new era of advanced CPU and GPU acceleration. We are excited to be a part of this new development in the world of WebAssembly, and we can’t wait for everyone to experience our games!
The codebase is in GitHub with CI/CD pipeline enabled to it – supports docker containers, and Azure Static Web App services.
The Aftermath
Uno Platform is a new-age multi-platform UI framework for building apps. It was a tough call and a risky one as this front-end framework is not targeted for game development but essentially to build general-purpose software applications.
It’s really amazing that with the power of WebAssembly you can build almost anything with C# for the web. Apart from the Uno platform, Microsoft is also pushing .NET MAUI that lets you build native apps for Android, iOS, Mac, Windows and Linux using a single codebase and C#. This is also adapted as platform-specific targets by the Uno platform.
There’s also Avalonia UI another UI framework which takes a different approach to empower C# to run in the browser with WebAssembly while targeting other OS natively. The key difference between the Uno platform and Avalonia UI is Avalonia UI uses a WPF XAML dialect, has its own native UI controls, and pushes the pixels to the screen using frame buffers and draws its UI controls itself. They also have CSS-like styling dialects on XAML unique to their platform. As they are using frame buffers, Avalonia UI is almost OS agnostic and compatible with Direct X APIs and can be used in the unreal engine too. On the other hand, the Uno platform has a WinUI 3 XAML dialect, utilizes OS-specific platform targets and code generators and uses native controls where it makes sense. You can mix HTML5 elements and JS elements with C# and use them with JSInterop. This makes Uno the most versatile framework of them all taking a balanced approach in terms of rendering UI controls allowing you to mix and match Javascript, C#, XAML, HTML, and CSS for the WebAssembly target.
On the non-XAML side, there’s Blazor WebAssembly which utilizes Razor, a hybrid of HTML CSS and C# code to enable C# for the web and there’s OpenSilver, a reincarnation of Silverlight that translates C# and XAML code to HTML, CSS, and JavaScript code and run them inside the browser. Recently OpenSilver also has released a WebAssembly variant that uses UWP XAML dialect and also supports JSInterop but in a slightly different way than the Uno platform.
Among all of these platforms, the Uno platform supports profile-guided AOT, full AOT, and mixed mode which is a combination of Just in time and Ahead of Time compilation allowing you to customize the payload side of your app while keeping it performant and delivering a near native execution speed.
Each of these platforms has a substantial amount of community around them, with Avalonia and Uno being on top and being backed by the .NET foundation. Right now C# is the main candidate to be named programming language of the year 2022 and it’s no surprise. After beating nodejs on the server side by yielding 11x more speed with .NET 7, C# is now out to conquer the front-end world.
At SELISE, our exquisite and extensive knowledge and understanding of how application frameworks work right from the lowest level, and execute inside their target ecosystems gives us an upper hand when it comes to making the right decisions in terms of creating solutions for our clients. This project is a testament to that.
As a humble programmer who is writing C# for almost a decade, with C# and WASM, I am beginning to see how web development can be reimagined when it comes to responsive and complex web app development that involves CPU-intensive tasks execution on the browser. All while utilizing the power of C#.
Written by Asadullah Rifat