Running HTML5 content smoothly while loading?

We have a casual game built with Unity.

This initial load (Unity splash screen and basic asset download) is a little bit long and could cause bad user retention. To fix this, we've made a very lightweight version of the first level (tutorial) of the game in pure HTML5. That version load almost instantly and allow us to get the player engagement right away.

Our intention was to load the Unity version in background while the player is engaged in the tutorial. Unfortunately, as soon as we start the game with Unity loading in background, we start experiencing small freezes in the game animation and flickering of screen. This is bad, and worst on low bandwidth.

Do you know if there is a way to make this work? Can we load a unity scene in background without halthing the main render thread?

We've thought or loading the game in another browser tab, but are pretty sure the users wouldn't understand (and this wouldn't work if popups are blocked). We also consider kicking of the loading only at the end of the tutorial, but the loading time at that point could lead us to lose player as well.

Any idea / suggestions would be great!

 

I think what you are seeing is caused by the browsers process/render model and architecture. For instance, Chrome will in general open each new window or tab in a new process. The browser will spawn a new process and instruct it to create a single RenderView. In that single process you block the JavaScript runtime by parsing and executing a large js script (your Unity Game). I can't see way you can get around your issue except by design. Even loading the game in a different tab may not help your lagging. Chrome will sometime use per Host process model, in which case you're the same place you are now.

What about not loading the second level in the background, but letting the user finish the first level before you load the large / slow rest part of your game? This might increase your retention since the user has committed the time it took to finish that level.

 

Thanks for the answer!

We have worked a little bit around this issue and we are now thinking of using a worker thread to download the data that Unity will need (without Kicking of Unity loading) and start the Unity game, like you suggested, at the end, but with the data pre cached.

 

@SnowedIn : I'm also interested in this question.

I tried to use webworkers and tried to use various caching mechanisms that are supposed to be built in and hit various limitations. I'm wondering if you were able to get a webworker to cache data for your main game.

 

(Replying for SnowedIn)
So far, I have a worker that just GETs the data files for the game in the background, so that by the time you're done with the HTML5 content, the files are in the browser cache so that the Unity progress/loading doesn't have to spend time downloading them. As long as the user hasn't disabled caching in their browser for some reason, there's a noticeable improvement.

To go one step farther than that- my understanding is that once unity has loaded your data file once, it stores it in the indexedDB with an ID unique to the build that created the file. The unity load seems to work fastest when the data is in the DB already.

 

Just to clarify, are you hacking up Unity's existing loading logic (i.e, UnityLoader.js) to make this work, or are you just "pre-downloading" the data files via a web worker and then letting the browser pull them from cache and loading your game using the existing Unity loading process ?