WebGL Version is Ready!

Finally, We Got WebGL Working! 🎉

After a lot of trial and error, we can officially say—WebGL is up and running! 🎮💻 This has been quite a journey, especially with Unity being the powerful engine behind our project. But getting it to work on WebGL wasn’t without its challenges. One of the most crucial changes we had to make was adjusting the way we handled time and threading in our code. We’re excited to share how we got there and hopefully help you avoid some of the pitfalls we encountered!

The Challenge: WebGL and Multi-Threading 🚫

WebGL comes with a big limitation: it doesn't support multi-threading. Unlike a desktop or mobile environment where you can rely on background threads to handle tasks like delays or waiting for data to load, WebGL doesn't have the luxury of using Thread.Sleep() or running tasks on separate threads.

Initially, we ran into an issue when we tried to use Thread.Sleep() in our Unity project. The engine was throwing errors when attempting to build for WebGL, because it's not compatible with the WebGL environment. This is because WebGL is single-threaded by nature, and Unity expects your code to be executed on the main thread.

So, how did we tackle this? Well, we had to rework the way we were handling delays and timeouts in the code.

The Solution: Coroutines to the Rescue! ⏳

Instead of relying on Thread.Sleep() to pause execution, we switched to using Unity’s Coroutines. Coroutines let us pause execution of a function and continue it later, all without blocking the main thread. This is exactly what we needed for WebGL.

Here’s how we made the change:

Before (Using Thread.Sleep()):

System.Threading.Thread.Sleep(10); 

After (Using Coroutines):

IEnumerator WaitForMilliseconds(float delayTime) {     yield return new WaitForSecondsRealtime(delayTime); } 

In the example above, we replaced Thread.Sleep(10) with a coroutine that waits for 10 milliseconds without freezing the main thread. This works seamlessly in WebGL and ensures our game keeps running smoothly, even while waiting for certain operations.

Why Use Coroutines?

• Non-blocking: Coroutines run asynchronously, which means they don’t stop other processes in Unity from running. This is essential in a WebGL build, where blocking the main thread can lead to performance issues or freezing.
• Simple syntax: The yield keyword in coroutines makes the syntax much cleaner and more readable compared to other workarounds.
• Time-based delays: Using WaitForSecondsRealtime allows us to create precise time delays, and it works perfectly in WebGL. It’s much more reliable than trying to manage time manually.

What Did We Learn?

Getting WebGL working with Unity was a big milestone for us. While the WebGL build offers great flexibility and broad compatibility, it does come with its own set of limitations. But through adjusting our code to be single-threaded, switching from Thread.Sleep() to Coroutines, and making a few more tweaks, we were able to get everything running smoothly.

If you're working with Unity and WebGL, we highly recommend giving Coroutines a try if you're dealing with any time delays or tasks that previously used Thread.Sleep(). It's a much better approach for keeping your game running in the browser without interruptions.

Conclusion: Give It a Try! 💪

If you're struggling to get WebGL working in Unity or need to refactor your code for a single-threaded environment, remember—Coroutines are your friend. It's not as tricky as it might seem, and it’s a powerful tool to help you overcome those WebGL limitations.

So go ahead, give it a try, and let us know how it goes! We've got WebGL working, and now you can too! 😎

Happy coding, and here's to building even better games on the web! 🌐✨