How to get 30% more people playing your WebGL game
Nobody likes waiting.
Let's start by saying that I truly believe that a new era has dawned for games in the browser. With open technologies like WebGL and WebAssembly and fabulous development tools like Unity3D and Playcanvas, it has gotten very easy to create native-like creations that are playable in Chrome, Firefox, and (gasp!) Edge.
There's no friction for web games. There are no downloads. You can "play it now".
Or so I thought.
I run a website for sharing WebGL content centered around games made with Unity3D. Unity has been around for over 15 years, and provides amazing tools to create whatever you can dream.
But there is a certain amount of overhead that comes with all of this power. An unoptimized game of Flappy Bird rings in at 5MB, with many 3D games reaching into the 50-100MB range.
The site already uses Google Cloud for hosting and a worldwide CDN powered by Cloudflare, so I had to think about ways to make the perceived loading time quicker.
Boring Loading screens
Unity provides a pretty boring loading screen (that they don't make easy to customize):
For my games site, SIMMER.io I was able to build my own loading screen using some of the UnityLoader hooks that Unity provides. But really, my version was pretty much the same as the built-in Unity loader with a little branding and some color:
I needed to do better.
Analytics
As any good webmaster should, I often checked in with my analytics, only to see a fairly terrible bounce rate hovering at about 69% across all games on the site. (For those who don't know web-jargon, a bounce rate is when somebody leaves a web page within a few seconds of loading it up).
So I got to thinking, "How can I improve this so that people stay actually play these games?"
I thought back to my working on the Sims 2. Maxis (the developer) always had something weird or interesting to say on those loading screens:
Reticulating Splines
Searching for Llamas
Initializing Robotic Click Path AI
If I could build something similar, would that translate into people sticking around to wait for SIMMER games to load?
I also thought that having something constantly moving on the screen would let people know "Hey! It's coming, I swear!"
There was only one way to find out if this would work--build it and see how my bounce rate changes.
Building it
Building it turned out to be surprisingly difficult. At certain points during the load, Unity's code would pin Chrome's CPU usage at 100%. That meant I had to only animate the loading messages when the CPU was not pinned.
I also decided to pay homage to the classic Maxis loading strings and include them in my loader. My audience is generally 18-25, so most of them have probably never played the Sims or SimCity, so these are entirely foreign to them. But I don't care, I still like it :-P.
I also wanted to see if I could get something constantly moving on screen.
It turns out that with WebKit (the rendering engine for Chrome, Safari, and soon MS Edge), there are a certain subset of CSS animations that run entirely on the GPU. I was able to find a loading indicator at loading.io that was interesting and would do just that.
This indicator would run smoothly, even if the CPU was pinned. Fantastic!
The results
Within a few weeks the average game bounce rate was hovering at about 52%, (down from 69%!) That means that an interesting load screen did improve things, and approximately 32% more people decided to stick around to play the games that my game developer community has worked so hard to make!
The best part is, the game developers using my site didn't need to lift a finger to get this awesome improvement!
Next steps
Maybe someday, I'll provide a mini game on the loading screens to keep people occupied. (Aside: did you know that until 2015, loading mini games were covered by a patent owned by Namco?).
Loading mini-games aside, I'm working on a way for game developers to provide custom loading experiences to their users!
Sign up for SIMMER now and we'll keep you posted when this new feature arrives! If you're not a developer, there's plenty of games where you can check out our beautiful loading screen :-).